CCS界面组件

概述

这里的界面组件是HTML提供的常见用户界面的统称

导航菜单

菜单由一组链接组成（桌面程序由一系列按钮组成），为了使链接具有层次结构，我们用ul或ol来分组和管理链接元素

纵向菜单制作

下面是仿百度首页的HTML标签

   <nav class="list1">
       <ul> <!--无序列表-->
           <li><a href="#">新闻</a></li>        <!--# 是占位符，用于将来替换成实际URL-->
           <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>
           <li><a href="#">文库</a></li>
           <li><a href="#">更多</a></li>
       </ul>
   </nav>

没有应用样式之下的默认样式

下面是默认的盒模型边框、内边距、外边距尺寸

 添加整体CSS样式

/*去掉默认的内外边距*/
*{margin: 0;padding: 0}
/*设置导航容器在页面中的位置和大小*/
nav{margin: 60px;width: 100px;}
/*给整个无序列表容器添加边框*/
.list1 ul{border: 2px solid #f00;border-radius: 10px;padding: 5px 10px 3px;}

效果如下

添加列表项CSS样式

/*去掉li前面的圆点，为每个列表项添加3px上下内边距和10px左右内边距;去除超级链接a的下划线*/
.list1 li{list-style-type: none;padding: 3px 10px;}
.list1 ul a{text-decoration: none}

为每个列表项添加一条“下划线”

/*为每个列表下，添加一条“下划线”*/
.list1 li+li{border-top: 1px solid green;}

这里使用了特别选择符，“非首位子选择符” .list1 li+li  这个选择符会先以.list1为祖先选择符查找，“ + ”本身是紧邻同胞选择符，所以 li+li 会选择紧跟着li后面的li，由于li是连续相同的元素，所以会一直选择下去，

整体看起来“下划线”是在元素的下面，其实它是每个元素的上边框。第一个元素没有被设置

设置悬停背景

/*处理超级链接*/
.list1 a{font: 20px Exo,helvetica,arial,sans-serif;font-weight: 400;color: black;background: bisque;}
.list1 a:hover{background-color: #069}

优化纵向导航菜单

/*去掉默认的内外边距*/
*{margin: 0;padding: 0}
/*设置导航容器在页面中的位置和大小*/
nav{margin: 60px;width: 100px;}
/*给整个无序列表容器添加边框*/
.list1 ul{border: 2px solid #f00;border-radius: 10px;padding: 5px 10px 3px;}
/*去掉li前面的圆点，为每个列表项添加3px上下内边距和10px左右内边距;去除超级链接a的下划线*/
.list1 li{list-style-type: none;}
.list1 ul a{text-decoration: none}
/*为每个列表下，添加一条“下划线”*/
.list1 li+li a{border-top: 1px solid green;}
/*处理超级链接*/
.list1 a{display:block;padding:3px 10px;font: 20px Exo,helvetica,arial,sans-serif;font-weight: 400;color: black;background: bisque;}
.list1 a:hover{background-color: #069}

横向菜单制作

默认情况下列表项目是上下堆叠的，要把它变成水平排列需要借助浮动列表项

下面还是上面的HTML示例标签

   <nav class="list1">
       <ul> <!--无序列表-->
           <li><a href="#">新闻</a></li>        <!--# 是占位符，用于将来替换成实际URL-->
           <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>
           <li><a href="#">文库</a></li>
           <li><a href="#">更多</a></li>
       </ul>
   </nav>

CSS样式

/*设置导航容器在页面中的位置*/
nav{margin: 150px 300px;}
/*强制ul包围浮动的li元素*/
.list1 ul{overflow: hidden;}
/*让li浮动起来，水平排列*/
.list1 li{float: left;list-style-type: none;}
/*对超级链接进行处理*/
.list1 a{display: block;padding: 0 16px;text-decoration: none;color: blue;}
.list1 a:hover{color: red;}

效果如下

 浮动让列表项li由垂直堆叠变成水平排列，display: block;让超级链接a由收缩变成扩张使得整个li都是可点击的

下拉菜单

下拉菜单是一组以嵌套列表为基础的导航