HTML+CSS实战---------一个电商类的小型项目：品优购（二）

最新推荐文章于 2021-06-29 00:01:04 发布

Kong_十六

最新推荐文章于 2021-06-29 00:01:04 发布

阅读量1.2k

点赞数 3

分类专栏： # 练习实例 Web—第一阶段文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_42383764/article/details/104352500

版权

Web—第一阶段同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

练习实例

21 篇文章 0 订阅

订阅专栏

费了半天劲，终于把头和尾部的样式做完了。下次更新就是我画得页面了。期待着自己（哈哈哈哈哈哈哈哈）

还有很多不足的地方，需要反思，很多地方就是凭借自己的想法来的，代码有点冗余（我改不了啊啊啊啊）。

前期嘛，就是练手找布局的思路，学了浮动、定位，但是还是不能上来就可以确定是用定位好还是用浮动好，emmmmmm。。。。

这是我需要克服的问题。还有一点，padding和margin有时候也不知道应该用哪个好，就是做着做着突然发现用padding不行，回头又改成margin值了，emmmmmmm。。。没错，就是这样。

虽然这些东西看起来很简单，但是当自己真正得去做得时候，还是由困难的，不知道怎么去动手开始，但是慢慢的就好了。在完成一个小部分的时候，会很有感觉。

总而言之吧，对这些只是的运用还是比较生疏的，还是得需要多多练习啊！！！！！

熟能生巧！！！！！熟能生巧！！！！！熟能生巧！！！！！

加油加油加油！！！

附上我完善得一部分

代码也整过来吧，到时候完成得时候可以自己纠错，改善一下自己雏形得代码（捂脸捂脸）

<!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">
    <!-- 图标 -->
    <link rel="shortcut icon" href="bitbug_favicon.ico" />
    <!-- SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！
    常见的搜索引擎，比如百度，谷歌，雅虎，搜狗等等..
    SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，
    从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来。 
    网站优化的三大标签：title、description、keywords
        1.网页的标题 -->
    <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 2.网页的描述
        1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，
            所以要写的很详细，让人感兴趣， 吸引用户点击。
        2. 同样遵循简短原则，字符数含空格在内不要超过 120个汉字。 -->
    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <!-- 3.网页的关键字：搜索引擎搜索到定义的关键字就可以检索到我们的网页 -->
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/common.css">
</head>

<body>
    <!-- 快捷导航栏 -->
    <div class="shortcut">
        <div class="core">
            <!-- 左边栏 -->
            <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="spacer"></li>
                    <li>
                        <a href="#">我的品优购</a>
                        <i></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">关注品优购</a>
                        <i></i>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">客户服务</a>
                        <i></i>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">网站导航</a>
                        <i></i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- header部分 -->
    <div class="header core">
        <!-- logo部分 -->
        <div class="logo">
            <h1><a href="index.html" title="品优购">品优购</a></h1>
        </div>
        <!-- 搜索框部分 -->
        <div class="search">
            <input type="text" value="语言开发">
            <button class="btn">搜索</button>
        </div>
        <!-- 小项目部分 -->
        <div class="items_list">
            <ul>
                <li><a href="#" class="style_red">优惠购首发</a></li>
                <li><a href="#">亿元优惠</a></li>
                <li><a href="#">9.9元团购</a></li>
                <li><a href="#">美满99减30</a></li>
                <li><a href="#">办公用品</a></li>
                <li><a href="#"> 电脑</a></li>
                <li><a href="#">通信</a></li>
            </ul>
        </div>
        <!-- 购物车 -->
        <div class="shopping_car">
            <i></i>
            <a>我的购物车 </a>
            <i></i>
            <p>80</p>
        </div>

    </div>
    <!-- nav导航栏部分 -->
    <div class="nav">
        <div class="core" style="position: relative;">

            <!-- 下拉栏目部分 -->
            <div class="dropdown">
                <div class="dt"><a href="#">全部商品分类</a></div>
                <div class="dd" style="display: none;">
                    <ul>
                        <li>
                            <a href="#">家用电器</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">手机</a>
                            <a href="#">数码</a>
                            <a href="#">通信</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">电脑</a>
                            <a href="#">办公</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">家居</a>
                            <a href="#">家具</a>
                            <a href="#">家装</a>
                            <a href="#">厨具</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">男装</a>
                            <a href="#">女装</a>
                            <a href="#">童装</a>
                            <a href="#">内衣</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">个户化妆</a>
                            <a href="#">清洁用品</a>
                            <a href="#">宠物</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">鞋靴</a>
                            <a href="#">箱包</a>
                            <a href="#">珠宝</a>
                            <a href="#">奢侈品</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">运动户外</a>
                            <a href="#">钟表</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">汽车</a>
                            <a href="#">汽车用品</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">母婴</a>
                            <a href="#">玩具乐器</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">食品</a>
                            <a href="#">酒类</a>
                            <a href="#">生鲜</a>
                            <a href="#">特产</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">医药保健</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">图书</a>
                            <a href="#">音响</a>
                            <a href="#">电子书</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">彩票</a>
                            <a href="#">旅行</a>
                            <a href="#">充值</a>
                            <i></i>
                        </li>
                        <li>
                            <a href="#">理财</a>
                            <a href="#">白条</a>
                            <a href="#">保险</a>
                            <i></i>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 链接小项目 -->
            <div class="nav_items_list fr">
                <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>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="core">
            <div class="mod_service">
                <div class="mod_service_zheng">
                    <div class="icon_list"></div>
                    <div>
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </div>
                <div class="mod_service_ji">
                    <div class="icon_list"></div>
                    <div>
                        <h4>急速物流</h4>
                        <p>急速物流，急速送达</p>
                    </div>
                </div>
                <div class="mod_service_wu">
                    <div class="icon_list"></div>
                    <div>
                        <h4>无忧售后</h4>
                        <p>7天无理由退换货</p>
                    </div>
                </div>
                <div class="mod_service_te">
                    <div class="icon_list"></div>
                    <div>
                        <h4>特色服务</h4>
                        <p>私人定制家电套餐</p>
                    </div>
                </div>
                <div class="mod_service_bang">
                    <div class="icon_list"></div>
                    <div>
                        <h4>帮助中心</h4>
                        <p>您的购物指南</p>
                    </div>
                </div>
            </div>
            <div class="mod_help">
                <ul>
                    <li>
                        <h4>购物指南</h4>
                    </li>
                    <li><a>购物流程</a></li>
                    <li><a>会员介绍</a></li>
                    <li><a>生活旅行/团购</a></li>
                    <li><a>常见问题</a></li>
                    <li><a>大家电</a></li>
                    <li><a>联系客服</a></li>
                </ul>
                <ul>
                    <li>
                        <h4>配送方式</h4>
                    </li>
                    <li><a>上门自提</a></li>
                    <li><a>211限时达</a></li>
                    <li><a>配送服务查询</a></li>
                    <li><a>配送费收取标准</a></li>
                    <li><a>海外配送</a></li>
                </ul>
                <ul>
                    <li>
                        <h4>支付方式</h4>
                    </li>
                    <li><a>货到付款</a></li>
                    <li><a>在线支付</a></li>
                    <li><a>分期付款</a></li>
                    <li><a>邮局汇款</a></li>
                    <li><a>公司转账</a></li>
                </ul>
                <ul>
                    <li>
                        <h4>特色服务</h4>
                    </li>
                    <li><a>夺宝岛</a></li>
                    <li><a>DIY装机</a></li>
                    <li><a>延保服务</a></li>
                    <li><a>品优购E卡</a></li>
                    <li><a>品优购通信</a></li>
                </ul>
                <ul>
                    <li>
                        <h4>售后政策</h4>
                    </li>
                    <li><a>售后政策</a></li>
                    <li><a>价格保护</a></li>
                    <li><a>退款说明</a></li>
                    <li><a>返修/退换货</a></li>
                    <li><a>取消订单</a></li>
                    <li><a>联系客服</a></li>
                </ul>
                <div>
                    <h4>帮助中心</h4>
                    <img src="image/wx_cz.jpg">
                    <span>品优购客户端</span>
                </div>
            </div>
            <div class="mod_copyright">
                <p>
                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
                </p>
                <p>
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
                    <br>京ICP备08001421号京公网安备110108007702
                </p>
            </div>
        </div>

    </div>
</body>

</html>

common.css：这是头部和尾部得公共样式

/*公共样式*/

.fl {
    float: left;
}

.fr {
    float: right;
}


/*版心*/

.core {
    width: 1200px;
    margin: 0 auto;
}

.style_red {
    color: #c81623;
}

.text {
    background-color: pink;
}


/* 定义字体图标 */

@font-face {
    font-family: 'icomoon';
    /* 定义字体一定要写对路径！！！！ */
    src: url('../fonts/icomoon.eot?7kkyc2');
    src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7kkyc2') format('truetype'), url('../fonts/icomoon.woff?7kkyc2') format('woff'), url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* 快捷导航部分  使用浮动做*/

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

.shortcut li {
    float: left;
}

.shortcut .fl a {
    margin-left: 13px;
}

.shortcut li i {
    font-family: 'icomoon';
    font-size: 13px;
    line-height: 10px;
}


/* 使用一个容器做出边框的效果 */

.shortcut .fr .spacer {
    width: 1px;
    height: 12px;
    background-color: #000;
    margin: 9px 10px 0 16px;
}


/* header部分  用定位做*/

.header {
    position: relative;
    height: 106px;
}


/* logo */

.header .logo {
    position: absolute;
    top: 27px;
    left: 0;
    width: 175px;
    height: 56px;
}

.header .logo h1 {
    text-indent: -9999px;
}

.logo a {
    display: block;
    width: 175px;
    height: 56px;
    background: url(../image/logo.png) no-repeat;
}


/* 搜索栏部分 */

.search {
    position: absolute;
    top: 27px;
    left: 348px;
    float: left;
}

.search input {
    float: left;
    width: 450px;
    height: 33px;
    border: 2px solid #b1191a;
    padding-left: 5px;
}

.search .btn {
    float: left;
    width: 80px;
    height: 37px;
    background-color: #b1191a;
    border: none;
    color: #fff;
    font-size: 16px;
}


/* 小项目 */

.items_list {
    position: absolute;
    top: 70px;
    left: 346px;
}

.items_list li {
    float: left;
}

.items_list li a {
    display: block;
    margin: 0 12px;
}


/* 购物车 */

.shopping_car {
    position: absolute;
    top: 27px;
    right: 63px;
    width: 140px;
    height: 36px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

.shopping_car>i:first-child {
    font-family: 'icomoon';
    font-size: 15px;
    color: red;
    line-height: 36px;
    margin: 0 5px 0 17px;
}

.shopping_car>i:nth-of-type(2) {
    font-family: 'icomoon';
    font-size: 15px;
    line-height: 30px;
}


/* 购物车的count部分
*		注意几点细节：
				当数字变大的时候，数字应该是从左往右排列
				不能给count盒子宽度，宽度是由内容撑开的。
 */

.shopping_car p {
    position: absolute;
    top: -8px;
    left: 104px;
    height: 20px;
    line-height: 20px;
    background-color: red;
    color: white;
    padding: 0 5px;
    border-radius: 50% 50% 50% 0;
}


/* nav部分 */

.nav {
    border-bottom: 2px solid #b1191a;
}


/* 二级导航  .dt为一级 .dd为二级 */

.nav .dt a {
    display: block;
    width: 209px;
    height: 47px;
    background-color: #b1191a;
    text-align: center;
    font: 16px '微软雅黑';
    line-height: 47px;
    color: #fff;
}

.nav .dt a:hover {
    color: gainsboro;
}

.nav .dd ul {
    position: absolute;
    width: 209px;
    background-color: #c81623;
}

.nav .dd li {
    position: relative;
    width: 209px;
    height: 32px;
    /* background-color: #c81623; */
}

.nav .dd li a {
    color: white;
    font: 14px '微软雅黑';
    line-height: 32px;
    padding-left: 10px;
}


/* 字体图标 
	还有一种方法是运用伪元素制作
		li:after{
			content:'\ea51';
			
		}
*/

.nav .dd ul i {
    position: absolute;
    top: 0;
    right: 10px;
    font-family: 'icomoon';
    font-size: 12px;
    line-height: 32px;
    color: white;
}

.nav .dd li:hover,
.nav .dd li:nth-last-of-type(3) {
    margin-left: 2px;
    background-color: #fff;
    width: 207px;
}

.nav .dd li:hover a,
.nav .dd li:nth-last-of-type(3) a {
    color: red;
    font-weight: 400;
}


/* 右边链接小项目栏 */

.nav_items_list {
    position: absolute;
    top: 15px;
    left: 230px;
}

.nav_items_list li {
    float: left;
    margin: 0 20px;
    font-size: 16px;
}


/* 页面底部footer */

.footer {
    height: 417px;
    background-color: #f5f5f5;
}


/* 服务模块 */

.mod_service {
    height: 109px;
    border-bottom: 1px solid #ededed;
}


/* 五个盒子都是一样的宽度 */

.mod_service>div {
    float: left;
    width: 166px;
    height: 49px;
    padding: 30px 37px;
}


/* 每个盒子里面的图片 */

.mod_service .icon_list {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../image/icons.png) no-repeat;
}


/* 每个盒子里面的图片旁边的文字 */

.icon_list+div {
    width: 110px;
    margin: 5px 0 0 60px;
}

.mod_service .mod_service_zheng .icon_list {
    background-position: -253px -3px;
}

.mod_service .mod_service_ji .icon_list {
    background-position: -254px -54px;
}

.mod_service .mod_service_wu .icon_list {
    background-position: -257px -105px;
}

.mod_service .mod_service_te .icon_list {
    background-position: -257px -156px;
}

.mod_service .mod_service_bang .icon_list {
    background-position: -257px -209px;
}


/* 帮助模块 */

.mod_help {
    height: 187px;
    border-bottom: 1px solid #ededed;
}

.mod_help ul {
    float: left;
    width: 150px;
    margin: 20px 0 0 50px;
    height: 165px;
    /* background-color: pink; */
}

.mod_help ul h4 {
    font-size: 16px;
    color: #333;
}

.mod_help li {
    padding-top: 5px;
}

.mod_help div {
    float: left;
    width: 150px;
    height: 165px;
}

.mod_help a:hover {
    cursor: pointer;
}

.mod_help>div h4 {
    font-size: 16px;
    color: #333;
}

.mod_help>div span,
.mod_help>div h4 {
    margin: 20px 0 10px 10px;
}

.mod_help img {
    display: block;
    width: 91px;
    height: 91px;
}

.mod_copyright p {
    text-align: center;
}

.mod_copyright p:first-child {
    padding: 18px 0 15px 0;
}