HTML整站结构设计

最近在做整站方面的优化,所以借此机会把一些经验思想记录汇总成文,总览如下图:

整体结构

整体分为header,section-main和footer三大核心,而section-feature和section-postscript则根据需要增删。最外层为全屏背景的承载,中间的inner-center为居中内容

header.header>.inner-center
section.section-feature>.inner-center // if
section.section-main>.inner-center
section.section-postscript>.inner-center // if
footer.footer>.inner-center

如主体内容为多个全屏交替,则使用多个section-name布局,如首页:

header.header>.inner-center
section.section-feature>.inner-center
section.section-name-1>.inner-center
section.section-name-2>.inner-center
...
section.section-name-n>.inner-center
footer.footer>.inner-center

inner-center的居中css代码为:

.inner-center{
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}

section-main

由于主体内容一般都在这个区域,所以下面详细介绍下该区域的布局

无边栏设计

section.section-main>.inner-center

左边栏设计

section.section-main>.inner-center
    aside.aside-left
    main.main>.content

右边栏设计

section.section-main>.inner-center
    main.main>.content
    aside.aside-right

双边栏设计

section.section-main>.inner-center
    aside.aside-left
    main.main>.content
    aside.aside-right

可以看到当有边栏的时候,main里面嵌套了一层content,这层我们是用来使用负magin布局设计的,以方便使用响应式(转下面响应式设计)。

除此之外,为了全站方便控制各种布局,我们需要在body上增加一个class(主要是控制main),如:

// l表示layout
body.l-aside-left // 左边栏布局
body.l-aside-right // 右边栏布局
body.l-media // 响应式布局
body.l-min // 最小宽度布局

响应式设计

以右边栏响应式为例,兼容pc和pad,结构如下:

body.l-media.l-aside-right
  header.header>.inner-center
  section.section-main>.inner-center
      main.main>.content
      aside.aside-right
  footer.footer>.inner-center

基础css如下:

.aside-right,
.main{
    float: left;
}
.main{
    width: 100%;
}
 .aside-right{
    width: 300px;
    margin-left: -300px;
}
.l-aside-right .content{
    margin-right: 320px;
}

百分比设计

这种类型适合博客或各种文字流网站。这里我们实现最小宽度为980px,最大宽度为1200px,默认的右边栏宽度为300px,如果视窗小于或等于1024px的时候右边栏宽度为240px,css如下:

.inner-center{
    min-width: 980px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 1024px){
   .aside-right{
      width: 240px;
      margin-left: -240px;
  }
  .l-aside-right .content{
      margin-right: 260px;
  }    
}

固定宽度设计

适合图片,视频等内容比较丰富的站点。同样我们要得到两个宽度,一个为980px,一个为1200px。css如下:

.inner-center{
       width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 1999px){
   .inner-center{
           width: 980px;
   }
   .aside-right{
      width: 240px;
      margin-left: -240px;
  }
  .l-aside-right .content{
      margin-right: 260px;
  }    
}

固定宽度设计

对于整站来说,并不是所有的页面都需要响应式设计思想,有些页面如果本身内容就比较少,这样做成一个比较小的固定的宽度980px,pad上也可以浏览

.l-min .inner-center{
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

Silverlight制作逐帧动画

打算用sl来制作一个游戏,我曾经有flash开发游戏的经验.现在想用sl来做.打算记录下我开发游戏探索的过程. 打开http://www.emu-zone.o...

1969
来自专栏九彩拼盘的叨叨叨

学习前端 第1周 第3天

614
来自专栏ytkah

Bootstrap速学教程之简要介绍

  Bootstrap是Twitter推出的一个用于前端开发的开源工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一...

2578
来自专栏互联网杂技

手机网页布局经验总结

引言 众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样...

4056
来自专栏前端笔记

【HTML5 理论知识】就H5调试技巧,浅谈:iPhone X 适配方案!

image.png 2017年9月苹果发布了iPhone X机型,对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下...

5678
来自专栏张善友的专栏

HTML5 canvas图形库RGraph

在新的HTML5标准中,新增了一个非常重要的元素—canvas元素。使用该元素,可以在页面中直接进行各种复杂图形的制作。因此,如果使用该元素绘制统计图,比之前使...

2158
来自专栏Python爬虫实战

数字华容道03:首页创建

整个布局采用 QVBoxLayout (竖型布局)。最上方的“数字华容道”字样是一张图片,采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QP...

502
来自专栏移动开发

android界面背景键盘弹起被压缩

键盘弹起时,若界面设置了背景图有被压缩的情况.如果界面的布局采用了ScrollView可以设置属性android:scrollbars=”horizontal”...

1063
来自专栏程序员的知识天地

HTML中的容器标签

什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、表格标签、框架标签、布...

1030
来自专栏一“技”之长

标签之美七——为网页添加音乐 原

为网页添加音乐可以使用<embed></embed>这个标签。其用法和插入图片类似。

742

扫码关注云+社区