1.居中对齐(块级,内联)

margin:auto;
text-align:center;

2.尺寸

设置高度(高度,最大高度,最小高度)

height:10px;
max-height: 10px;
min-height:5px

设置宽度(宽度,最大宽度,最小宽度)

width:200px;
max-width: 300px;
min-width:200px;

设置行高

line-height: 10px

3.元素显示——内联,块级,隐藏

p {display: inline}
span{display: block} div {display: none}

4.水平导航栏

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:5em;
text-decoration:none;
color:white;
background-color:#c3c3c3;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

</body>
</html>

5.元素可见与隐藏

.class1 {visibility:visible}
.class2 {visibility:hidden}

visibility:hidden和display:none有区别:

visibility:hidden——对象隐藏后,还有占有相应的空间大小

display:none——对象隐藏后,对象不占任何空间

6.改变光标

cursor:auto      自动

cursor:default  箭头

cursor:pointer    手指

cursor:text    文本

cursor:wait   转圈

cursor:help     帮助

posted on 2017-08-23 14:54  迷失的小幸运  阅读(68)  评论(0)    收藏  举报