HTML第五天
2018-06-06 本文已影响0人
精彩i人生
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box1{
width: 600px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.p1{
/*height: 200px;*/
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1">
（加入长段文字）
</p>
</body>
</html>
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box1{
/*在文档流中，子元素的宽度默认占父元素的全部*/
/*height: 100px;*/
background-color: #bfa;
/*
当元素设置浮动以后，会完全脱离文档流.
块元素脱离文档流以后，高度和宽度都被内容撑开
*/
/*float: left;*/
}
.s1{
/*
开启span的浮动
内联元素脱离文档流以后会变成块元素
*/
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
</body>
</html>
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单布局</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
/*设置头部*/
.header{
/*设置宽度*/
width: 1000px;
/*设置高度*/
height: 150px;
/*设置背景颜色*/
background-color: yellowgreen;
/*设置居中*/
margin: 0 auto;
}
/*设置主体内部*/
.content{
/*设置宽度*/
width: 1000px;
/*设置高度*/
height: 400px;
/*设置背景颜色*/
background-color: orange;
/*设置居中*/
margin: 10px auto;
}
/*设置content中小div的样式*/
.left{
width: 200px;
height: 100%;
background-color: skyblue;
/*向左浮动*/
float: left;
}
.center{
width: 580px;
height: 100%;
background-color: yellow;
/*向左浮动*/
float: left;
/*设置水平外边距0*/
margin: 0 10px;
}
.right{
width: 200px;
height: 100%;
background-color: pink;
/*向左浮动*/
float: left;
}
/*设置页脚*/
.footer{
/*设置宽度*/
width: 1000px;
/*设置高度*/
height: 150px;
/*设置背景颜色*/
background-color: silver;
/*设置居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style type="text/css">
.box1{
/*为box1设置一个边框*/
border: 10px red solid;
height: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
/*为子元素设置向左浮动*/
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style type="text/css">
.box1{
border: 10px red solid;
/*
根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的
当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为inline-block
4.将元素的overflow设置为一个非visible的值
*/
overflow: hidden;
/*
zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器都不支持
*/
zoom: 1;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
/*设置ul*/
.nav{
/*去除项目符号*/
list-style: none;
/*为ul设置一个背景颜色*/
background-color: #6495ed;
/*设置一个宽度*/
/*在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout*/
width: 1000px;
/*设置居中*/
margin: 50px auto;
/*解决高度塌陷*/
overflow: hidden;
}
/*设置li*/
.nav li{
/*设置li向左浮动*/
float: left;
width: 12.5%;
}
.nav a{
/*将a转换为块元素*/
display: block;
/*为a指定一个宽度*/
width: 100%;
/*设置文字居中*/
text-align: center;
/*设置一个上下内边距*/
padding: 5px 0;
/*去除下划线*/
text-decoration: none;
/*设置字体颜色*/
color: white;
/*设置加粗*/
font-weight: bold;
}
/*设置a的鼠标移入的效果*/
.nav a:hover{
background-color: #cc0000;
}
</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="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: yellow;
/*设置box1向左浮动*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
*/
/*
清除box1浮动对box2产生的影响
清除浮动以后，元素会回到其他元素浮动之前的位置
*/
/*clear: left;*/
float: right;
}
.box3{
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解决高度塌陷</title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*
解决高度塌陷方案二：
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构
*/
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解决高度塌陷</title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*通过after伪类，选中box1的后边*/
/*
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
这样做和添加一个div的原理一样，可以达到一个相同的效果，
而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
*/
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
/*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理*/
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.box1{
height: 200px;
background-color: red;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
定位：
- 定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
- 通过position属性来设置元素的定位
-可选值：
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
*/
/*
当元素的position属性设置为relative时，则开启了元素的相对定位
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联
*/
position: relative;
/*
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量
通常偏移量只需要使用两个就可以对一个元素进行定位，
一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
*/
left: 100px;
top: 200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.s1{
position: relative;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是一个span</span>
</body>
</html>
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
当position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位：
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质：
内联元素变成块元素，
块元素的宽度和高度默认都被内容撑开
*/
position: absolute;
/*left: 100px;
top: 100px;*/
}
.box3{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
.box4{
width: 300px;
height: 300px;
background-color: orange;
/*开启box4的相对定位*/
/*position: relative;*/
}
.s1{
width: 100px;
height: 100px;
background-color: yellow;
/*开启绝对定位*/
position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box5">
<div class="box4">
<div class="box2"></div>
</div>
</div>
<div class="box3"></div>
<span class="s1">我是一个span</span>
</body>
</html>
作业：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.aa{
width: 312px;
height: 570px;
background-color: #F5F5F5;
overflow: hidden;
margin: 50px auto;
}
.bb{
width: 300px;
height: 35px;
background-color: #F5F5F5;
overflow: hidden;
margin: 0px 6px ;
margin-top: 6px;
border-top: 2px solid #019E8B;
}
.jin li{
list-style: none;
float:left;
}
.jin a{
display:block;
overflow: hidden;
float: left;
text-decoration: none;
text-align: left;
margin-top: -26px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
color: black;
}
.jin a:hover{
text-decoration: none;
color: blue;
}
.min li{
list-style: none;
float:right;
}
.min a{
display:block;
overflow: hidden;
float: right;
text-align: right;
margin-top: -25px;
margin-right: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 13px;
color: orangered ;
}
.min a:hover{
text-decoration: none;
color: blue;
}
.cc{
width: 298px;
height: 519px;
background-color: white;
overflow: hidden;
margin: 0px 6px ;
border: 1px solid #DEDDD9;
}
.vv li{
list-style: none;
float:left;
}
.vv a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -500px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 15px;
color: black ;
}
.vv a:hover{
text-decoration: none;
color: blue;
}
.qq li{
list-style: none;
float:left;
}
.qq a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -465px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 13px;
color: orangered ;
}
.qq a:hover{
text-decoration: none;
color: blue;
}
.nn{
width: 270px;
margin: 1px auto;
border-bottom: 1px dashed #DEDDD9;
}
span{
color: black;
}
span:hover{
text-decoration: none;
color: blue;
}
.ll{
color: black;
}
.zz li{
list-style: none;
float:left;
}
.zz a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -460px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 15px;
color: black ;
}
.zz a:hover{
text-decoration: none;
color: blue;
}
.xx li{
list-style: none;
float:left;
}
.xx a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -430px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 13px;
color: orangered ;
}
.oo{
width: 270px;
margin: 1px auto;
border-bottom: 1px dashed #DEDDD9;
}
.xx a:hover{
text-decoration: none;
color: blue;
}
span{
color: black;
}
span:hover{
text-decoration: none;
color: blue;
}
.love li{
list-style: none;
float:left;
}
.love a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -440px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 15px;
color: black ;
}
.love a:hover{
text-decoration: none;
color: blue;
}
.you li{
list-style: none;
float:left;
}
.you a{
display:block;
overflow: hidden;
text-decoration: none;
float: left;
text-align: left;
margin-top: -405px;
margin-left: 18px;
font-family: "宋体";
font-weight: bold;
font-size: 13px;
color: orangered ;
}
.you a:hover{
text-decoration: none;
color: blue;
}
span{
color: black;
}
span:hover{
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<div class="aa">
<div class="bb"></div>
<ul class="jin">
<li><a href="#">近期开班</a></li></ul>
<ul class="min">
<li><a href="#">18年面授开班计划</li></ul>
<div class="cc"></div>
<ul class="vv"><li><a href="#">人工智能+python-高新就业班</a></li></ul>
<ul class="qq">
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br>
<li><a href="#"><span>开放时间:</span>2018-03-23    无座+名额爆满</a></li><br><br>
<li><a href="#"><span class="ll">开放时间:2018-01-23       <span>开班盛况</span></a></li><br><br>
<li><a href="#"><span class="ll">开放时间:2017-12-20       <span>开班盛况</span></a></li><br><br>
<li><a href="#"><span class="ll">开放时间:2017-12-20       <span>开班盛况</span></a></li><br>
<li><a class="nn"></a>></li>
</ul>
<ul class="zz"><li><a href="#">Android开发+测试-高新就业班</a></li></ul>
<ul class="xx">
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br><br>
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br>
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br>
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br>
<li><a class="oo"></a>></li>
</ul>
<ul class="love"><li><a href="#">大数据软件开发-青芒工作室</a></li></ul>
<ul class="you">
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br><br>
<li><a href="#"><span>开放时间:</span>2018-04-26       预约报名</a></li><br><br>
</ul>
</div>
</body>
</html>
