首页的设计直接影响网站的整体形象，虽然没有一个统一的规范，但最好将其设计为大众化的，只要信息内容能够合理地编排即可，使用户可以方便地找到需要的信息。另外，首页的高度最好不要超过三个屏幕，页面中使用的颜色最好也不要超过三种。通常一个网站首页包含页眉、Logo、Banner、主导航菜单、主内容栏目和次内容栏目区块、友情链接和页脚等区块框。本例将实现的效果如图1所示。

图1  DIV+CSS布局示例演示效果

1  HTML文件的设计

使用CSS布局的好处之一就是它能够控制页面布局，而不需要使用过多的HTML标签，只需要使用一些div、span、ul、li之类的标签。这样不仅使网站源代码更加简洁，而且能把网页中的主要内容放在前面，使网站的内容完全裸露在搜索引擎面前，便于搜索引擎抓取关键内容。本例设计完成一个简单的页面布局，创建一个名为divcss.html的网页文件，所需要的HTML代码如下所示：

在本例文件divcss.html中是一个比较简单的网站首页布局，只用到一些“无意义”的div标签来表现网页的内容，而页面的布局和外观都在外部CSS文件layout.css中定义。

2  CSS文件设计

在使用HTML和CSS配合编写网页时，如果希望在HTML文件中保持代码简洁，就需要加大CSS代码量，才能编写出完美的页面。比较常见的是使用外部样式表文件，而且如果样式代码比较多，最好将不同类型的样式分别定义在独立的样式文件中。常见的文件命名规范有全局样式（global.css）、框架布局（layout.css）、字体样式（font.css）、链接样式（link.css）和打印样式（print.css）等。并且常用类或ID选择器的命名规范，应尽量以常见的英文单词为准，做到通俗易懂，并在适当的地方加以注释。为本例布局所提供的样式文件layout.css中的代码如下所示：

IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例的更多相关文章

  1. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  2. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

    小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...

  3. IT兄弟连 HTML5教程 DIV+CSS的兼容性问题

    使用DIV+CSS布局网页其实是很容易的事情,但各种浏览器之间的不兼容性问题,加大了页面布局的难度,给程序员带来很多不便,于是需要花费更多的时间在调试各种浏览器的兼容性上.因为部分CSS属性在不同的浏 ...

  4. IT兄弟连 HTML5教程 响应式网站的内容设计

    基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容. 1  响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备.我们需要在 ...

  5. IT兄弟连 HTML5教程 使用盒子模型设计页面布局

    布局所涉及的技术非常很多,足以另写单独的一本书了.在本节中主要介绍网站中最常用的布局方案,包括区块框居中.两列浮动.三列浮动及多列浮动的区块框. 1  居中设计 区块框居中的设计是在网页布局中常用的技 ...

  6. IT兄弟连 HTML5教程 了解HTML5的主流应用1

    在很多人眼里,HTML5与互联网营销密切相关,但其实从开发者的角度而言,它是一种网页标准,定义了浏览器语言的编写规范.伴随HTML5标准尘埃落定,浏览器对HTML5特性的逐步支持,再加上国内对HTML ...

  7. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格

    表格在网站中应用得非常广泛,使用它可以方便.灵活地排版,很多动态大型网站也都是借助表格排版的,但现在都使用DIV+CSS进行页面布局.表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.在H ...

  8. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  9. DIV+CSS列表式布局（同意图片的应用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. iOS 一些struct类型的NSLog输出格式

    https://my.oschina.net/sayonala/blog/215910 我们经常会输出一些坐标尺寸信息之类的,比如view的frame,是CGRect类型的,用frame.oringi ...

  2. Maven学习整理

    1. window系统中安装Maven 2. 解决使用代理联网时无法下载jar包 3. 配置本地仓库 4. 处理本地仓库和中央仓库都没有依赖的jar包的情况

  3. 使用curl创建简单的性能监控工具

    cURL,全称Command Line URL viewer,是一种命令行工具,用来发送网络请求,然后得到和提取数据,显示在标准输出(stdout). 我们可以使用curl来获取网页的源码,显示头信息 ...

  4. mysql数据库命令

    删除一个表: drop table if exists 表名; 在表中插入行: Insert into 表名 values(, , ,) 创建表: Create table 表名( Id int(10 ...

  5. shell执行数学运算

    整数: expr let $(()) $[] 浮点数: bc 1.使用expr ♦参与运算的成员和运算符之间必须有一个空格: ♦对于那些容易被shell错解的,在它们传入expr命令之前,需要使用sh ...

  6. IOS UISwitch 控件

    转自:http://my.oschina.net/wolx/blog/396680 一 UISwitch 简介 二 UISwitch 创建 三设置选中状态 四 添加监听 五 测试代码 5.1 代码 5 ...

  7. Python获取 bing 地图发布自己的 TMS 服务（二）解决海量瓦片存取问题

    金字塔结构的瓦片数量有多大 以目前互联网常用的WebMecator为例 第一层:4幅256*256影像瓦片(JPG或PNG等) 第二层:42 第三层:43 依次类推比如计算第1层至第18层的瓦片总数目 ...

  8. 转化欧拉回路(难题)-UESTC-1957励志的猴子

    励志的猴子 Time Limit: 1000 MS     Memory Limit: 256 MB Submit Status 上图是2013南京亚青会吉祥物圆圆.自从它诞生以来,它就被吐槽为最丑吉 ...

  9. ARTS-S golang goroutines and channels(二)

    向tcp服务端发消息 package main import ( "io" "log" "net" "os" ) fun ...

  10. ARTS-S 在docker中运行本地脚本

    很多情况是本地没有编译环境,但docker中有编译环境.想编译本地代码,就要把本地的代码和编译脚本映射到docker中,脚本如下: docker run \ -it \ -v /Users/usern ...