根据效果图制作响应页面1
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/index-pc.css"/> </head> <body> <!--div#box$*4--> <div id="box1" class="box"> <div class="left"> <span class="sort">01</span> </div> <div class="right"> </div> </div> <div id="box2" class="box"></div> <div id="box3" class="box"> <div class="left"> </div> <div class="right"> </div> </div> <div id="box4" class="box"></div> </body> </html>
css:
*{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
font-family: "微软雅黑";
}
.box{
width: 1500px;
height: 600px;
margin: 0 auto;
}
#box1{
border: 1px solid green;
position: relative;
}
#box2{
background-color: #222840;
background-image: url(../img/box2_bg.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#box3{
border: 1px solid blue;
}
#box4{
background-color: #008EE0;
background-image: url(../img/box4_bg.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#box1 .left{
background-color: #7400E9;
background-image: url(../img/box1_left.png);
background-repeat: no-repeat;
background-position: center center;
height: 600px;
width: 50%;
float: left;
}
#box1 .right{
background-color: #F0F0F0;
height: 600px;
width: 50%;
float: right;
}
#box1 .left .sort{
font-size: 60px;
color: #fff;
font-weight: bolder;
position: absolute;
top: 69px;
left: 56px;
}
#box3 .left{
background-color: #fa8b14;
background-image: url(../img/box3_left.png);
background-repeat: no-repeat;
background-position: center center;
height: 600px;
width: 50%;
float: left;
}
#box3 .right{
background-color: #e8e8e8;
height: 600px;
width: 50%;
float: right;
}
吐槽一下
还没有留言，还不快点抢沙发？