摘要：刚开始搭建框架起来还是比较费力的 , 其中需要用到标尺工具, 需要掌握代码的复用和行内块级元素的用法, 可以尽量避免使用float带来的负面影响. 注意样式的初始化:外边距和内边距设为0, 因为可能使用到较多浮动,所以最好提前也设置下清除浮动. 框架做起来后遇到个问题, 缩放页面时不同浏览器可能会有元素错位现象.后期再慢慢调试. 效果: html代码: &
刚开始搭建框架起来还是比较费力的 , 其中需要用到标尺工具, 需要掌握代码的复用和行内块级元素的用法, 可以尽量避免使用float带来的负面影响. 注意样式的初始化:外边距和内边距设为0, 因为可能使用到较多浮动,所以最好提前也设置下清除浮动. 框架做起来后遇到个问题, 缩放页面时不同浏览器可能会有元素错位现象.后期再慢慢调试.
效果:
html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel=stylesheet href="mi.css"> </link> </head> <body> <div class="header"> <div class="menu">头部</div> </div> <div class="content"> <div class="conmenu">菜单</div> <div class="lunbobox"> <div class="lunbomenu">轮播菜单</div> <div class="lunbopic">轮播图片</div> </div> <div class="conimg"> <div class="xuangou">选购</div> <div class="xg">1</div> <div class="xg">2</div> <div class="xg">3</div> </div> <div class="shangou"> <div class="shangoummenu">闪购菜单</div> <div class="sgpic1"></div> <div class="sgpic"></div> <div class="sgpic"></div> <div class="sgpic"></div> <div class="sgpic"></div> </div> <img class="adpic" src="img/longAD1.jpg"></img> <div class="sort"> <div class="sortmenu">分类菜单1</div> <img class="colpic" src="img/buy/手机AD.jpg"></img> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> </div> <img class="adpic" src="img/longAD2.jpg"></img> <div class="sort"> <div class="sortmenu">分类菜单2</div> <div class="colpic" src=""></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> </div> <img class="adpic" src="img/longAD3.jpg"></img> <div class="sort"> <div class="sortmenu">分类菜单3</div> <div class="colpic" src=""></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> <div class="rowpic"></div> </div> <img class="adpic" src="img/longAD4.jpg"></img> </div> <div class="footer"> <div class="foot"> </div> </div> </body> </html>
css:
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
cursor: pointer;
color:#ccc;
}
.clear{
clear: both;
}
.header{
width: 100%;
height: 50px;
background: rgb(219, 218, 218);
}
.menu{
margin: 0 auto;
width: 1534px;
height: 50px;
background: rgb(6, 250, 217);
}
.content{
margin: 0 auto;
width: 1534px;
/* height: 1800px ; */
background: #e6e5e4;
}
.conmenu{
margin:30px auto;
width: 1534px;
height: 70px;
background: rgb(250, 180, 180);
}
.lunbobox{
margin-bottom: 20px;
width: 1534px;
height: 575px;
background: rgb(75, 179, 139);
}
.lunbomenu{
display: inline-block;
width: 296px;
height: 575px;
background: rgb(44, 143, 143);
}
.lunbopic{
display: inline-block;
width: 1232px;
height: 575px;
background: rgb(223, 38, 213);
}
.conimg{
margin-bottom: 62px;
width: 1534px;
height: 213px;
background: rgb(202, 123, 238);
}
.xuangou{
display: inline-block;
width: 295px;
height: 212px;
background: #fbff08;
}
.xg{
margin-left: 15px;
display: inline-block;
width: 392px;
height: 212px;
background: #04e3eb;
}
.shangou{
margin-bottom: 52px;
width: 1534px;
height: 474px;
background: rgb(168, 214, 3);
}
.shangoummenu{
width: 1534px;
height: 50px;
background: #ff8000;
}
.sgpic1{
display: inline-block;
width: 293px;
height: 424px;
background: rgb(72, 125, 238);
}
.sgpic{
display: inline-block;
width: 294px;
height: 424px;
background: rgb(72, 125, 238);
margin-left: 10px;
}
.adpic{
margin-bottom: 52px;
width: 1534px;
height: 150px;
}
.sort{
width: 1532px;
height: 818px;
background: #04e3eb;
margin-bottom: 50px;
}
.sortmenu{
width: 1534px;
height: 50px;
background: rgb(121, 163, 21);
}
.colpic{
float: left;
width: 296px;
height: 768px;
background: #ff8000;
transition: 0.5s;
}
.colpic:hover{
box-shadow: 0px 10px 30px grey;
margin-top: -5px;
transition: 0.5s;
}
.rowpic{
display: inline-block;
width: 292px;
height: 373px;
background: #ccc;
margin-left: 12.5px;
margin-bottom: 16px;
}
.footer{
width: 100%;
height: 563px;
background: rgb(206, 196, 196);
}
.foot{
margin:0 auto;
width: 1534px;
height: 563px;
background: rgb(144, 231, 152);
}
