没有合适的资源?快使用搜索试试~ 我知道了~
HTML 结构化实现方法.pdf
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 96 浏览量
2022-11-27
22:11:13
上传
评论
收藏 242KB PDF 举报
温馨提示
![preview](https://dl-preview.csdnimg.cn/87182756/0001-0b77ac462e2311b5699d4679994b8d80_thumbnail.jpeg)
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
试读
5页
...
资源推荐
资源详情
资源评论
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/release/download_crawler_static/87182756/bg1.jpg)
点评:第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整
体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加
CSS。这篇文章将告诉你应该怎样把 HTML 结构化。
DIV+css 的结构 你正在学习 CSS 布局吗?是不是还不能完全掌握纯 CSS 布局?
通常有两种情况阻碍你的学习: 第一种可能是你还没有理解 CSS 处理页面的
原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,
然后再针对语义、结构添加 CSS。这篇文章将告诉你应该怎样把 HTML 结构化。
另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、
align="left"等等)束手无策,不知道该转换成对应的什么 CSS 语句。 当你解
决了第一种问题,知道了如何结构化你的 HTML,我再给出一个列表,详细列出
原来的表现属性用什么 CSS 来代替。 结构化 HTML 我们在刚学习网页
制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。
然后我们用 Photoshop 或者 Fireworks 画出来、切割成小图。最后再通过编辑
HTML 将所有设计还原表现在页面上。 如果你希望你的 HTML 页面用 CSS 布
局(是 CSS-friendly 的),你需要回头重来,先不考虑“外观”,要先思考你的
页面内容的语义和结构。 外观并不是最重要的。一个结构良好的 HTML 页
面可以以任何外观表现出来,CSS Zen Garden 是一个典型的例子。CSS Zen
Garden 帮助我们最终认识到 CSS 的强大力量。 HTML 不仅仅只在电脑屏幕
上阅读。你用 photoshop 精心设计的画面可能不能显示在 PDA、移动电话和屏
幕阅读机上。但是一个结构良好的 HTML 页面可以通过 CSS 的不同定义,显示在
任何地方,任何网络设备上。 开始思考 首先要学习什么是"结构",
一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块,以及每
块内容服务的目的,然后再根据这些内容目的建立起相应的 HTML 结构。
如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块:
标志和站点名称 主页面内容 站点导航(主菜单) 子菜单 搜
索框 功能区(例如购物车、收银台) 页脚(版权和有关法律声明)
我们通常采用 DIV 元素来将这些结构定义出来,类似这样: <div
id="header"></div> <div id="content"></div> <div
id="globalnav"></div> <div id="subnav"></div> <div
id="search"></div> <div id="shop"></div> <div
id="footer"></div> 这不是布局,是结构。这是一个对内容块的语义
说明。当你理解了你的结构,就可以加对应的 ID 在 DIV 上。DIV 容器中可以包
含任何内容块,也可以嵌套另一个 DIV。内容块可以包含任意的 HTML 元素---
标题、段落、图片、表格、列表等等。 根据上面讲述的,你已经知道如何
结构化 HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页
面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
使用选择器是件美妙的事 id 的名称是控制某一内容块的手段,通过给这个
内容块套上 DIV 并加上唯一的 id,你就可以用 CSS 选择器来精确定义每一个页
面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为
#header 写一个 CSS 规则,就可以完全不同于#content 里的图片规则。 另
外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这
样:#globalnav a:link 或者 #subnava:link 或者#content a:link。你也可以
定义不同内容块中相同元素的样式不一样。例如,通过#content p 和#footerp
分别定义#content 和#footer 中 p 的样式。从结构上讲,你的页面是由图片、
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/5727ece9c0874d7a8520d85db0052815_weixin_67271870.jpg!1)
若♡
- 粉丝: 6208
- 资源: 1万+
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)