分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.wrap{
width: 960px;
height: 42px;
margin:50px auto;
}
.wrap .container{
border:1px solid #ccc;
}
.paging{
text-align: center;
padding: 5px 10px;
font-size: 12px;
font-family: "Microsoft YaHei";
}
.paging .prev,.next{
display: inline-block;
width: 70px;
height: 30px;
line-height: 30px;
background-color: gold;
color: #000;
cursor: pointer;
}
.paging a,.point{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
background-color: gold;
}
.point{
background: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="paging">
<span class="prev">上一页</span>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<span class="point">...</span>
<a href="">17</a>
<a href="">18</a>
<a href="">19</a>
<a href="">20</a>
<span class="next">下一页</span>
</div>
</div>
</div>
</body>
</html>
效果
导航条1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条1</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
ul li{
list-style: none;
}
.nav{
width: 960px;
height: 42px;
margin: 50px auto;
border:1px solid black;
}
.nav li{
float: left;
line-height: 42px;
}
.nav li a{
color: #333;
font-size: 14px;
font-family: "Microsoft YaHei";
border-left: 1px solid #000;
padding:0px 20px;
margin: 0px auto;
}
.nav li a.home{
border:0px;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#" class="home">首页 </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>
</ul>
</body>
</html>
效果
导航条2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条2</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.nav{
list-style: none;
background-color: #55a8ea;
width: 960px;
height: 40px;
margin: 50px auto;
overflow: hidden;
/*解决高度塌陷*/
}
.nav li{
float: left;
width: 14.28%;
}
.nav a{
font-size: 14px;
color: #fff;
font-family: '微软雅黑';
display: block;
/*width:250px;*/
text-align: center;
/*元素居中*/
padding: 10px 0px;
text-decoration: none;
/*去除下滑线*/
color: #fff;
}
.nav a:hover{
background-color: #00619f;
}
/*list-style：none 清除项目符号*/
</style>
</head>
<body>
<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="#">企业VI</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
效果
开班信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
font: 12px/1 宋体；
}
.box1{
width: 300px;
/*height: 471px;
background-color: #bfa;*/
/*text-align: center;*/
margin: 50px auto;
}
.box2{
border-top: 2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.box2 a{
float: right;
color: red;
font-size: 12px;
}
.box2 h3{
font:16px/36px "微软雅黑";
}
.box3{
border: 1px solid #deddd9;
padding: 0px 28px 0px 20px;
}
.box3 a{
color: black;
text-decoration: none;
font-size: 12px;
}
.box3 a:hover{
color: green;
text-decoration: underline;
}
.box3 h3{
margin-top: 15px;
margin-bottom: 15px;
}
.box3 ul{
list-style: none;
border-bottom: 1px dashed #deddd9;
}
.box3 li{
margin-bottom: 15px;
}
.box3 .red-font{
color: red;
font-weight: bold;
}
.box3 .right{
float: right;
}
.box3 .box4{
border: none;
}
.right{
margin-top: 9px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<a href="#">18年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="box3">
<h3><a herf="#">人工智能+Python-高新就业班</a></h3>
<ul>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">无座，名额爆满</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
<h3><a herf="#">Android开发+测试-高薪就业班</a></h3>
<ul>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-03-23</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-01-23</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-12-20</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
<h3><a herf="#">大数据软件开发-青芒工作室</a></h3>
<ul class="box4">
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-01-23</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
