html快速创建骨架,HTML+CSS入门 网站骨架布局

本篇教程介绍了HTML+CSS入门 网站骨架布局，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

实现效果图:

代码实现

第一次写的时候不知道如何下手, 后来摸清规律了,由大到小. 由全局到局部

第一次还遇到区块命名问题, 和哪个该怎么划分问题

第一次还遇到由于划分不规整,所以有些代码没达到预期的效果

这个案例还是比较磨人的

注: 这个代码不考虑浮动产生的影响,清除浮动的方法统一用了: 给父元素加高法.

最终效果图:(将图片拖一下新窗口看)

一定要从大到小,从全局到细节来布局.

html>

布局2

* {

margin: 0;

padding: 0;

}

.header {

width: 970px;

height: 103px;

margin: 0 auto;

}

.header .logo {

width: 277px;

height: 103px;

background-color: red;

float: left;

}

.header .language {

width: 137px;

height: 49px;

background-color: lightgreen;

float: right;

margin-bottom: 10px;

}

.header .nav {

width: 679px;

height: 46px;

background-color: lightgreen;

float: right;

}

.content {

width: 970px;

height: 435px;

margin: 0 auto;

/*background-color: lightpink;*/

margin-top: 10px;

}

.content .banner {

width: 310px;

height: 435px;

background-color: gold;

float: left;

margin-right: 10px;

}

.content .rightPart {

width: 650px;

height: 435px;

/*background-color: deeppink;*/

float: left;

}

.content .rightPart .news {

width: 450px;

height: 400px;

/*background-color: palegoldenrod;*/

float: left;

margin-right: 10px;

}

.content .rightPart .hostPots {

width: 190px;

height: 400px;

background-color: hotpink;

float: left;

}

.content .rightPart .links {

width: 650px;

height: 25px;

background-color: darkgreen;

float: left;

margin-top: 10px;

}

.content .rightPart .news .new1 {

width: 450px;

height: 240px;

background-color: cornflowerblue;

}

.content .rightPart .news .new2 {

width: 450px;

height: 110px;

background-color: cornflowerblue;

margin-top: 10px;

}

.content .rightPart .news .new3 {

width: 450px;

height: 30px;

background-color: cornflowerblue;

margin-top: 10px;

}

.footer{

width: 970px;

height: 35px;

background-color: navy;

margin: 0 auto;

margin-top: 10px;

}

logo

language

nav

banner

new1

new2

new3

hostPots

links

footer

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！