搜索
首页web前端html教程采用DIV+CSS布局的好_html/css_WEB-ITnose

1、简介:为何使用表格排版是不明智的?

  表格之所以存在于 HTML 中,只是为了一个目的:显示表格状的数据。然而此后的 border="0" 使得设计师可以将图片和文本放在这无形的网格中。迄今为止,表格仍然主导着视觉丰富的网站的设计方式,但它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法。

  2、概览:这对我有什么用处?

  我们将告诉你这样一种工作方式,它会:

  使你的页面载入得更快
  降低你的流量费用
  让你在修改设计时更有效率而代价更低
  帮助你的整个站点保持视觉的一致性
  让你的站点可以更好地被搜索引擎找到
  使你的站点对浏览者和浏览器更具亲和力
  在世界上越来越多人采用 Web 标准时,它还能 提高你的职场竞争实力 (事实上也就是降低失业的风险)。

  3、表格带来的问题

  把格式数据混入你的内容中。
  这使得文件的大小无谓地变大,而用户访问每个 页面时都必须下载一次这样的格式信息。
  带宽并非免费。
  这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。
  这还使我们保持整个站点的视觉的一致性极难,花费也极高。
  基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。

  4、过渡性的设计

  使用 margin 和 padding 来代替多余的表格单元和间隔 GIF。

  使用 link 和 @import 来载入样式。前者用于早期浏览器,后者给现在的浏览器。

  

  

  5、结构化标记:所写即所想,所想即所写

  即便书写 CSS 很简单,使用 CSS 来排版却真的需要一种和我们以往有些不同的思维方式。

  我们排版时考虑的不是“这个东西放在这儿,那个东西放在那儿”,而是页面中信息的类别和信息的结构。

  我们用

标记来标示最重要的头条;次一级的条目则用

来标记,以此类推;而段落则放在

标记中。

  这就是我们称之为“结构标记”或“语义标记”的东西。

  你的内容将不放在表格和表格元素中,取代它们的是 div 元素。还要给你的 div 元素安排一个 id 或 class,不过这是为了描述它们的内容或功能,而非它们的外观。

  当你把某个对象设为斜体时,大概要么就是想强调它,要么是想 引用某个书中标题吧? 如果是前者,应该用 ;如果是后者,其实得用

  如果某个对象被标记为粗体,事实上它应该被标记的是,

  如果你希望在某处添加一个换行,这大概是开始了一个新的开头。如果不是开头,会不会是某种在你的站点中出现过的class (类型)?在上面两种情况下,你都应该用 CSS 替换

  .foo {display:block}

  考虑你需要导航的内容是一些无序的链接这种情况:

  用

    标签来编辑它们。

      link1
      link2
      link3
      link4
      link5
      水平导航条
      我们可以用 CSS 来控制这个列表显示在网页上的外观。

      通过使用 display:inline 我们可以创建水平导航条。

      link1
      link2
      link3
      link4
      link5
      这是上面这个导航条用到的代码:

      #nav1{
      margin-top: 1em;
      margin-bottom: 0.5em;
      }

      #nav1 ul {
      background-color: silver;
      text-align: center;
      margin-left: 0;
      padding-left: 0;
      border-bottom: 1px solid gray
      }

      #nav1 li {
      list-style-type: none;
      padding: 0.25em 1em;
      border-left: 1px solid white;
      display: inline
      }

      #nav1 li:first-child {
      border: none;
      }

      垂直导航条
      link1
      link2
      link3
      link4
      link5
      这是垂直导航条的代码:

      #nav2 {
      background-color: silver;
      border: solid 1px gray;
      width: 8em
      }

      #nav2 ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      border: none
      }

      #nav2 li {
      margin: 0;
      padding: 0.25em 0.5em 0.25em 1em;
      border-top: 1px solid gray;
      width: 100%;
      display: block
      }

      html>body #nav2 li {
      width: auto;
      }

      #nav2 li:first-child {
      border: none
      }

      6、从玩弄表格技巧到遵循 Web 标准:通盘考虑

      如果你已经把站点的内容分好了类,那么是时候分析每个页面,把它们按照逻辑关系进行分解了。

      主导航条
      子导航条
      页眉与页脚
      内容
      相关信息
      其他
      注意分析由嵌套表格、空白分隔符和边框元素组成的表格结构 (因为我们希望把它们替换为用 div 标记组织的那种简单得多的表格结构)。

      一旦你分析好页面的结构,就可以着手揭开表象,分析你现在的页面代码中可以转换成结构化标记的那些地方。

      作为一个完美主义者,消灭所有的 标记和间隔 GIF 吧!
      同样的,一并搞定
    标记。
      去除表格中的那些外观标记 (bgcolor, background, 等等)。
      把纯粹用来表示外观的那些 CSS 调用 (比如 ) 改成结构化的标记。

      7、把描述外观的标记改为描述结构的标记

      你可以使用“查找加替换”(或者正则表达式),不过最好的方法还是在浏览器里打开这个页面,然后把文本复制粘贴到你的 HTML 编辑器里。

      关键还是要用结构化的方式来思考!仅仅把 标记替换为 是远远不够的。

      最重要的条目是哪个?用

    来标记它。次要一点的就用

    ,依此类推。用

    来标记段落。把导航条标记为无序列表。

      选定一个 DOCTYPE 来使用。(我们推荐 XHTML transitional,除非你是此道高手,否则别用 XHTML strict。)

      8、把你的页面合理分布在的 div 中

      把你的主导航条放在一个 id 属性设为 mainnav 的 div 中,子导航条则放在一个 id 或者 class 是 subnav 的 div 中。而页脚类似这个形式:

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

< datalist>的目的是什么。 元素?< datalist>的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

< meter>的目的是什么。 元素?< meter>的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

我如何使用html5< time> 元素以语义表示日期和时间?我如何使用html5< time> 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

> gt;的目的是什么 元素?> gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)