CSS:
12.display
13.浮动效果
14.浮动特性
15.浮动产生的问题和解决方法
16.float京东导航栏
17.position
18.z-index
19.京东案例
12.display
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>display</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
/* 控制元素隐藏 不占位置 */
/*display: none;*/
/*控制元素隐藏 占位置 影响后面盒子的布局*/
/*visibility: hidden;*/
/*转为 行内块元素*/
/*display: inline-block;*/
/*将 块级元素转换为 行内元素 不能设置宽高*/
display: inline;
}
a{
/*display: block;*/
/*display: inline-block;*/
width: 300px;
height: 300px;
background-color: yellow;
}
img{
/* 行内块元素 一般转化块级元素 */
/*display: block;*/
display: inline; /*转为行内元素 依然可设置宽高 没必要转换 */
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>123</div>
<div>987</div>
<a href="#">百度一下</a>
<img src="./images/homesmall1.png" alt="python">
</body>
</html>
13.浮动效果
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.wrap div{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
/*
文档流：可见元素在文档中的显示位置；
浮动产生的效果：
浮动可以使元素按指定位置排列，直到遇到父元素的边界或者另一个元素的边界停止
*/
/* left 左浮动 左侧为起始，从左往右依次排列*/
float: left;
/* right 右浮动 右侧为起始，从右往左依次排列 */
/*float: right;*/
/*float: none;*/
}
</style>
</head>
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
14.浮动特性
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>浮动特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrap div{
width: 200px;
height: 200px;
border: 1px solid black;
}
.box1{
background-color: red;
float: left;
}
.box2{
background-color: yellow;
margin-left: 20px;
}
.box3{
background-color: green;
}
.container{
/*width: 300px;*/
/*height: 300px;*/
background-color: chartreuse;
float: left;
}
span{
float: left;
background-color: blue;
width: 100px;
height: 100px;
}
/*
文档流：可见元素在文档中的排列位置
浮动效果：
1.浮动可以使元素脱离文档流，不占位置
2.浮动会使元素提升层级
3.浮动可以使块元素在一行内排列，不设置宽高时，可以使元素适应内容
4.浮动可以使行内元素支持宽高
*/
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="container">哈哈</div>
<div class="container">我们</div>
<span>嘿嘿</span>
</body>
</html>
15.浮动产生的问题和解决方法
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>浮动产生的问题和解决方法</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/* 通常页面布局时，父盒子的高度不需要设置，通过子盒子 自动填充父盒子；*/
.wrap{
width: 800px;
/*height: 500px;*/
background-color: red;
margin: 0 auto;
overflow: hidden;
}
.wrap div{
float: left;
}
.wrap1{
width:200px;
height: 400px;
background-color: yellow;
}
.wrap2{
width:350px;
height: 400px;
background-color: green;
margin-left: 25px;
}
.wrap3{
width:200px;
height: 400px;
background-color: blue;
margin-left: 25px;
}
#clearfix{
float: none;
clear: both;
}
/* 官方推荐的解决办法 最长使用的解决办法*/
/*
.wrap:after{
visibility: hidden;
clear: both;
display: block;
content: '.';
height: 0;
}*/
/*
浮动产生的问题：
父元素不设置高度时，子元素设置了浮动，不会撑开父元素的高度，因为子元素不占位置了！
解决办法：
1.给父盒子设定固定高度；缺点：不灵活；
2.给浮动元素最后一个加一个空的块级元素，且该元素为不浮动float:none，设置clear:both,就会撑开盒子。
缺点：结构冗余
3.官方推荐：推荐使用：
.wrap:after{
visibility: hidden;
clear: both;
content: '.';
display: block;
height: 0;
}
4.推荐使用：给父元素添加overflow:hidden eg: .warp{overflow: hidden;}
*/
</style>
</head>
<body>
<div class="wrap">
<div class="wrap1"></div>
<div class="wrap2"></div>
<div class="wrap3"></div>
<!--<div id="clearfix"></div>-->
</div>
</body>
</html>
16.float京东导航栏
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>float京东导航栏</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrap{
width: 100%;
margin: 0 auto;
background-color: rgba(240,243,239,0.73)
}
.wrap .header{
width: 1245px;
height: 40px;
margin: 0 auto;
background-color: rgba(227,228,229,0.73)
}
.header_l,.header_r{
float: left;
}
.header_l img{
width: 20px;
height: 20px;
}
.header_l span{
color: rgba(126,126,126,0.98);
font-size: 12px;
height: 40px;
line-height: 40px;
text-align: center;
}
.header_l{
margin: 5px 0 0 30px;
}
.header_r{
margin-left: 250px;
width: 915px;
}
.header_r ul li{
list-style: none;
height: 40px;
line-height: 40px;
float: left;
padding: 0 10px;
}
.header_r ul li a{
text-decoration: none;
color: rgba(126,126,126,0.98);
}
.header_r ul li a:hover{
color: red;
}
</style>
</head>
<body>
<!--最外层的父盒子-->
<div class="wrap">
<!--导航-->
<div class="header">
<div class="header_l">
<img src="./images/fav.ico" alt="一个logo">
<span>北京</span>
</div>
<div class="header_r">
<ul>
<li><a href="">你好，请登录 <span>免费注册</span></a></li>
<li class="spacer"></li>
<li><a href="#">我的订单</a></li>
<li class="spacer"></li>
<li><a href="#">我的京东</a></li>
<li class="spacer"></li>
<li><a href="#">京东会员</a></li>
<li class="spacer"></li>
<li><a href="#">企业采购</a></li>
<li class="spacer"></li>
<li><a href="#">客户服务</a></li>
<li class="spacer"></li>
<li><a href="#">网站导航</a></li>
<li class="spacer"></li>
<li><a href="#">手机京东</a></li>
</ul>
</div>
</div>
<!--中心内容-->
<div class="content"></div>
<!--底部-->
<div class="footer"></div>
</div>
</body>
</html>
17.position
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
position:relative;
top: 50px;
left: 30px;
}
.box2{
background-color: yellow;
position:absolute;
top:150px;
}
.box3{
background-color: green;
position:absolute;
left: 100px;
top:10px;
}
.father{
width: 300px;
height: 300px;
background-color: gray;
margin-top: 50px;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:20px;
left: 20px;
}
.aside_logo{
width: 100px;
height: 100px;
background-color: yellow;
/* 固定定位*/
position: fixed;
bottom: 20px;
right:20px;
;
}
/*
static ： 默认值
relative : 相对定位
1. 不设置偏移量的时候，对元素没有任何影响
2. 相对定位可以提升层级关系。
3. 相对定位是相对于自身定位。
absolute : 绝对定位
1. 可以提升层级关系
2. 脱离文档流
3. 在没有父级元素定位时，以浏览器的左上角为基准定位的。
4. 有父级的情况下，父级设置相对定位（绝对位置），子集设置绝对定位，是以父盒子进行定位的。
（父相子绝） 来设置位置的调整
fixed : 固定定位
*/
</style>
</head>
<body>
<!--<div class="box1"></div>-->
<!--<div class="box2"></div>-->
<!--<div class="box3"></div>-->
<div class="father">
<div class="child">
</div>
</div>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div class="aside_logo"></div>
</body>
</html>
18.z-index
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
position: absolute;
}
.box1{
background-color: red;
top: 50px;
z-index: 1;
}
.box2{
background-color: green;
/*border-radius: 5px 10px 15px 20px;*/
border-radius: 50%;
z-index: 20;
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
19.京东案例
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>京东案例</title>
<!--
网页布局：
上下 结构
上中下 结构
上左右下 结构： 1-2-1 结构
上左中右下 结构： 1-3-1 结构
-->
<style type="text/css">
*{padding: 0;margin: 0}
ul>li {list-style: none;}
a{text-decoration: none;}
.wrap{width: 100%;background-color: rgba(240,243,239,0.98)}
.container{width: 1300px;overflow: hidden;margin: 0 auto} /*overflow:hidden 用在float:left 可以撑开背景*/
.container div{float: left}
.c_l{width: 200px;height: 500px;background-color: green;}
.c_c{width: 800px;height: 500px;background-color: red;
margin-left: 5px}
.c_r{width: 200px;height: 500px;background-color: yellow;
margin-left: 5px;}
.c_l ul li{
padding: 5px 0 5px 10px;
}
.c_l ul li a{
color: #868686;
}
.c_l ul li a:hover{
color: red;
}
.c_l ul li:hover {
background-color: gray;
}
.center_image{
width: 600px;
height: 500px;
float: left;
}
.c_c ul li{
float: right;
position: relative;
right: 2px;
top: 5px;
}
.c_c ul li img{
width: 200px;
height: 165px;
}
.c_r{
position: relative;
}
.c_r p{
color: green;
background-color: gray;
width: 90px;
height: 70px;
line-height: 70px;
text-align: center;
position: absolute;
}
.c_r .p1{
left: 95px;
top: 30px;
}
.c_r .p2{
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="c_l">
<ul>
<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>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
</ul>
</div>
<div class="c_c">
<img src="./images/homesmall1.png" alt="" class="center_image">
<ul>
<li><a href=""><img src="./images/homesmall2.png" alt=""></a></li>
<li><a href=""><img src="./images/homesmall1.png" alt=""></a></li>
<li><a href=""><img src="./images/homesmall2.png" alt=""></a></li>
</ul>
</div>
<div class="c_r">
<div>
<p class="p1">哈哈哈</p>
<p class="p2">嘿嘿嘿</p>
</div>
</div>
</div>
</div>
</body>
</html>
