网页div-css布局基础篇

平时我们所看到的网页都是有以下几个元素组成的:
1、顶部部分:其中又包括了LOGO、MENU和一幅Banner图片;
2、内容部分:网页主体内容;
3、侧边栏部分:包括网站文章更新,链接等;
4、底部部分:包括一些版权信息和全站链接.
为了设计的简便和多样化,一般的网页都要用到div-css进行布局编排,针对这些部分,可以列出网页内容的div-css结构图:
  │body {} /*这是一个HTML元素,代表html代码中的主题显示部分*/
  └#Container {} /*页面层容器*/
     ├#Header {} /*页面头部*/
     ├#PageBody {} /*页面主体*/
     │ ├#Sidebar {} /*侧边栏*/
     │ └#MainBody {} /*主体内容*/
     └#Footer {} /*页面底部*/
下面我们进一步解释这个结构图各个元素的意义:
这些div-css格式都是放置在网页html代码的标签中的;
“#”这个标记是html代码中对div-css“类”的表示,还有一个标记是“.”,这两个的区别是“#”一般是专一针对的类别,一个#+名称就是一个独一无二的ID,只可以对部分进行归属,“.”+名称是可以反复使用的,知道了这这些,我们就很容易理解以上结构里面的内容了.

#container 是对网页头部进行类别定义的{},大括号里面的值就是网页头部(head)的布局进行控制的;
#pagebody 是对页面主题进行布局的类属;
同理,#sidebar是对侧边栏的布局控制,#footer是对网页底部进行布局的类属.

如果现在给你出个考题:小川博客的首页布局都包括哪些?
                                                你是否可以准确的回答出来呢?

周红川

分享独立站建站、搜索引擎优化,独立站推广相关实操经验和心得,如果你在跨境业务中遇到问题,欢迎加我微信沟通交流!

微信号:512765456

1 条评论

留下一个评论