品优购的学习

最新推荐文章于 2022-10-21 20:05:32 发布

爱生活，爱编程

最新推荐文章于 2022-10-21 20:05:32 发布

阅读量339

点赞数

分类专栏： html + css

本文链接：https://blog.csdn.net/qq_15009739/article/details/109307713

版权

html + css 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

为了彻底搞定css 布局，所以重新学习下该项目

盒子模型，浮动，定位我前段时间又复习了一遍，一遍一遍效果

废话少说看下我昨天写的一点代码，温故而知新

大的布局，就一左边一右浮动布局

左边是ul 里有两个li li >a

右边，就是 ul 里面有许多Li

红色部分是个盒子

主要是模拟分割线

这个用到了iconmoon 的字体图标

用到字体库的时候要参考例子写！

要复制的部分

其他设置字体就行了

这里重点强调的是line-height 可以修改行高

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>品优购，真正的正版商品</title>
    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="description" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX、小米Note 2，红米手机系列红米Note 4、红米4，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。" />
    <link rel="shortcut icon" href="pyg.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/common.css">
</head>

<body>

    <div class="shortcut">
        <div class="w bannerxin">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！ </li>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">

                <ul>
                    <li> <a href="#">我的订单</a></li>
                    <li class="space"></li>
                    <li>
                        <a href="#">我的品优购</a>
                        <i class="arrow_down"></i>
                    </li>


                    <li class="space"></li>
                    <li>企业采购</li>
                    <li class="space"></li>
                    <li>关注品优购

                        <i class="arrow_down"></i>
                    </li>
                    <li class="space"></li>
                    <li>企业采购</li>
                    <li class="space"></li>
                    <li>客户服务</li>
                    <li class="space"></li>
                    <li>网站导航</li>
                    <li class="space"></li>
                    <li>品优购会员</li>

                </ul>
            </div>
        </div>
    </div>
</body>

</html>

common.css

/*公共样式*/

.fl {
    float: left;
}

.fr {
    float: right;
}


/*版心*/

.w {
    width: 980px;
    margin: 0 auto;
}

.style-red {
    color: #c81623;
}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?3a2xdr');
    src: url('../fonts/icomoon.eot?3a2xdr#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?3a2xdr') format('truetype'), url('../fonts/icomoon.woff?3a2xdr') format('woff'), url('../fonts/icomoon.svg?3a2xdr#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.shortcut {
    background-color: #f1f1f1;
    line-height: 31px;
    height: 31px;
}

.shortcut li {
    float: left;
    font-size: 12px;
    color: #666666;
}

.shortcut .space {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 14px;
}

.arrow_down {
    font-family: "icomoon";
    font-size: 16px;
    margin: 0 7px;
    line-height: 26px;
    /* // 指定行高 */
}

学习心得，

1， icomoon 字体库的使用，iconfont 字体库也简单，都要参考例子

2 ，基本的盒子模型和浮动要彻底掌握，掌握line-height 好height 之间的关系

3，布局从外往里布局，有些时候块元素不给宽度，默认会通栏的宽度（auto）

高度会由子元素撑开

4， line-height 可以让文字，行内，行内块垂直居中，

text-align 可以让文字，行内，行内块水平居中

这个需要测试下(测试过了，没有多大问题）

5 行内元素设置上下margin 不起作用，左右margin 起作用，padding 也一样

6,行内块，padding 都起作用，margin 也全起作用！

行，就写到这里，大家自己测试下，细节决定成败！