品优购电商静态网页布局（二）_品优网站照片-CSDN博客

本文链接：https://blog.csdn.net/Hdhhdhbsjxbdhvyg/article/details/136389239

1.main主体

右侧lifeservice精灵图还没下载相应的工具，暂时先都用一个图

<div class="w">
        <div class="main">
            <div class="focus">
                <ul>
                    <li>
                        <img src="upload/广告图.png" alt="">
                        <!-- 这里注意轮播图就这么写，放进小li里面 -->
                    </li>
                </ul>
            </div>
            <div class="newsflash">
                <div class="news">
                    <h3>
                        品优购快报
                        <a href="#" class="iconfont">更多&nbsp;&#xe604;</a>
                    </h3>
                    <h4><b>[特惠]</b>备战开学季&nbsp;全民半价购数码</h4>
                    <h4><b>[公告]</b>品优稳占家电网购六成份额</h4>
                    <h4><b>[特惠]</b>百元中秋全品类礼券限量领</h4>
                    <h4><b>[公告]</b>上品优生鲜&nbsp;享阳澄湖大闸蟹</h4>
                    <h4><b>[特惠]</b>每日享折扣品优品质游</h4>
                </div>
                <div class="lifeservice">
                    <ul>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>机票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>电影票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>游戏</p>
                        </li>
                        <li>
                            <i></i>
                            <p>彩票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>加油卡</p>
                        </li>
                        <li>
                            <i></i>
                            <p>酒店</p>
                        </li>
                        <li>
                            <i></i>
                            <p>火车票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>众筹</p>
                        </li>
                        <li>
                            <i></i>
                            <p>理财</p>
                        </li>
                        <li>
                            <i></i>
                            <p>礼品卡</p>
                        </li>
                        <li>
                            <i></i>
                            <p>白条</p>
                        </li>
                    </ul>
                </div>
                <div class="bargin"></div>
            </div>
        </div>
    </div>

@font-face {
    font-family: 'iconfont';  /* Project id 4446215 */
    src: url('//at.alicdn.com/t/c/font_4446215_x9xm2yf3onn.woff2?t=1709124144557') format('woff2'),
         url('//at.alicdn.com/t/c/font_4446215_x9xm2yf3onn.woff?t=1709124144557') format('woff'),
         url('//at.alicdn.com/t/c/font_4446215_x9xm2yf3onn.ttf?t=1709124144557') format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    /* font-size: 16px; */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.main{
    width: 980px;
    height: 455px;
    margin-left: 220px;
    margin-top: 10px;
}
.focus{
    width: 721px;
    height: 455px;
    float: left;
    /* background: url(../upload/广告图.png); */
}
.newsflash{
    float: left;
    height: 455px;
    width: 250px;
    /* background-color: brown; */
    margin-left: 8px;
}
.main .news{
    height: 165px;
    /* background-color: aqua; */
}
.main .news h3{
    border-bottom: 1px rgb(230, 226, 230) solid;
    height: 34px;
    font-size: 16px;
    padding-left: 16px;
    line-height: 34px;
}
.main .news h3 a{
    float: right;
    font-size: 13px;
    font-weight: normal;
    padding-right: 18px;
}
.main .news  h4{
    padding-left: 16px;
    height: 26px;
}
/* 首先先分析一下，这个大盒子只需要左边框，每个小盒子只需要下和右边框就行 */
.main .lifeservice{
    height: 209px;
    /* background-color: pink; */
    border:1px solid rgb(230, 226, 230)  ;
    /* border-top:0 ; */
    overflow: hidden;
    /* 不进行这步的话，每行的第四个盒子的边框会漏出来，这样就可以隐藏漏出部分 */
}
.main .lifeservice ul{
    width: 252px;
}
.main .lifeservice ul li{
    border-right: 1px solid rgb(230, 226, 230)  ;
    border-bottom: 1px solid rgb(230, 226, 230)  ;
    height: 71px;
    width: 63px;
    float: left;
    /* display: inline-block; 这里我写了这个，导致她们之间有空隙，得用float*/
}
.main .lifeservice ul li i{
    display: inline-block;
    width: 24px;
    height: 27px;
    background: url(../upload/lifeservice.png) no-repeat;
    margin-top: 14px;
    margin-left: 22px;
}
.main .lifeservice ul li p{
    text-align: center;
    font-size: 15px;
    margin-top: -12px;
}
.main .bargin{
    background: url(../upload/折扣.png);
    width: 250px;
    height: 75px;
    margin-top: 6px;
}

2.推荐

<div class="recommend w">
        <div class="recom-hd"></div>
        <div class="recom-bd">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

.recommend{
    height: 163px;
    background-color: #ebebeb;
    width: 1200px;
    margin-top: 12px;
}
.recom-hd{
    width: 206px;
    background: url(../upload/今日推荐.png);
    float: left;
    height: 163px;
}
.recom-bd ul li{
    width: 248px;
    height: 146px;
    margin-top: 9px;
    float: left;
    border-right: 1px solid rgb(233, 228, 228);
    background: url(../upload/recommend01.png);
}
.recom-bd ul li:last-child{
    border-right: 1px transparent;
}

这块右面图片的边框我是把它盒子降低然后加了右边框，背景颜色改成和图片一样。我看弹幕说可以先border- radius在加右边框，再或者是after伪元素，content：“” 1px 设置定位absolute，ul relative，top、、px

3.猜你喜欢

不看视频的情况下取名就是灾难现场，这里的右边小边框用的是after伪元素的方法，敲代码之前首先搭建，不要盒子太多，省事的后果就是盒子乱飞，然后就是命名规范

<div class="like w">
        <div class="box">
        <h3>猜你喜欢</h3>
        <div class="iconfont">换一批&#xe650;</div>
        </div>
        <ul>
            <li>
                <div class="tupian"></div>
                <div class="wenzi">
                    <p class="p1">阳光美包新款单肩包女包时尚子母包四件套女</p>
                    <img src="../shopping/upload/¥116.00.png" alt="">
                </div>
                
            </li>
            <li>
                <div class="tupian"></div>
                <div class="wenzi">
                    <p class="p1">阳光美包新款单肩包女包时尚子母包四件套女</p>
                    <img src="../shopping/upload/¥116.00.png" alt="">
                </div>
            </li>
            <li>
                <div class="tupian"></div>
                <div class="wenzi">
                    <p class="p1">阳光美包新款单肩包女包时尚子母包四件套女</p>
                    <img src="../shopping/upload/¥116.00.png" alt="">
                </div>
            </li>
            <li>
                <div class="tupian"></div>
                <div class="wenzi">
                    <p class="p1">阳光美包新款单肩包女包时尚子母包四件套女</p>
                    <img src="../shopping/upload/¥116.00.png" alt="">
                </div>
            </li>
            <li><div class="tupian"></div>
                <div class="wenzi">
                    <p class="p1">阳光美包新款单肩包女包时尚子母包四件套女</p>
                    <img src="../shopping/upload/¥116.00.png" alt="">
                </div></li>
            <li>
                <div class="tupian"></div>
                <div class="wenzi">
                    <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                    <img src="../shopping/upload/¥116.00.png" alt="">
                </div>
            </li>
        </ul>
    </div>

.like{
    height: 302px;
    width: 1200px;
}
.like h3{
    float: left;
    padding-top: 33px;
    font-size: 16px;
    height: 59px;
}
.like .iconfont{
    height: 59px;
    float: right;
    padding-top: 33px;
    padding-right: 20px;
}
.like .box{
    height: 59px;
}
.like ul li{
    margin-top: 10px;
    float: left;
    width: 200px;
    height: 233px;
    border-top: 1px solid rgb(211, 206, 206);
    border-bottom: 1px solid rgb(211, 206, 206);
    /* background-color: pink; */
}
.like ul li:first-child{
    border-left: 1px solid rgb(211, 206, 206);
}
.like ul li:last-child{
    border-right: 1px solid rgb(211, 206, 206);
}
.tupian{
    width: 203px;
    height: 159px;
    background: url(../upload/单肩包.png) no-repeat;
    margin-top: 10px;
    margin-left: 20px;
    
}
.wenzi{
    position: relative;
}
.wenzi p{
    padding-left: 30px;
    padding-right: 40px;
    margin-top: 0px;
    line-height: 18px;

}
.wenzi img{
    padding-left: 30px;
    padding-bottom: 10px;
}
.wenzi .p1::after{
    content: "";
    position: absolute;
    right: 0;
    background-color: rgb(211, 206, 206);
    width: 1px;
    height: 63px;
    bottom: 10px;
}

4.楼梯模块floor

-家用电器

<div class="floor">
        <div class="dianqi w">
            <div class="box_hd">
                <h3>家用电器</h3>
                <div class="tab_list">
                    <ul>
                        <li>
                            <a href="" class="style_red">热门</a>
                        </li>
                        <li>
                            <a href="">大家电</a>
                        </li>
                        <li>
                            <a href="">生活电器</a>
                        </li>
                        <li>
                            <a href="">厨房电器</a>
                        </li>
                        <li>
                            <a href="">个护健康</a>
                        </li>
                        <li>
                            <a href="">应季电器</a>
                        </li>
                        <li>
                            <a href="">空气/净水</a>
                        </li>
                        <li>
                            <a href="">新奇特</a>
                        </li>
                        <li>
                            <a href="" class="finally">高端电器</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 这是tab栏选项卡，就是鼠标点在哪个list上，下面的tab_content就显示内容，其他块的内容就隐藏 -->
            <div class="box_bd">
                <div class="tabie_content">
                    <div class="table_list_item">
                        <div class="list1">
                            <div class="table_list">
                                <ul>
                                    <li>节能补贴</li>
                                    <li>4K电视</li>
                                    <li>空气净化器</li>
                                    <li>IH电饭煲</li>
                                    <li>滚筒洗衣机</li>
                                    <li>电热水器</li>
                                </ul>
                                <div class="tvtupian">
                                    <h3>三星曲面电视</h3>
                                    <p>抽奖送豪礼</p>
                                    <img src="../shopping/upload/tv.png" alt="">
                                </div>
                            </div>
                            
                        </div>
                        <div class="reshuihu">
                            <h3>烧水壶智能光控泡茶壶茶具套装</h3>
                            <p>满299.00减40.00</p>
                            <img src="../shopping/upload/热水壶.png" alt="">
                        </div>
                        <div class="list3">
                            <div class="weibolu">
                                <h3>每满200减20元</h3>
                                <p>烘焙节1元抢购</p>
                                <img src="../shopping/upload/微波炉.png" alt="">
                            </div>
                            <div class="leshi">
                                <h3>买乐视电视享优惠</h3>
                                <p>送60个月会员</p>
                                <img src="../shopping/upload/乐视tv.png" alt="">
                            </div>
                        </div>
                        <div class="list4">
                            <h3>8.20彩电宅购节</h3>
                            <p>65寸4K智能电视3799</p>
                            <img src="../shopping/upload/彩电.png" alt="">
                        </div>
                        <div class="list3">
                            <div class="weibolu">
                                <h3>每满200减20元</h3>
                                <p>烘焙节1元抢购</p>
                                <img src="../shopping/upload/微波炉.png" alt="">
                            </div>
                            <div class="leshi">
                                <h3>买乐视电视享优惠</h3>
                                <p>送60个月会员</p>
                                <img src="../shopping/upload/乐视tv.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

.dianqi{
    height: 420px;
    /* background-color: pink; */
}
.box_hd{
    height: 59px;
    border-bottom: 1px solid #c81623;
}
.box_hd h3{
    color:#c81623;
    font-size: 19px;
    float: left;
    margin-top: 25px;
}
.box_hd ul{
    float: right;
    margin-right: 9px;
    position: relative;
}
.box_hd ul li {
    float: left;
    margin-left: 16px;
    
    margin-top: 25px;
    font-size: 14px;
}

.box_hd ul li a{
    border-right: 1px solid rgb(151, 149, 149);
    padding-right: 16px;
}
.box_hd ul li .finally{
    border:0;
}
.box_bd{
    height: 361px;
}
.table_list_item div{
    float: left;
}
.list1{
   width: 210px;
   height: 361px;
   background-color: #f9f9f9;

}
.table_list ul li{
    float: left;
    width: 83px;
    height: 33px;
    line-height: 33px;
    margin-left: 14px;
    border-bottom: 1px solid rgb(211, 207, 207);
    text-align: center;
}
.tvtupian{
    text-align: center;
    padding-left: 28px;
    margin-top: 27px;
}
.tvtupian h3{
    font-size: 18px;
    color: #c81623;
}
.tvtupian p{
    font-size: 13px;
    color: #c81623;
    /* h3和p默认之间有间隙 咋整？*/
}
.reshuihu{
    width: 329px;
    height: 361px;
    background-color: #aed6d8;
    padding-top: 37px;
    padding-left: 32px;
}
.reshuihu h3{
    font-size: 18px;
    color: #066c7d;
}
.reshuihu p{
    color:#066c7d;
    font-size: 13px;
}
.list3{
    height: 360px;
    width: 220px;
}
.list3 .weibolu{
    width: 220px;
    padding-top: 25px;
    padding-left: 19px;
    height: 180px;
    /* float: left; */
    border-bottom:1px solid rgb(226, 222, 222) ;
    border-right:1px solid rgb(226, 222, 222) ;
}
.list3 .weibolu h3{
    font-size: 16px;
}
.list3 .weibolu p{
    font-size: 14px;
    color: #c81623;
}
.list3 .weibolu img{
   float: right;
}
.list3 .leshi{
    width: 220px;
    padding-top: 25px;
    padding-left: 19px;
    height: 181px;
    border-right:1px solid rgb(226, 222, 222) ;
    border-bottom:1px solid rgb(226, 222, 222) ;
}
.list3 .leshi h3{
    font-size: 16px;
}
.list3 .leshi p{
    font-size: 14px;
    color: #c81623;
}
.list3 .leshi img{
   float: right;
}
.list4{
    width: 220px;
    height: 361px;
    border-right: 1px solid rgb(226, 222, 222);
    border-bottom:1px solid rgb(226, 222, 222) ;
}
.list4 h3{
    font-size: 18px;
    padding-top: 72px;
    padding-left: 23px;
}
.list4 p{
    font-size: 13px;
    padding-left: 32px;
    margin-bottom: 70px;
}
.list4 img{
    margin-left: 24px;
}

二、列表页制作

套了之前写的头部和底部，再改一些细节部分，这节注意的是加了边框之后鼠标移过去那个图片就会下沉一下，因为边框的1px占地儿了，所以把之前的也写成有边框，只不过颜色透明，鼠标过去之后边框变红就可

<!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>
    <link rel="stylesheet" href="css/common.css">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/chushihua.css">
    <link rel="stylesheet" href="css/list.css">
</head>
<body>
    <section class="shortcut">
        <div class="w">
            <div class="left">
               <!-- 左侧部分再分成两个小块，这里用li去做，登陆和注册通常放在一起，
                其中登陆是一个a，注册又是一个a -->
                <ul>
                    <li>
                        品优购欢迎您！&nbsp;
                    </li>
                    <li>
                        <a href="#">请登录&nbsp;</a>
                        <a href="#" class="style_red">免费注册</a>
                        <!-- 好多地方的字体都需要这个红色，哪个用到了就起名为这个，就不用一个一个加盒子改名了 -->
                    </li>
                </ul>

            </div>
            <div class="right">
                <ul>
                    <!-- 那些小竖线一般直接当作一个盒子来用，设置bcc和1px -->
                    <li>我的订单</li>
                    <li></li>
                    <li class="iconfont">我的品优购&#xe6f9;</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="iconfont">关注品优购&#xe6f9;</li>
                    <li></li>
                    <li class="iconfont">网站导航&#xe6f9;</li>
                    <!-- 小三角是字体图标，也得放在盒子里1.写一个盒子放三角2.after伪元素 -->
                </ul>

            </div>
        </div>
    </section>
    <header class="head">
        <div class="logo">
            <h1>
                <a href="index.html">品优购首页</a>
            </h1>
        </div>
        <div class="miaotu">
            <div class="miaosha"></div>
        </div>
        <div class="search">
        <input type="search" name="" id="" placeholder="语言开发">
        <button>搜索</button>
        </div>
        <div class="hotwords">
            <a href="#" class="style_red">优惠购首发</a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">美满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>
        <div class="shopcar">
            <li class="iconfont">&#xe614;&nbsp;我的购物车&nbsp;&#xe604;</li>
            <div class="count">8</div>
        </div>
    </header>
    <nav class="nav">
        <div class="navy">
            <div class="nav_left">
                <ul>
                    <li>品优秒杀</li>
                    <li>即将售罄</li>
                    <li>超级低价</li>
                </ul>
            </div>
            <div class="nav_right">
                <ul>
                    <li>女装</li>
                    <li>女鞋</li>
                    <li>男装</li>
                    <li>男鞋</li>
                    <li>母婴童装</li>
                    <li>食品</li>
                    <li>智能数码</li>
                    <li>运动户外</li>
                    <li class="iconfont">更多分类&#xe6f9;</li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="banner">
        <div class="nvxie"></div>
        <h3>————&nbsp;正在抢购&nbsp;————</h3>
    </div>
    <div class="phone">
        <ul>
            <li>
                <div class="guang">
                    <img src="../shopping/upload/iphone.png" alt="">
                    <p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
                    <img src="../shopping/upload/价格.png" alt="">
                    <img src="../shopping/upload/已售.png" alt="">
                </div>
                <div class="qianggou">立即抢购</div>
            </li>
            <li>
                <div class="guang">
                    <img src="../shopping/upload/iphone.png" alt="">
                    <p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
                    <img src="../shopping/upload/价格.png" alt="">
                    <img src="../shopping/upload/已售.png" alt="">
                </div>
                <div class="qianggou">立即抢购</div>
            </li>
            <li>
                <div class="guang">
                    <img src="../shopping/upload/iphone.png" alt="">
                    <p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
                    <img src="../shopping/upload/价格.png" alt="">
                    <img src="../shopping/upload/已售.png" alt="">
                </div>
                <div class="qianggou">立即抢购</div>
            </li>
            <li>
                <div class="guang">
                    <img src="../shopping/upload/iphone.png" alt="">
                    <p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p>
                    <img src="../shopping/upload/价格.png" alt="">
                    <img src="../shopping/upload/已售.png" alt="">
                </div>
                <div class="qianggou">立即抢购</div>
            </li>
        </ul>
    </div>
    <footer class="footer">
        <div class="w1">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5 class="one"></h5>
                        <div>
                            <h3>正品保障</h3>
                            <p>正品保障,提供发票</p>
                        </div>
                        
                    </li>
                    <li>
                        <h5 class="two"></h5>
                        <div>
                            <h3>极速物流</h3>
                            <p>极速物流，急速送达</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="three"></h5>
                        <div>
                            <h3>无语售后</h3>
                            <p>7天无理由退换</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="four"></h5>
                        <div>
                            <h3>特色服务</h3>
                            <p>私人定制家电套餐</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="mod_help">
            <ul>
                <li>
                    <h3>购物指南</h3>
                    <a href="#">购物流程</a>
                    <a href="#">会员介绍</a>
                    <a href="#">生活旅行/团购</a>
                    <a href="#">常见问题</a>
                    <a href="#">大家电</a>
                    <a href="#">联系客服</a>
                </li>
                <li>
                    <h3>配送方式</h3>
                    <a href="#">上门自提</a>
                    <a href="#">211限时达</a>
                    <a href="#">配送服务查询</a>
                    <a href="#">配送费收取标准</a>
                    <a href="#">海外配送</a>
                </li>
                <li>
                    <h3>支付方式</h3>
                    <a href="#">货到付款</a>
                    <a href="#">在线支付</a>
                    <a href="#">分期付款</a>
                    <a href="#">邮局汇款</a>
                    <a href="#">公司转账</a>
                </li>
                <li>
                    <h3>售后服务</h3>
                    <a href="#">售后政策</a>
                    <a href="#">价格保护</a>
                    <a href="#">退款说明</a>
                    <a href="#">返修/退换货</a>
                    <a href="#">取消订单</a>
                </li>
                <li>
                    <h3>特色服务</h3>
                    <a href="#">夺宝岛</a>
                    <a href="#">DIY装机</a>
                    <a href="#">延保服务</a>
                    <a href="#">品优购E卡</a>
                    <a href="#">品优购通信</a>
                </li>
                <li class="finally">
                    <h3>帮助中心</h3>
                    <div class="code"></div>
                    <p>品优购客户端</p>
                </li>
            </ul>
        </div>
        <div class="mod_copyright">
            <div class="dibu">
                <a href="#">关于我们</a>
            <a href="">联系我们</a>
            <a href="">联系客服</a>
            <a href="">商家入驻</a>
            <a href="">营销中心</a>
            <a href="">手机品优购</a>
            <a href="">友情链接</a>
            <a href="">销售联盟</a>
            <a href="">品优购社区</a>
            <a href="">品优购公益</a>
            <a href="">English Site</a>
            <a href="">Contact U</a>
            </div>
            <p>地址：北京市昌平区建材域西路金燕龙办公室一楼&nbsp;邮编：10096&nbsp;电话：400-618-4000&nbsp;传真：010-82935100&nbsp;邮箱：zhanghj+itcast.cn</p>
            <p>京ICP备08001421号京公网安备110108007702</p>
        </div>
    </footer>
</body>
</html>

@font-face {
    font-family: 'iconfont';  /* Project id 4446215 */
    src: url('//at.alicdn.com/t/c/font_4446215_nsx1oivho9g.woff2?t=1709269666917') format('woff2'),
         url('//at.alicdn.com/t/c/font_4446215_nsx1oivho9g.woff?t=1709269666917') format('woff'),
         url('//at.alicdn.com/t/c/font_4446215_nsx1oivho9g.ttf?t=1709269666917') format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.miaosha{
    background: url(../upload/秒杀.png) no-repeat;
    width: 56px;
    height: 26px;
    float: right;
}
.miaotu{
    width: 70px;
    height: 26px;
    border-left:1px solid #c81523 ;
    position: absolute;
    left: 186px;
    top: 40px;
}
.navy{
    width: 1200px;
    margin: 0 auto;
}
.nav_left{
    width: 360px;
    height: 44px;
    float: left;
}
.nav_left ul li{
    width: 120px;
    height: 44px;
    line-height: 44px;
    float: left;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color:black;
}
.nav_right{
    width: 840px;
    height: 44px;
    float: left;
    padding-left: 30px;
}
.nav_right ul li{
    float: left;
    font-size: 14px;
    line-height: 44px;
    margin-right: 46px;
}
.banner{
    height: 120px;
    width: 1200px;
    background:url(../upload/banner1.png);
    margin: 0 auto;
    position: relative;
}
.banner .nvxie{
    width: 93px;
    height: 29px;
    background: url(../upload/女鞋.png);
    position: absolute;
    top: 25px;
    left: 554px;
}
.banner h3{
    color:black;
    font-size: 17px;
    position: absolute;
    bottom: 23px;
    left: 505px;
}
.phone{
    height: 460px;
    width: 1200px;
    margin: 0 auto;
    margin-top: 25px;
}
.phone ul li{
    width: 289px;
    height: 460px;
    overflow: hidden;
    float: left;
    margin-right: 14px;
    border: 1px solid transparent;
}
.phone ul li:last-child{
    margin-right: 0;
}
.guang p{
    padding-left: 13px;
    margin-bottom: 15px;
}
.guang img{
    margin-left: 15px;
    margin-bottom: 13px;
}
.qianggou{
    height: 50px;
    background-color: #c81523;
    color:#fff;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
}
.phone ul li:hover{
border: 1px solid #c81523;
/* 然后发现加了边框之后鼠标移过去那个图片就会下沉一下，因为边框的1px占地儿了，所以
把之前的也写成有边框，只不过颜色透明，鼠标过去之后边框变红 */
}

三、注册页面

<!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>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/chushihua.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
</head>
<body>
        <header>
            <div class="logo"></div>
        </header>
        <div class="registerarea">
            <h3>
                注册新用户
                <div class="denglu">我有账号，去<a href="#" class="style_red">登陆</a></div>
            </h3>
            <div class="reg_form">
                <!-- 注册内容不用表单来做，要用li -->
                <ul>
                    <li>
                        <label for="">手机号：</label>
                        <input class="inp" type="text">
                        <span class="error">
                            <i class="error_icon"></i>
                            手机号码格式不正确，请重新输入
                        </span>
                    </li>
                    <li>
                        <label for="">短信验证码：</label>
                        <input class="inp" type="text">
                        <span class="success">
                            <i class="success_icon"></i>
                            短信验证码输入正确
                        </span>
                    </li>
                    <li>
                        <label for="">登陆密码：</label>
                        <input class="inp" type="text">
                        <span class="error">
                            <i class="error_icon"></i>
                            密码不少于6位数，请重新输入
                        </span>
                    </li>
                    <li class="safe">
                        安全程度
                        <em>弱</em><em>中</em><em>强</em>
                    </li>
                    <li>
                        <label for="">确认密码：</label>
                        <input class="inp" type="text">
                        <span class="error">
                            <i class="error_icon"></i>
                            密码不一致，请重新输入
                        </span>
                    </li>
                    <li class="agree">
                        <input type="checkbox" name="" id="">同意协议并注册
                        <div class="style_blue">《知果果用户协议》</div>
                    </li>
                    <li class="wancheng">
                        <a href="">完成注册</a>
                        
                    </li>
                </ul>
            </div>
        </div>
        <div class="mod_copyright">
            <div class="dibu">
                <a href="#">关于我们</a>
            <a href="">联系我们</a>
            <a href="">联系客服</a>
            <a href="">商家入驻</a>
            <a href="">营销中心</a>
            <a href="">手机品优购</a>
            <a href="">友情链接</a>
            <a href="">销售联盟</a>
            <a href="">品优购社区</a>
            <a href="">品优购公益</a>
            <a href="">English Site</a>
            <a href="">Contact U</a>
            </div>
            <p>地址：北京市昌平区建材域西路金燕龙办公室一楼&nbsp;邮编：10096&nbsp;电话：400-618-4000&nbsp;传真：010-82935100&nbsp;邮箱：zhanghj+itcast.cn</p>
            <p>京ICP备08001421号京公网安备110108007702</p>
        </div>
   
</body>
</html>

header{
    width: 1200px;
    margin: 0 auto;
    height: 84px;
    border-bottom: 2px solid #b1191a;
}
.logo{
    background: url(../images/logo.png);
    height: 61px;
}
.registerarea{
    height: 522px;
    border: 1px solid #ccc;
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
}
.registerarea h3{
    width: 1200px;
    height: 42px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    padding-left:10px ;
    line-height: 42px;
    font-size: 15px;
    /* float: left; */
}
.denglu{
    float: right;
    font-size: 14px;
}
.denglu .style_red{
    float: right;
    margin-right: 10px;
}
.reg_form{
    margin: 0 auto;
    width: 600px;
    height: 393px;
    /* background-color: pink; */
    margin-top: 50px;
}
.reg_form ul li {
    margin-bottom: 20px;
}
.reg_form ul li label{
    font-size: 13px;
    width: 88px;
    /* 因为发现那些文字都是右对齐的，所以给label设置宽度让文字靠右，而且label是行内元素还得转换一下 */
    display: inline-block;
    text-align: right;
}
.reg_form ul li .inp{
    width: 242px;
    height: 37px;
    border: 1px solid rgb(168, 167, 167);
}
.error{
    color:#b1191a;
}
.error_icon,
.success_icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    background:url(../upload/error.png);
    /* 如何让文字和图片垂直居中 */
    vertical-align: middle;
}
.success{
    color:green;
}
/* .success_icon{
    /* background-color: green; */
    /* 如何让文字和图片垂直居中 */
/* } */ 
.safe{
    margin-left: 175px;
}
.safe em{
    display: inline-block;
    height: 13px;
    width: 34px;
    line-height: 13px;
    text-align: center;
    margin-right: 2px;
    color:#fff;
}
.safe em:first-child{
    background-color: #de1111;
}
.safe em:nth-child(2){
    background-color: #40b83f;
}
.safe em:nth-child(3){
    background-color: #f79100;
}
.agree input{
    vertical-align: middle;

}
.agree{
    padding-left: 95px;
}
.style_blue{
    display: inline-block;
    color: rgb(0, 153, 255);
}
.wancheng{
    width: 200px;
    height: 34px;
    background-color: #d81f1f;
    margin-left: 115px;
}
.wancheng a{
    width: 200px;
    display: inline-block;
    color:#fff;
    font-size: 15px;
    line-height: 34px;
    text-align: center;
}

终于写完了，开学第一周希望开个好头，然后马不停蹄的去写js！