1.css盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
body{
margin: 0;
}
.box{
width: 400px;
height: 200px;
background-color: gold;
border: 10px #000 dashed;
padding: 40px;
margin: 0;
}
</style>
</head>
<body>
<div class="box">
启动方式:在一个新栈中创建该Activity的实例,
并让多个应用共享该栈中的该Activity实例。
一旦该模式的Activity实例已经存在于摸一个栈中,
任何应用再激活该Activity时,
都会重用该栈中的实例(
会调用实例的onNewIntent())
。其效果相当于多个应用共享一个应用,
不管谁激活该Activity都会进入同一个应用中。
</div>
</body>
</html>
2.浮动:float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.con,.con2{
width: 300px;
border: 1px solid #333333;
margin: 100px auto;
font-size: 0;
}
.con a{
width: 50px;
height: 50px;
font-size: 20px;
display: inline-block;
text-align: center;
line-height: 50px;
text-decoration: none;
margin: 10px 10px;
background-color: gold;
}
/*浮动无法撑开父容器
1.在父元素中添加overflow属性
2.在最后一个子元素中加一个空的div <div style="clear: both"></div> 过时方法
3.clearfix:after 最常使用*/
.con2{
/*overflow: hidden;*/
}
.con2 a{
width: 50px;
height: 50px;
font-size: 20px;
text-align: center;
line-height: 50px;
text-decoration: none;
margin: 10px 10px;
float: left;
background-color: gold;
}
/*一步解决清除浮动和margintop塌陷问题*/
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
/*兼容IE*/
.clearfix{
zoom: 1;
}
.con span{
font-size: 16px;
background-color: gold;
/*display: inline-block;*/
float: left;
}
</style>
</head>
<body>
<div class="con">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
</div>
<div class="con2 clearfix">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
</div>
<div class="con clearfix">
<span>span元素</span>
<span>span元素</span>
<span>span元素</span>
<span>span元素</span>
<span>span元素</span>
<span>span元素</span>
<span>span元素</span>
<span>span元素</span>
</div>
</body>
</html>
3.定位:
(1)相对定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.con{
width: 400px;
height: 400px;
border:1px solid #333333 ;
margin: 100px auto 0;
}
.con div{
width: 200px;
height: 100px;
margin: 20px;
background: gold;
text-align: center;
line-height: 100px;
font-size: 40px;
}
body .box01{
position: relative;
left: 50px;
top: 50px;
background-color: green;
}
</style>
</head>
<body>
<!--相对,绝对,固定-->
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
</body>
</html>
(2)绝对定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
.con{
width: 400px;
height: 400px;
border:1px solid #333333 ;
margin: 100px auto 0;
position: relative;
}
.con div{
width: 200px;
height: 100px;
margin: 20px;
background: gold;
text-align: center;
line-height: 100px;
font-size: 40px;
}
body .box01{
position: absolute;
left: -50px;
top: 50px;
background-color: green;
}
</style>
</head>
<body>
<!--相对,绝对,固定-->
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
</body>
</html>
(3)固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
.con{
width: 400px;
height: 400px;
border:1px solid #333333 ;
margin: 100px auto 0;
position: relative;
}
.con div{
width: 200px;
height: 100px;
margin: 20px;
background: gold;
text-align: center;
line-height: 100px;
font-size: 40px;
}
body .box01{
position: fixed;
left: 0px;
top: 0px;
background-color: green;
}
</style>
</head>
<body>
<!--相对,绝对,固定-->
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
</body>
</html>
(4)定位层级使用z-index设置
4.布局实例:
(1)标题栏:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局实例</title>
<style type="text/css">
.menu{
list-style: none;
background-color: #55a8ea;
padding: 0;
width: 960px;
height: 40px;
margin: 50px auto 0;
position: relative;
}
.menu li{
float: left;
width: 100px;
line-height: 40px;
text-align: center;
}
.menu li a{
font-size: 14px;
font-family: "Microsoft Yahei";
color: white;
text-decoration: none;
}
/*当前页*/
.menu .active{
background-color: orange;
}
.menu li:hover{
background-color: orange;
}
.menu .new{
width: 33px;
height: 20px;
position: absolute;
left: 433px;
top: -9px;
background: url("images/block04.jpg") no-repeat;
}
.menu .new:hover{
background: url("images/block03.jpg") no-repeat;
}
</style>
</head>
<body>
<ul class="menu">
<li class="active"><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 class="new"> </li>
</ul>
</body>
</html>
(2)新闻列表:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<style type="text/css">
.news_list_con{
width: 600px;
height:290px;
border: 1px solid #f0f0f0;
margin: 100px auto 0;
}
.news_list_con h3{
margin: 0px auto;
height: 50px;
width: 560px;
border-bottom: 1px solid #333333;
}
.news_list_con h3 span{
display: inline-block;
height: 50px;
border-bottom: 2px solid red;
font: 18px/50px 'Microsoft Yahei';
color: black;
padding: 0px 15px;
position: relative;
}
.news_list_con ul{
list-style: none;
padding: 0px;
width: 560px;
height: 238px;
margin: 6px auto 0;
}
.news_list_con ul li{
height: 38px;
border-bottom: 1px solid #f0f0f0;
}
.news_list_con ul a{
float:left;
height: 38px;
text-decoration: none;
color: black;
font: 14px/38px 'Microsoft Yahei';
}
.news_list_con ul a:hover{
color: red;
}
.news_list_con ul a:before{
content: "。";
}
.news_list_con ul span{
float:right;
height: 38px;
text-decoration: none;
color: black;
font: 14px/38px 'Microsoft Yahei';
}
</style>
</head>
<body>
<div class="news_list_con">
<h3><span>新闻列表</span></h3>
<ul>
<li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
<li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
<li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
<li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
<li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
<li><a href="">新一代码农心中的女神</a><span>2018-07-30</span></li>
</ul>
</div>
</body>
</html>
(3)翻页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻页</title>
<style type="text/css">
.pagenation{
width: 958px;
height: 40px;
border: 1px solid #ddd;
margin: 50px auto 0;
font-size: 0;
text-align: center;
}
.pagenation a{
display: inline-block;
text-decoration: none;
background-color: gold;
padding: 5px 10px;
font-size: 12px;
font-family: "Microsoft Yahei";
margin: 8px 5px;
color: #333;
}
.pagenation a:hover{
background-color: red;
color: #fff;
}
.pagenation span{
display: inline-block;
font-size: 12px;
}
</style>
</head>
<body>
<div class="pagenation">
<a href="">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<span>...</span>
<a href="">17</a>
<a href="">18</a>
<a href="">19</a>
<a href="">20</a>
<a href="">下一页</a>
</div>
</body>
</html>
(4)导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
.menu{
width: 958px;
height: 40px;
list-style: none;
border: 1px solid #000;
margin: 50px auto 0;
padding: 0;
text-align: center;
line-height: 40px;
font-size: 0;
}
.menu li{
display: inline-block;
font-size: 14px ;
}
.menu li a{
font-family: "Microsoft Yahei";
color: #333;
text-decoration: none;
}
.menu .line{
color: #333;
margin: 0 20px;
}
.menu li a:hover{
color: red;
}
</style>
</head>
<body>
<div class="menu">
<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="">网站建设</a></li>
<li class="line">|</li>
<li><a href="">网站建设</a></li>
<li class="line">|</li>
<li><a href="">网站建设</a></li>
</div>
</body>
</html>