DIV+CSS布局心得
文章目录
1,清空所有原有样式
body,img,ul,li{
padding: 0px; //内边框清零
margin: 0px;//外边框清零
}
随时对HTML和CSS进行注释
<!--banner start-->
<!--banner end-->
//banner star
//banner end
2,分析页面布局
以b站(哔哩哔哩弹幕网为例)
网站布局
”头部“
可以在每个页面的顶部看到。包含所有页面的相关信息(包括站点名字或logo)以及一个便于使用的导航系统。
“主要内容”
最大的区域,展示了当前页面的内容。
“边缘内容”(Stuff)
包括:1、主要内容的补充部分;2、信息分享列表;3、单选导航栏。 实际上,任何可以在当前页面展示又没有写入主要内容的部分都是可以划分在这的。
“页脚”
可以在每个页面的底部看到。和头部一样,包含一些对于整个页面而言不是很重要的信息,例如法律声明和联系信息。
每一个框为一个 DIV 为一个盒子模型。通过CSS进行布局
DIV+CSS布局页面
页面常用HTML标签
<!--无意义块状标签-->
<div></div>
<!--无意义行内元素-->
<span></span>
<!--段落标签-->
<p></p>
<!--无序列表-->