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

#id

.class

  这两个是最先要记住的..id是<a id="Sth">中的Sth,class是<ul class="Oth">中的Oth,挺好记得

margin

  老记成marign...看来是align害的,介绍是"层的边框以外留的空白"-以下图片来自 这里 

  如图:

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

  就是说最外层的是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>

效果是这样:

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

 ..嗯,蓝字,还带下划线..那么<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:

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

果然还是chrome的好看,有些同学应该注意到title的颜色变了,seagreen这个颜色的确很好看呢,推荐!

看看hover(鼠标盘旋)的效果吧

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

好看多了不是么!

对了..有的浏览器<ul>还会有小圆点,有人建议<ul style="list-style-type:none">,但这样不利于后期维护,应该放到css中,我是这么实现的,在style加一句 .item li{list-style-type: none;} 瞬间解决ul标签小圆点.

然后还要注意的一点是chrome的缓存问题较为严重,改了css没有变的话,那就得看看是不是缓存害的,换个浏览器或清一下缓存试试,也建议使用Firefox,装上firebug后也非常适合做开发,但就没有chrome启动的快了,怎么选择看个人爱好吧.

今天就到这儿..

css学习笔记.1--以校园资讯平台为例,布布扣,bubuko.com

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

上一篇:cakephp 中连接查询多表 或group by


下一篇:RequireJS