经典导航+经典新闻

最新推荐文章于 2021-04-11 03:17:55 发布

秋天1014童话

最新推荐文章于 2021-04-11 03:17:55 发布

阅读量339

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/u013217071/article/details/52987334

版权

web前端专栏收录该内容

128 篇文章 1 订阅

订阅专栏

经典导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪导航</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        /* top B */
        .banxin{
            width: 970px;
            margin:0 auto;
        }
        .top{
            height: 26px;
            background-color: #f7f7f7;
        }
        .top .t_center{
            height:26px;
        }
        .top .t_center .t_c_wel{
            color: #636363;
            line-height: 26px;
        }
        .top .t_center .t_c_nav ul li{
            float: left;
            padding: 0 5px;
        }
        .top .t_center .t_c_nav ul li a{
            display: inline-block;
            height: 26px;
            line-height: 26px;

        }
        /*使用b标签存放导航栏小箭头*/
        .top .t_center .t_c_nav b{
            display: inline-block;
            width: 12px;
            height: 7px;
            background:url(img/sprite.png) no-repeat 0 0;
            vertical-align: middle;/*设置文字与图片同高！*/
        }
    /* top E */
    </style>
</head>
<body>
    <div class="top">
        <div class="t_center banxin">
            <div class="t_c_wel fl">
                你好，欢迎来到建材网！
            </div>
            <div class="t_c_nav fr">
                <ul>
                    <li><a href="#">建材网首页</a></li>
                    <li><a href="#">我的商务师</a><b></b></li>
                    <li><a href="#">我的收藏</a><b></b></li>
                    <li><a href="#">建材服务</a><b></b></li>
                    <li><a href="#">客服中心</a></li>
                    <li><a href="#">网站导航</a><b></b></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

经典新闻

有时li里面有小箭头，可以在li里面设置b标签，或者给li设置背景图片！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{

        }
        .content{
            width:300px;
            background: url(like.jpg) no-repeat center center;
            border: 1px solid red;
            margin:0 auto;
            padding: 0px 10px;
        }
        .header{
            border-left:5px solid green;
            margin:10px 0 5px 0;
            padding-left:6px;
        }
        .title{
            font-family: "黑体";
            font-size:20px;         
        }
        ul{
            list-style: none;
            background-color: white;
            padding:0px 10px;
            margin-bottom: 10px;
        }
        ul li{
            background: url(arrow.jpg) no-repeat 2px center;
            padding-left:15px;
            border-bottom: 1px dotted red;
            height:30px;
            line-height:30px;
            font-size:12px;
        }
        a{
            text-decoration: none;
        }


    </style>
</head>
<body>
    <div class="content">
        <div class="header">
            <h3 class="title">爱宠知识</h3>
        </div>
        <ul>
            <li class="article"><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li class="article"><a href="#">阿斯顿发生是打发大是大非是打发</a></li>
            <li class="article"><a href="#">规范和是否更换</a></li>
            <li class="article"><a href="#">地方</a></li>
            <li class="article"><a href="#">是大法官(⊙o⊙)…</a></li>

            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
        </ul>
    </div>
</body>
</html>

秋天1014童话

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
经典导航+经典新闻

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新浪导航</title> <style> body{ margin:0; padding:0; } .header{
复制链接

扫一扫

专栏目录