欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML+CSS实战---------一个电商类的小型项目:品优购(二)

程序员文章站 2022-04-14 21:09:41
...

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

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

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

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

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

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

熟能生巧!!!!!熟能生巧!!!!!熟能生巧!!!!!

加油加油加油!!!

附上我完善得一部分

HTML+CSS实战---------一个电商类的小型项目:品优购(二)

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

 

<!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;
}