css 基础样例

最新推荐文章于 2025-07-11 10:15:28 发布

wangzhantao

最新推荐文章于 2025-07-11 10:15:28 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/wangzhantao/article/details/84392250

css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了使用CSS进行网页布局的方法，包括整体字体设置、布局调整、超链接样式及列表样式的具体实现，并解决了居中显示的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



当用火狐查看某些css不能用（带有横线的），则可能是前面有差不多同样功能的css覆盖了这个相同的css

 整体布局字体设置：
 
 body {
    font-family: "宋体";
    font-size: 12px;
    font-weight: normal;
}
 
布局
.layout {
    clear: both;
    margin: 0 auto; //div 居中显示
    overflow: hidden;
    text-align: left;
    width: 950px;
}
 
超链接设置
a:link, a:visited {
    color: rgb(0, 80, 154);
    text-decoration: none;
}

ul li a:hover{
    color: rgb(204, 0, 0);
    text-decoration: underline;
}


列表样式设置
.topnews li {
    color: rgb(0, 80, 154);
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    padding-left: 8px;
    width: 428px;
}
 
ul li {
    list-style: none outside none;
}

margin:0 auto 解释：

margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right

因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中），如果居中不好用则检查html顶部的 <!DOCTYPE 是不是正确的。

附件中是联系页面布局写的例子。