CSS练习2
#display属性
块级元素 内联元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>display属性</title>
<style>
*{padding:0;margin:0;}
.contain{width:900px;margin:50px auto;}
.block{display:block;}
.inline{display:inline;}
.inline-b-box span{margin:20px;}
.setW{width:300px;background:green;}
.inline-block{display:inline-block;}
.none{display:none;}
</style>
</head>
<body>
<!--display:block-->
<div class="contain">
<span>我是内联元素</span>
<span>我是内联元素</span>
<span class="block">我会变成块元素</span>
</div>
<!--display:inline-->
<div class="contain">
<p>我是块元素</p>
<p>我是块元素</p>
<p class="inline">我会变成内联元素</p>
<p class="inline">我会变成内联元素</p>
</div>
<!--display:inline-block-->
<div class="contain inline-b-box">
<p class="setW">我是块元素<span>我是内联元素</span></p>
<span class="inline-block">我会变成内联块元素，这样我就能设置marginTop和marginBottom了</span>
</div>
<!--display:none-->
<div class="contain">
<p>我是块元素</p>
<p>我是块元素</p>
<p class="none">我会消失</p>
</div>
</body>
</html>
#京东登录栏，进行行内块级元素的设置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿京东最上方导航</title>
<style>
*{padding:0;margin:0;color:#666;}
a{text-decoration:none;color:#666;}
a:hover{color:#b20000;}
ul{list-style:none;}
.box{
height:30px;
line-height:30px;
font-size:12px;
background:#f1f1f1;
}
.wrap{
width:1000px;
margin:0 auto;
}
ul li{
display:inline-block;
vertical-align:middle;
padding:0 8px;
}
ul li a{
display:inline-block;
}
.reg{
color:#b20000;
}
ul li.line{
width:1px;
height:12px;
overflow:hidden;
background:#ddd;
padding:0;
}
a.tel{
padding-left:20px;
background:url(img/tel.png) no-repeat left 5px;
}
a.tel:hover{
background-position:left -20px;
}
</style>
</head>
<body>
<div class="box">
<div class="wrap">
<ul>
<li><a href="">你好，请登录</a> <a href="" class="reg">免费注册</a></li>
<li class="line"></li>
<li><a href="">我的订单</a></li>
<li class="line"></li>
<li><a href="">我的京东</a></li>
<li class="line"></li>
<li><a href="">京东会员</a></li>
<li class="line"></li>
<li><a href="">企业采购</a></li>
<li class="line"></li>
<li><a href="" class="tel">手机京东</a></li>
<li class="line"></li>
<li><a href="">关注京东</a></li>
<li class="line"></li>
<li><a href="">客户服务</a></li>
<li class="line"></li>
<li><a href="">客户服务</a></li>
</ul>
</div>
</div>
</body>
</html>
#3 定位在网页中的应用，图片轮播
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿京东轮播图</title>
<style>
*{padding:0;margin:0;}
.focus{
position:relative;
width:730px;
height:454px;
margin:50px auto;
}
.page-con{
position:absolute;
z-index:2;
text-align:center;
bottom:10px;
width:100%;
font-size:0;
}
.page-con li{
font-size:12px;
display:inline-block;
width:18px;
height:18px;
line-height:18px;
border-radius:50%;
margin:0 2px;
color:#fff;
background:#3e3e3e;
cursor:pointer;
}
</style>
</head>
<body>
<div class="focus">
<div><a href=""><img src="img/focus.jpg"/></a></div>
<ul class="page-con">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>