网页设计|CSS样式表
网页设计|CSS样式
写在前面
需要说明一下，网页和网站不能划等号。也就是说别人问起你会不会建站，就不是问会不会写网页了。作为程序员，写网页应该是最基本的技能了。所以我们今天接着了解网页设计的内容。
如图，我用了一个简单的目录，主要代码如下：
<h3>友情链接</h3>
<hr/>
<ul class="menu">
<li> <a href="www.baidu.com">百度搜索</a></li>
<li> <a href="www.baidu.com">搜狐体育</a></li>
<li> <a href="www.baidu.com">网易邮箱</a></li>
<li> <a href="www.baidu.com">王道论坛</a></li>
<li> <a href="www.baidu.com">电脑小孩</a></li>
</ul>
现在我们给他加上样式，让他变的好看点
在<head>{添加代码}</head>的位置加上下面的代码：
<style type="text/css">
.menu{
margin: 0;
padding: 0;
height:30px;
list-style-type:none;
}
.menu li{
float:left;
width:100px;
background-color: black;
text-align: center;
padding: 5px;
}
.menu li a{
color:white;
text-decoration: none;
font-size: 12px;
}
.menu li a:hover{
color: yellow;
}
</style>
然后看看他现在的样式：
改变的样式
很明显这个菜单栏改变了很多。但是一般的情况下我们不会把css样式直接放到html的页面当中，而是单独新建一个后缀为.css的文件，再在HTML页面中引用即可。比如我将上面的css代码放在文件名为1.css的文本中，注意去掉首尾的<style>和</style>
然后在HTML的head部分写入：
也能得到一样的效果。之所以这样做的原因是为了方便管理。因为其他页面也会用到1.css这个文件，这样就不用在每个页面的head部分都写上一样的代码了。
腾讯云开发者
