<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
list-style: none;
width: 960px;
height: 40px;
background-color: #55a8ea;
margin: 50px auto;
overflow: hidden
}
.nav li{
float:left;
width: 10%;
}
.nav a{
display: block;
width: 100%;
text-align: center;
padding: 10px 0;
text-decoration: none;
font-size: 14px;
font-family: 微软雅黑;
color: #fff;
}
.nav a:hover{
background-color: #00619f;
}
</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>
</body>
</html>
QQ截图20180830184926.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
*{
margin: 0;
}
.i{
border: 1px black solid;
list-style: none;
width: 958px;
margin: 48px auto;
height: 40px;
}
.i li {
margin-top:10px;
margin-left: 10px;
float: left;
}
.i a {
margin: 14px;
text-align: center;
padding: 10px;
text-decoration: none;
color: #333;
font-family: "微软雅黑";
}
.i a:hover{
color: gold;
}
</style>
</head>
<body>
<ul class="i">
<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>
QQ截图2.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 960px;
height: 42px;
border: black solid 1px;
margin: 50px auto;
position: relative;
}
ul{
list-style: none;
overflow: hidden;
margin: 7px auto;
position: absolute;
left: 250px;
}
.a{
float: left;
display: inline-block;
background-color: gold;
margin: 5px 5px;
}
.a1{
float: left;
display: inline-block;
margin: 5px 5px;
}
.nav a{
/*display: block;*/
width: 100%;
font-family: 雅黑;
font-size: 12px;
color: black;
text-align: center;
text-decoration: none;
margin :5px 10px;
}
</style>
</head>
<body>
<div class='nav'>
<ul >
<li class="a"><a href="#">上一页</a></li>
<li class="a"><a href="#">1</a></li>
<li class="a"><a href="#">2</a></li>
<li class="a"><a href="#">3</a></li>
<li class="a"><a href="#">4</a></li>
<li class="a1"><a href="#">...</a></li>
<li class="a"><a href="#">17</a></li>
<li class="a"><a href="#">18</a></li>
<li class="a"><a href="#">19</a></li>
<li class="a"><a href="#">20</a></li>
<li class="a"><a href="#">下一页</a></li>
</ul>
</div>
</body>
</html>
QQ截图3.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12px/1 字体
}
.outer{
width: 300px ;
/*height:471px ;*/
/*background-color: #bfa;*/
margin: 0 auto;
}
.title{
border-top: 2px #019e8b solid;
height:36px ;
background-color: #f5f5f5;
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.title a{
float: right;
color: red
}
.title h3{
font: 16px/36px '微软雅黑'
/*改掉默认的行高*/
}
.content h3{
margin-top: 15px;
margin-bottom: 15px;
}
.content{
border: 1px solid #deddd9;
/*高考内容撑开*/
padding: 0px 28px 0px 20px
}
.content li{
margin-bottom: 15px;
}
.content a{
color: black;
text-decoration: none;
font-size:12px;
}
.content a:hover{
color: red;
text-decoration:underline;
}
.content ul{
list-style: none;
border-bottom: 1px dashed #deddd9;
}
.content .red-font{
color: red;
font-weight: bold;
}
.content .right{
float: right;
}
.content .no-border{
border: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">
<a href="#">18年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="content">
<h3><a href="#">人工智能+python-高薪就业班</a></h3>
<ul>
<li>
<a class='right' href="#"><span class="red-font">预约报名</span></a>
<a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span class="red-font">无座名额爆满</span></a>
<a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span >2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span ">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span >2018-04-26</span></a>
</li>
</ul>
<h3><a href="#">Android开发+测试-高薪就业班</a></h3>
<ul>
<li>
<a class='right' href="#"><span class="red-font">预约报名</span></a>
<a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span >2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span ">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span >2018-04-26</span></a>
</li>
</ul>
<h3><a href="#">大数据软件开发-青芒工作室</a></h3>
<ul class="no-border">
<li>
<a class='right' href="#"><span class="red-font">预约报名</span></a>
<a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span ">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span >2018-04-26</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
QQ截图4.png
网友评论