前端静态页面练习—

网站实战二——梅兰商城

1.0 首先分析PSD文件布局

顶部欢迎信息（左）+导航信息（右）
logo区 logo（左）+搜索框（右）
网站导航
次级导航（左）+产品信息（中）【视频里没做】+辅助信息（右）
建筑材料部分具体产品（左）+建筑资讯（右）
儿童安全座椅左右两部分
工艺美术品左右两部分
底部设计

1.1 开发整站的两种方式

第一种：从头往下依次把每个盒子写完

第二种：将征战布局搞定，然后把每个布局和自重的元素补齐。

1.2 整站项目的目录结构

所有文件放在一个以项目为名称的文件夹下

所有图片放在images文件夹下

所有CSS样式放在css文件夹下

所有JS文件放在js文件夹下

整站页面的入口index.html

1.3 cssReset

不同浏览器对每种标签都有不同的默认样式，为保证各个浏览器效果相同。首先对样式进行重置，以便后续的开发管理。

https://github.com/yui/yui3/blob/master/src/cssreset/css/cssreset.css

1.4 页面版心

利用PS或者FW等工具进行测量

1.5 精灵图

结合backgroung使用

2.0 index.html

<!DOCTYPE html>
<html>
<head><title></title><link rel="stylesheet" type="text/css" href="css/cssReset.css"><link rel="stylesheet" type="text/css" href="css/style.css"><link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body><!-- 页面顶部开始 --><div class="top"><div class="top_page"><div class="top_page_left fl">您好，欢迎来到建材网！  </div><div class="top_page_right fr"><ul><li><a href="#">建材网首页</a></li><li><a href="#">我的商务室</a><s></s></li><li><a href="#">我的收藏</a><s></s></li><li><a href="#">建材服务</a><s></s></li><li><a href="#">客服中心</a><s></s></li><li><a href="#">网站导航</a><s></s></li></ul></div></div></div><!-- 页面顶部结束 --><!-- logo开始 --><div class="logo"><h1 class="logo_left fl">梅兰商城</h1> <!-- 因为div没有语义，而logo有比较重要，设置为h1权重更高 --><div class="logo_right fr"><div class="logo_right_content"><input type="input" name="" class="logo_right_search fl" placeholder="请输入关键字"><input type="button" name="" class="logo_right_button fl" value="搜索"></div></div>    </div><!-- logo结束 --><!-- 导航部分开始 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">建筑材料</a></li><li><a href="#">儿童安全座椅</a></li><li><a href="#">工艺美术品</a></li></ul></div><!-- 导航部分结束 --><!-- 次级导航开始 --><div class="banner"><div class="subNav fl"><h2>商机市场</h2><ul><li><s></s><a href="#">建筑材料</a></li><li><s></s><a href="#">儿童安全座椅</a></li><li><s></s><a href="#">工艺美术品</a></li><li><s></s><a href="#">建筑材料</a></li><li><s></s><a href="#">儿童安全座椅</a></li><li><s></s><a href="#">工艺美术品</a></li></ul></div><div class="ad fl"></div><div class="message fr"><div class="message_top"><h2>建材通大众版</h2><!-- <img src="data:images/message_up_03.png"> --><s class="fl"></s><p class="fl">价格实惠，量身为营销预算不<br />多的供应商所设。<a href="#">了解详情</a></p></div><div class="message_bottom"><p class="findMessage">找信息或者发信息遇到问题？</p><p class="phone"><s></s>0571-89938887</p><input type="button" class="btn"></div></div></div><!-- 次级导航结束 --><!-- 建筑材料开始 --><div class="material">建筑材料</div><div class="product"><div class="product_left fl"><div class="product_l_top"><div class="p_l_t_product1 fl"><div class="buy fl"><div class="img1"><img src="data:images/buy_03.png"></div><input class="btn" type="button" name="" value="立即购买"></div><div class="explain fl"><p class="goodwife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p><p class="auto">自动换挡&nbsp;安全耐用<br />自动换挡&nbsp;安全耐用<br /></p><p class="price"><span>239.00</span>&nbsp;&nbsp;&nbsp;<s>$386.00</s></p><p class="bought">限量<span>99</span>件&nbsp;已售出<span>20</span>件</p></div></div><div class="p_l_t_product2 fl"><div class="buy fl"><div class="img1"><img src="data:images/buy_03.png"></div><input class="btn" type="button" name="" value="立即购买"></div><div class="explain fl"><p class="goodwife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p><p class="auto">自动换挡&nbsp;安全耐用<br />自动换挡&nbsp;安全耐用<br /></p><p class="price"><span>239.00</span>&nbsp;&nbsp;&nbsp;<s>$386.00</s></p><p class="bought">限量<span>99</span>件&nbsp;已售出<span>20</span>件</p></div></div></div><div class="product_l_line"></div><div class="product_l_top"><div class="p_l_t_product1 fl"><div class="buy fl"><div class="img1"><img src="data:images/buy_03.png"></div><input class="btn" type="button" name="" value="立即购买"></div><div class="explain fl"><p class="goodwife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p><p class="auto">自动换挡&nbsp;安全耐用<br />自动换挡&nbsp;安全耐用<br /></p><p class="price"><span>239.00</span>&nbsp;&nbsp;&nbsp;<s>$386.00</s></p><p class="bought">限量<span>99</span>件&nbsp;已售出<span>20</span>件</p></div></div><div class="p_l_t_product2 fl"><div class="buy fl"><div class="img1"><img src="data:images/buy_03.png"></div><input class="btn" type="button" name="" value="立即购买"></div><div class="explain fl"><p class="goodwife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p><p class="auto">自动换挡&nbsp;安全耐用<br />自动换挡&nbsp;安全耐用<br /></p><p class="price"><span>239.00</span>&nbsp;&nbsp;&nbsp;<s>$386.00</s></p><p class="bought">限量<span>99</span>件&nbsp;已售出<span>20</span>件</p></div></div></div><div class="product_l_line"></div></div><div class="product_right fr"><h2>建材资讯</h2><ul><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li></ul></div></div><!-- 建筑材料结束 --><!-- 儿童安全座椅开始 --><div class="material">儿童安全座椅</div><div class="ChildSaveChair"><div class="CSC_l fl"><div class="CSC_l_top"><img src="data:images/csc1_03.png"><a href="#">详情请点击>></a></div><div class="CSC_l_bottom"><ul><li><div class="product1"><img src="data:images/product1_03.png"><h2 class="title">英国百代舒-至尊者(带<br />ISOFIX接口)奔驰宝马专用</h2><p class="age">适合年龄：9个月-4岁<br />市场价： <span class="price_p">￥5580元</span><br />直销价：<span class="price_N">￥3380元</span></p></div></li><li><div class="product1"><img src="data:images/product2_03.png"><h2 class="title">英国百代舒-至尊者(带<br />ISOFIX接口)奔驰宝马专用</h2><p class="age">适合年龄：9个月-4岁<br />市场价： <span class="price_p">￥5580元</span><br />直销价：<span class="price_N">￥3380元</span></p></div></li><li><div class="product1"><img src="data:images/product3_03.png"><h2 class="title">英国百代舒-至尊者(带<br />ISOFIX接口)奔驰宝马专用</h2><p class="age">适合年龄：9个月-4岁<br />市场价： <span class="price_p">￥5580元</span><br />直销价：<span class="price_N">￥3380元</span></p></div></li><li><div class="product1"><img src="data:images/product4_03.png"><h2 class="title">英国百代舒-至尊者(带<br />ISOFIX接口)奔驰宝马专用</h2><p class="age">适合年龄：9个月-4岁<br />市场价： <span class="price_p">￥5580元</span><br />直销价：<span class="price_N">￥3380元</span></p></div></li></ul></div></div><div class="CSC_r fl"><img class="CSC_r_top" src="data:images/CSC_r1_03.png"><br /><img src="data:images/CSC_r2_03.png" width="220"></div></div><!-- 儿童安全座椅结束 --><!-- 工艺美术品开始 --><div class="material">工艺美术品</div><div class="product"><div class="product_left fl"><div class="product_l_top"><div class="p_l_t_product1 fl"><div class="buy fl"><div class="img1"><img src="data:images/buy_03.png"></div><input class="btn" type="button" name="" value="立即购买"></div><div class="explain fl"><p class="goodwife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p><p class="auto">自动换挡&nbsp;安全耐用<br />自动换挡&nbsp;安全耐用<br /></p><p class="price"><span>239.00</span>&nbsp;&nbsp;&nbsp;<s>$386.00</s></p><p class="bought">限量<span>99</span>件&nbsp;已售出<span>20</span>件</p></div></div><div class="p_l_t_product2 fl"><div class="buy fl"><div class="img1"><img src="data:images/buy_03.png"></div><input class="btn" type="button" name="" value="立即购买"></div><div class="explain fl"><p class="goodwife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p><p class="auto">自动换挡&nbsp;安全耐用<br />自动换挡&nbsp;安全耐用<br /></p><p class="price"><span>239.00</span>&nbsp;&nbsp;&nbsp;<s>$386.00</s></p><p class="bought">限量<span>99</span>件&nbsp;已售出<span>20</span>件</p></div></div></div><div class="product_l_line"></div><div class="product_l_top"><div class="p_l_t_product1 fl"><div class="buy fl"><div class="img1"><img src="data:images/buy_03.png"></div><input class="btn" type="button" name="" value="立即购买"></div><div class="explain fl"><p class="goodwife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p><p class="auto">自动换挡&nbsp;安全耐用<br />自动换挡&nbsp;安全耐用<br /></p><p class="price"><span>239.00</span>&nbsp;&nbsp;&nbsp;<s>$386.00</s></p><p class="bought">限量<span>99</span>件&nbsp;已售出<span>20</span>件</p></div></div><div class="p_l_t_product2 fl"><div class="buy fl"><div class="img1"><img src="data:images/buy_03.png"></div><input class="btn" type="button" name="" value="立即购买"></div><div class="explain fl"><p class="goodwife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p><p class="auto">自动换挡&nbsp;安全耐用<br />自动换挡&nbsp;安全耐用<br /></p><p class="price"><span>239.00</span>&nbsp;&nbsp;&nbsp;<s>$386.00</s></p><p class="bought">限量<span>99</span>件&nbsp;已售出<span>20</span>件</p></div></div></div><div class="product_l_line"></div></div><div class="product_right fr"><h2>建材资讯</h2><ul><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li><li><a href="#">贵阳钢材市场7月24日价格详情</a></li></ul></div></div><!-- 工艺美术品结束 --><!-- 底部友情链接开始 --><div class="foot"><div class="links"><p>友情链接:<a href="#">中视网盟</a><a href="#">9355开心创业网</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="#">央视网</a><a href="#">新华网</a><a href="#">科易网</a><a href="#">安家网</a><a href="#">健康商城</a><a href="#">生意街</a><a href="#">连锁加盟网</a><a href="#">渠道网</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">中视网盟</a><a href="#">9355开心创业网</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></p></div><div class="aboutUs"><p><a href="#">关于我们&nbsp;</a><a href="#">　建材通服务&nbsp;</a><a href="#">　网站建设&nbsp;</a><a href="#">　诚聘英才&nbsp;</a><a href="#">　友情链接&nbsp;</a><a href="#">　联系方式&nbsp;</a><a href="#">　隐私声明&nbsp;</a><a href="#">　版权声明&nbsp;</a><a href="#">　帮助中心&nbsp;</a><a href="#">　网站地图&nbsp;</a><br /><a href="#">　中国建材网</a>版权所有 2000-2012 服务热线：0571-89938887 请与我们联系：<ahref="#">　Severice@BMlink.com&nbsp;</a>　建材网会员互动群：<a href="">153120106&nbsp;</a><br />本站网络实名：中建网 本站通用网址：<a href="#"></a><a href="#">　中国建材网&nbsp;</a>　浙B2-20060159</p></div></div><!-- 底部友情链接结束 -->
</body>
</html>

2.1 css重置 cssRest.css

@charset "utf-8";
/*CSS初始化开始*/
html{color:#000;background:#FFF;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {margin:0;padding:0;
}
table {border-collapse:collapse;border-spacing:0;
}
a{text-decoration: none;
}
em,
strong,
b,
u,
i {font-style:normal;font-weight:normal;
}
ol,
ul {list-style:none;
}
h1,
h2,
h3 {font-size:100%;font-weight:normal;
}
input,
textarea,
select {font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%; /*to enable resizing for IE*/
}
/*because legend doesn't inherit in IE */
img {border:0 none;
}
input{border: none;
}
/*CSS初始化结束*/

2.2 适用于自己网页的样式common.css

@charset "utf-8";
/*CSS初始化开始*/
html{color:#000;background:#FFF;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {margin:0;padding:0;
}
table {border-collapse:collapse;border-spacing:0;
}
a{text-decoration: none;
}
em,
strong,
b,
u,
i {font-style:normal;font-weight:normal;
}
ol,
ul {list-style:none;
}
h1,
h2,
h3 {font-size:100%;font-weight:normal;
}
input,
textarea,
select {font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%; /*to enable resizing for IE*/
}
/*because legend doesn't inherit in IE */
img {border:0 none;
}
input{border: none;
}
/*CSS初始化结束*/

2.3 style.css

@charset "utf-8";
/*页面顶部开始*/
html{font-size: 12px;font-family: "宋体";
}
a {color: #000;
}
.top {background-color: #f7f7f7;height: 26px;border-bottom: 1px solid #d8d8d8;
}
.top_page{height: 100%;width: 970px;margin:0 auto;
}
.top_page_left,
.top_page_right {line-height: 26px;
}
.top_page_right ul li{float: left;padding-right: 10px;
}
.top_page_right ul li s{width: 14px;height: 12px;background: url(../images/sprite.png);display: inline-block;vertical-align: middle;/*line-height: 26px;*/
}
/*页面顶部结束*/
/*logo开始*/
.logo{width: 970px;height: 98px;margin: 0 auto;
}
.logo_left{width: 200px;height: 55px;margin-top: 24px;margin-left: 9px;background: url(../images/sprite.png) 0 -17px;text-indent: -1000em;/*对搜索引擎更加友好*/
}
.logo_right{width: 530px;height: 42px;border: 1px solid #c9c9c9;margin-top: 29px;
}
.logo_right_search{width: 418px;height: 28px;border: 1px solid #a6a6a6;box-shadow:
}
.logo_right_button{width: 100px;height: 30px;background-color: #2f70d0;color: #fff;font-size: 20px;font-weight: 700;font-family: "黑体"
}
.logo_right_content{margin:5px 5px 5px 4px;/*上右左下*/
}
/*logo结束*/
/*导航部分开始*/
.nav {width: 970px;height: 25px; margin: 0 auto;border-bottom: 2px solid #0266a3;
}
.nav li{float: left;padding:0 15px 0 15px;line-height: 25px;font-size: 14px;font-weight: 700;
}
.nav a{color: #0266a3;
}
.nav li:hover {background-color: #0266a3;
}
.nav li:hover a{color: #fff;
}
/*导航部分结束*/
/*次级导航开始*/
.banner{width: 970px;height: 210px;margin: 0 auto;margin-top: 10px;
}
.subNav{width: 200px;height: 100%;margin-right: 11px;background-color: #ebf0f6;
}
.ad{width: 520px;height: 100%;
}
.message{width: 230px;height: 100%;
}
.subNav h2 {height: 30px;line-height: 30px;color: #fff;font-size: 14px;padding-left: 20px;font-weight:700;background-color: #0266a3;
}
.subNav ul li:nth-child(1) s{display: inline-block;height: 13px;width: 16px;background: url(../images/sprite.png) -61px 0 ;/*vertical-align: middle;*/
}
.subNav ul li:nth-child(2) s{display: inline-block;height: 15px;width: 18px;background: url(../images/sprite.png) -77px 0 ;/*vertical-align: middle;*/
}
.subNav ul li:nth-child(3) s{display: inline-block;height: 14px;width: 21px;background: url(../images/sprite.png) -95px 0 ;/*vertical-align: middle;*/
}
.subNav ul li:nth-child(4) s{display: inline-block;height: 15px;width: 16px;background: url(../images/sprite.png) -116px 0 ;/*vertical-align: middle;*/
}
.subNav ul li:nth-child(5) s{display: inline-block;height: 16px;width: 16px;background: url(../images/sprite.png) -132px 0 ;/*vertical-align: middle;*/
}
.subNav ul li:nth-child(6) s{display: inline-block;height: 16px;width: 16px;background: url(../images/sprite.png) -148px 0 ;/*vertical-align: middle;*/
}
.subNav ul li{font-size: 13px;padding-top: 11px;color: #606060;margin-left: 9px;
}
.subNav li:nth-child(2) a{padding-left: 13px;
}
.subNav li:nth-child(3) a{padding-left: 10px;
}
.subNav li:nth-child(1) a,
.subNav li:nth-child(4) a,
.subNav li:nth-child(5) a,
.subNav li:nth-child(6) a
{padding-left: 14px;
}
.message_top{height: 95px;border: 1px solid #ddd;background-color: #f7faff;margin-bottom: 21px;
}
.message_bottom{height: 92px;background-color: #f7f7f7;
}
.message_top s{display: inline-block;height: 40px;width: 40px;background: url(../images/sprite.png) -198px 0 ;margin: 0 10px 14px 10px;
}
.message_top h2{font-size: 12px;font-weight: 700;color: #666666;margin:7px 0 20px 18px;
}
.message_top p{font-size: 11px;color: #666666;margin: 5px 0 5px 0;
}
.message_top a{color: #444444;font-size: 11px;
}
.message_bottom .findMessage{text-align: center;font-size: 16px;color: #999;padding: 12px 0 10px 14px;/*不管用，出现margin塌陷现象，要用padding*/
}
.message_bottom .phone s{vertical-align: middle;display: inline-block;width: 13px;height: 18px;background: url(../images/sprite.png) -243px 0;margin-right: 10px;
}
.message_bottom .phone{text-align: center;color: #3f9ce0;font-size:14px;
}
.message_bottom a s{display: inline-block;
}
.message_bottom .btn{width: 81px;height: 23px;background: url(../images/sprite.png) 0 -77px;margin-bottom: 7px;margin-left: 75px;
}
/*次级导航结束*/
/*建筑材料开始*/
.material{width: 950px;height: 34px;margin:0 auto;border-top: 2px solid #c3d7e4;background-color:#ecf1f7;margin-top:14px;margin-bottom: 11px;font-size: 14px;font-weight: 700;line-height: 34px;padding-left: 20px;
}
.product{width: 970px;height: 345px;margin: 0 auto;margin-top: 12px;
}
.product .product_left{width: 728px;height: 345px;border:1px solid #d8d8d8;
}
.product .product_l_top{height: 155px; /* 172-17*/width: 712px; /*728-16*/padding: 15px 0 0 16px;
}
.product_l_top .p_l_t_product1{width: 350px;height: 145px;/*background-color: red;*/
}
.buy{width: 99px;height: 143px;/*background-color: pink;*/
}
.explain{width:250px;height: 143px;
}
.explain .goodwife{font-size: 14px;margin-top: 10px;margin-left: 10px;
}
.explain .auto{font-size: 12px;color: #863e01;padding: 13px 0 0 15px;
}
.explain .price{padding: 21px 0 0 11px;
}
.explain .price span{color: red;font-size: 14px;font-weight: 700;
}
.explain .price s{color: #555;font-size: 12px;text-decoration: line-through;
}
.explain .bought span{color: red;
}
.explain .bought {padding: 25px 0 0 11px;
}
.product .product_l_top .p_l_t_product1 .img1,.p_l_t_product2 .img1{height: 100px;border: 1px solid #cacaca;
}
.img1 img{margin-top: 18px;margin-left: 4px;
}
.buy .btn{width: 99px;height: 26px;background-color: #0a84e3;color: #fff;font-size: 16px;font-weight: 700;margin-top: 15px;font-family: "黑体";
}
.product_l_line{margin: 0 4px 0 4px;border-top: 1px solid #ccc;
}
.product .product_right{width: 230px;height: 345px;
}
.product_right{border: 1px solid #e0e6f0;
}
.product_right h2{height: 28px;line-height: 28px;padding-left: 15px;border-bottom: 1px solid #e0e6f0;color:  #4e4e4e;
}
.product_right ul li{line-height: 24px;color:  #4e4e4e;padding-left: 26px;
}
.product_right ul li:first-child{padding-top: 15px;
}
/*}建筑材料结束*/
/*儿童安全座椅开始*/
.ChildSaveChair{width: 970px;height: 327px;/*background-color: red;*/margin:0 auto;
}
.CSC_l{height: 327px;width: 722px;
}
.CSC_l .CSC_l_top{border-bottom: 2px solid #00b0e7;height: 23px;
}
.CSC_l_top a{color: #1a66b3;font-weight: 700;float: right;line-height: 23px;
}
.CSC_l_bottom{height: 300px;padding-top: 5px;border-left:1px solid #e0e6f0;border-right:1px solid #e0e6f0;border-bottom:1px solid #e0e6f0;
}
.CSC_l_bottom ul li{float: left;padding-left: 5px;padding-right: 9px;
}
.product1{width: 163px;height: 296px;/*background-color: pink;*/text-align: center;
}
.product1 h2{line-height: 20px;padding-top: 4px;
}
.product1 .age{color: #999;line-height: 24px;
}
.product1 .price_P{text-decoration: line-through;
}
.product1 .price_N{font-size: 14px;color: red
}
.CSC_r {height:327px;/*background-color: pink;*/padding-left: 17px;
}
.CSC_r .CSC_r_top{border: 1px solid #e0e6f0;margin-bottom: 10px;
}
/*儿童安全座椅结束*/
/*工艺美术品开始*//* 与建筑材料相重合*/
/*工艺美术品结束*/
/*底部友情链接开始*/
.foot{height: 197px;margin:0 auto;/*background-color: red;*/margin-top: 12px;
}
.links{height: 102px;width: 970px;margin:0 auto;/*background-color: pink;*/border-bottom: 3px solid #0a7ec3;
}
.links p{color: #999999;line-height: 24px;padding-top: 23px;padding-left: 8px;
}
.links a{color: #666666;/*font-size: 13px;*/
}
.aboutUs{height: 90px;padding-top: 14px;text-align: center;
}
.aboutUs a{border-right: 1px solid #cccccc;color: #444444;
}
.aboutUs p{line-height: 24px;color:#333;
}
/*底部友情链接结束*/

以上页面中有部分内容用相同代码实现，没有做修改，页面上部分有一个产品滚动效果没做，以后补上。

资料地址：链接：https://pan.baidu.com/s/1JkTYWC3jRABjSaqHwumk-Q 提取码：6i6n

欢迎交流

前端静态页面练习——梅兰商城相关推荐

小兔鲜儿项目pc客户端前端静态页面
小兔鲜儿项目pc客户端前端静态页面一.效果图二.文件和目录准备新建index.html在根目录新建css文件夹保存网站的样式,并新建以下css文件: base.css:基础公共样式 commo ...
前端静态页面基本开发思路（二）
由于第一篇的反响不错,所以今天抽空写写前端静态页面基本开发思路(二) 第一篇开发思路直通车→前端静态页面基本开发思路(一) 现在的静态页面的设计基本上都涉及到了轮播图,而且一般都是顶部菜单栏过了就是轮 ...
html管理系统前端,oa管理系统前端静态页面
[实例简介] 一款页面效果非常不错的OA管理系统的静态页面模板,感兴趣的可以看看,挺酷炫的. [实例截图] [核心代码] oa管理系统前端静态页面 ├── add.html ├── calendar. ...
gulp+PC前端静态页面项目开发
前言: 现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地 gulp构建前言: 如今我们开发web网页的方式主要有几种,使用vue-cli.create-react- ...
【前端静态页面HTML】
HTML 作用: 负责搭建页面结构和内容 (盖房子毛坯房) HyperTextMarkupLanguage: 超文本标记语言超文本: 指不仅仅是纯文本,还包括字体和多媒体(图片,音频,视频) 标记语 ...
向添加前端静态页面之后，菜单栏显示正常，但是点击的时候报错main.js:978 Error: Cannot find module ‘./function (resolve) {。。。。。。
找了好长时间到底是咋回事,疯狂百度. 最后还是根据报错提示找到原因了. 完整的报错状态这是点击添加菜单按钮时报错的,说是找不到什么模板,又提到了webpack,尝试在动态添加的的时候打印了一个log ...
前端静态页面（初级）
我们在网络上看到的大部分页面都可以用html+css制作出来,但缺点就是它是静态的,在没有与后端联系起来的情况下就是很简单的前端页面,这篇文章与那个登录注册主页面的实现是一个系列的,许多前端页面的格式 ...
仿淘宝电商网站管理系统前端静态页面(html+jquery+css)(含毕业设计论文及源码)
摘要·······································································Ⅰ 1 绪论····················· ...
Web前端静态页面示例
目录结构: Web25\ |-css\ reset.css.common.css.index.css.login.css.reg.css |-js\ jquery-3.3.1.js.index.js. ...

前端静态页面练习——梅兰商城

前端静态页面练习——梅兰商城相关推荐

最新文章

热门文章