《网页设计与制作项目教材》-Chapter06千年之恋 -20210605

注意表单的使用
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>千年之恋</title>
<link href="css/style06.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header"><img src="data:images/logo.jpg" alt=""></div>
<div id="nav_bg"><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">会员</a></li><li><a href="#">活动</a></li><li><a href="#">直播</a></li><li><a href="#">视频</a></li><li><a href="#" class="bg">注册</a></li></ul>
</div>
<div id="banner"><img src="data:images/banner.jpg" alt="">
</div>
<div id="content"><h2 class="step">注册步骤：</h2><form action="#" method="post" class="one"><h3>您的账号信息：</h3><table class="content"><tr><td class="left">注册方式：</td><td><label for="one"><input type="radio" name="sex" id="one">E-mail注册</label>&nbsp;&nbsp;&nbsp;&nbsp;<label for="two"><input type="radio" name="sex" id="two">手机号码注册</label>&nbsp;&nbsp;&nbsp;&nbsp;</td></tr><tr><td class="left">注册邮箱：</td><td><input type="text" class="right"></td></tr><tr><td class="left">注册手机：</td><td><input type="text" class="right"></td></tr><tr><td class="left">登录密码：</td><td><input type="text" class="right"></td></tr><tr><td class="left">昵称：</td><td><input type="text" class="right"></td></tr></table><h3>您的个人信息：</h3><table class="content"><tr><td class="left">性别：</td><td><label for="boy"><input type="radio" name="sex" id="one">男&nbsp;&nbsp;&nbsp;</label><label for="girl"><input type="radio" name="sex" id="two">女&nbsp;&nbsp;&nbsp;</label></td></tr><tr><td class="left">学历：</td><td><select><option>-请选择-</option><option>中职/高中</option><option>专科/本科</option><option>硕士研究生</option><option>博士研究生</option></select></td></tr><tr><td class="left">所在城市：</td><td><select><option>-请选择-</option><option selected="selected">北京</option><option>上海</option><option>广州</option><option>深圳</option></select></td></tr><tr><td class="left">兴趣爱好：</td><td><input type="checkbox" />足球&nbsp;&nbsp;&nbsp;<input type="checkbox" />篮球&nbsp;&nbsp;&nbsp;<input type="checkbox" />游泳&nbsp;&nbsp;&nbsp;<input type="checkbox" />唱歌&nbsp;&nbsp;&nbsp;<input type="checkbox" />跑步&nbsp;&nbsp;&nbsp;<input type="checkbox" />瑜伽</td></tr><tr><td class="left">自我介绍：</td><td><textarea cols="60" rows="8">评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea></td></tr><tr><td colspan="2"><input type="button" class="but"></td></tr></table>        </form>
</div>
<div id="footer"><p>Copyright © 2006-2016 QIANNIANZHILIANcom, All rights reserved.<br />2001-2018，版权所有 千年之恋 85CP备13385453</p>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0; list-style:none; outline:none; border:0; background:none;}
body{font-family:"微软雅黑"; font-size:14px; }
a:link,a:visited{text-decoration: none; color: #fff;font-size: 16px;}
#header{width: 980px;height: 70px;margin: 0 auto;padding-top: 20px;
}
#nav_bg{width: 100%;height: 48px;background:#fe668f;
}
.nav{width: 980px;margin: 0 auto;
}
.nav li{float: left;
}
a{display: inline-block;height: 48px;line-height: 48px;padding:0 50px;
}
.bg{background: #fe9ab5;}
a:hover{background: #fe9ab5;}#banner{width: 980px;height: 429px;margin: 0 auto;
}#content{width: 830px;height: auto;background: url(../images/content_bg.jpg) no-repeat;margin: 0 auto;padding-left:150px;
}
.step{width: 454px;height: 80px;font-size: 20px;font-weight: 100;color: #dd8787;line-height: 80px;background: url(../images/step.jpg) center right no-repeat;
}
h3{width: 454px;height: 45px;font-size: 20px;font-weight: 100;color: #dd8787;line-height: 45px;border-bottom: 1px solid #dd8787;
}
td{height: 50px;color: #dd8787;
}
.left{width: 120px;text-align: right;
}
.right{width: 320px;height: 28px;border: 1px solid #dd8787;
}
input{vertical-align: middle;}
select{width: 200px;border: 1px solid #dd8787;color: #dd8787;
}
textarea{width: 380px;border: 1px solid #dd8787;resize: none;font-size: 12px;color: #aaa;padding: 20px;
}
.but{width: 400px;height: 50px;background: url("../images/btn.jpg") right center no-repeat;padding: 0 0 100px;
}#footer{width:100%; height:68px;line-height:26px;background:#fe668f; color:#fff; text-align:center;padding-top:40px;
}

网页效果

《网页设计与制作项目教材》-Chapter06千年之恋 -20210605相关推荐

《网页设计与制作项目教材》-Chapter08学好英语网 -20210607
本章是最难的综合练习. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
web期末期中网页设计与制作项目展示
web网页设计与制作期末作品期末考试项目适合大学期末期中考试及初学web网页设计者本人大学web网页设计与制作课程总成绩94.5.本项目制作占期末65%,预估获得满分,最差情况最多扣了三五分. 最 ...
网页设计与制作项目教程HTML+CSS+JavaScript之项目一
制作第一个网页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
HTML淘宝网的制作实训关键点,《网页设计与制作》实训指导书.doc
<网页设计与制作>实训指导书<网页设计与制作>实训指导书 <网页设计与制作> 实训指导书主编:王春艳 <网页设计与制作>实训指导书目录一 ...
html网页设计作品教材制作,《网页设计与制作》网页-教材-制作.pdf
全国高等职业技术院校电子商务专业教材网页设计与制作劳动和社会保障部教材办公室组织编写图书在版编目! "数据 !"# ! 网页设计与制作#杨戈主编 $北京%中国劳动社会保障出版 ...
网页设计与制作教程项目1
网页设计与制作教程项目1 Hello 大家好,我是白熊就是白熊欢迎各位有缘人来看我的文章(●'◡'●) 今天跟大家分享一下老师教我们在课堂上敲写的一些项目,今天就先分享一下项目1(适用于初学者), ...
计算机网页设计与制作论文,网页设计与制作论文
二十一世纪是信息化的时代,通过互联网,就能达到足不出户便可了解世界的目的.为了加深对互联网的了解,<网页设计与制作>这门课的出现就成为了必然. 1<网页设计与制作>现状问题分析 ...
dwcc怎么设置html默认,Dreamweaver CC网页设计与制作
Dreamweaver CC网页设计与制作语音编辑锁定讨论上传视频 <Dreamweaver CC网页设计与制作>是2014年清华大学出版社出版的图书,由智云科技编写. 书 ...
HTML CSS学生网页设计,网页设计与制作(HTML+CSS+JavaScript)
高等职业教育专业教学资源库建设项目是教育部.财政部为深化高等职业教育教学改革,加强专业与课程建设,推动优质教学资源共建共享,提高人才培养质量而启动的国家级高职教育建设项目.软件技术专业(项目编号:2 ...

《网页设计与制作项目教材》-Chapter06千年之恋 -20210605

《网页设计与制作项目教材》-Chapter06千年之恋 -20210605相关推荐

最新文章

热门文章