CSS相关练习
1、css实现翻页样式
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现翻页效果</title>
<style type="text/css">
.box{
width: 960px;
height: 42px;
border: 1px solid black;
margin: 50px auto 0px;
padding: 0;
font-size: 0; /*去除掉间隙*/
text-align: center;
}
.box .num{
height: 5px;
background-color: gold;
margin-right: 10px;
line-height: 8px;
font-size: 12px;
display: inline-block; /*转换成内联块标签*/
margin-top: 10px;
padding: 10px;
text-decoration: none;
font-family: "Microsoft YaHei";
}
.box a:hover{
background-color: red;
color: white;
}
</style>
</head>
<body>
<div class="box">
<a href="https:\\www.baidu.com" class="num">上一页</a>
<a href="#" class="num ch">1</a>
<a href="#" class="num ch">2</a>
<a href="#" class="num ch">3</a>
<a href="#" class="num ch">4</a>
<a href="#" class="num ch">5</a>
<a href="#" class="num ch">6</a>
<a href="#" class="num ch">7</a>
<a href="#" class="num ch">8</a>
<a href="#" class="num ch">9</a>
<a href="#" class="num ch">10</a>
<a href="#" class="num ch">20</a>
<a href="#" class="num">下一页</a>
</div>
</body>
</html>
实现效果如下所示：
效果改善：（使用ul-li列表方式实现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现翻页样式改善</title>
<style type="text/css">
.box{
list-style: none;
width: 600px;
height: 40px;
border: 1px solid black;
margin: 50px auto 0;
text-align: center;
font-size: 0;
padding: 0; /*去除掉li默认的样式*/
}
.box li{
/*height: 25px;*/
display: inline-block; /*如果子元素是内联块，则其父元素可以使用text-align实现居中操作*/
height: 26px;
font-size: 12px;
margin:7px 5px 0;
}
/*将a元素转换成块元素*/
.box li a{
display: block;
background-color: gold;
height: 26px;
line-height: 26px;
padding:0px 10px;
text-decoration: none;
font-size: 12px;
font-family: "Microsoft Yahei";
color: black;
}
.box li a:hover{
background-color: red;
color: white;
}
</style>
</head>
<body>
<ul class="box">
<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（盒模型、行内元素布局）
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条的样式设置</title>
<style type="text/css">
.box{
width:960px ;
height:40px ;
list-style: none;
border: 1px solid black;
position: fixed;
left: 50%;
top:0%;
margin: 0 -480px 0;
text-align: center;
font-size: 0; /*去除间隙*/
}
.box li{
display: inline-block; /*将块元素转化为行内块元素*/
/*background-color: pink;*/
font-size: 16px;
height: 40px;
}
.box li a{
display: block; /*将行内元素转为块元素*/
margin: 10px 10px 0;
text-decoration: none;
padding: 0 10px 0;
color: black;
font-family: "Microsoft Yahei";
}
.box li a:hover{
background-color: goldenrod;
color: white;
font-weight: bolder;
}
.box1{
width: 600px;
height: 600px;
margin: 60px auto 0;
background-color: pink;
}
</style>
</head>
<body>
<ul class="box">
<li class="info"><a href="#">首页</a></li>
<li class="info"><span>|</span></li>
<li class="info"><a href="#">网站建设</a></li>
<li class="info"><span>|</span></li>
<li class="info"><a href="#">程序开发</a></li>
<li class="info"><span>|</span></li>
<li class="info"><a href="#">企业VI</a></li>
<li class="info"><span>|</span></li>
<li class="info"><a href="#">案例演示</a></li>
<li class="info"><span>|</span></li>
<li class="info"><a href="#">联系我们</a></li>
</ul>
<div class="box1">
haha
</div>
</body>
</html>
显示效果如下所示：
3、导航栏：导航条02所需知识点：盒模型、浮动、定位、字体对齐）
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条的样式2</title>
<style type="text/css">
.box{
width: 960px;
height: 40px;
background-color: #55a8ea;
position: fixed;
padding: 0;
list-style: none;
font-size: 0;
left: 50%;
margin: 0 -480px 0;
text-align: center;
font-size: 0;
}
.box li{
display: inline-block;
font-size: 16px;
float: left;
/*background-color: pink;*/
/*margin-right: 10px;*/
height: 40px;
/*border: 1px solid black;*/
position: relative;
}
.box li a{
display: block;
height: 40px;
width: 100px;
text-align: center; /*设置字体居中*/
font-family: "Microsoft Yahei";
color: black;
text-decoration: none;
line-height: 40px;
color: white;
padding-left: 5px;
padding-right: 5px;
font-size: 14px;
}
.box li a:hover{
background-color:#00619f;
}
.hot{
width: 33px;
height: 20px;
/*font-size: 1px;*/
background-image: url("images/new.png" ); /*背景图片*/
background-repeat: no-repeat;
/*background-color: orangered;*/
/*border: 1px solid black;*/
text-align: center;
position: absolute;
top: -5px;
right: 30px;
border-radius: 5px;
display: block;/*控制是否显示*/
}
</style>
</head>
<body>
<ul class="box">
<li class="info">
<div class="hot show"></div>
<a href="#">首页</a>
</li>
<li class="info">
<a href="#">网站建设</a>
</li>
<li class="info">
<a href="#">程序开发</a>
</li>
<li class="info">
<a href="#">网络管理</a>
</li>
<li class="info">
<a href="#">企业VI</a>
</li>
<li class="info">
<a href="#">案例展示</a>
</li>
<li class="info">
<a href="#">联系我们</a>
</li>
</ul>
</body>
</html>
显示效果如下所示：
4、特征布局：图片列表（所需知识点：盒模型、浮动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS练习3_图片列表</title>
<style type="text/css">
.box{
width: 958px;
height: 269px;
border: 1px solid black;
/*padding-right: 20px;*/
/*padding-left: 20px;*/
}
.box .box1 h2{
float: left;
margin: 0;
width: 918px;
height: 50px;
font-size: 18px;
font-family: "Microsoft Yahei";
color: #000;
line-height: 48px;
/*background-color: pink;*/
text-indent: 20px;
margin-right: 20px;
border-bottom: 1px solid black;
margin-left: 20px;
margin-bottom: 20px;
}
.pic{
width: 918px;
overflow: hidden; /*非常关键，其裁切掉超出的宽度*/
/*background-color: red;*/
margin: 20px auto 13px;
}
.box2 {
/*border: 1px solid red;*/
/*background-color: cyan;*/
/*padding-left: 20px;*/
overflow: auto; /*放置引发元素溢出问题*/
width: 1000px;
/*margin-left: 20px;*/
}
.box2 a{
/*margin-left: 20px;*/
height: 68px;
width: 160px;
display: block;
float: left;
margin-right: 29px;
margin-bottom: 25px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"><h2>图片展示</h2></div>
<div class="pic">
<div class="box2">
<a href=""><img src="images/goods.jpg" alt=""></a>
<a href=""><img src="images/goods.jpg" alt=""></a>
<a href=""><img src="images/goods.jpg" alt=""></a>
<a href=""><img src="images/goods.jpg" alt=""></a>
<a href=""><img src="images/goods.jpg" alt=""></a>
<a href=""><img src="images/goods.jpg" alt=""></a>
<a href=""><img src="images/goods.jpg" alt=""></a>
<a href=""><img src="images/goods.jpg" alt=""></a>
<a href=""><img src="images/goods.jpg" alt=""></a>
<a href=""><img src="images/goods.jpg" alt=""></a>
</div>
</div>
</div>
</body>
</html>
效果显示如下：
