三列页网页界面的实现
三列页网页界面的实现@风火轮技术团队
(1)实现的效果图片
(2)完整的代码:
CSS部分:
.box7{
border:solid;
border-color:darkred;
font-weight: bolder;
list-style-position: inside;
margin:3px 0px 0px 0px;
}
.box8{
border:solid;
border-color:white;
font-weight: bold;
list-style-position: inside;
margin:3px 0px 0px 0px;
}
.box9{
float:left;
width:350px;
height:300px;
margin-bottom:100px;
}
#bo1 {
width:150px;
height: 100px;
background-color:white;
background-image: url("https://t12.baidu.com/it/u=1031210485,163144384&fm=30&app=106&f=JPEG?w=312&h=208&s=D8B103D5FA2650860989D44B03003093");
background-size:contain;
float-left:left;
background-repeat: no-repeat;
padding:5px 5px 5px 4px;
margin-top:10px;
margin-right:10px;
}
#bo2{
width:150px;
height:100px;
background-image: url("https://t12.baidu.com/it/u=2420037300,163157977&fm=30&app=106&f=JPEG?w=312&h=208&s=0CF04685561215D41218E59B03006083");
float:left;
background-size:contain;
background-repeat: no-repeat;
padding:5px 20px 5px 5px;
margin-top:10px;
margin-left:5px;
}
主体部分:(完整的代码在百度网盘,需要的自取)链接:https://pan.baidu.com/s/1EYLv9QF4m3bRbKoPQCSfTg
提取码:40ld
页:
[1]