品优购电商静态网页布局（一）

最新推荐文章于 2024-03-03 12:19:59 发布

小粉粉hhh

最新推荐文章于 2024-03-03 12:19:59 发布

阅读量313

点赞数 12

文章标签： css html5

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

版权

之前学过html和css，时间长了之后记得不太清，时间紧任务重，直接上手做个品优购，哪里不太懂的直接看以前视频再做笔记复习一下。

1.首先进行项目规划，网页中有重复的界面就一起使用，放到common.css中一改俱改，这是一些规范命名：2.favicon图标的制作：
（1）把图标从psd文件中抠出来一个png格式的文件（切图方法：剪头鼠标单击找到他的图层，如果需要两个图层叠在一起的话，shift+、ctrl+e合并图层快速导出为png，划到最底下隐藏背景可以得到透明图）
（2）使用转换工具转换成ico图标，网址：https://www.bitbug.net/
（3）放到根目录shopping下
（4）在页面源文件的标签之间插入

3.品优购的介绍：

比如京东的
在这里插入图片描述
原则：

4.快捷栏导航shortcut

<!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">
</head>
<body>
    <div 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>
    </div>
</body>
</html>

 @font-face {
    font-family: 'iconfont';  /* Project id 4446215 */
    src: url('//at.alicdn.com/t/c/font_4446215_c1qtjfpbyxw.woff2?t=1709023862798') format('woff2'),
         url('//at.alicdn.com/t/c/font_4446215_c1qtjfpbyxw.woff?t=1709023862798') format('woff'),
         url('//at.alicdn.com/t/c/font_4446215_c1qtjfpbyxw.ttf?t=1709023862798') format('truetype');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    /* font-size: 16px; */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.shortcut{
    height: 31px;
    background-color: #f1f1f1;
    font-size: 12px;
    color: #666666;
}
.w
{
    width: 1200px;
    margin: 0 auto;
    line-height: 31px;
}
.left{
    float: left;
}
.right{
    float: right;
}
.shortcut ul li{
    float: left;
}
.style_red{
    color:#c81623;
}
/* 本来想对这些小li全部起个名，然后发现这些li都是偶数的排列 */
.shortcut .right ul li:nth-child(even){
height: 12px;
background-color: #666666;
width: 1px;
margin-top: 9px;
margin-left: 16px;
margin-right: 16px;
}

字体图标这里我用的是阿里的iconfont，添加到工程里面然后生成一个online链接，复制到css里面，样式在下载的包里面，也复制到css中，最后直接调用它的号就可以。

5.头部head

<header class="head">
        <div class="logo">
            <h1>
                <a href="index.html">品优购首页</a>
            </h1>
        </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>

.head{
    height: 105px;
   background-color: pink;
   position: relative;
}
.logo{
    width: 171px;
    height: 61px;
    position: absolute;
    top: 25px;
}
.logo h1 a{
    display: block;
    height: 61px;
    background: url(../images/logo.png);
    font-size: 0;
}
.search{
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
    position: absolute;
    top: 27px;
    left: 348px;
}
.search input{
    width: 454px;
    height: 32px;
    padding-left: 10px;
    float: left;
}
.search button{
    width: 80px;
    /* button是行内块元素，所以现在他距离左面那个框有空隙，加浮动就好了 */
    height: 32px;
    background-color: #b1191a;
    float: left;
    font-size: 16px;
    color: #fff;
}
.hotwords{
    position: absolute;
    top:67px;
    left:358px;
    height: 13px;
}
.hotwords a{
    margin: 0 10px;
}
.shopcar{
    width: 140px;
    height: 35px;
    background-color: #f7f7f7;
    position: absolute;
    left:997px;
    top:27px;
    border: 1px solid #dfdfdf;
}
.shopcar li{
font-size: 15px;
/* top:50%;
left: 50%; 
怎么居中啊*/
line-height: 35px;
text-align: center;
}
/* 他用的是伪元素.shopcar：：before
content:'/购物车图标号'；after 小三角*/
.count{
    position: absolute;
    height: 14px;
    border-radius:7px 7px 7px 0 ;
    color: #fff;
    background-color: #e60012;
    padding: 0 5px;
    bottom: 27px;
    left: 105px;
}

6.nav导航栏

<nav class="nav">
        <div class="navy">
            <div class="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <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="#">运动户外、钟表</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>
                    </ul>
                </div>
            </div>
            <div class="navitems">
                <ul>
                    <li>服装城</li>
                    <li>美妆馆</li>
                    <li>传智超市</li>
                    <li>全球购</li>
                    <li>闪购</li>
                    <li>团购</li>
                    <li>拍卖</li>
                    <li>有趣</li>
                </ul>
            </div>
        </div>
    </nav>

.nav{
    height: 45px;
    border-bottom:1px #b1191a solid;
}
.navy{
    width: 1200px;
    height: 46px;
    margin: 0 auto;
}
.dropdown{
    float: left;
    height: 511px;
}
/* 本来我只是对dt浮动了，导致加上dd之后dd成了标准流把navitem压在下面上不来 */
.dropdown .dt{
    width: 208px;
    height: 46px;
    background-color: #b1191a;
    /* float: left; */
    line-height: 46px;
    color:#fff;
    text-align: center;
    font-size: 18px;
}
.dd{
    width: 100%;
    background-color:#c81623;
    color: #fff;
}
.dd li{
    height: 31px;
    position: relative;
    /* margin-left: 2px;
    padding-left: 5px; */
    width: 100%;
    line-height: 31px;
    
}
.dd li a::after{
    content: '>';
    font-family: 'iconfont';
    color:#fff;
    position: absolute;
    right: 12px;
}
.dd li a{
    font-size: 14px;
    color: #fff;
    width: 100%;
    height: 31px;
    display: inline-block;
    margin-left: 2px;
    padding-left: 10px;
}
/* .dd li a{
    border-left:1px solid  #c81623;
} */
.dd li a:hover{
    background-color: #fff;
    /* color: #b1191a;这种方法那个字不变色 */
}

.dd li:hover a{
    color:#b1191a;
}
.navitems{
    float: left;
}
.navitems li{
    display: inline;
    color: #858585;
    font-size: 18px;
    padding-left:48px;
    line-height: 46px;
    float: left;
}

7.foot

<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>

.footer{
    height: 416px;
    background-color: #f5f5f5;
    padding-top: 30px;
}
.mod_service{
    width: 1200px;
    height: 80px;
    border-bottom: 1px #d3d1d1 solid;
    margin: 0 auto;
}
.mod_service ul li{
    height: 50px;
    width: 300px;
    float: left;
    padding-left: 35px;
}
.mod_service ul li .one{
    height: 50px;
    width: 50px;
    background: url(../images/正品保障.png);
    float: left;
    margin-right: 5px;
}
.mod_service ul li div p{
   font-size: 12px;
}
.mod_service ul li div h3{
    font-size: 14px;
}
.mod_service ul li .two{
    height: 50px;
    width: 50px;
    background: url(../images/极速物流.png) no-repeat ;
    float: left;
    margin-right: 5px;
}
.mod_service ul li .three{
    height: 50px;
    width: 50px;
    background: url(../images/极速物流.png) no-repeat -249px;
    float: left;
    margin-right: 5px;
}
.mod_service ul li .four{
    height: 50px;
    width: 50px;
    background: url(../images/极速物流.png) no-repeat -483px;
    float: left;
    margin-right: 5px;
}
.mod_help{
    height: 189px;
    width: 1200px;
    border-bottom: 1px #d3d1d1 solid;
    margin: 0 auto;
}
.mod_help ul li{
    float: left;
    width: 200px;
    height: 188px;
    padding-left: 50px;
    padding-top: 22px;
}
.mod_help ul li h3{
    font-size: 16px;
}
.mod_help ul li a{
    display: block;
    font-size: 13px;
}
.mod_help ul li:last-child{
    padding-left: 30px;
}
.mod_help ul li .code{
    height: 95px;
    width: 95px;
    margin-bottom: 5px;
    margin-top: 5px;
    background: url(../images/品优购客户端.png);
    /* 不知道图怎么过去喽 */
    margin-left: -8px;
}
.dibu{
    height: 48px;
    text-align: center;
    line-height: 48px;
    font-size: 13px;
}
.dibu a{
    border-left: 1px solid ;
    padding-left: 14px;
    padding-right: 14px;
}
.dibu a:first-child{
    border-left:1px transparent ;
}
.mod_copyright p{
    text-align: center;
}

小粉粉hhh

关注

12
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
品优购电商静态网页布局（一）

（1）把图标从psd文件中抠出来一个png格式的文件（切图方法：剪头鼠标单击找到他的图层，如果需要两个图层叠在一起的话，shift+、ctrl+e合并图层快速导出为png，划到最底下隐藏背景可以得到透明图）字体图标这里我用的是阿里的iconfont，添加到工程里面然后生成一个online链接，复制到css里面，样式在下载的包里面，也复制到css中，最后直接调用它的号就可以。之前学过html和css，时间长了之后记得不太清，时间紧任务重，直接上手做个品优购，哪里不太懂的直接看以前视频再做笔记复习一下。
复制链接

扫一扫