div+css基本属性

1.整体居中,最外层div加text-align: center

   设置某个div居中:margin:0 auto;

2.原本左右结构的,突然变成上下结构,并且边框长度设置没问题的时候,可以设置左边的float:left试试

3.设置背景图片,并且图片是往后延续的那种: background-image:url(); background-repeat:repeat-x

4.设置边框线:border: solid 1px #DFEBF9;(方便看清各个div之间的距离)

   单显示右边框线及其颜色:border-right: solid 1px gray;

5.设置在同一行的文字:例如:     真实姓名            王某
                <p>
                    <span style="padding-left: 100px">真实姓名</span> <span style="padding-left: 100px">
                        <label runat="server" id="user">
                            王某</label></span>
                </p>

6.设置“注册”的超链接:<a href="#">注册</a>

   设置图片的超链接:<a href=""><img border="0" src="" /></a>

7.<br /> 插入单个折行(换行)

8.列表中,去掉点的写法:li{margin:0; padding:0; list-sytle:none}

9.关于margin

margin:上10px   右5px   下15px   左20px;
margin:上10px   右左5px   下15px;
margin:上下10px    左右5px;
margin:上下左右10px;

10.#xxx和.xxx

.xxx表示引用的时候使用class方式。可以被多个对象使用。    例如.abc{font-size:14px;}    调用时<div class="abc">汉字</div>

#xxx表示引用的时候使用ID方式。因为ID一般在一个页面唯一,所以,这个使用也相对唯一了。   例如 #aaa{font-size:18px;}    调用时<div id="aaa">汉字</div>

11.margin与padding的区别

 margin和border影响都是对外的,就是说,在里面的表不会因为这两个值改变而改变。padding影响是对内的,会影响在其定义的表内部的表。
(1)margin是和border的距离;
(2)content距离最外层的div都是1px。如果margin为1,border为1,那么content距离margin还是1PX,因为border是会在原来大小上向外加上的。(这点你可以自己建两个div对比查看。像这样:<div style="width:203px; height:50px; border:50px solid red"></div>
<div style="width:203px; height:50px; border:1px solid red"></div>)
(3)margin是对外的,padding是对内的,margin不影响内表,你的content大小是799,799。
(4)margin和padding都有填充的意思。padding会让content范围缩小,而margin不会。

例如:

<div style="width:400px; height:400px; background-color:#CCFF66;border:blue 1px solid; position:inherit">
<div style="margin:10px; padding:10px; width:300px; height:300px; border:red 1px solid; background-color:#CCCCCC; position:inherit">显示内容与红色线之间的距离就是padding定义的,红线与蓝线之间的距离就是margin定义的(以左上角为准)</div>
</div>

12.鼠标移动到切换另一张图片

<a href="#"><img src="image/hua.jpg" border="0" onmouseover="this.src='image/hua2.jpg'" onmouseout="this.src='image/hua.jpg'" /></a>

posted @ 2013-01-11 15:46  枕头妹  阅读(547)  评论(3编辑  收藏  举报
View Code