HTML+CSS实战---------一个电商类的小型项目：品优购（二）
程序员文章站
2022-04-14 21:09:41
...
费了半天劲，终于把头和尾部的样式做完了。下次更新就是我画得页面了。期待着自己（哈哈哈哈哈哈哈哈）
还有很多不足的地方，需要反思，很多地方就是凭借自己的想法来的，代码有点冗余（我改不了啊啊啊啊）。
前期嘛，就是练手找布局的思路，学了浮动、定位，但是还是不能上来就可以确定是用定位好还是用浮动好，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;
}