摘要：刚开始搭建框架起来还是比较费力的 , 其中需要用到标尺工具, 需要掌握代码的复用和行内块级元素的用法, 可以尽量避免使用float带来的负面影响. 注意样式的初始化:外边距和内边距设为0, 因为可能使用到较多浮动,所以最好提前也设置下清除浮动. 框架做起来后遇到个问题, 缩放页面时不同浏览器可能会有元素错位现象.后期再慢慢调试. 效果:  html代码: &

刚开始搭建框架起来还是比较费力的 , 其中需要用到标尺工具, 需要掌握代码的复用和行内块级元素的用法, 可以尽量避免使用float带来的负面影响. 注意样式的初始化:外边距和内边距设为0, 因为可能使用到较多浮动,所以最好提前也设置下清除浮动. 框架做起来后遇到个问题, 缩放页面时不同浏览器可能会有元素错位现象.后期再慢慢调试.

效果:

html代码:html>

Document

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);

}