如何用div搭建网页框架?

大家在刚接触div css的时候除了常见的基础代码让大家望而生畏恐怕,就是搭建框架。下面我就详细的给大家介绍大家在学习div css搭建网站的时候除了常见的代码还有一项很重要用div搭建框架内容

在用div+css 进行架设页面框架的时候 主要用到的属性为:float,clear,overflow,height,background,width

在大家搭建框架时优势框架的位置往往达不到我们想要的位置,下面这些代码将帮助你有效的将框架移到你需要的地方

float:用来设置框架左右位置

height:用来设置框架所占高度.

width:用来设置框架所占宽度.

background:用颜色来填充区域,这个看起来比较明显 了然.

clear:用来清除浮动效果的影响.

overflow:来用确保框架不会因溢出内容而打乱布局.

基础的框架知识我们已经了解了,但是为了更有效的提高效率和客观性,小编也为大家整理了一下几条方法

1)、所有的命名最好都小写

2)、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"

3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整

4)、空元素要有结束的tag或于开始的tag后加上"/"

5)、给每一个表格和表单加上一个唯一的、结构标记id

6)、给图片加上alt标签

7)、尽量使用英文命名原则

8)、尽量不缩写,除非一看就明白的单词

我们上面提到的命名大家可能也不太明白到底是干嘛的,但是小编提醒大家千万不要不重视命名哦

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率

俗话说的好,好人做到底,小编也为各位看官准备了上好的规范命名,是不是很期待,嘿嘿,内容将在下一行中呈现

外套 wrap ------------------用于最外层

头部 header ----------------用于头部

主要内容 main ------------用于主体内容(中部)

左侧 main-left -------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181108A0D0QL00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券