品优购的学习

为了彻底搞定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 也全起作用!

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

 

 

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页