【HTML+CSS】01.品优购首页制作——快捷导航shortcut制作

最新推荐文章于 2022-06-23 01:03:24 发布

二七二十二

最新推荐文章于 2022-06-23 01:03:24 发布

阅读量942

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_46013570/article/details/123210614

版权

1.常用模块类名命名

在这里插入图片描述
2.快捷导航shortcut制作

（1）快捷导航整体上
在这里插入图片描述

在common.css中：

/* 左浮动 */
.fl{
    float: left;
}
/* 右浮动 */
.fr{
    float:right;
}

在index.html中：

 <!-- 快捷导航模块 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">123</div>
            <div class="fr">456</div>
        </div>
    </section>

（2）左侧制作

    在ul中放两个li。

在这里插入图片描述

在common.css中

.shortcut{
    /* 宽度为100% */
    height: 31px;
     line-height:31px;/*行高会被左右盒子继承 */
    background-color: #f1f1f1;
}
.shortcut ul li{
     float: left;/*让li浮动*/
}

.style_red{
    color: rgb(184, 12, 12);
}

在index.html中

 <div class="fl">
                <ul>
                    <li>品优购欢迎你！&nbsp;</li>
                    <li>
                        <a href="#">请登录&nbsp;</a><a href="#" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>

（3）右侧制作
在这里插入图片描述

   a.在ul中放了13个li；
   b.分隔线也是li，大小1px,颜色填充；
   c.下拉箭头用了after伪元素（[after伪元素可在此学习](https://www.runoob.com/css/css-pseudo-elements.html)）。

tips：ul>li*13能直接输出13个li
在这里插入图片描述

在common.css中

/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?tomleg');
    src:  url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?tomleg') format('truetype'),
      url('../fonts/icomoon.woff?tomleg') format('woff'),
      url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
/* 选择所有偶数的li */
.shortcut .fr ul li:nth-child(even){
    width:1px;
    height: 12px;
    background-color: #666666;
     margin:9px 15px 0;/*上左 */

}
/*下拉箭头*/
.arrow-icon::after{
    content:'\e91e';/* 下拉箭头；\转义字符；after伪元素*/
    font-family: 'icomoon';/*字体 */
    margin-left: 6px;
}

在index.html中

<div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>

源码：
common.css

/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?tomleg');
    src:  url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?tomleg') format('truetype'),
      url('../fonts/icomoon.woff?tomleg') format('woff'),
      url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
/*版心*/
.w{
    width:1200px;
    margin: 0 auto;
}
/* 左浮动 */
.fl{
    float: left;
}
/* 右浮动 */
.fr{
    float:right;
}
/* 快捷导航模块 */
.shortcut{
    /* 宽度为100% */
    height: 31px;
     line-height:31px;/*行高会被左右盒子继承 */
    background-color: #f1f1f1;
}
.shortcut ul li{
     float: left;
}

.style_red{
    color: rgb(184, 12, 12);
}
/* 选择所有偶数的li */
.shortcut .fr ul li:nth-child(even){
    width:1px;
    height: 12px;
    background-color: #666666;
     margin:9px 15px 0;/*上左 */

}
.arrow-icon::after{
    content:'\e91e';/* 下拉箭头；\转义字符；after伪元素*/
    font-family: 'icomoon';/*字体 */
    margin-left: 6px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购--购物商城</title>
    <meta name="description" content="品优购销售家电、数码" />
    <meta name="keywords" content="MP3，CD，DVD" />
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <!-- 快捷导航模块 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎你！&nbsp;</li>
                    <li>
                        <a href="#">请登录&nbsp;</a><a href="#" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>
</body>
</html>