第 15 章 Div+CSS页面设计

简介:

目录

15.1. 页面元素命名
15.2. XHTML+DIV+CSS
15.3. 页面结构设计
15.3.1. Home page (首页)
15.3.2. 导航烂
15.3.3. Left Bar
15.3.4. 区块设计 Block
15.4. 表格
15.5. 图片优化
15.5.1. onMouseOver/onMouseOut
15.5.2. 使用一幅图片处理BLOCK四角
15.5.3. 图片用背景图代替 img 标记
15.5.4. 合并图片
15.6. HTML嵌入图片
15.7. 页面内容安全
15.7.1. 禁止鼠标右键
15.7.2. 禁止复制剪切 及粘贴
15.8. html,css 有效性检查 Validation
15.9. 自适应宽度超出截取并显示省略字符

最近几年,随着业界越来越关注XHTML+CSS的标准化设计,一个新兴职业已经诞生,这就是“网站重构师”,这个新兴职业人才紧缺,他们主要的职责是将HTML+Table+Javascript的架构向XHTML+CSS+Ajax迁移。

15.1. 页面元素命名

		
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>恒信贵金属报表系统</title>
    </head>
    <body>
    	<div id="header">
    		<div id="logo"></div>
    		<div id="banner"></div>
    		<div id="navigation"></div>
    	</div>
    	<div id="wrapper">
    		<div id="sidebar"></div>
    		<div id="content"></div>
    	</div>
    	<div id="footer">
    		<div id="footer-nav"></div>
    		<div id="copyright"></div>
    		<div id="legal"></div>
    	</div>
    </body>
<html>
		
		





原文出处:Netkiller 系列 手札
本文作者:陈景峯
转载请与作者联系,同时请务必标明文章原始出处和作者信息及本声明。

目录
相关文章
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
23天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
23天前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
52 2
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
HTML+CSS 实现带轮播图的企业官网页面(记得收藏)
HTML+CSS 实现带轮播图的企业官网页面(记得收藏)
HTML+CSS 星空闪烁登录页面(记得收藏)
HTML+CSS 星空闪烁登录页面(记得收藏)
HTML+CSS 登录页面(记得收藏)
HTML+CSS 登录页面(记得收藏)
|
3月前
|
移动开发 前端开发 JavaScript
大气实用的HTML5/CSS3个人中心页面(含源码)
大气实用的HTML5/CSS3个人中心页面(含源码)
|
3月前
|
前端开发 UED
波光粼粼的登录体验:CSS动画让登录页面酷炫升级!
波光粼粼的登录体验:CSS动画让登录页面酷炫升级!