html 1-3-1布局,3.web前端—HTML+CSS布局(1)

酷狗网页布局

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

还有许多可以改善的地方

比如说可以设置图标的统一样式，可以节省很多代码

还有涉及到浮动的地方，本例中父元素设置了宽高，所以不用清除，但是很多时候，我们的容器大小是由内容撑开的，比较具有灵活性，这时浮动就需要我们清除了