前端静态页面练习——梅兰商城
网站实战二——梅兰商城
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
梅兰商城
建筑材料
好太太晾衣架 铝钛合金 升降双杆
自动换挡 安全耐用
自动换挡 安全耐用
239.00 $386.00
限量99件 已售出20件
好太太晾衣架 铝钛合金 升降双杆
自动换挡 安全耐用
自动换挡 安全耐用
239.00 $386.00
限量99件 已售出20件
好太太晾衣架 铝钛合金 升降双杆
自动换挡 安全耐用
自动换挡 安全耐用
239.00 $386.00
限量99件 已售出20件
好太太晾衣架 铝钛合金 升降双杆
自动换挡 安全耐用
自动换挡 安全耐用
239.00 $386.00
限量99件 已售出20件
儿童安全座椅
-
英国百代舒-至尊者(带
ISOFIX接口)奔驰宝马专用
适合年龄：9个月-4岁
市场价： ￥5580元
直销价：￥3380元
-
英国百代舒-至尊者(带
ISOFIX接口)奔驰宝马专用
适合年龄：9个月-4岁
市场价： ￥5580元
直销价：￥3380元
-
英国百代舒-至尊者(带
ISOFIX接口)奔驰宝马专用
适合年龄：9个月-4岁
市场价： ￥5580元
直销价：￥3380元
-
英国百代舒-至尊者(带
ISOFIX接口)奔驰宝马专用
适合年龄：9个月-4岁
市场价： ￥5580元
直销价：￥3380元
工艺美术品
好太太晾衣架 铝钛合金 升降双杆
自动换挡 安全耐用
自动换挡 安全耐用
239.00 $386.00
限量99件 已售出20件
好太太晾衣架 铝钛合金 升降双杆
自动换挡 安全耐用
自动换挡 安全耐用
239.00 $386.00
限量99件 已售出20件
好太太晾衣架 铝钛合金 升降双杆
自动换挡 安全耐用
自动换挡 安全耐用
239.00 $386.00
限量99件 已售出20件
好太太晾衣架 铝钛合金 升降双杆
自动换挡 安全耐用
自动换挡 安全耐用
239.00 $386.00
限量99件 已售出20件
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
欢迎交流