搜索
首页web前端html教程DIV+CSS总结+体验_html/css_WEB-ITnose

让你使用DIV+CSS排版 不是让你用换个标签然后再去按照表格的方式去排版
而是做到内容与表现的分离
1: ID用于标识页面单独元素以及持久行的结构性元素 方便JS的调用
类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形式无关 :leftContent 而使用有意义的定义方式:sideBar等等。命名方式遵循“驼峰式大小写(标志符由多个单词组成 除首词首字母小写外 其余单词首字母均大写)”
2:避免滥用类 当类型的结构需要不一样的表现时 记得什么是层叠样式表 具体结构中的p a h1等可使用如下方式:div.sideBar p{}定义即后代选择器+ID或类选择器组合方式。
3:DIV与SPAN DIV(块级框)用于对块级元素的分组 SPAN(行内框)用于对行内元素分组标识
4:对于页面基本默认的方式可以选择通用选择器(*标识)进行定义 * { padding:0; margin:0;}
5: body 也是可以添加ID和类的 这样就可以为其添加特别样式。
6:样式表中导入样式表需在顶端 覆盖规则为本身样式覆盖导入样式
7:CSS样式表细分化 颜色 布局 风格 表单 均可分离 这样对以后的修改和风格设计更方便
8:盒模型:内→外
content←width height(补充:height只有在父元素定义了绝对高度时其%才有意义)
border
padding(内补丁)-“填充”
background-image
background-color
margin(外补丁)-“空白边”透明 可为负值
记住:在css中 width是指内容区域的宽度
IE/WIN与盒模型:
IE5.5/IE6怪异模式下: 元素框总宽度=content.width+margin.width
FireFox/Opera/..   :  元素框总宽度=content.width+padding.width+border.width+margin.width
差异在于:IE5.5/IE6怪异模式下 width=有效content.width+padding.width+border.width 内补丁和边框被算在内容宽度里面
#select{width:750px;padding:10px;border:5px} IE怪异模式:总宽度:750px FF/OP:780px
                                              IE怪异模式:有效内容宽度:750-20-10 FF/OP:750
IE6正常模式下:同于FF/OP
处理方法:在父元素或子元素中使用padding 本身不使用
空白边叠加:当两个空白边叠加时 顶或底边将会叠加 实际空白边高度=空白边大的值
例:


     空白边高度为20px
但是如果这个时候你添加边框或则填充,将不再叠加

//定位机制//
9:相对定位(relative):相对于其默认初始位置 绝对定位:相对父级元素或画布、HTML元素 与文档流无关 可覆盖其他元素 使用Z-INDEX 控制其层次。IE5.5/IE6下 对right bottom时 需设定框的宽高 后则根据画布右底定位
   绝对定位(absolute)
10:float浮动:记住:“在标准浏览器中 浮动元素脱离了文档流 不占据外围容器空间” 明白了这点 你就会明白为什么IE和FIREFOX下表现的不同了。IE5.5、IE6浮动元素依然占据外围容器空间
  例如:怎么在IE下feeter正常 在firefox下就跑上去了呢?^_^ 清除浮动吧
IE下 当float和text-align定义的方向一样时 出现双倍错误:select{float:left;text-align:left;margin:0 10px;}
实际左边margin-left:20px;FF/OP:10px 解决:加上display:inline;

11:彻底理解 “清除浮动”clear
clear:none、left、right、both、
表示当前框元素哪些边不应该挨着浮动框
理解了10中float在不同浏览器下的表现 你也就知道如何去使用清楚了。
12:背景图像的定位:只谈百分比 background:url(image-url.gif)no-repeat 20% 30%
20%:将图像X轴20%处与父元素X轴20%处重合 Y同理 top=0% bottom=100% left=0% right=100% center=50%
13:滑动门/
左右两个DIV 背景分别定义 一般左背景图像比较长; 左背景定位:left center 右背景定位:right center
外部控制容器宽度一般小于等于两个背景和 这样当内容动态变化时候 右背景图像便感觉像在左背景图像上滑动,故名。
这样也可以实现:
css:
#nav a{float:left;background:url("../images/navLeft.gif") no-repeat left top;padding:0;text-decoration:none; cursor:hand;}
#nav a span {float:left;display:block;background:url("../images/navRight.gif") no-repeat right top;padding:5px 36px 5px 40px;color:#ffffff}
原理相似,注意背景图像定位。
14:完美的居中布局:body{text-align:center;mini-width:760px;}
                  div#wrapper{margin:0 auto;text-align:left;width:750px;}
mini-width IE并不认识 这是为老浏览器准备的,只是这个值比你需要的实际页面大就OK

15:小图标有时会给页面增色不少 用前记得规划好 整到一张大图片上 这样可以减少服务器请求次数

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

安全考试浏览器

安全考试浏览器

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

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!