第五节课行内样式CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<style type="text/css">


div{
margin-right: auto;
margin-left: auto;
height: 200px;
background: purple;
width: 830px;
text-align: center;
font-size: 30px;


}

.div1{
background: coral;
float: left;
width: 200px;
}

.div2{
background: blue;
float: left;
width: 200px;
margin-left: 10px;
}

.div3{
background:peachpuff;
float: left;
width: 200px;
margin-left: 10px;
}

.div4{
background: cadetblue;
float: left;
width: 200px;
margin-left: 10px;
}

ul {   
padding:0;
margin: 0;
width: 450px;
border: 1px dashed #666;
padding: 100px 5px;

}

li { 
list-style: none; /*去掉默认列表项样式*/
float: left;  /*左浮动*/
width: 40px;  /*设置宽度*/
height: 40px; /*设置高度*/
line-height: 40px; /*文本垂直居中*/
text-align: center; /*文本水平居中*/
border-radius: 50%; /*设置边框圆角*/
background: skyblue; /*背景色天蓝*/
margin-right: 5px; /*每个球之间的右外边距*/
}
ul li:last-child {
background-color: lightgreen;
}

ul:after {  /*子块撑开父块*/
content:'';  /*在子元素尾部添加空内容元素*/
display: block;  /*并设置为块级显示*/
clear:both;   /*清除二边的浮动*/
/*visibility: none;  !*hidden也行*!*/
/*height: 0;*/
/*_height: 1%;  !*针对IE*!*/
}

</style>

<body >
<div>


<DIV >
  <p valign="middle">包</p>         
</DIV>


<DIV>
     <p>你</p>        
</DIV>


<DIV>
      <p>中</p>       
</DIV>

<DIV>
       <p>奖</p>      
</DIV>


</div>


<ul>
<li id="item1">1</li>
<li>2</li>
<li class="green red">3</li>
<li>4</li>
<li>5</li>
<li id="item2">6</li>
<li>7</li>
<li class="php css">8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
相关文章
