CSS——对列表应用样式和创建导航栏

最新推荐文章于 2023-12-18 17:22:09 发布
原创 最新推荐文章于 2023-12-18 17:22:09 发布 · 1.8k 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css
本文介绍了如何使用CSS对列表进行样式设计，包括创建基本样式列表、垂直导航条、水平分页导航条、水平导航栏、下拉菜单、搜索框和弹出层。通过实例代码展示了各种导航元素的实现过程和效果。

对列表应用样式和创建导航栏

基本样式

对ul应用列表图片，设置方式为设置background图片。例如：

    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        ul li{
            background: url("image/tick.png") no-repeat 0 50%;
            padding-left: 30px;
        }
    </style>

效果如下：
这里写图片描述

另一种方式：

ul.stars li:before {content: url(star.gif); margin-left: 8px}
ul.stars li {text-indent: -20px; list-style: none;}

基本垂直导航条

主要CSS样式为：

        ul.nav {
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: 8em;
            background-color: #8bd400;
            border: 1px solid #486b02;
        }
        ul.nav a{
            display: block;
            color: #2b3f00;
            text-decoration: none;
            border-top: 1px solid #e4ffd3;
            border-bottom: 1px solid #486b02;
            background: url("image/arrow.gif") no-repeat 5% 50%;
            padding: 0.3em 1em;
        }
        ul.nav li:last-child a {
            border-bottom: 0;
        }
        ul.nav a:hover {
            color: #e4ffd3;
            background-color: #6da203;
        }

效果如下：
这里写图片描述

水平分页导航条

HTML为：

<ol class="pagination">
    <li><a href="search.htm?page=1" rel="prev">Prev</a></li>
    <li><a href="search.htm?page=1">1</a></li>
    <li class="selected">2</li>
    <li><a href="search.htm?page=3">3</a></li>
    <li><a href="search.htm?page=4">4</a></li>
    <li><a href="search.htm?page=5">5</a></li>
    <li><a href="search.htm?page=3" rel="next">Next</a></li>
</ol>

CSS为：

    <style>
        ol.pagination {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        ol.pagination li {
            float: left;
            margin-right: 0.6em;
        }
        ol.pagination a,
        ol.pagination li.selected {
            display: block;
            padding: 0.2em 0.5em;
            border: 1px solid #ccc;
            text-decoration: none;
        }
        ol.pagination a:hover,
        ol.pagination li.selected {
            background-color: blue;
            color: white;
        }
        ol.pagination a[rel="prev"],
        ol.pagination a[rel="next"]{
            border: none;
        }
        /*开始和结尾的箭头*/
        ol.pagination a[rel="prev"]:before {
            content: "\00AB";
            padding-right: 0.5em;
        }
        ol.pagination a[rel="next"]:after {
            content: "\00BB";
            padding-left: 0.5em;
        }
    </style>

最终结果为：
这里写图片描述

水平导航栏

主要CSS样式为：

        ul.nav {
            margin: 0;
            padding: 0;
            list-style: none;
            /*width: 72em;*/
            background: #FAA819 url("image/mainNavBg.gif") repeat-x;
            /*让父元素包含浮动子元素*/
            overflow: hidden;
            display: inline-block;
        }
        ul.nav li {
            /*元素浮动时，不再占据文档中的任何空间。父列表实际没有内容，就会收缩，会隐藏列表背景*/
            float: left;
        }
        ul.nav a {
            display: block;
            padding: 0 3em;
            line-height: 2.1em;
            text-decoration: none;
            color: #fff;
            /*分隔线*/
            background: url("image/divider.gif") repeat-y left top;
        }
        ul.nav li:first-child a {
            /*取消第一项的背景图片*/
            background-image: none;
        }
        ul.nav a:hover {
            color: #333;
        }

效果为：
这里写图片描述

下拉菜单

CSS样式为：

        ul.nav, ul.nav ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            /*ul浮动来包含列表项*/
            float: left;
            border: 1px solid #486b02;
            background-color: #8bd400;
        }

        ul.nav li {
            float: left;
            width: 8em;
            background-color: #8bd400;
        }

        ul.nav li ul {
            width: 8em;
            /*设定position为absolute*/
            position: absolute;
            left: -999em;
        }

        ul.nav a {
            display: block;
            color: #2b3f00;
            text-decoration: none;
            padding: 0.3em 1em;
            border-right: 1px solid #486b02;
            border-left: 1px solid #e4ffd3;
        }

        ul.nav li li a {
            border-top: 1px solid #e4ffd3;
            border-bottom: 1px solid #486b02;
            border-left: 0;
            border-right: 0;
        }

        ul.nav li:last-child a {
            border-right: 0;
            border-bottom: 0;
        }

        ul a:hover {
            color: #e4ffd3;
            background-color: #6DA203;
        }

        .nav li:hover ul {
            left:  auto;
        }

最终结果为：
这里写图片描述

搜索框

搜素框为一个表单，例如：

    <header>
        <form class="stylin_form_search1" action="#" method="post">
            <label for="search">search</label>
            <input type="search" id="search" name="search" placeholder="search">
        </form>
    </header>

CSS样式为：

     <style>
        * {
            margin: 0;
            padding: 0;
        }
        header {
            font-family: helvetica, arial, sans-serif;
            display: block;
            overflow: hidden;
            width: 500px;
            margin: 30px;
            border-radius: 6px;
            background-color: #ddd;
        }

        form.stylin_form_search1 {
            float: right;
            width: 400px;
            margin: 5px;
            padding: 5px;
        }

        form.stylin_form_search1 input {
            float: right;
            width: 70px;
            padding: 2px 0 3px 5px;
            /*去掉默认的突显轮廓框*/
            outline: none;
            font-size: 0.8em;
            border-color: #eee #ccc #ccc #eee;
            border-radius: 10px;
            /*过渡*/
            -webkit-transition: 2s width;
            -moz-transition: 2s width;
            -ms-transition: 2s width;
            -o-transition: 2s width;
            transition: 2s width;
        }

        form.stylin_form_search1 input:focus {
            width: 200px;
        }

        form.stylin_form_search1 label {
            display: none;
        }
    </style>

最终结果为：
这里写图片描述

弹出层

HTML为：

    <figure>
        <img src="image/pink_heels.jpg" alt="pink heels">
        <figcaption>
            <h3>Pink Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="image/leopard_heels.jpg" alt="leopard heels">
        <figcaption>
            <h3>Leopard Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
    <figure>
        <img src="image/red_heels.jpg" alt="red heels">
        <figcaption>
            <h3>Red Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>

CSS样式为：

        figure {
            width: 144px;
            height: 153px;
            margin: 20px;
            border: 1px solid #666;
            /*为弹出层提供定位上下文*/
            position: relative;
            /*让图片并排显示*/
            float: left;
        }
        img {
            /*去掉图片下方的基线空白*/
            display: block;
        }
        figcaption {
            display: none;
            /*相对于容器*/
            position: absolute;
            left: 74%;
            top: 14px;
            width: 130px;
            padding: 10px;
            background: #f2eaea;
            border: 3px solid red;
            border-radius: 6px;
        }
        figure:hover figcaption {
            /*鼠标悬停在图片上时显示弹出层*/
            display: block;
            /*防止堆叠*/
            z-index: 2;
        }
        figcaption h3 {
            font-size: 14px;
            color: #666;
            margin-bottom: 6px;
        }
        figcaption a {
            display: block;
            text-decoration: none;
            font-size: 12px;
            color: #000;
        }
        /*红色三角形的盒子*/
        figcaption::after {
            /*需要有内容，这里是一个空字符串*/
            content: " ";
            /*相对于弹出层定位*/
            position: absolute;
            border: 12px solid;
            border-color: transparent red transparent transparent;
            right: 100%;
            top: 17px;
            height: 0px;
            width: 0px;
        }

最终效果为：
这里写图片描述

css样式之导航条(nav)
最新发布
声声的博客
02-02 302
【代码】css样式之导航条(nav)
CSS美化网页元素（字体样式及排版、超链接伪类、列表样式、背景样式、渐变）
Learn to value time
12-29 1093
美化网页元素 为什么要美化网页？ 有效的传递页面信息 美化网页，页面漂亮，才能吸引用户 凸显页面的主题 提高用户的体验 span标签：重点要突出的字，使用span套起来 <!--设置样式--> …… <style> #title{ font-size:30px; } </style> …… <!--使用span标签重点突出Java--> …… 欢迎学习<span id="title">Java</s
制作简易导航栏
weixin_44371671的博客
07-04 832
制作简易导航栏导航栏简介第一步先创建一个盒子创建一个无序列表调试盒子样式调试无序列表样式调试样式，添加伪类样式效果图 导航栏简介 导航栏是指位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用。这次制作的是页面顶部的导航栏。 第一步先创建一个盒子 创建一个盒子取名navigation <div class="navigation"> </div> 创建一个无序列表 在盒子中创建一个八行的无序列表，在里面创建，并填写内
导航栏以及二级菜单栏（下拉列表）的制作
weixin_74835614的博客
11-30 1万+
作为新手小白，在我们熟悉了HTML , CSS，JS的功能和语法之后，Web前端开发中，更重要的还有界面的美化，主要依据CSS的庞大功能来实现，今天我来给大家分享的是，利用html代码来实现横向导航栏以及下拉菜单列表的实现。首先，用和标签将导航栏的布局搭建出来（此时的一级导航栏还是纵向的位置，如何拉至横向需要CSS部分的辅助，下面CSS部分会提到），代码中的"登录","注册","留言","我的"为导航栏的标签部分，搭建二级菜单栏的代码位置，类似于“嵌套”
04鸿蒙APP开发之创建一个底部菜单栏及首页列表
James-Tom的博客
12-18 3480
构建一个带有底部四个菜单的导航栏，首页显示一个列表，并添加测试数据，及点击事件。
HTML5+CSS3制作底部导航栏
热门推荐
weixin_42442856的博客
10-20 2万+
目录 前言 一、底部导航栏示例图 二、HTML框架 1.一号盒子 2.二号盒子 总结 ​​​​​​ 前言 在日常的网上冲浪中，我们常常在网页最底部，看到一大堆链接，非常整齐，一目了然，那么是如何实现的呢？...... 提示：以下是本篇文章正文内容，下面案例可供参考 一、底部导航栏示例图 图1-底部导航栏 二、HTML框架 1.一号盒子 由图1可知，该部分由两个个盒子划分，我们先搭建一号盒子的框架，这里我们用，<dl>...
css控制UL LI 的样式详解(推荐)
Sayesan的专栏
08-14 1263
DIV+CSS里，我们用得最多的就是ul li来显示数据，如新闻按钮等。下面给大家一个css ul li的例子供学习 复制代码 代码如下: 首页 博客 设计 相册 论坛 关于 CSS: 复制代码 代码如下: #menu ul {list-style:none;marg
网页设计与制作实验三CSS高级应用
Annzz123的博客
06-20 1268
通过本次实验，掌握了超链接伪类的定义方法,和无序列表的具体应用复习了背景图像属性的相关知识。能够运用 float 属性实现文本和图像的排列，增加了对CSS的熟悉运用,增强自己的实践操作技能。
CSS08（列表样式、图片背景应用和渐变色css查询网站）
qq_51224492的博客
11-30 445
列表样式和图片背景应用 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <link rel="stylesheet" href="css/style.css"> <body> <div id="nav"> <h1
精通CSS-创建基本列表
hellogull
05-23 1201
1. 基本列表样式     Read emails   Write chapter   Go shopping   Cook dinner   Watch Lost 为了添加定制的项目符号，可以使用list-style-image属性。但这种方法控制力不强，更常用的是将项目符号作为背景添加在列表元素上。然后可以使用背景图像的定位属性精确地控制自定义项目符号的对准方式。 IE的早
css制作最简单导航栏
babude2008的博客
10-10 129
css制作最简单导航栏 （1）先建一个列表： <ol> <li><a href="#">网易</a></li> <li><a href="#">搜狐</a></li> <li>&lt...
前端学习 CSS—导航栏 下拉栏
sinat_36151966的博客
08-14 1210
导航栏 1.在使用&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;li&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/li&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;属性时，注意用list-style-type: none;消除列表样式； 2.横向导航栏时，将overflow: hidden;
css note3
weixin_42438346的博客
11-13 734
css导航栏 导航栏=链接列表 导航条基本上是一个链接列表，使用<ul>和<li>元素十分有必要 从列表中删除边距和填充就变成了垂直和水平导航栏使用的标准代码。 ul { list-style-type:none; margin:0; padding:0; } list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记 移除浏览器的默认设置将边距和填充设置为0 垂直导航栏 在上面代码的基础上只需要添加<a>元素的样式，便可建立一
简单的导航栏
weixin_39098569的博客
03-14 61
<!-- 重点:主要练习对列表的用法,对列表的形式进行修饰,对边框进行修饰,完成一个导航栏. --> 1 <!DOCTYPE html> 2 <html lang="en"> 3 　　<head> 4 　　　　<meta charset="UTF-8"> 5 　　　　<title>导航栏</title&gt...
CSS基础总结
str125757855的博客
10-28 162
一、CSS简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样
购物网站制作——顶部导航栏（index.html)
哈哈
09-24 3108
【代码】购物网站制作——导航栏（index.html)
HTML 课程 | 创建导航菜单 七
我的博客，不一样的自我表达
07-04 368
正如您在上面的 CSS 中看到的，我们已经为项目所需的几乎每个有用的 HTML 元素设置了默认值。我们稍后将设计导航栏，但首先创建一个名为“ style.css ”的文件并将其添加到文件夹“ example project/css ”。也就是说，我们刚刚创建了导航栏的结构，为了使其看起来美观，我们必须使用CSS添加样式。在导航菜单部分添加一个无序列表，其中包含 5 个列表项，名称分别为“首页”、“关于我们”、“我们的产品”、“职业”和“联系我们”。因此，我们首先要创建的是网页标题中的导航菜单。
第二天 HTML+CSS进阶
陌小柠的博客
12-08 419
div块 一、 环境：HBuilder 二、 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ border: 1px solid black; height: 600px; background: cadetblue; width: 900px;
CSS学习笔记
weixin_48284907的博客
02-18 287
CSS-样式 1.CSS-内部样式 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1 { color: red; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值