导航栏以及伪类的使用

已于 2022-12-14 20:27:06 修改
阅读量95 收藏
点赞数
文章标签： css html 前端
于 2022-12-14 20:24:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunanxxx/article/details/128321503
版权 
<!DOCTYPE html>
<html>

<head>
    <title>横导航栏2</title>
    <style type="text/css">
        /* 通用选择器 */
        * {
            margin: 0px;
            padding: 0px;
        }

        header.hed div.div1 {
            background-color: #545652;
        }

        header.hed div.div1 ul li {
            display: inline-block;
            width: 50px;
            text-align: center;
        }

        header.hed div.div1 ul li a {
            font-weight: bold;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 28px;
            text-decoration: none;
            color: #d5d5d5;

        }

        /* 伪类 顺序为l，v，h，a */
        /* 未访问的链接 */
        header.hed div.div1 ul li a:link {
            color: #FF0000;
        }

        /* 已访问的链接 */
        header.hed div.div1 ul li a:visited {
            color: #00FF00;
        }

        /* 鼠标划过链接 */
        header.hed div.div1 ul li a:hover {
            color: #FF00FF;
        }

        /* 鼠标点击时 */
        header.hed div.div1 ul li a:active {
            color: #0000FF;
        }


        header.hed div.updown a {
            font-weight: bold;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 28px;
            text-decoration: none;
            color: #d5d5d5;
            display: inline-table;
        }

        header.hed div.login a {
            font-weight: bold;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 28px;
            text-decoration: none;
            color: #d5d5d5;
        }

        ul.weilei li:nth-child(4) {
            color: #00FF00;
        }

        ul.weilei li:nth-child(odd) {
            color: brown;
        }

        input:focus {
            border: 100px solid lightcoral;
        }

        .dli {
            position:absolute;
            margin: 0 0 0 1300px;
           top: 0;
        }
    </style>
</head>

<body>
    <header class="hed">
        <div class="div1">
            <ul style="padding-inline-start: 0px;">

                <li>
                    <a href="https://www.douban.com/">豆瓣</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="#">FM</a>
                </li>
                <li>
                    <a href="#">时间</a>
                </li>
                <li>
                    <a href="#">豆品</a>
                </li>
            </ul>
            <div class="dli">
                <ul>
                    <li style="width: 90px;">
                        <a href="#">下载豆瓣客户端</a>
                    </li>
                    <li style="width: 90px; ">
                        <a href="#">登录/注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <ul class="weilei">
        <li>sanjiaxianyu</li>
        <li>sanjiaxianyu</li>
        <li>sanjiaxianyu</li>
        <li>sanjiaxianyu</li>
        <li>sanjiaxianyu</li>
    </ul>
    <input type="text" name="" id="">
</body>

</html>

效果展示

<!DOCTYPE html>
<html>

<head>
    <title>横导航栏2</title>
    <style type="text/css">
        /* 通用选择器 */
        * {
            margin: 0px;
            padding: 0px;
        }

        header.hed div.div1 {
            background-color: #545652;
        }

        header.hed div.div1 ul li {
            display: inline-block;
            width: 50px;
            text-align: center;
        }

        header.hed div.div1 ul li a {
            font-weight: bold;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 28px;
            text-decoration: none;
            color: #d5d5d5;

        }

        /* 伪类 顺序为l，v，h，a */
        /* 未访问的链接 */
        header.hed div.div1 ul li a:link {
            color: #FF0000;
        }

        /* 已访问的链接 */
        header.hed div.div1 ul li a:visited {
            color: #00FF00;
        }

        /* 鼠标划过链接 */
        header.hed div.div1 ul li a:hover {
            color: #FF00FF;
        }

        /* 鼠标点击时 */
        header.hed div.div1 ul li a:active {
            color: #0000FF;
        }


        header.hed div.updown a {
            font-weight: bold;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 28px;
            text-decoration: none;
            color: #d5d5d5;
            display: inline-table;
        }

        header.hed div.login a {
            font-weight: bold;
            font-family: 微软雅黑;
            font-size: 12px;
            line-height: 28px;
            text-decoration: none;
            color: #d5d5d5;
        }

        ul.weilei li:nth-child(4) {
            color: #00FF00;
        }

        ul.weilei li:nth-child(odd) {
            color: brown;
        }

        input:focus {
            border: 100px solid lightcoral;
        }
        
        .dli {
            position:absolute;
            margin: 0 0 0 1300px;
           top: 0;
        }

        section.NbookExpress div.nav {
            width: 100%;
            height: 40px;
            background-color: #f6f6f1;
        }

        section.NbookExpress div.nav ul {
            width: 1040px;
            height: 40.67px;
            text-align: center;
        }

        section.NbookExpress div.nav ul li {
            display: inline-block;
            text-align: center;
            line-height: 40px;
            width: 80px;
        }

        section.NbookExpress div.nav ul li a {
            text-decoration: none;
            color: #9B9B9B;
        }

        section.NbookExpress div.nav ul li[class] {
            width: 40px;
        }

        section.NbookExpress div.books {
            width: 100%;
            height: 440px;
            background-color: white;
        }

        section.NbookExpress div.pages {
            width: 100%;
            height: 100px;
            background-color: blue;
        }

        section.NbookExpress div.books table tr td img {
            width: 115px;
            height: 172px;
        }

        section.NbookExpress div.books table tr td p {
            text-align: center;
        }

        section.NbookExpress div.books table {
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <header class="hed">
        <div class="div1">
            <ul style="padding-inline-start: 0px;">

                <li>
                    <a href="https://www.douban.com/">豆瓣</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="#">FM</a>
                </li>
                <li>
                    <a href="#">时间</a>
                </li>
                <li>
                    <a href="#">豆品</a>
                </li>
                <div class="dli">
                    <ul>
                        <li style="width: 90px;">
                            <a href="#">下载豆瓣客户端</a>
                        </li>
                        <li style="width: 90px; ">
                            <a href="#">登录/注册</a>
                        </li>
                    </ul>
                </div>
        </div>
    </header>
    <section class="NbookExpress">
        <div class="nav">
            <ul style="padding-inline-start: 0px;">

                <li style="font-size: 18px; font-weight: bold;">
                    <a href="https://www.douban.com/" style="color: black;">新书速递</a>
                </li>
                <li class="all">
                    <a href="#" style="color: black;">全部</a>
                </li>
                <li class="ltt">
                    <a href="#">文学</a>
                </li>
                <li class="fic">
                    <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="#" style="color: #3377aa;">更多>></a>
                </li>
        </div>
        <div class="books">
            <table>
                <tr>
                    <td>
                        <img src="../../day01/image/我看见无数的她.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">我看见无数的她</p>
                        <p>张莉</p>
                    </td>
                    <td>
                        <img src="../../day01/image/长安的荔枝.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">长安的荔枝</p>
                        <p>xxx</p>
                    </td>
                    <td>
                        <img src="../../day01/image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">和魂</p>
                        <p>吴伟明</p>
                    </td>
                    <td>
                        <img src="../../day01/image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">柠檬炸弹</p>
                        <p>基次郎</p>
                    </td>
                    <td>
                        <img src="../../day01/image/数字抑郁时代.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">数字抑郁时代</p>
                        <p>sala</p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="../../day01/image/我看见无数的她.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">我看见无数的她</p>
                        <p>张莉</p>
                    </td>
                    <td>
                        <img src="../../day01/image/长安的荔枝.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">长安的荔枝</p>
                        <p>xxx</p>
                    </td>
                    <td>
                        <img src="../../day01/image/和魂.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">和魂</p>
                        <p>吴伟明</p>
                    </td>
                    <td>
                        <img src="../../day01/image/柠檬炸弹.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">柠檬炸弹</p>
                        <p>基次郎</p>
                    </td>
                    <td>
                        <img src="../../day01/image/数字抑郁时代.jpg" width="100">
                        <p style="color: #3377aa;font-size: 14px">数字抑郁时代</p>
                        <p>sala</p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="pages"></div>
    </section>
</body>

</html>

效果

希望我以后的代码能越写越简洁。。。

 

guaishou♂xxx
关注
CSS浮动+伪类实现导航栏下拉功能
zxh996的博客
07-03 1527
CSS浮动+伪类实现导航栏下拉功能前言一、浮动二、伪类三、导航栏下拉案例总结 前言 在前端的学习中，浮动和伪类算是使用的较为频繁的属性，我在这篇文章中，将为大家简单介绍一下，并用一个导航栏案例加深学习的印象，仅供参考学习。 一、浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 <style> div { /*设置左浮动*/
css伪类 附加一般导航栏代码
水中熊的博客
05-29 1528
伪类：CSS伪类是用来添加一些选择器的特殊效果。     （1）a:link {color:#FF0000;} /* 未访问的链接 */              a:visited {color:#00FF00;} /* 已访问的链接 */              a:hover {color:#FF00FF;} /* 鼠标划过链接 */              a:active
侧面固定导航栏 以及 伪类/伪元素的使用
qq_43618136的博客
02-08 226
侧面固定导航栏 <div id="tool"> <span></span> <div class="btn"> <a href="" class="c4 active">爱逛 好货</a> <a href="" class="c5">好店 直播</a> <a href="" cla...
项目中使用的jqGrid
拉你手跟我走的专栏
05-12 3626
/* jqgrid定义 */ jQuery(grid_selector).jqGrid({ //解析从Server返回的json数据 jsonReader : { root : "rows", // json中每行的记录 page : "currentPage", //json中代表当前页码的数
web——CSS水平导航栏（无序列表、伪类）
weixin_44652589的博客
04-14 5233
web——CSS水平导航栏（无序列表、伪类的用法）一、无序列表二、伪类三、完整示例 一、无序列表 li { float: left; //使li标签水平排列 width: 100px; //li标签宽度 height: 20px; //li标签高度 margin: 2px; //外边距 list-style:none; //去掉原生li标签前面的原点
html横向导航条代码动态伪类,伪类导航栏.html
weixin_35876299的博客
06-08 806
*{margin: 0;padding: 0;}.clear{clear: both;}ul{width: 700px;height: 30px;border: 1px solid black;margin: 20px auto;}li{width: 100px;height:30px ;float: left;list-style: none;/* 水平居中 */text-align: cent...
html导航栏制作css伪类,利用:hover伪类制作二级导航菜单
weixin_39641334的博客
06-22 518
该楼层疑似违规已被系统折叠隐藏此楼查看此楼/*重置所有元素的三个样式为零，一般不推荐这样使用，但是我测试一般这么写*/* {margin:0; padding:0; border:0;}a {text-decoration:none; color:#000;}body {font-size:12px; font-family:"微软雅黑";}ul,ol {list-style:none;}ul ...
CSS利用伪元素实现导航栏斜线分隔
12-30
先看看效果： 开始切第一张图了，第一个...想到的思路是用伪类:before或者:after实现 先写html结构。 XML/HTML Code复制内容到剪贴板 <!– 导航栏begin –>   fr>  <a>Home  <a>About  <a>Features 
css通过伪类来设置超链接样式附示例
09-25
这些伪类选择器使得我们可以分别控制超链接在不同状态下的样式，包括未被访问、已访问、鼠标悬停以及被激活的状态。 1. **:link** - 该伪类用于设置未被访问的链接的样式。当用户尚未点击过超链接，浏览器将应用`:...
伪类选择器案例实践：新闻导航案例
YY的博客
08-29 343
伪类选择器案例实践：新闻导航案例
CSS —— 界面布局
m0_73557953的博客
09-10 964
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
《HTML 与 CSS—— 响应式设计》
最新发布
asd4353012的博客
09-11 1487
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供最佳的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 681
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
水平居中的几种方法（总结）
致未来的你。的博客
09-11 706
水平居中的几种方法（总结）
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 341
【代码】css鼠标移动过去变成手的图标。
CSS基本语法结构
nice66660的博客
09-10 1329
*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 *//*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 *//*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 *//*某某[属性^=属性值] a标签有class属性且属性值是li开头的 *//*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */
使用CSS创建多级导航栏
通过使用CSS3的新特性，如伪类、过渡（`transition`）、动画（`@keyframes`）和媒体查询（`@media`），可以进一步增强用户体验。 总结来说，使用CSS和HTML列表不仅可以创建多级导航栏，而且可以实现高度自定义的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值