用标准件的方式来组装网页DIV布局

2016-02-19 17:31 4 1 收藏

下面图老师小编要向大家介绍下用标准件的方式来组装网页DIV布局,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

有这样一个想法,不知道可行么例子:布局中的左栏,它的属性有:{居左,宽度,背景色,字体等等}如果把每个属性都做成一个标准件,然后这样组装起来使用class="float width height background font padding....",通过多个class的标准件的引用来完成页面布局样式先按需要定义好标准件如:float标准件
.l{float:left}.r{float:right}.cl{clear:left}...width标准件.w200{width:200px}.w300{width:300px}...background标准件.red{background:red}.black{background:#000}.white{background:#fff}...
根据需要引用class="l w200 red"牐劬幼螅宽度为200,背景红色]class="r w200 white" [居右,宽度为200,背景白色]我现在自己写代码,最多就2个class来定义一个布局样式,感觉很方便

来源:https://www.tulaoshi.com/n/20160219/1615401.html

延伸阅读
标签: Web开发
如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。 图1 盒模型图解 填充、边框和边界都分为上右下左四个方向,既可以分别定义...
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding...
标签: Web开发
在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式。一旦一个标准的XHTML代码写完之后,那么CSS可以实现其实百变面孔。其实XHTML是一个演员,CSS是编剧,XHTML演什么角色,都由CSS来决定的。 这听起来似乎有点理想主...
标签: Web开发
CSS教程栏目中汇集了大量的CSS知识,这些知识已经非常全面了,但很多CSSer新手初来本站,依然云里雾里,现整理一些DIVCSS网页布局常用的一些基础知识,供大家学习,欢迎补充及提一些建议。 CSS命名规范 一.文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样式:print.css; 二....
标签: Web开发
现在编写xhtml,我们强烈不推荐此种方法,应该是id,class综合应用。此文章只是讲述一种思维,并非建站过程中的方法! 用标准件的方式来组装网页DIV布局。我把class分为2种:布局class;风格class。 布局class是骨架,风格class是衣服。 举个例子:比如布局中的左栏。首先它的属性有:是左栏,宽度,背景颜色,字体颜色等。...

经验教程

175

收藏

87
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部