酷狗网页布局
image.png
一、网页基本布局(永远是第一步)
代码
酷狗网页布局
/*css样式*/
body div{
width: 1520px;
}
.a{
background-color: red;
height: 100px;
}
.bc{
background-color: yellow;
height: 500px;
}
.d{
background-color: green;
height: 100px;
}
.b{
width: calc(21%);
height: 500px;
background-color: aqua;
}
.c{
width: calc(79%);
width: 1200px;
background-color: blueviolet;
}
展示效果
image.png
二、设置头像和昵称
叫帅哥
/*css样式*/
.head{
width: 50px;
height: 50px;
border-radius: 50%; /*设置圆角图片*/
}
#name{
position: absolute;
margin-top: 5px;
margin-left: 8px;
color: white;
font-size: 13px;
}
二、设置头像、昵称、图标、输入框
代码
酷狗网页布局
小可爱叫帅哥哦
/*css样式*/
body > div{
width: calc(100%);
}
.a{
background-color: orchid;
height: 50px;
}
.bc{
background-color: yellow;
height: 500px;
}
.d{
background-color: skyblue;
height: 60px;
}
.b{
width: calc(21%);
height: 500px;
background-color: aqua;
float: left;
}
.c{
width: calc(79%);
height: 500px;
background-color: pink;
float: right;
}
.a img{
width: 18px;
height: 18px;
}
.a .head{
margin-left: 5px;
margin-top: 5px;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
}
#name{
float: left;
margin-top: 18px;
margin-left: 8px;
color: white;
font-size: 13px;
}
.svip-img{
float: left;
margin-top: 14px;
margin-left: 12px;
}
.cloud-img{
float: left;
margin-top: 14px;
margin-left: 17px;
}
.jiantou-img{
float: left;
margin-top: 16px;
margin-left: 70px;
width: 25px;
height: 25px;
}
.shuaxin-img{
float: left;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
#search{
float: left;
margin-left: 15px;
margin-top: 15px;
}
.search-style{
float: left;
border-radius:30px ;
width: 300px;
}
.search-image{
float: left;
margin-top: 4px;
margin-left: -25px;
}
.yuyin-img{
float: left;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
.lishi-img{
float: right;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
.caidan-img{
float: right;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
.xin-img{
float: right;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
.pifu-img{
float: right;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
.shezhi-img{
float: right;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
.xian-img{
float: right;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
.phone-img{
float: right;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
.back-img{
float: right;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
.xiao-img{
float: right;
margin-top: 16px;
margin-left: 15px;
width: 25px;
height: 25px;
}
.cha-img{
float: right;
margin-top: 16px;
margin-left: 15px;
margin-right: 2px;
width: 25px;
height: 25px;
}
展示效果
image.png
还有许多可以改善的地方
比如说可以设置图标的统一样式，可以节省很多代码
还有涉及到浮动的地方，本例中父元素设置了宽高，所以不用清除，但是很多时候，我们的容器大小是由内容撑开的，比较具有灵活性，这时浮动就需要我们清除了
