首页 > 代码库 > css学习笔记.1--以校园资讯平台为例

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

2024-07-10 15:32:06   218人阅读

#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启动的快了,怎么选择看个人爱好吧.

今天就到这儿..


联系
我们