#id
.class
这两个是最先要记住的..id是<a id="Sth">中的Sth,class是<ul class="Oth">中的Oth,挺好记得
margin
老记成marign...看来是align害的,介绍是"层的边框以外留的空白"-以下图片来自 这里
如图:
就是说最外层的是margin,最内层的是padding,是盒模型{主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)}之中的两个最常用的边框修饰标记.
结合以上的,来个例子
<html> <head> <style> #header {margin:0;padding:0;} .item{margin:0;padding:0;} </style> </head> <body> <div id="header"> <h1>Title<h1> </div> <ul class="item"> <li><a href="#">教务信息</a></li> <li><a href="#">竞赛信息</a></li> </ul> </body> </html>
效果是这样:
..嗯,蓝字,还带下划线..那么<a>锚的蓝色怎么办?
a:link, a:visited{color:black;text-decoration: none;} a:hover, a:active{color:red;text-decoration: none;}
text-decoration: none;和color:black;应该会瞬间解决蓝色,而且还会给<a>锚增添了一点亮色(hover属性控制鼠标悬浮效果),高端多了
代码是这样
<html> <head> <style> #header {margin:0;padding:0;color:seagreen;} .item{margin:0;padding:0;} .item li{list-style-type: none;} a:link, a:visited{color:black;text-decoration: none;} a:hover, a:active{color:red;text-decoration: none;} </style> </head> <body> <div id="header"> <h1>Title<h1> </div> <ul class="item"> <li><a href="#">教务信息</a></li> <li><a href="#">竞赛信息</a></li> </body> </html>
那么看看效果
chrome: theworld:
果然还是chrome的好看,有些同学应该注意到title的颜色变了,seagreen这个颜色的确很好看呢,推荐!
看看hover(鼠标盘旋)的效果吧
好看多了不是么!
对了..有的浏览器<ul>还会有小圆点,有人建议<ul style="list-style-type:none">,但这样不利于后期维护,应该放到css中,我是这么实现的,在style加一句 .item li{list-style-type: none;} 瞬间解决ul标签小圆点.
然后还要注意的一点是chrome的缓存问题较为严重,改了css没有变的话,那就得看看是不是缓存害的,换个浏览器或清一下缓存试试,也建议使用Firefox,装上firebug后也非常适合做开发,但就没有chrome启动的快了,怎么选择看个人爱好吧.
今天就到这儿..