1、对齐操作
使用margin属性进行水平对齐；使用position进行左右对齐；使用float属性进行左右对齐。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="div"></div>
</body>
</html>
对应的CSS文件：
*{
margin: 0px;
}
.div {
width: 70%;
height: 1000px;
background-color: red;
margin: 100px auto;
/*margin-left: auto;*/
/*margin-right: auto;*/
/*position: absolute;*/
/*left:0px;*/
/*float:right;*/
}
2、分类操作
属性：
height:设置元素高度
line-height:设置行高
max-height:设置元素的最大高度
max-width:设置元素的最大宽度
min-width:设置元素的最小宽度
min-height:设置元素的最小高度
width:设置元素宽度
<body>
<p class="p1">This is my web page.This is my web page.This is my web page.</p>
<p class="p2">This is my web page.This is my web page.This is my web page.</p>
<p class="p3">This is my web page.This is my web page.This is my web page.</p>
</body>
对应的CSS文件：
.p1{
/*width:400px ;*/
line-height: normal;
/*max-width:300px;*/
min-width: 300px;
}
.p2{
width: 400px;
line-height: 200%;
}
.p3{
width:400px;
line-height: 50%;
}
属性：
clear:设置一个元素的侧面是否允许其他的浮动元素
cursor:规定当指向某元素之上时显示的指针类型（鼠标的显示类型，例如箭头、手型）
display:设置是否及如何显示元素（列表可通过该属性，更改成横向的或者竖向的）
float:定义元素在哪个方向浮动
position:把元素放置到一个静态的、相对的、绝对的固定的位置
visibility:设置元素是否可见或不可见
<body>
<p>hello hello hello </p>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</body>
对应的CSS文件：
p{
/*cursor: all-scroll;*/
cursor:ew-resize;
}
li{
display: inline;
visibility: hidden;
}
3、导航栏
<body>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
对应的CSS文件：
/*垂直导航栏*/
/*ul{*/
/*list-style-type: none;*/
/*margin:0px;*/
/*padding: 0px;*/
/*}*/
/*a:link,a:visited{*/
/*text-decoration: none;*/
/*display: block;*/
/*background-color: burlywood;*/
/*color: aliceblue;*/
/*width: 50px;*/
/*text-align: center;*/
/*}*/
/*a:active,a:hover{*/
/*background-color: crimson;*/
/*}*/
/*水平导航栏*/
ul{
list-style-type: none;
margin:0px;
padding: 0px;
background-color:burlywood ;
width: 250px;
text-align: center;
}
a:link,a:visited{
font-weight: bold;
text-decoration: none;
background-color: burlywood;
color: aliceblue;
width: 50px;
text-align: center;
}
a:active,a:hover{
background-color: crimson;
}
li{
display: inline;
padding:3px ;
padding-left: 5px;
padding-right: 5px;
}
4、图片
<body>
<div class="container">
<div class="image">
<a href="#" target="_self">
<img src="1.jpg" alt="风景" width="150px" height="150px">
</a>
<div class="text">8月份的维多利亚</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="1.jpg" alt="风景" width="150px" height="150px">
</a>
<div class="text">8月份的维多利亚</div>
</div>
</div>
</body>
对应的CSS文件：
body{
margin: 10px auto;
width: 50%;
height: auto;
}
.image{
border: 10px solid darkgray;
width: auto;
height: auto;
float: left;
text-align: center;
margin:5px;
}
img{
margin: 5px;
/*透明度*/
opacity: 0.8;
}
.text{
font-size:12px;
margin-bottom: 5px;
}
a:hover{
background-color: burlywood;
}