css学习笔记.1--以校园资讯平台为例

浏览数：26 / 时间：2015年06月09日

#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>