div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条"捷径". 希望广大网友提出宝贵意见 同时不希望将初学的您 带入走火入魔的状态!
1 :css (cascading style sheet):
初学者可以下载一本css 2.0 手册 大概48小时的时间可以看完 试完。至于样式手册上的单词(属性和取值) 多久能背完取决你的努力和英语基础,请注意 无论是div 还是css 还是html xhtml,其实如果你英文够好做网页和聊天没有差别:
例1:
<style type="text/css">
.style1{width:500px; height:100px; float:left;}
</style>
你在告诉html 你制定了这样的一个样式 宽度500像素 高度100像素 左浮动(如果你不理解什么是浮动请相信成 左对齐);
.style - 样式名称 为什么使用大括号扩起来呢? 因为一句话2句话说不明白 括起来代表他属于某一个集体;
冒号: 前面的教属性 就像你自己 有身高 体重一样!写样式就像是介绍:
深海:{身高:170cm; 体重:60kg; }
2 div (division):
div 的英文意思是区分,不加入样式的情况下 它和p 标记没有什么大的区别。
3 div+css
给div 制定了样式 他们的组合就演绎出了html 世界中强大的组合;
为什么使用div + css 有人说 它实现了 内容与展示形式的分离。如果你学明白了样式你会拒绝这样的说法;
因为table+css 一样可以!
有人说div+css 天生优化了搜索引擎,为何???
因为同样是布局 div只需要一层结构 而表格需要3层
例:
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>内容</td>
</tr>
</table>
<div>内容</div>
比较起来节省了 4行代码 如果页面上 出现N个table 那么可以节省 N*4 行代码,我觉得这是DIV 唯一可以拿来炫耀一下的东西; 甚至我们也坚信 内层用p标记也可以布局(不信你给p标记加上样式试试)
那么 我们要说 DIV+css 也没什么 初学者千万别被他的无聊和重复吓到
4 最大的呼声!! 不变形!!!!!!
网上有诸多的文章在说div的变形 (在不同的浏览器下不同的效果)
初学的你是不是很怕火狐 很怕 ie 6????
解决问题的最简单办法:
从哪里来回到哪里去!!!!!!!!!!!!
不要用什么if 去判断浏览器 这个世界上的浏览器种类没你想象的 遇到的那么少!!!!
你要知道你来自table 请你回到table!!
不是叫你用table 是想 table 怎么布局的!!!! table 有什么重要的值 table 为什么要制定对齐方式!
div +css 永不变形规则:
1> 记住 3个值 宽度 高度 对齐方式 永远记住!
2> 页面上出现变形 是因为你没有用div+css 布局!!!
你是否觉得我在开玩笑?看看以下代码
<div class="style1">
内容1
</div>
<img src="xxx.jpg">
<div class="style2">
内容2
</div>
我相信在页面的某个部分你会出现类型这样的代码 请注意你犯规了 你的布局方式叫 div+image+css
3> 只有矩形和矩形才能布局!!!
html 中所有外层结构都是矩形 哪怕是图片 图上画了 一个圆形 你可以打开图片看看 他是矩形!!!
想办法把元素转换成矩形并制定对齐方式 不能转换成矩形的(文字)利用矩形包裹! 然后布局 永不变形适用于各种浏览器!!!
有哪些元素是矩形呢?
table p h1 - marquee embed center ...............................常见的html 标记符都是矩形!!
谁不是矩形呢???
文字! 你是否有一种同感 文字和图片布局都很难得到好的效果
谁开始不是矩形但是可以转换成矩形呢?
a 链接本来是文字 当你制定样式为 display:block 的时候它就变成了矩形!!
****************************************************
4> 只要是矩形就有3个必须的属性: 宽度 高度 对齐方式 请别忘记他们 只要你时刻记得 div+css 不变形的秘密你已经掌握了 90%, 图片 也有对齐方式哦!!
一定要掌握当 对齐方式不同是 布局出现的问题!
左右左 - 能不变形吗?
默认 是要换行的哦
div+css的 居中对齐 是有条件的哦(所有当同级元素的对齐方式都为居中对齐的时候可以采用居中对齐)
5> 有些标记是有默认的间距的!!!(内间距 padding 外间距 margin)
body - 外间距
ul - ie下外间距 火狐下 内间距
p - 内间距
所以一旦使用他们要记得把他们先格式化! 操作方法(内间距 padding:0px; 外间距 margin:0px;)
6> 火狐下 当高度为auto是 无法自适应 解决办法(overfollow:hidden)
7> 在还没有完全掌握定位之前请放弃使用。本人坚信 一般的html 不是用定位完全可以布局,因为talbe 就没有定位!!!!! 一样可以布局很好 很稳定。div 和 table 没有实际区别 只是节省代码!!
8> 再次强调 3个值 永远记住: 宽度 高度 对齐方式(永不变形的唯一秘诀)+ 只有矩形才有这样的3个值!
div +css 的信心来源于多练 做的越多静态越多 本人学习div 的总计时间是48小时。用的时间超过几百小时。
现在有信心应对所有的浏览器 如果想学好div 请现在起 打开伟大的Dreamweaver 开始你的旅程吧
div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)的更多相关文章
- (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- DIV+CSS布局-固定页面开度布局
DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- (转)Div+CSS布局入门
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
随机推荐
- zabbix proxy安装及使用
首先我萌先理解下为什么要突然冒出zabbix proxy 它是一个代理,也就是agent与server的中间层,他会代替server收集agent的数据保存起来,然后推送给server,那么很明显,它 ...
- Flexpaper二次开发入门教程》(十) Flexpaper简单使用-第一个Flexpaper例子
4. Flexpaper简单使用 通过上面三章的内容,大家对Flexpaper.SWFTools应该有大概的了解了,SWF文件也已经生成了,我们开始进入Flexpaper的使用的介绍. 本章中只演示F ...
- 【224】◀▶ IDL NetCDF 文件操作说明
参考:I/O - NetCDF Routines —— NetCDF 操作函数 01 NCDF_OPEN 打开一个 NetCDF 文件. 02 NCDF_CLOSE 关闭一个 NetCDF 文 ...
- counting the numbers
题意: 给定$a,b,c$ ,求解满足 $1 \leq m \leq b, 1 \leq n \leq c, a | mn$ 的 $(m,n)$ 数对个数. $a \leq INTMAX$, $b \ ...
- HDOj-1425
sort Time Limit: 6000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 27. CICD Azure DevOps
VSTS做持续集成 后来改名叫做Azure Deveps https://azure.microsoft.com/zh-cn/services/devops/ 这是中文的地址 创建一个项目 名称.描述 ...
- HDU2594 【KMP】
题意: 给两个字符串s1,s2,求最长的s1前缀匹配s2后缀的字符串,以及长度 思路: 利用KMP看下最终匹配到了哪个位置:一个是利用常规匹配,另一个是利用next数组的跳转. #include< ...
- 51nod 1011 【完全背包】
完全背包的变形: 这些数字可以取多次,dp[i]代表前 i 物品组成N时的方案数. #include<iostream> #include<cstring> #include& ...
- PHP在cli模式下传参说明
命令行下输入php -help会列出所有可用的参数,如下截图: -a 代表以交互式模式运行: -c 指定ph.ini -n 不使用任何php.ini配置 -d foo[=bar] 定义一个INI实体, ...
- 在 UIViewController 中手动增加 TableView 出现 Type 'SomeViewController' does not confirm to protocol 'UITableViewDataSource' 问题的解决办法
许多时候我们都有在普通的继承自 UIViewController 的控制器中使用 TableView 的需求,这时候就需要当前控制器类继承 UITableViewDelegate 和 UITableV ...