前端初尝试---品优购首页（只用HTML和CSS）

最新推荐文章于 2022-11-08 15:25:38 发布
最新推荐文章于 2022-11-08 15:25:38 发布
阅读量2.8k 收藏 29
点赞数 4
分类专栏： 又是考核的一天 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52025712/article/details/114338725
版权

品优购首页（只用HTML和CSS）

预览

在这里插入图片描述

主页HTML码

<!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">
    <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购">
<!--    引入初始化样式文件-->
    <link rel="stylesheet" href="css/base.css">
<!--    引入公共的样式文件-->
    <link rel="stylesheet" href="css/common.css">
<!--    引入favicon图标-->
    <link rel="shortcut icon" href="favicon.ico">
<!--    引入首页的样式文件-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--    快捷导航-->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！&nbsp</li>
                    <li>
                        <a href="#">请登录&nbsp</a><a href="#" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>
<!--    快捷导航end-->
<!--    header头部模块-->
    <header class="header w">
<!--    logo 模块-->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购">品优购</a>
            </h1>
        </div>
<!--    search搜索框-->
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
        </div>
<!--    hotWords模块-->
        <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>
<!--    shopCar模块-->
        <div class="shopCar">
            我的购物车&nbsp>
            <i class="count">8</i>
        </div>
    </header>
<!--    header头部模块end-->
<!--    nav导航模块-->
    <nav class="nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="#">手机</a> 、<a href="#">数码</a> 、<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><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>
    </nav>
<!--    nav导航模块end-->
<!--首页专有的模块 main-->
    <div class="w">
        <div class="main">
            <div class="focus">
                <ul>
                    <li>
                        <img src="upload/焦点图1.jpg" alt="">
                    </li>
                </ul>
            </div>
            <div class="newflash">
                <div class="news">
                    <div class="news-hd">
                        <h5>品优购快报</h5>
                        <a href="#">更多&nbsp></a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#"><strong>【特惠】</strong>爆款耳机5折秒！</a></li>
                            <li><a href="#"><strong>【特惠】</strong>母亲节，健康好礼低至5折！</a></li>
                            <li><a href="#"><strong>【特惠】</strong>爆款耳机5折秒！</a></li>
                            <li><a href="#"><strong>【特惠】</strong>9.9元洗100张照片！</a></li>
                            <li><a href="#"><strong>【特惠】</strong>长虹智能空调立省1000</a></li>
                        </ul>
                    </div>
                </div>
                <div class="lifeservice">
                    <ul>
<!--                        <li><a href="#"><img src="images/生活服务小图标.png">充值</a> </li>-->
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <p>话费</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="bargain"><a href="#"><img src="upload/广告图1.jpg"></a> </div>
            </div>
        </div>
    </div>
<!--首页专有的模块 main end-->
<!--推荐模块-->
    <div class="w recom">
    <div class="recom_hd">
        <i><img src="images/clock.png"></i>
        <p>今日推荐</p>
    </div>
    <div class="recom_bd">
        <ul>
            <li><a href="#"><img src="images/今日推荐内容.jpg"></a></li>
            <li></li>
            <li><a href="#"><img src="images/今日推荐内容.jpg"></a></li>
            <li></li>
            <li><a href="#"><img src="images/今日推荐内容.jpg"></a></li>
            <li></li>
            <li><a href="#"><img src="images/今日推荐内容.jpg"></a></li>
        </ul>
    </div>
</div>
<!--推荐模块end-->
<!--楼层区域制作-->
    <div class="floor">
        <div class="w jiadian">
            <div class="box-hd">
                <h3>家用电器</h3>
                <div class="tab_list">
                    <ul>
                        <li >
                            <a href="#" class="style_red">热门</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">大家电</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">生活电器</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">厨房电器</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">个护健康</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">应季电器</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">空气/净水</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">新奇特</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">高端电器</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <div class="col_210">
                            <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>
                            </ul>
                            <a href="#">
                                <img src="upload/jiadian1.png">
                            </a>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src="upload/jiadian2.jpg">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="#" class="bb">
                                <img src="upload/jiadian3.png">
                            </a>
                            <a href="#">
                                <img src="upload/jiadian4.png">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="#">
                                <img src="upload/jiadian5.png">
                            </a>
                        </div>
                        <div class="col_219">
                            <a href="#" class="bb">
                                <img src="upload/jiadian6.png">
                            </a>
                            <a href="#">
                                <img src="upload/jiadian7.png">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w shouji_diannao">
            <div class="box-hd">
                <h3>手机/电脑</h3>
                <div class="tab_list">
                    <ul>
                        <li >
                            <a href="#" class="style_red">热门</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">大家电</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">生活电器</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">厨房电器</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">个护健康</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">应季电器</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">空气/净水</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">新奇特</a>
                        </li>
                        <li></li>
                        <li>
                            <a href="#">高端电器</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <div class="col_210">
                            <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>
                            </ul>
                            <a href="#">
                                <img src="upload/jiadian1.png">
                            </a>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src="upload/jiadian2.jpg">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="#" class="bb">
                                <img src="upload/jiadian3.png">
                            </a>
                            <a href="#">
                                <img src="upload/jiadian4.png">
                            </a>
                        </div>
                        <div class="col_221">
                            <a href="#">
                                <img src="upload/jiadian5.png">
                            </a>
                        </div>
                        <div class="col_219">
                            <a href="#" class="bb">
                                <img src="upload/jiadian6.png">
                            </a>
                            <a href="#">
                                <img src="upload/jiadian7.png">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--楼层区域制作end-->
<!--底部模块的制作-->
    <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service-txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service-txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service-txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service-txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mod_help">
                <dl>
                    <dt> 购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt> 购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt> 购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt> 购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt> 购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="images/brwx.png" alt="">
                        本人微信
                    </dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="links">
                    <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>
                <div class="copyright">
                    地址：使命召唤4 切尔诺贝利-普里皮亚季 邮编：9521 电话：400-618-4000 传真：010-82935100 邮箱: lvyuanlong+itcast.cn<br>
                    男爵领域ICP备00006567号斥候网备2431667899
                </div>
            </div>
        </div>
    </footer>
<!--底部模块的制作end-->
</body>
</html>

base.css

/*把我们所有的标签的内外边距清零 */
* {
 margin: 0;
 padding: 0;
 /*CSS3盒子模型*/
 box-sizing: border-box;
}
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
 html{ color:#000; background:#fff; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
 /* 内外边距通常让各个浏览器样式的表现位置不同 */
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ margin:0; padding:0;}
 /* 要注意表单元素并不继承父级 font 的问题 */
 body,button,input,select,textarea{ font:12px/1.5 tahoma,arial,\5b8b\4f53;}
 input,select,textarea{ font-size:100%;}

 /* 去掉各Table cell 的边距并让其边重合 */
 table{ border-collapse:collapse;border-spacing:0;}

 /* IE bug fixed: th 不继承 text-align*/
 th{ text-align:inherit;}

 /* 对齐是排版最重要的因素, 别让什么都居中 */
 caption,th { text-align:left; }

 /* 去除默认边框 */
 fieldset,img{ border:0;}

 /* ie6 7 8(q) bug 显示为行内表现 */
 iframe{ display:block;}

 /* 去掉列表前的标识, li 会继承 */
 ol,ul,li{ list-style:none;}

 /* 一致的 del 样式 */
 del{ text-decoration:line-through; }

 /* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
 h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:500;}

 q:before,q:after {content:'';}

 /* 统一上标和下标 */
 sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
 sup {top: -0.5em;}
 sub {bottom: -0.25em;}

 /* 默认不显示下划线，保持页面简洁 */
 ins,a{ text-decoration:none;}

 /* 清理浮动 */
 .clearFloat:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
 .clearFloat{ zoom:1; /* for IE6 IE7 */}

 /* 设置内联, 减少浮动带来的bug */
 .floatLeft, .floatRight{ display:inline;}
 .floatLeft{ float:left;}
 .floatRight{ float:right;}

 /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
 /* HTML5 媒体文件跟 img 保持一致 */
 audio,canvas,video{ display: inline-block;*display: inline;*zoom: 1;}
 /* 去掉 firefox 下此元素的边框 */
 abbr,acronym{ border:0;font-variant:normal;}
 address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:500;}

 body{ color:#333;}
 a{ color: #666666;}
 a:hover{ color:#FF6600;}

 button,
 input {
  font-family: Microsoft YaHei, Heiti  SC, tahoma, Arial, Hiragino Sans GB, "\2B8B\4F53", sans-serif;
  border: 0;
  /*去除默认的灰色边框*/
  outline: none;
 }

common.css

/*声明字体图标 这里要注意路径的更换*/
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?50kdyc');
    src:  url('../fonts/icomoon.eot?50kdyc#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?50kdyc') format('truetype'),
    url('../fonts/icomoon.woff?50kdyc') format('woff'),
    url('../fonts/icomoon.svg?50kdyc#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
/*版心*/
.w {
    width: 1200px;
    margin: 0 auto;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.style_red {
    color: #c81623;
}
/*快捷导航*/
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}
.shortcut ul li {
    float: left;
}
/*选择所有偶数的小li*/
.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}
.arrow-icon::after {
    content: "\ea50";
    font-family: 'icomoon';
    margin-left: 6px;
}
/*header 头部制作*/
.header {
    position: relative;
    height: 110px;
}
.logo {
    top: 25px;
    position: absolute;
    width: 254px;
    height: 83px;
}
.logo a {
    display: block;
    width: 254px;
    height: 83px;
    background: url(../images/logo.png) no-repeat;
    font-size: 0px;
}
.search {
    position: absolute;
    left: 346px;
    top:25px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}
.search input {
    width: 454px;
    height: 32px;
    padding-left: 10px;
}
.search button {
    float: right;
    width: 80px;
    height: 32px;
    background-color: #b1191a;
    font-size: 16px;
    color: #fff;
}
.hotWords {
    position: absolute;
    top: 66px;
    left: 346px;
}
.hotWords a {
    margin: 0 10px;
}
.shopCar {
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}
.count {
    position: absolute;
    top: -5px;
    left: 105px;
    height: 14px;
    line-height: 14px;
    color: #ffffff;
    background-color: #e60012;
    padding: 0 6px;
    border-radius: 7px 7px 7px 0;
}
.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}
.nav .dropdown {
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;
}
.nav .navitems {
    float: left;
}
.dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}
.dropdown .dd {
    /*display: none;*/
    width: 210px;
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
}
.dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
}
.dropdown .dd ul li:hover {
    background-color: #fff;
}
.dropdown .dd ul li::after {
    position: absolute;
    top: 1px;
    right: 10px;
    color: #ffffff;
    content: ">";
}
.dropdown .dd ul li a {
    font-size: 14px;
    color: #ffffff;
}
.dropdown .dd ul li:hover a {
    color: #c81623;
}
.navitems ul li {
    float: left;
}
.navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
}

/*底部模块制作*/
.footer {
    height: 415px;
    padding-top: 30px;
}
.mod_service {
    height: 80px;
    border-bottom: 1px solid #ccc;
}
.mod_service ul li {
    float: left;
    width: 300px;
    height: 50px;
    padding-left: 35px;
}
.mod_service ul li h5 {
    float: left;
    width: 50px;
    height: 50px;
    background: url("../images/图标.png") no-repeat -110px -60px;
    margin-right: 8px;
}
.service-txt h4 {
    font-size: 14px;
}
.service-txt p {
    font-size: 12px;
}
.mod_help {
    height: 185px;
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
    padding-left: 50px;
}
.mod_help dl {
    float: left;
    width: 200px;
}
.mod_help dl:last-child {
    width: 100px;
    text-align: center;
}
.mod_help dl dt {
    font-size: 16px;
    margin-bottom: 10px;
}
.mod_copyright {
    text-align: center;
    padding-top: 20px;
}
.links {
    margin-bottom: 15px;
}
.links a{
    margin:0 10px;
}
.copyright {
    line-height: 20px;
}

index.css

.main {
    width: 980px;
    height: 455px;
    margin-left: 220px;
    margin-top: 10px;
}
.focus {
    float: left;
    width: 721px;
    height: 455px;
    background-color: purple;
}
.newflash {
    float: right;
    width: 250px;
    height: 455px;
}
.news {
    height: 165px;
    border: 1px solid #e4e4e4;
}
.news-hd {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}
.news-hd h5 {
    font-size: 14px;
    float: left;
}
.news-hd a {
    float: right;
}
.news-bd {
    padding: 5px 15px 0;
}
.news-bd ul li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lifeservice {
    overflow: hidden;
    height: 209px;
    /*background-color: purple;*/
    border-right: 1px solid #e4e4e4;
    border-top: 0;
}
.lifeservice ul {
    width: 252px;
}
.lifeservice ul li {
    float: left;
    width: 63px;
    height: 71px;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    text-align: center;
}
.lifeservice ul li i {
    display: inline-block;
    width: 24px;
    height: 28px;
    /*background-color: skyblue;*/
    margin-top: 12px;
    background: url("../images/生活服务小图标.png") no-repeat -21px -14px;
}
.bargain {
    margin-top: 5px;
}
/*推荐模块*/
.recom {
    height: 163px;
    /*background-color: skyblue;*/
    margin-top: 12px;
}
.recom_hd {
    float: left;
    width: 205px;
    height: 163px;
    font-size: 20px;
    font-weight: bold;
    background-color: #5c5251;
    color: #ffffff;
    text-align: center;
    padding-top: 30px;
}
.recom_bd {
    float: left;
}
.recom_bd ul li {
    float: left;
    margin-top: 6px;
}
.recom_bd ul li:nth-child(even) {
    width: 1px;
    height: 133px;
    background-color: #ddd;
    margin-top: 11px;
}
/*家用电器模块*/
.box-hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
    margin-top: 20px;
}
.box-hd h3 {
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #c81623;
}
.tab_list {
    float: right;
    line-height: 30px;
}
.tab_list ul li{
    float: left;
}
.tab_list ul li:nth-child(even) {
    width: 1px;
    height: 14px;
    background-color: #666666;
    margin: 8px 5px;
}
.box-bd {
    height: 361px;
    /*background-color: skyblue;*/
}
.tab_list_item>div{
    float: left;
    height: 361px;
}
.col_210 {
    width: 210px;
    text-align: center;
    background-color: #f9f9f9;
}
.col_210 ul {
    padding-left: 12px;
}
.col_210 ul li {
    float: left;
    width: 85px;
    height: 34px;
    border-bottom: 1px solid #cccccc;
    text-align: center;
    line-height: 33px;
    margin-right: 10px;
}
.col_329 {
    width: 329px;
    text-align: center;
}
.col_221 {
    width: 221px;
    text-align: center;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}
.col_219 {
    width: 219px;
    text-align: center;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}
.bb {
    display: block;
    border-bottom: 1px solid #cccccc;
}
吕元龙的小屋
关注
专栏目录
品优购首页html和css代码 记录
weixin_46427707的博客
06-17 1215
品优购首页代码
品优购首页——网页轮播图
one_mystery的博客
10-04 3224
效果图 首页文件 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>品优购首页-综合网购首选-正品低廉,品质保障,配送及时,轻松购物! </title> <meta name="description" content="品优购商城-专业的.....
品优购-day01笔记-代码规范&品优购项目准备工作&首页初步
xhqxhq_的博客
04-15 1082
typora-copy-images-to: media 第01阶段.WEB基础：品优购-day01笔记-代码规范&品优购项目准备工作&首页初步 学习目标 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 能跟上pink老师的节奏完成品优购项目 一、代码规范（重点） 1. 概述 欢迎使用品优购代码规范， 这是借鉴...
品优购项目——index.html
FD_YOLO的博客
06-26 5671
品优购项目——index.html 品优购首页页面源码。 品优购首页页面源码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="description" content="品优购JD.COM-专业的综合网上购
只使用html和css做的两个网页
05-11
大一自己编写的只使用HTML和css的两个简单的网页，代码总共约400行。
html+css品优购静态页面项目
03-23
"html+css品优购静态页面项目"是一个典型的前端网页开发实践，主要涉及HTML和CSS两种核心技术。HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）则用于控制网页的...
黑马程序员前端实战项目----品优购（上）
技术专家
11-08 1534
目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化
黑马-前端-品优购项目-静态页面搭建
03-18
在本项目中，“黑马-前端-品优购项目-静态页面搭建”，我们主要关注的是使用HTML和CSS技术来构建一个电商网站的静态首页。这个任务是前端开发的基础，旨在通过实践提升开发者对网页布局和样式设计的理解。接下来，...
品优购静态网页练习（HTML+CSS）
08-22
在本实践项目“品优购静态网页练习”中，我们将深入学习和应用HTML与CSS的基础知识，这包括HTML5和CSS3的最新特性。这个练习旨在帮助初学者或有一定基础的开发者巩固前端开发技能，通过实际操作理解网页结构与样式...
软件资源-品优购，软件资源-品优购
最新发布
08-05
软件资源----品优购，软件资源----品优购
品优购案例，一个购物页面全部代码
04-09
品优购代码，html+css+images+favicon
品优购静态页面全部代码.zip
08-01
效仿pink老师完成的品优购静态页面，欢迎大家一起来参考学习
基于HTML(品优购)电商项目项目的设计与实现（html前端源码+毕业设计）
05-03
通用电商模板提供下载，都是html静态页面，设计好的前端页面 1 绪论 1 1.1 项目开发背景 1 1.2 论文的研究目的和意义 2 1.2.1 开发的研究目的 2 1.2.2 开发的研究意义 3 2 项目介绍 4 2.1 web前端开发 4 2.1.1 web前端开发简介 4 2.1.2 项目介绍 4 2.1.3 项目特点 5 2.2开发工具简介 5 2.2.1HTML简介 6 2.2.2JavaScript简介 6 2.2.3 CSS简介 7 2.2.4Hbuilder简介 7 3 系统的需求分析与设计 7 3 项目开始 8 3.1可行性分析 8 3.2 页面分析 9 3.2.1 公共样式分析 9 3.2.2 首页分析 9 3.3 字体引入 11 3.4 页面制作 14 3.4.1 首页 14 3.4.2 列表页 18 3.4.3 商品详情页 20 3.4.4 购物车页面 22 结论 24 参 考 文 献 25 致 谢 26
品优购网上商城主要分为网站前台、运营商后台、商家管理后台
12-18
1. 品优购简介 品优购网上商城是一个综合性的 B2B2C 平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。 品优购网上商城主要分为网站前台、运营商后台、商家管理后台三个子系统 1.1 网站前台 主要包括网站首页、商家首页、商品详细页、搜索页、会员中心、订单与支付相关页面、秒杀频道等。 1.2 运营商后台 是运营商的运营人员的管理后台。 主要包括商家审核、品牌管理、规格管理、模板管理、商品分类管理、商品审核、广告类型管理、广告管理、订单查询、商家结算等。 1.3 商家管理后台 入驻的商家进行管理的后台，主要功能是对商品的管理以及订单查询统计、资金结算等功能。
26.品优购首页
potato123232的博客
03-31 449
主页在一个项目中我们一般命名index.html 我们在 品优购首页.html 中链接初始化css 实际项目中最好不要使用中文作为文件名称，这里为了好理解我就使用中文了 首页一般命名为 index.html，初始化css一般命名为 base.css ，其余公用css一般命名为 common.css 目录 1头部 1.1代码部分 1.2要注意的问题 1.2.1版心问题 1.2.2命名问题 1.2.3竖线 2搜索部分 2.1代码部分 2.2要注意的......
品优购首页_html5_css3
weixin_45344430的博客
01-31 1799
效果图 index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>品优购</title> <link rel="styleshee
只用html和css网页首页,不用JS只用CSS制作的网页下拉菜单
weixin_39641173的博客
06-17 242
以下是代码实例：html代码：复制代码代码如下:Home Page脚本之家我的首页我的日志我的日志我的相册我的收藏Connection脚本之家我的首页我的日志我的相册我的收藏My Files脚本之家我的相册我的收藏Management脚本之家我的首页我的日志我的相册我的收藏我的日志我的相册我的收藏下面是css代码：复制代码代码如下:body{background-color:white;font-...
品优购项目html代码
qq_43544490的博客
08-03 2508
* ## index首页 * <!DOCTYPE html> <html lang="zh-CN"> <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"&gt
品优购静态页面--首页的制作
m0_50789696的博客
04-11 917
一公共样式 common.css index.html 1网站图标 favicon.ico 显示在浏览器的地址栏或者标签上 1.1 制作favicon 图标 ① 将logo 图标切成 png图片 ②把png 转换为ico 图标，利用第三方网站 比特虫 在线制作 ico图标 1.2 favicon 图标放到网站根目录下 1.3 HTML 页面引入favicon 图标 <!-- 引入网站图标 --> <link rel="shortcut icon" hre..
品优购前端编码规范：HTML, 图片, CSS与命名规则
本文档主要针对前端基础中的HTML和CSS规范，以及图片和命名规范进行阐述。 首先，HTML规范是构建网页的基础。DOCTYPE声明是每个HTML文件的必要组成部分，它告诉浏览器文档使用哪种HTML版本。在HTML5中，推荐使用`<!...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值