css基础1-业务要点

来源：互联网发布：js鼠标滚轮放大图片编辑：程序博客网时间：2024/05/29 14:07

1. 顶部导航栏小三角的设计以及小图片的添加应用广

通栏, height, line-height, 版心, 一个左浮div, 一个右浮div ,

左浮div , dt和dd ，小三角设计dt里面包含span和<s>◇</s>

<div class="fl">                <div class="dt">                    <span>送至：北京</span>                    <i><s>◇</s></i>                </div>                <div class="dt"></div></div>

小三角放在dt的padding里面，先定位i，设置font: 400 15px/15px "" ，position子绝父相，i 的高度为里面字体的一半，通过overflow：hidden进行切割，

再设置 i 的宽度，再定位 s , position

.shortcut .fl .dt{    padding: 0 20px 0 10px;    position: relative;}.shortcut .fl .dt i{    font: 400 19px/15px "microsoft yahei";    position: absolute;    top: 13px;    right: 3px;    height: 7px;    width: 15px;    overflow: hidden;}.shortcut .fl .dt i s{    position: absolute;    top: -9px;    left: 0;}

右浮div的设定，9个li左浮动，padding：0 10px ,

单独小竖线设计，设置<li class="line"></li>, 用padding: 0 0 消除，

单独加小三角型，设置fore, 把之前写好的<s>◇</s>添加，css时注意 .fore的权重

单独添加小图片，用，设置position：absolute ，width ，height ；在父亲<li>里面设置class="tel-jd" ,设置padding，注意权重，设置position：relative

<div class="fr">                <ul>                    <li><a href="#">你好，请登录  <span style="color: red">免费注册</span> </a></li>                    <li class="line"></li>                    <li><a href="#">我的订单</a></li>                    <li class="line"></li>                    <li class="fore">                        <a href="#">我的京东</a>                        <i><s>◇</s></i>                    </li>                    <li class="line"></li>                    <li class="fore">                        <a href="#">京东会员</a>                        <i><s>◇</s></i>                    </li>                    <li class="line"></li>                    <li class="fore">                        <a href="#">企业采购</a>                        <i><s>◇</s></i>                    </li>                    <li class="line"></li>                    <li class="fore jd-tel">                        <em class="tel"></em>                        <a href="#">手机京东</a>                        <i><s>◇</s></i>                    </li>                    <li class="line"></li>                    <li class="fore">                        <a href="#">关注京东</a>                        <i><s>◇</s></i>                    </li>                    <li class="line"></li>                    <li class="fore">                        <a href="#">客户服务</a>                        <i><s>◇</s></i>                    </li>                    <li class="line"></li>                    <li class="fore">                        <a href="#">网站导航</a>                        <i><s>◇</s></i>                    </li>                </ul>            </div>

css代码：

/*京东顶部导航开始*/.shortcut{    height: 30px;    line-height: 30px;    background-color: #f1f1f1;    width: 100%;}.shortcut .fl .dt,.shortcut .fr ul li.fore{    padding: 0 20px 0 10px;    position: relative;}.shortcut .fl .dt i,.shortcut .fr ul li.fore i{    font: 400 19px/15px "microsoft yahei";    position: absolute;    top: 13px;    right: 3px;    height: 7px;    width: 15px;    overflow: hidden;}.shortcut .fl .dt i s,.shortcut .fr ul li.fore i s{    position: absolute;    top: -9px;    left: 0;}.shortcut .fr ul li{    float: left;    padding: 0 10px;}.shortcut .fr ul li.line{    height: 12px;    width: 1px;    background-color: #dddddd;    padding: 0 0 ;    margin-top: 10px;}.shortcut .fr ul li.jd-tel{    position: relative;    padding: 0 20px 0 25px;}.shortcut .fr ul li.jd-tel em.tel{    position: absolute;    top: 5px;    left: 5px;    width: 15px;    height: 20px;    background: url(../images/sprite.png) no-repeat ;}/*京东顶部导航结束*/

2、topbanner设计，大div，包含版心w，里面再包含一个插入图片和<a> ，大div里面包含backgound-color，小<a>子绝父相定位

<!--京东topbanner开始-->    <div class="topbanner">        <div class="w">            <img src="images/topbanner.jpg">            <a href="#" class="close-banner"></a>        </div>    </div>    <!--京东topbanner结束-->

/*京东topbanner开始*/.topbanner{    background-color: #8A25C6;}.topbanner .w{    position: relative;}.topbanner .w .close-banner{    position: absolute;    top: 0;    right: 0;    width: 15px;    height: 15px;    background: url(../images/close.png) no-repeat;}/*京东topbanner结束*/

3. logo设计，总体设计三个div盒子的宽高、浮动，用背景颜色来确认位置，

logo里面包含a标签，a标签里面包含img，a标签的宽度、高度与img一样，右边的dong.gif 采用绝对定位，压住左边的，但不占位置

<div class="w">        <div class="logo">            <a href="#" class="jd-a">                <img src="images/logo.png">            </a>            <div class="db11"></div>        </div>        <div class="search"></div>        <div class="car"></div>    </div>

.logo{    float: left;    width: 362px;    height: 75px;    padding-top: 25px;    position: relative;}.logo .jd-a{    width: 270px;    height: 60px;}.logo .db11{    position: absolute;    top: 10px;    left: 168px;    width: 180px;    height: 80px;    background: url(../images/dong.gif) no-repeat;}.search{    float: left;    width: 538px;    height: 75px;    background-color: purple;    padding-top: 25px;}.car{    float: right;    width: 139px;    height: 34px;    background-color:green;    margin: 25px 65px 0 0;}

0 0