Html+Css基础之仿蘑菇街1（顶部栏）

最新推荐文章于 2024-05-19 09:58:49 发布

q269399361

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量2.1k

点赞数 1

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/hucblog/article/details/53812598

版权

前端学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在制作顶部栏是需要用到的知识点：
1. 浮动
2. 背景图

浮动

浮动后脱离文档流，不管是内联元素还是块级元素将变为内联块级元素，如不设置，元素宽度就是包裹内容的宽度

ul有默认的margin和padding，注意清除默认样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        html, body {
        height:100%;
        width:100%;
        margin:0px;
        padding:0px;
        }
        #wapper {
            background-color:#e5c8c8;
            height:32px;
        }
        #wapper .child{
            height:100%;
            background-color:#4cff00;
            /*浮动后脱离文档流，不管是内联元素还是块级元素将变为内联块级元素，如不设置，元素宽度就是包裹内容的宽度*/
            width:100px;
            float:left;
        }
        ul {
            background-color:#ffd800;
            height:32px;
            margin:0px;
            padding:0px;
            float:left;
        }
        li {
            list-style:none;
            float:left;
            line-height:32px;
        }
    </style>
</head>
<body>
    <div id="wapper">
        <a class="child"></a>
        <ul>
            <li>我的账户</li><li>我的资产</li>
        </ul>
    </div>
</body>
</html>

这里写图片描述

背景图

如何利用背景图片和border制作顶部工具栏
IE8以下，不支持内联块状元素使用line-hight居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        html, body {
        height:100%;
        width:100%;
        margin:0px;
        padding:0px;
        }
        #wapper {
            background-color:#e5c8c8;
            height:32px;
        }
        ul {
            height:32px;
            margin:0px;
            padding:0px;
            float:left;
        }
        li {
            list-style:none;
            float:left;
            line-height:32px;
            margin-left:2px;
            font-size:12px;
        }
        .myaccount {
            background-image:url(http://s6.mogucdn.com/pic/140808/o613k_ieygizrthfrdgyzymiytambqgqyde_15x26.png);
            background-repeat:no-repeat;
            background-position:0px -5px;
            padding-left:20px;
        }
         .myaccount a {
            padding-right:10px;
            border-right:1px solid red;
        }
        .myassets {
            background-image:url(http://s6.mogucdn.com/pic/140808/o613k_ieygizrthfrdgyzymiytambqgqyde_15x26.png);
            background-repeat:no-repeat;
            background-position:60px -5px;
            padding:0px 10px 0px 10px;

        }
        .myassets a {
            padding-right:20px;
            border-right:1px solid red;
        }
    </style>
</head>
<body>
    <div id="wapper">
        <ul>
            <li class="myaccount"><a>我的账户</a></li>
            <li class="myassets"><a>我的资产</a></li>
        </ul>
    </div>
</body>
</html>

这里写图片描述

顶部栏

全局.css

html,body
{
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
}
ul,ol{margin:0px;padding:0px;}
a {
    text-decoration:none;
    font-size:12px;
    color:#666;
}
.ft_black {
    color:black;
}
ul,ol{
    list-style:none;
}
.has_left_line {
  padding-left:15px;
  border-left:1px solid #ddd;
}
.has_right_line {
    padding-right:15px;
  border-right:1px solid #ccc;
}

index.css

#header {
    background-color: #F2F2F2;
    border-bottom: 1px solid #ddd;
    height: 31px;
}

    #header > .header_warpper {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        line-height: 31px;
    }

        #header > .header_warpper > .home {
            background: url(http://s6.mogucdn.com/pic/140808/o613k_ieygizrthfrdgyzymiytambqgqyde_15x26.png) no-repeat 0 -5px;
            display: inline-block;
            padding-left: 20px;
            float: left;
        }

        #header > .header_warpper > .header_top {
            float: right;
            height: 31px;
        }

            #header > .header_warpper > .header_top > li {
                float: left;
                margin-right: 15px;
                line-height: 31px;
                height:31px;
            }
            #header > .header_warpper > .header_top > li>a{
                margin-top:8px;/*IE8以下，不支持内联块状元素使用line-hight居中*/
            }

            #header > .header_warpper > .header_top .myorder {
                background: url(http://s17.mogucdn.com/p1/150923/upload_ie2wmzdehazwkztdgmzdambqhayde_100x400.png) no-repeat;
                display: inline-block;
                background-position: 0px -220px;
                padding-left: 20px;
                height: 16px;
                line-height: 16px;
            }

            #header > .header_warpper > .header_top .shopping_car {
                background: url(http://s17.mogucdn.com/p1/150923/upload_ie2wmzdehazwkztdgmzdambqhayde_100x400.png) no-repeat;
                display: inline-block;
                background-position: 0px -112px;
                padding-left: 20px;
                height: 16px;
                line-height: 16px;
            }

            #header > .header_warpper > .header_top .custom_item {
                background: url(http://s6.mogucdn.com/pic/140808/o613k_ieygizrthfrdgyzymiytambqgqyde_15x26.png) no-repeat;
                display: inline-block;
                background-position: 50px 7px;
                padding-right:20px;
                height: 16px;
                line-height: 16px;
            }
             #header > .header_warpper > .header_top .myxiaodian {
                background: url(http://s6.mogucdn.com/pic/140808/o613k_ieygizrthfrdgyzymiytambqgqyde_15x26.png) no-repeat;
                display: inline-block;
                background-position: 50px 7px;
                padding-right:10px;
                height: 16px;
                line-height: 16px;
            }

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>蘑菇街</title>
    <link href="css/global.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <div id="header">
        <div class="header_warpper">
            <a href="javascript:;" class="ft_black home">蘑菇街首页</a>
            <ul class="header_top">
                <li><a href="javascript:;">注册</a></li>
                <li><a href="javascript:;" class="has_right_line">登录</a></li>
                <li><a href="javascript:;" class="myorder has_right_line">我的订单</a></li>
                <li><a href="javascript:;" class="shopping_car has_right_line">购物车</a></li>
                <li><a href="javascript:;" class="custom_item has_right_line">客服服务</a></li>
                <li><a href="javascript:;" class="myxiaodian">我的小店</a></li>
            </ul>
        </div>
    </div>
    <div id="body_warpper"></div>
    <div id="footer"></div>
</body>
</html>

效果图：
这里写图片描述

q269399361

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Html+Css基础之仿蘑菇街1（顶部栏）

在制作顶部栏是需要用到的知识点： 1. 浮动 2. 背景图浮动浮动后脱离文档流，不管是内联元素还是块级元素将变为内联块级元素，如不设置，元素宽度就是包裹内容的宽度 ul有默认的margin和padding，注意清除默认样式<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style
复制链接

扫一扫

专栏目录