用CSS制作简单的导航条和简单的布局框架

63 阅读 0 评论 42 点赞

我是靠谱客的博主怕黑绿茶，最近开发中收集的这篇文章主要介绍用CSS制作简单的导航条和简单的布局框架，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

导航条和简单的一个布局

试着做一些综合性的练习，后期做的页面丰富性会高一点的。导航条在网页中非常常见的，网页中的导航器或者导航条一般都是用无序列表制作的，今天我做了一个简单的导航条和一个简单的布局框架。

感兴趣的话可以在我这个代码上修改，也可以自己去试着写写，其实是很简单的。

在这里一般我把CSS代码和html写在一起了方便一点。

导航条的源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条的练习</title>
    <style>
        *{
            /*初始化网页设置*/
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 600px;
            margin: 10px auto;
            background-color: #6366ff;
            /*子元素浮动时 要解决父元素高度塌陷问题*/
            overflow: hidden;
        }
        .nav a{
            display: block;
            width: 100%;
            padding: 3px 0;
            text-decoration: none;
            text-align: center;
            font-weight: bolder;
            color: white;
        }
        .nav li{
            /*为子元素设置浮动*/
            float: left;
            width: 100px;
            list-style-type: none;
        }
        .nav a:hover{
            /*设置一个鼠标划过的效果*/
            background-color: brown;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li><a href="#" title="首页">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">热点</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">下载</a></li>
    <li><a href="#">商城</a></li>
</ul>
</body>
</html>

一般的导航器或者是导航条都会用无序列表来制作，在制作的时候，用到了浮动属性。对于浮动属性，当子元素添加浮动时，父元素会有高度塌陷的问题，一定不能忘记解决

解决父元素的高度塌陷问题：

1. 对于IE6以及一下版本使用 zoom：1

2. 对于火狐、谷歌浏览器使用 overflow的非默认值。一般常用overflow：hidde

显示效果

简单布局的源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 800px;
            height: 100px;
            margin: 5px auto;
            text-align: center;
            background-color: #fba;
        }
        .content{
            width: 800px;
            height: 400px;
            margin: 5px auto;
            background-color: #eb00e8;
            overflow: hidden;
        }
        .menu{
            width: 200px;
            height: 100%;
            text-align: center;
            background-color: bisque;
            float: left;
        }
        .news{
            width: 380px;
            height: 100%;
            margin: 0 10px;
            background-color: #a08796;
            float: left;
            overflow: hidden;
        }
        .news1{
            width: 120px;
            height: 50%;
            text-align: center;
            background-color: #6366ff;
            float: left;
        }
        .news2{
            width: 120px;
            height: 50%;
            margin: 0 10px;
            text-align: center;
            background-color: #feb7ff;
            float: left;
        }
        .news3{
            width: 120px;
            height: 50%;
            text-align: center;
            background-color: #b3fff5;
            float: left;
        }
        .news4{
            width: 380px;
            height: 50%;
            /*position: relative;*/
            /*top: 200px;*/
            /*left: 0;*/
            text-align: center;
            background-color: deepskyblue;
        }
        .pro_photo{
            width: 200px;
            height: 100%;
            text-align: center;
            background-color: pink;
            float: left;
        }
        .footer {
            width: 800px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
            background-color: orange;
        }
    </style>
</head>
<body>
<!--<div class="wed">-->
    <div class="header">
        <p>这里放banner、导航条、登录注册信息等</p>
    </div>
    <div class="content">
        <div class="menu">
            <p>这是存放一系列的菜单选项</p>
        </div>
        <div class="news">
            <div class="news4">这里是div 新闻4</div>
            <div class="news1">这里是div新闻1</div>
            <div class="news2">这里是div新闻2</div>
            <div class="news3">这里是div新闻3</div>
        </div>
        <div class="pro_photo">
            <p>这里是图片栏</p>
        </div>
    </div>
    <div class="footer">这里是网页的页脚</div>
<!--</div>-->

</body>
</html>

一般的网页布局是这样的艾，在这个基础上做一些修改，添加一些复杂的东西，一个不错的静态网页就成了阿，颜色搭配的话为了鲜明一点，选的颜色突出一些，平时也可以提升提升自己的审美的。

下面是显示效果