特征布局实例
为了更好地迎战各种前端示例，下面针对下面的内容，手写各种html答案。
1、特征布局：翻页（所需知识点：盒模型、内联元素）
重点：这里不能使用float:left的方式，因为这种方式不方便于居中。如果使用偏移的方式居中，当页数增加的时候，可能就不居中了。
所以要用一种内联块的居中方式：
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
那么就是说，可以写一个ul>li>a的元素设置为块元素display:block;然后在父元素设置text-align:center;就可以使得子元素li居中了。
实现效果如下：
代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.menu{
width: 600px;
height: 40px;
border: 1px solid #ccc;
margin:50px auto 0;
padding: 0;
list-style: none;
text-align: center;
}
.menu li{
display: inline-block;
height: 26px;
line-height: 40px;
}
.menu li a{
text-decoration: none;
display: block;
height: 26px;
background-color: gold;
font-size: 12px;
font-family: "Microsoft YaHei";
color: #000;
line-height: 26px;
/*padding-left: 10px;
padding-right: 10px;*/
padding: 0 10px;
}
.menu li a:hover{
background-color: pink;
color: #fff;
}
</style>
</head>
<body>
<!-- ul.menu>(li>a{$})*11 -->
<ul class="menu">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><span>……</span></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">下一页</a></li>
</ul>
</body>
</html>2、特征布局：导航条01（所需知识点：盒模型、行内元素布局）
这个导航栏实现的方式与上面的实现方式基本一致，居中布局采用还是使用内联块的子元素居中方式，其他里面的a则是可以使用margin扩展开来即可。
实现效果：
实现代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.menu{
width: 958px;
height: 40px;
border: 1px solid #ccc;
padding: 0;
margin:50px auto;
list-style: none;
text-align: center;
}
.menu li{
display: inline-block;
/*background-color: gold;*/
height: 40px;
line-height: 40px;
}
.menu li a{
display: block;
text-decoration: none;
font-size: 14px;
font-family: "Microsoft YaHei";
color: #333;
}
.menu li a:hover{
color: red;
}
.menu li span{
font-size: 14px;
font-family: "Microsoft YaHei";
color: #333;
padding: 0 20px;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><span>|</span></li>
<li><a href="#">网站建设</a></li>
<li><span>|</span></li>
<li><a href="#">程序开发</a></li>
<li><span>|</span></li>
<li><a href="#">网络营销</a></li>
<li><span>|</span></li>
<li><a href="#">企业VI</a></li>
<li><span>|</span></li>
<li><a href="#">案例展示</a></li>
<li><span>|</span></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>3、特征布局：导航条02（所需知识点：盒模型、浮动、定位、字体对齐）
这个导航栏的方式与上面两种方式都不一样，因为不需要菜单来居中了，就可以使用浮动来处理了。记住使用浮动的时候使用clearfix的方式来清除浮动。
实现效果：
实现代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.menu{
width: 958px;
margin:50px auto;
padding: 0;
list-style: none;
background-color: #55a8ea;
position: relative;
}
.menu li{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
}
.menu li a{
text-decoration: none;
font-size: 14px;
font-family: "Microsoft YaHei";
color: #fff;
}
.menu li:hover{
background-color: #00618f;
}
.menu .new{
position: absolute;
top: -14px;
left: 294px;
}
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<ul class="menu clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">程序开发</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#">企业VI</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
<li class="new"><img src="new.png" alt=""></li>
</ul>
</body>
</html>4、特征布局：图片列表（所需知识点：盒模型、浮动）
实现代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outside{
width: 958px;
border: 1px solid #ccc;
}
.div1{
width: 925px;
height: 50px;
margin-left: 20px;
/*border: 1px solid #ccc;*/
/*background-color: gold;*/
border-bottom: 1px solid #ccc;
}
.div1 span{
font-size: 18px;
font-family: "Microsoft YaHei";
font-weight: 700;
line-height: 50px;
}
.div2 ul li{
list-style: none;
float: left;
background-image: url(goods.jpg);
width: 160px;
height: 68px;
margin-top: 25px;
margin-left: 29px;
border: 1px solid #000;
}
.div2 ul .fist{
margin-left: -20px;
}
.div2 ul .upline{
margin-top: 20px;
}
.div2 ul .downline{
margin-bottom: 38px;
}
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<div class="outside clearfix">
<div class="div1">
<span>图片展示</span>
</div>
<div class="div2">
<ul>
<li class="upline fist"></li>
<li class="upline"></li>
<li class="upline"></li>
<li class="upline"></li>
<li class="upline"></li>
<li class="downline fist"></li>
<li class="downline"></li>
<li class="downline"></li>
<li class="downline"></li>
<li class="downline"></li>
</ul>
</div>
</div>
</body>
</html>5、特征布局：新闻列表（所需知识点：盒模型、浮动）
实现效果：
实现代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.menu{
width: 600px;
height: 290px;
border: 1px solid #ccc;
margin:50px auto;
padding-left: 40px;
list-style: none;
}
.menu .news_list{
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
width: 560px;
}
.menu .news_list a{
color: #000;
}
ul li div a{
text-decoration: none;
}
ul .list{
font-size: 14px;
font-family: "Microsoft YaHei";
width: 560px;
margin:18px 0;
}
ul .list a{
color: #000;
}
ul .list span{
float: right;
}
</style>
</head>
<body>
<ul class="menu">
<li class="news_list">
<div><a href="#">新闻列表</a></div>
</li>
<li class="list">
<div>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span>2016-06-23</span>
</div>
</li>
<li class="list">
<div>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span>2016-06-23</span>
</div>
</li>
<li class="list">
<div>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span>2016-06-23</span>
</div>
</li>
<li class="list">
<div>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span>2016-06-23</span>
</div>
</li>
<li class="list">
<div>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span>2016-06-23</span>
</div>
</li>
<li class="list">
<div>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span>2016-06-23</span>
</div>
</li>
</ul>
</body>
</html>优化新闻列表
首先准备好两个图标素材：
point.gif
icon.jpg
实现效果如下：
代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.menu{
width: 600px;
height: 290px;
border: 1px solid #ccc;
margin:50px auto;
padding-left: 40px;
list-style: none;
}
.menu .new_list{
width: 560px;
height: 50px;
}
.menu .news_list .news{
/*float: left;*/
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 50px;
/*background-color: red;*/
border-bottom: 1px solid #ff0000;
display: inline-block;
}
.menu .news_list a{
color: #000;
}
.menu .news_list .more{
display: inline-block;
float: right;
line-height: 50px;
margin-right: 50px;
color: #ccc;
/*border-bottom: 1px solid #ccc;*/
/*background-color: cyan;*/
}
.menu .news_list .line{
/*background-color: gold;*/
border-bottom: 1px solid #ccc;
width: 560px;
}
ul li div a{
text-decoration: none;
}
ul .list{
font-size: 14px;
font-family: "Microsoft YaHei";
width: 560px;
margin:18px 0;
border-bottom: 1px dotted;
}
ul .list a{
color: #000;
}
ul .list .date{
float: right;
}
ul .list .point{
display: inline-block;
/*border: 1px solid red;*/
position: relative;
top: -7px;
}
ul .list .icon{
display: inline-block;
}
</style>
</head>
<body>
<ul class="menu">
<li class="news_list">
<div class="news"><a href="#">新闻列表</a></div>
<div class="more"><a href="#">更多>></a></div>
<div class="line"></div>
</li>
<li class="list">
<div>
<span class="point"><img src="point.gif" alt=""></span>
<span class="icon"><img src="icon.jpg" alt=""></span>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span class="date">2016-06-23</span>
</div>
</li>
<li class="list">
<div>
<span class="point"><img src="point.gif" alt=""></span>
<span class="icon"><img src="icon.jpg" alt=""></span>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span class="date">2016-06-23</span>
</div>
</li>
<li class="list">
<div>
<span class="point"><img src="point.gif" alt=""></span>
<span class="icon"><img src="icon.jpg" alt=""></span>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span class="date">2016-06-23</span>
</div>
</li>
<li class="list">
<div>
<span class="point"><img src="point.gif" alt=""></span>
<span class="icon"><img src="icon.jpg" alt=""></span>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span class="date">2016-06-23</span>
</div>
</li>
<li class="list">
<div>
<span class="point"><img src="point.gif" alt=""></span>
<span class="icon"><img src="icon.jpg" alt=""></span>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span class="date">2016-06-23</span>
</div>
</li>
<li class="list">
<div>
<span class="point"><img src="point.gif" alt=""></span>
<span class="icon"><img src="icon.jpg" alt=""></span>
<a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
<span class="date">2016-06-23</span>
</div>
</li>
</ul>
</body>
</html>淘宝女装
准备好图片如下：
banner.jpg
cloth.jpg
cloth02.jpg
实现如下：
实现代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.outside{
width: 498px;
height: 343px;
border: 1px solid #f00;
margin: 50px auto;
}
.outside .title{
width: 440px;
height: 20px;
/*background-color: gold;*/
margin-top: 30px;
margin-left: 30px;
margin-bottom: 17px;
border-left: 2px solid #f00;
text-indent: 20px;
font-size: 14px;
font-family: "Microsoft YaHei";
font-weight: 700;
line-height: 20px;
}
.outside .banner{
margin-left: 30px;
/*width: 239px;*/
/*height: 212px;*/
display: inline-block;
/*background-color: gold;*/
position: relative;
top: 3px;
padding-right: 10px;
}
.outside .banner img{
/*width: 239px;*/
/*height: 212px;*/
}
.outside .right{
width: 211px;
height: 239px;
/*border: 1px solid #000;*/
display: inline-block;
position: relative;
top: -42px;
}
.outside .right{
width: 222px;
}
.outside .right ul{
list-style: none;
}
.outside .right li{
display: inline-block;
}
.outside .right .up li span{
position: relative;
top: 22px;
left: -75px;
}
.outside .right .up .shishang{
position: relative;
top: -4px;
left: 4px;
padding: 10px;
}
.outside .right .up .chaoliu{
position: relative;
top: -104px;
right: -112px;
}
.outside .right .down{
float: left;
width: 211px;
height: 97px;
padding-left: 10px;
/*background-color: gold;*/
position: relative;
top: -55px;
text-align: center;
}
.outside .right .down .second{
position: relative;
left: -5px;
}
.outside .right .down li{
height: 45px;
width: 98px;
border: 1px dotted #ccc;
line-height: 45px;
}
</style>
</head>
<body>
<div class="outside">
<div class="title">淘宝女装</div>
<div>
<div class="banner">
<img src="banner.jpg" alt="御姐潮装日记">
</div>
<div class="right">
<ul class="up">
<li class="shishang">
<img src="cloth.jpg" alt="时尚包包">
<span>时尚包包</span>
<!-- 时尚包包 -->
</li>
<li class="chaoliu">
<img src="cloth02.jpg" alt="潮流美鞋">
<span>潮流美鞋</span>
<!-- 潮流美鞋 -->
</li>
</ul>
<ul class="down">
<li class="first">新品上市</li>
<li class="second">女装</li>
<li class="first">欧美风</li>
<li class="second">美搭</li>
</ul>
</div>
</div>
</div>
</body>
</html>
