前端(塌陷)
2018-08-12 本文已影响0人
小明坐地铁
高度塌陷
Snipaste_2018-08-12_18-26-01.png
解决高度塌陷
Snipaste_2018-08-12_18-26-42.png
解决高度塌陷2
Snipaste_2018-08-12_18-29-34.png
导航条
Snipaste_2018-08-12_18-28-33.png
清除浮动
Snipaste_2018-08-12_18-29-11.png
放假作业
1.开班计划
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开班计划</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12px/1 宋体;
}
.box1{
width: 300px;
/*外边距 居中*/
margin: 50px auto;
}
.box2{
/*上边框 (solid 实线)*/
border-top: 2px #52bbae solid;
height: 36px;
background-color: #f5f5f5;
/*行内高度*/
line-height: 36px;
/*内边距*/
padding:0px 20px 0px 16px;
}
.box2 a{
/*向右浮动*/
float: right;
color: red;
}
.box2 h3:hover{
/*向左浮动*/
float:left;
font: 10px '宋体';
/*去掉项目符号*/
list-style: none;
}
.box3 a{
color: black;
/*去除样式*/
text-decoration: none;
/*字号*/
font-size: 12px;
}
.box3 a:hover{
color: red;
/*为文本添加下划线*/
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 .no-border{
/*边框*/
border: none;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<a href="#">18年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="box3">
<h3><a href="#">人工智能+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>
</ul>
<ul>
<li>
<a href="#">开班时间：<span class="red-font">2018-03-23</span></a>
<a class="right" href="#"><span class="red-font">无座，名额爆满</span></a>
</li>
</ul>
<ul>
<li>
<a href="#">开班时间：<span>2018-01-23</span></a>
<a class="right" href="# "><span>开班盛况</span></a>
</li>
</ul>
<ul>
<li>
<a href="#">开班时间：<span>2017-12-10</span></a>
<a class="right" href="# "><span>开班盛况</span></a>
</li>
</ul>
<ul>
<li>
<a href="#">开班时间：<span>2017-11-18</span></a>
<a class="right" href="# "><span>开班盛况</span></a>
</li>
</ul>
</div>
<div class="box3">
<h3><a href="#">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>
</ul>
<ul>
<li>
<a href="#">开班时间：<span>2018-03-23</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
<ul>
<li>
<a href="#">开班时间：<span>2018-01-23</span></a>
<a class="right" href="# "><span>开班盛况</span></a>
</li>
</ul>
<ul>
<li>
<a href="#">开班时间：<span>2017-12-10</span></a>
<a class="right" href="# "><span>开班盛况</span></a>
</li>
</ul>
</div>
<div class="box3">
<h3><a href="#">大数据软件开发-青芒工作室</a></h3>
<ul class="no-border">
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="# "><span class="red-font">预约报名</span></a>
</li>
</ul>
<ul>
<li>
<a href="#">开班时间：<span>2018-01-23</span></a>
<a class="right" href="# "><span>开班盛况</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
Snipaste_2018-08-12_20-37-57.png
2.翻页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻页</title>
<style type="text/css">
.clearfix:after{
content: "";
/*内联元素转换位块元素*/
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
.i{
width: 960px;
height: 42px;
border: 1px solid #d1d1dd;
/*外边距*/
margin: 0 auto;
}
.l{
width: 550px;
margin: 0 auto;
}
.l li{
/*去掉项目符号*/
list-style: none;
}
.l li a{
float: left;
/*内联元素转换位块元素*/
display: block;
/*去除样式*/
text-decoration: none;
font: 12px '雅黑';
color: black;
/*内边距*/
padding: 5px 10px;
margin-left: 8px;
background: gold;
margin-top: -8px;
}
.l li a:hover{
background: red;
}
</style>
</head>
<body>
<div class="i">
<div class="l">
<ul class="clearfix">
<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>
<a href="#" style="background: none;">...</a>
</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>
</div>
</div>
</body>
</html>
Snipaste_2018-08-12_20-39-09.png
3.导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
}
.box{
width:960px;
height: 40px;
background-color: #55a8ea;
/*边框 居中*/
margin: 50px auto;
}
.box ul li{
list-style-type: none;
float: left;
width: 100px;
/*文字居中*/
text-align: center;
}
.box ul li a{
/*去除样式*/
text-decoration: none;
color: white;
font-size: 14px;
/*行内高度*/
line-height: 40px;
}
.box ul li:hover{
background-color: #00619f;
}
.box1{
/*图片 相对定位*/
position: relative;
/*图片的位置*/
top: -10px;
left: -267px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="">首 页</a></li>
<li><a href="">网站建设</a></li>
<li><a href="">程序开发</a></li>
<li><a href="">网络营销</a></li>
<img src="new.png" class="box1">
<li><a href="">企业VI</a></li>
<li><a href="">案例展示</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</body>
<html>
Snipaste_2018-08-12_20-40-20.png
4.导航条2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
/*边框 实线*/
border: 1px black solid;
/*去掉项目符号*/
list-style: none;
width: 958px;
/*外边距 居中*/
margin: 48px auto;
height: 40px;
}
.box li {
/*外边距 上*/
margin-top:6px;
/*外边距 左*/
margin-left: 10px;
/*浮动*/
float: left;
}
.box a {
margin: 14px;
/*文字居中*/
text-align: center;
/*内边距*/
padding: 10px;
/*去除样式*/
text-decoration: none;
color: #333;
font-family: "微软雅黑";
}
.box a:hover{
color: red
}
</style>
</head>
<body>
<ul class="box">
<li><a href="#">首页</a><li><li>|</li>
<li><a href="#">网站建设</a><li><li>|</li>
<li><a href="#">程序开发</a><li><li>|</li>
<li><a href="#">网络营销</a><li><li>|</li>
<li><a href="#">企业VI</a><li><li>|</li>
<li><a href="#">案例展示</a><li><li>|</li>
<li><a href="#">联系我们</a></li><li></li>
</ul>
</body>
</html>
Snipaste_2018-08-12_20-41-53.png
