推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第3/3页

网络编程 CSS/HTML 经验交流 分类:[default] 更新日期: 2016-07-01


熟悉工作流程
在真正开始工作之前我们脑海中要形成这样一种思想:表格是什么我不知道,在内容部分我不能让它再出现表现控制标签,如:font、color、height、width、align等标签不能再出现,(简单说工作前先洗脑,忘掉以前的一惯做法,去接受和使用全新的方法),我不是单纯的用DIV来实现排版的嵌套,DIV是块级元素,而像P也是块级元素,例如要分出几个文字内容块,不是一定要用DIV才叫DIV排版,不是“<div>文字块一</div><div>文字块二</div><div>文字块三</div>”,而用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>”更合适。
用DIV+CSS设计思路是这样的: 1.用div来定义语义结构;2.然后用CSS来美化网页,如加入背景、线条边框、对齐属性等;3.最后在这个CSS定义的盒子内加上内容,如文字、图片等(没有表现属性的标签),下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图:

演示地址:http://www.hsptc.com/css2.html

CSS排版结果图


用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构,即页头、导航栏、内容、版权(如下图),

典型版面分栏结构


其结构代码如下:
好了,此文到此结束,更多内容,如:CSS中的盒子宽度计算,浏览器兼容问题,XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以,看过之后记得跟帖,你的鼓励是我不断出新文章的动力^-^

> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • MongoDB的Master-Slave主从模式配置及主从复制要点解析
    主从复制是数据库运维中一种常见的备份方式,这里我们来看一下MongoDB的Master-Slave主从模式配置及主从复制要点解析,需要的朋友可以参考下主从配置mongodb的master-slave模式配置方式如下1.keyFile生成key_file openssl rand -base64 741 > mongo_key 将mongo_key 分别 ...
  • 正则表达式单行、多行模式简介(使用说明)
    正则表达式单行、多行模式简介(使用说明)
    我们今天继续讨论下,它的单行,多行模式使用,及容易出现错误地方.单行,多行模式,都是正则表达式的模式修饰符里面出现的参数继上几篇正则表达式相关说明(详情:正则表达式 ),我们今天继续讨论下,它的单行,多行模式使用,及容易出现错误地方.单行,多行模式,都是正则表达式的模式修饰符里面出现的参数.目前常用正则表达式都有该使用选项,如:javascript 正则表达 ...
  • 详解表单验证正则表达式实例(推荐)
    这篇文章主要介绍了详解表单验证正则表达式实例推荐的相关资料,非常不错,具有参考借鉴价值,特此分享到平台供大家参考验证:!reg.test(value) 邮箱: 代码如下:reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/i; 不包含中文: 代码如下:r ...
  • JavaScript中的正则表达式(推荐)
    正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式推荐,感兴趣的朋友一起学习吧正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词 ...
  • 完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位
    完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位
    下面小编就为大家带来一篇完美解决jsp页面在IE8下文本模式自动为杂项Quirks导致页面显示错位.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧最近在修改网站的响应式的页面时,由于都是套样式页面,修改过程都是粘贴复制,导致了一些细节问题在IE8下暴露出来: 遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面样式 ...
  • Jquery和BigFileUpload实现大文件上传及进度条显示
    Jquery和BigFileUpload实现大文件上传及进度条显示
    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面 ...
猜你喜欢