本文介绍了网页界面的实现，包括界面布局、忆江南文章排版、世纪佳缘登录界面的制作，以及各种功能的实现，如单元格操作、后代选择器应用、元素样式调整等。还探讨了代码优化，对比了不同布局方法的优缺点，并展示了鼠标经过图片切换的实现思路。
1、实现下面界面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度注册网页</title>
</head>
<body>
<form action="" method="post">
<table width="600" cellspacing="15" align="center">
<!--第一行设置-->
<tr height = "120">
<td>
<img src="logo_baidu.jpg">
</td>
<td></td>
</tr>
<!--第二行设置-->
<tr>
<td>
<h3>添加注册信息</h3>
</td>
<td></td>
</tr>
<!--第三行设置-->
<tr>
<td align="right">邮箱:</td>
<td >
<input type="text" name="username">
</td>
</tr>
<!--第4行设置-->
<tr>
<td align="right">密码:</td>
<td >
<input type="password" name="pwd">
</td>
</tr>
<!--第5行设置-->
<tr>
<td align="right">确认密码:</td>
<td >
<input type="password" name="repwd">
</td>
</tr>
<!--第6行设置-->
<tr >
<td align="right">验证码:</td>
<td>
<table>
<tr>
<td> <input type="text" name="myname"> </td>
<td> <input type="image" src="yz.jpg"> </td>
<td> <a href="#">注册用户</a> </td>
</tr>
</table>
</td>
</tr>
<!--第7行设置-->
<tr>
<td ></td>
<td >
<input type="checkbox" name="select" />我已阅读并接受<a href="#">《百度用户协议》</a>
</td>
</tr>
<!--第8行设置-->
<tr>
<td ></td>
<td >
<table width="80%">
<tr>
<td><input type="image" src="button.jpg"></td>
<td>
<input type="reset" value ="重新填写">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
总结：
1） 当确定一行几个单元格时，那就要保证一行有n个单元格标签（<td> </td>）
2）<input type="image" src="yz.jpg"> </td>与<img src="logo_baidu.jpg">区别：第一个输入的图片是可以点击的，第二个只是一张图片，点击图片不会动。
3）对齐方式，根据图形界面的需要，进行相关调整
4）单元格内可以插入单元格
2、忆江南文章排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>忆江南</title>
<style>
.bt{
color:#000000; font-size:25px; font-weight:bold; text-align:center;
}
.bt1{
color:#708090 ; font-size:15px; font-weight:bold; text-align:center;
}
body{font-size:14px; color:#036; background-image:url(images/bg2.jpg);}
h4{color:#900;}
p{text-indent:2em; line-height:25px; letter-spacing:1px;}
.shi1{text-indent:0; font-size: 20px; font-weight:bold; color: #DEB887 }
.shi{text-indent:0; font-size: 16px; font-weight:bold; color: ##000000 }
</style>
</head>
<body>
<p class = "bt">忆江南(1)</p>
<p class="bt1">唐.白居易</p>
<p class="shi1">江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝，能不忆江南。</p>
<p class="shi">作者介绍</p>
<p>白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。</p>
<p class="shi">注释</p>
<p>(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。</p>
<p class="shi">品评</p>
<p>此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。</p>
</body>
</html>
总结：选择器内的属性种类繁多，字体颜色，加粗，背景图
（background-image:背景图路径;）都可以实现。
3、世纪佳缘登录界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世纪佳缘登录界面</title>
</head>
<body>
<table width="600" cellspacing="0" cellpadding="0" align="center" >
<!--第一行设置-->
<tr height = "50">
<th></th>
<th>会员登录</th>
</tr>
<!--第2行设置-->
<tr>
<td align="left">登录账号</td>
<td>
<input type="text" value ="邮箱/id/手机号" style="color:#C0C0C0">
</td>
</tr>
<!--第3行设置-->
<tr height = "50">
<td align="left">密码</td>
<td>
<input type="text" value="密码" style="color: #C0C0C0">
</td>
</tr>
<!--第4行设置-->
<tr height = "50">
<td></td>
<td style="color: #A9A9A9 "><input type="checkbox" checked="checked"> 两周内自动登录 </td>
</tr>
<!--第5行设置-->
<tr height = "50">
<td></td>
<td>
<input type="image" src="images/login.png"> <a href="#">忘记密码</a>
</td>
</tr>
<!--第6行设置-->
<tr height = "50">
<td align="left">其他账号登录</td>
<td>
<table style="color: #A9A9A9 ">
<tr>
<td><img src="images/ico1.png">QQ帐号</td>
<td><img src="images/ico2.png">新浪微博</td>
<td><img src="images/ico3.png">百度帐号</td>
</tr>
</table>
</td>
</tr>
<!--第7行设置-->
<tr height = "50">
<td></td>
<td><a href="#">还不是会员？立即注册</a></td>
</tr>
</table>
</body>
</html>
总结：<th>和<td>区别：th是表头标签，第一行或第一列可以使用该标签，td是单元格标签，它要是想和th效果一样,要写成<td><h3></h3></td>
4、实现以下要求的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.site-r a{ /* 后代选择器 */
color: red;
}
.nav a{
color: orange;
}
.nav, .sitenav{ /* 并集选择器 */
font-weight: 700;
font-family: "宋体";
}
.nav>ul>li>a{ /* 子代选择器 */
color: green;
}
</style>
</head>
<body>
<div class="nav"> <!-- 主导航栏 -->
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav"> <!-- 侧导航栏 -->
<div class="site-l">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</body>
</html>
总结：各类选择器中，后代选择器和并集选择器使用较为频繁，要实现标签内部部分功能，一般使用后代选择器，而且后代选择器的写法一般是类名+标签名
5 实现以下功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
.nav a{
width: 120px;
height: 50px;
text-decoration: none;/* 取消下划线 */
color: #fff;
background-image: url(images/bg.png);/* 设置元素的背景图像 */
display: inline-block;/* 行内元素转换成行内块元素 */
text-align: center; /* 水平方向居中 */
line-height: 50px;/* 行高=盒子高度：可以让单行文本垂直居中 */
}
.nav a:hover{
background-image: url(images/bgc.png);
}
/* 行内元素、行内块元素：我们可以看成文本，作为一个整体 */
.nav{
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
</div>
</body>
</html>
总结：
1、background-image: url(文件名+图像名);/* 设置元素的背景图像
2、行内元素不可以设置宽高等属性，所以想设置属性值必须转换元素类型：一般转成行内块元素
3、行内元素、行内块元素：我们可以看成文本，作为一个整体，这样字就可以实现垂直居中的效果
4、行高=盒子高度：可以让单行文本垂直居中，注意必须是单行文本，否则无效。
6 制作以下网页
我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>界面</title>
<style>
tr{
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<table class="nav" width="600" cellpadding="0" cellspacing="0" align="center">
<!-- 第一行 -->
<tr>
<td>
<img src="img/bdlogo.gif" title="百度一下你就知道了">
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>
<table class="new" align="center">
<tr>
<td><a href="#">新闻</a></td>
<td style="font-weight: 700">网页</td>
<td><a href="#">贴吧</a></td>
<td><a href="#">知道</a></td>
<td><a href="#">音乐</a></td>
<td><a href="#">图片</a></td>
<td><a href="#">视频</a></td>
<td><a href="#">地图</a></td>
</tr>
</table>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>
<span><input type="text-align" value ="" style="width:420px; height:25px;"></span>
<span><input type="submit" value ="百度一下"></span>
</td>
</tr>
<!-- 第4行 -->
<tr>
<td>
<table align="center">
<tr>
<td><a href="#">百科</a></td>
<td><a href="#">文库</a></td>
<td><a href="#">hao123</a></td>
<td><a href="#">更多>></a></td>
</tr>
</table>
</td>
</tr>
<!-- 第5行 -->
<tr>
<td>
<span><img src="img/ic.jpg"></span>
<span><a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a></span>
</td>
</tr>
<!-- 第6行 -->
<tr>
<td>
<a href="#">把百度设为主页，安装百度卫士</a>
</td>
</tr>
<!-- 第7行 -->
<tr>
<td>
<table align="center">
<tr>
<td><a href="#">加入百度推广</a> |</td>
<td><a href="#">搜索风云榜</a> |</td>
<td><a href="#">关于百度</a> |</td>
<td><a href="#">About Baidu</a> |</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-size: 10px">©2013 Baidu 使用百度前必读 京ICP证030173号</td>
</tr>
</table>
</body>
</html>
总结：我的思路是先构建一个表格框架，然后先设置需要的内容，所有完成之后，再开始修饰表格里面的内容。缺点：代码量大，而且在修饰时，基本使用的是标签内样式表，导致整个代码看起来比较凌乱。
结果：
其他人的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下</title>
<title>百度一下，俺就知道</title>
<style type="text/css">
div{text-align:center;}
body{font-size:12px;}
.search{
width:420px;
height:25px;
}
.tj{
height:30px;
width:100px;
}
.nav{
height:60px;
font-size:14px;
}
.bk{
font-size:14px;
height:60px;
}
.sou{height:50px;}
.map{height:60px;}
.copyright{line-height:25px;}
span{
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="logo">
<img src="img/bdlogo.gif" width="270" height="129" title="百度一下，你就知道"/>
</div>
<div class="nav">
<a href="#">新 闻</a>
<strong>网 页</strong>
<a href="#">贴 吧</a>
<a href="#">知 道</a>
<a href="#">音 乐</a>
<a href="#">图 片</a>
<a href="#">视 频</a>
<a href="#">地 图</a>
</div>
<div class="sou">
<input type="text" class="search" />
<input type="submit" value="百度一下" class="tj"/>
</div>
<div class="bk">
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao123</a> |
<a href="#">更多>></a>
</div>
<div class="map">
<img src="img/ic.jpg" />
<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
</div>
<div class="copyright">
<a href="#">把百度设为主页</a>
<a href="#">安装百度卫士</a><br />
<a href="#">加入百度推广</a> |
<a href="#">搜索风云榜</a> |
<a href="#">关于百度</a> |
<a href="#">About Baidu</a><br />
<span>©</span>2013 Baidu 使用百度前必读 京ICP证030173号
</div>
</body>
</html>
这代码的优点：使用div来布局，不用过多考虑单元格的问题，而且每个div对设置相应的类名，便于下一步的修饰。>相当于：”>“这个符号
7 用以下图片实现，鼠标经过时换成另一部分
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style>
a {
width: 67px;
height: 32px;
background: url(images/110.png) no-repeat scroll left top;
display: block;
}
a:hover {
background-position: left bottom;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
思路：在标签a的盒子中，放一张图片，由于盒子大小的原因，只能显示图片的一部分。
为了实现以上功能，在a选择器中，用background标签插入背景图，再使用伪善类。
注意由于a是行内元素，不能对它进行宽高设置，所以必须进行模式转换
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
