08. CSS 常用工具、布局

CSS 导航栏

下拉菜单

网页布局

一、CSS 导航栏

拥有易用的导航栏，对于任何网站都非常重要。通过 CSS 可以把枯燥的 HTML 菜单转换成漂亮的导航栏。

(1) 导航栏 - 链接列表

导航栏基本上是一个链接列表，所以使用 <ul> 和<li>元素非常适合，根据实际开发需求也可以使用自定义列表创建导航栏。

下面是创建导航栏链接列表的标准 HTML 结构：

<ul>
    <li><a href="URL">HTML</a></li>
    <li><a href="URL">CSS</a></li>
    <li><a href="URL">JavaScript</a></li>
    <li><a href="URL">jQuery</a></li>
</ul>

(2) 垂直导航栏

垂直导航栏通常都位于网站左侧，也可以叫左侧导航栏。

如果需要构建垂直导航栏，只需要给 a 元素定义样式就可以了。

因为 a 元素为内联元素，所以首先就需要把他转换为块元素，使用 CSS 定义 display:block ，即显示块元素的链接，让整体变为可点击链接区域，不只是链接文本。块元素默认情况下，是最大宽度，所以必需给导航栏指定宽度，再添加其他用于美化的样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左侧导航栏</title>
<style>
*{padding:0;margin:0;}
ul{
    list-style:none outside;
}
a{
    display:block;
    background:#99CC33;
    width:120px;
    height:35px;
    line-height:35px;
    color:white;
    font-weight:bold;
    text-decoration:none;
    text-align:center;
}
a:hover{
    color:black;
    background-color:#669933;
}
</style>
</head>
<body>
<ul>
    <li><a href="URL">IT互联网</a></li>
    <li><a href="URL">职业技能</a></li>
    <li><a href="URL">语言学习</a></li>
    <li><a href="URL">设计创作</a></li>
    <li><a href="URL">兴趣爱好</a></li>
    <li><a href="URL">职业规划</a></li>
</ul>
</body>
</html>

(3) 水平导航栏

有两种创建水平导航栏的方法，使用内联或浮动的列表项。这两种方法都很好，但如果需要每个菜单项都拥用有相同的大小，就必须使用浮动的方法。

① 内联列表项

创建一个水平导航栏的方法之一是就是把 li 元素转换为内联元素，默认 li 元素是块级元素，所以使用 CSS 设置 display:inline; 可以删除每个列表项之前和之后的换行符，以显示一行 。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内联水平导航栏</title>
<style>
*{padding:0;margin:0;}
ul{
    list-style:none outside;
    padding:10px 0;
}
li{
    display:inline;
}
a{
    background:#0000CD;
    color:white;
    font-weight:bold;
    text-decoration:none;
    padding:10px;
}
a:hover{
    background-color:#191970;
}
</style>
</head>
<body>
<ul>
    <li><a href="URL">首页</a></li>
    <li><a href="URL">公司简介</a></li>
    <li><a href="URL">经营发展</a></li>
    <li><a href="URL">产品展示</a></li>
    <li><a href="URL">新闻中心</a></li>
    <li><a href="URL">在线服务</a></li>
    <li><a href="URL">企业文化</a></li>
</ul>
</body>
</html>

注意：如果只给 a 元素设置内边距，而不给列表设置，那么链接会出现在 ul 元素之外，所以必须给 ul 设置顶和底内边距。

② 浮动列表项

使用内联列表项，链接的宽度是不同的，为了让所有链接拥有相等的宽度，需要给 li 元素设置浮动，并把 a 元素转换为块元素再指定宽度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动水平导航栏</title>
<style>
*{padding:0;margin:0;}
ul{
    list-style:none outside;
    overflow:hidden;
}
li{
    float:left;
}
a{
    display:block;
    background:#CCCCCC;
    width:120px;
    height:35px;
    line-height:35px;
    color:black;
    font-weight:bold;
    text-decoration:none;
    text-align:center;
    margin-right:2px;
}
a:hover{
    color:white;
    background-color:#000000;
}
</style>
</head>
<body>
<ul>
    <li><a href="URL">首页</a></li>
    <li><a href="URL">公司简介</a></li>
    <li><a href="URL">经营发展</a></li>
    <li><a href="URL">产品展示</a></li>
    <li><a href="URL">新闻中心</a></li>
    <li><a href="URL">在线服务</a></li>
    <li><a href="URL">企业文化</a></li>
</ul>
</body>
</html>

二、下拉菜单

<div class="dropdown">
    <button type="button" class="dropbtn">下拉菜单按钮</button>
    <ul class="dropdown-content">
        <li><a href="#">下拉菜单项 1</a></li>
        <li><a href="#">下拉菜单项 2</a></li>
        <li><a href="#">下拉菜单项 3</a></li>
    </ul>
</div>


/* 样式重置 */
ul{padding:0;margin:0;}
li{list-style: none;}
a{text-decoration:none;}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown{
    position:relative;
    display:inline-block;
}

/* 下拉菜单内容，设置为隐藏 */
.dropdown-content{
    min-width:100%;
    background-color:#F5F5F5;
    position:absolute;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
    text-align: center;
    line-height:40px;
}

/* 下拉按钮样式 */
.dropbtn{
    color:white;
    font-size:16px;
    padding:15px;
    border:none;
    background-color:#00CD66;
    cursor:pointer;
}

/* 下拉菜单链接的样式 */
.dropdown-content a{
    color:black;
}

/* 鼠标移入后显示下拉菜单 */
.dropdown:hover .dropdown-content{
    display:block;
}

/* 鼠标移入后修改链接的背景色 */
.dropdown-content li:hover{
    background-color:#E8E8E8;
}

/* 下拉菜单显示后修改下拉按钮的背景色 */
.dropdown:hover .dropbtn{
    background-color:#008B00;
}

HTML 部分：

  • 菜单一般都用 <ul>元素来创建一个容器，用于包含下拉菜单的内容，并自定义它需要出现的位置。

  • 因为菜单一般都是链接，使用 <a>标签，将它放入每个<li>中。

  • 最后，再使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

  • .dropdown 类使用 position:relative，这将设置下拉菜单的内容放置在下拉按钮（使用 position:absolute）的右下角位置。

  • .dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移入指定元素后显示。

  • 如果希望下拉菜单与下拉按钮的宽度一致，可将宽度设置为 100%，overflow:auto 属性可以指定在小尺寸屏幕上滚动。

  • :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单，将下拉菜单容器设置为 display:block;

下拉菜单的对齐方式：

  • 如果下拉菜单设置了 float:left 样式，那么还需要在隐藏的下拉菜单中添加绝对定位 left:0，即从 left:0 处开始从左向右显示菜单内容，否则会超出浏览器左边窗口。

  • 如果下拉菜单设置了 float:right 样式，默认都是从左向右显示，菜单内容则会超出浏览器右边窗口，所以还需要设置 绝对定位 right:0，让下拉菜单内容从右向左。

.dropdown-content{
    min-width:150px;
    background-color:#F5F5F5;
    position:absolute;
    right:0;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}

导航栏下拉菜单:

<ul>
    <li><a href="#shop" class="active">在线商城</a></li>
    <li><a href="#news">产品展示</a></li>
    <div class="dropdown">
        <a href="#" class="dropbtn">下拉菜单</a>
        <div class="dropdown-content">
            <a href="#">子菜单 1</a>
            <a href="#">子菜单 2</a>
            <a href="#">子菜单 3</a>
        </div>
    </div>
</ul>


*{margin:0;padding:0;}
ul{
    list-style-type:none;
    background-color:#333;
    overflow:hidden;
}
li{
    float:left;
}
li a, .dropbtn{
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}

li a:hover, .dropdown:hover .dropbtn{
    background-color:#111;
}

.dropdown{
    display:inline-block;
}

.dropdown-content{
    min-width:200px;
    background-color:#F9F9F9;
    position:absolute;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}

.dropdown-content a{
    color:black;
    padding:12px 16px;
    text-decoration:none;
    display:block;
}

.dropdown-content a:hover{
    background-color:#F1F1F1;
}

.dropdown:hover .dropdown-content{
    display: block;
}

三、网页布局

(1) 一列布局

宽度自适应，只需要按照百分比来设置宽度，内容就可以根据浏览器窗口自动调节大小

  • 宽度用百分比设置

  • 一般中间的内容框不设置高度，会让它自适应。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一列自适应布局</title>
<style>
*{margin:0;padding:0;}
#header{
    height:50px;
    background:blue;
}
#main{
    width:80%;
    height:800px; /* 在实际开发中不设置列的高度，让高度自适应。 */
    background:green;
    margin:0 auto;
}
#footer{
    width:80%;
    height:50px;
    background:gray;
    margin:0 auto;
}
</style>
</head>
<body>
<div id="header">页头</div>
<div id="main">主体内容</div>
<div id="footer">页脚</div>
</body>
</html>

(2) 二列布局

<div id="warp">
    <div id="herder">页头</div>
    <div id="nav">导航</div>
    <div id="main">
        <div class="main-left">左-上</div>
        <div class="main-right">右-上</div>
    </div>
    <div id="content">
        <div class="content-left">左-下</div>
        <div class="content-right-sup">右-上</div>
        <div class="content-right-sub">右-下</div>
    </div>
    <div id="footer">页脚</div>
</div>

*{margin:0;padding:0;}
#warp{
    width:960px;
    margin:0 auto;
    margin-top:10px;
}
#herder{
    height:50px;
    background:blue;
}
#nav{
    height:30px;
    background:orange;
    margin:10px 0;
}
#main{
    width:100%;
    margin-bottom:10px;
    overflow:hidden;
}
#main .main-left{
    width:640px;
    height:200px;
    background:yellow;
    float:left;
}
#main .main-right{
    width:300px;
    height:200px;
    background:pink;
    float:right;
}
#content{
    width:100%;
    overflow:hidden;
}
#content .content-left{
    width:640px;
    height:800px;
    background:lightgreen;
    float:left;
}
#content .content-right-sup{
    width:300px;
    height:500px;
    background:lightblue;
    float:right;
}
#content .content-right-sub{
    width:300px;
    height:240px;
    background:purple;
    margin-top:20px;
    float:right;
}
#footer{
    height:50px;
    background:gray;
    margin-top:10px;
}

(3) 三列布局

① 宽度自适应三列布局

三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。

<div id="herder">页头</div>
<div id="main">
    <div class="main-left">左列</div>
    <div class="main-center">中间</div>
    <div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>

*{margin:0;padding:0;}
#herder{
    height:50px;
    background:blue;
}
#main{
    width:100%;
    overflow:hidden;
}
#main .main-left{
    width:25%;
    height:800px;
    background:red;
    float:left;
}
#main .main-center{
    width:50%;
    height:800px;
    background:lightgreen;
    float:left;
}
#main .main-right{
    width:25%;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    height:50px;
    background:gray;
}

② 左右两列固定宽度，中间内容宽度自适应

要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。

<div id="herder">页头</div>
<div id="main">
    <div class="main-left">左列</div>
    <div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。</div>
    <div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>

*{margin:0;padding:0;}
#herder{
    height:50px;
    background:blue;
}
#main{
    width:100%;
    position:relative;
}
#main .main-left{
    width:200px;
    height:800px;
    background:red;
    position:absolute;
    left:0;
    top:0;
}
#main .main-center{
    height:800px;
    background:lightgreen;
    margin:0 310px 0 210px;
}
#main .main-right{
    width:300px;
    height:800px;
    background:pink;
    position:absolute;
    right:0;
    top:0;
}
#footer{
    height:50px;
    background:gray;
}

(4) 混合布局

<div id="header">头部</div>
<div id="nav">
    <ul>
        <li><a  class="home" href="#">首页</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>
        <li><a href="#">服务</a></li>
        <li><a href="#">社区</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
<div id="main">
    <div class="left">左边</div>
    <div class="right">
        <div class="sup">
            <div class="sup-left">右-左</div>
            <div class="sup-right">右-右</div>
        </div>
        <div class="middle">右-中</div>
        <div class="sub">右-下</div>
    </div>
</div>
<div id="footer">页脚</div>

*{margin:0;padding:0;}
#header{
    height:30px;
    background:blue;
    margin-bottom:10px;
}
#nav{
    width:960px;
    margin:0 auto;
    margin-bottom:10px;
}
#main{
    width:960px;
    height:800px;
    margin:0 auto;
    overflow:hidden;
}
#main .left{
    width:200px;
    height:800px;
    background:lightgreen;
    float:left;
}
#main .right{
    width:750px;
    height:800px;
    float:right;
}
#main .right .sup{
    height:200px;
    margin-bottom:10px;
}
#main .right .sup-left{
    width:370px;
    height:200px;
    background:pink;
    float:left;
}
#main .right .sup-right{
    width:370px;
    height:200px;
    background:orange;
    float:right;
}
#main .right .middle{
    height:300px;
    background:yellow;
    margin-bottom:10px;
}
#main .right .sub{
    height:280px;
    background:purple;
}
#footer{
    width:960px;
    height:50px;
    background:gray;
    margin:0 auto;
    margin-top:10px;
}
#nav ul{
    list-style:none;
    background:lightgray;
    overflow:hidden;
}
#nav li{
    float:left;
}
#nav li a{
    display:block;
    color:black;
    width:104px;
    height:30px;
    line-height:30px;
    text-decoration:none;
    text-align:center;
}
#nav .home{
    width:128px;
}
#nav li a:hover{
    color:white;
    background:green;
}
posted @ 2019-07-16 12:50  胤小飞  阅读(387)  评论(0)    收藏  举报