1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

浅谈DIV+CSS快速布局几年心得经验

作者:用户 来源:互联网 时间:2016-08-30 11:23:51

布局样式colorpadding边框

浅谈DIV+CSS快速布局几年心得经验 - 摘要: 本文讲的是浅谈DIV+CSS快速布局几年心得经验, 我从事网页设计行业,已经有两年光景了,浏览器对CSS的识别是让我最头疼的,我曾经彷徨了好一阵,然后不断的收集资料,不断地研究,终于有一点儿小小的经验适用到我的工作中去了。可能这点儿经验不算什么,但是我想还是有帮助的,

我从事网页设计行业,已经有两年光景了,浏览器对CSS的识别是让我最头疼的,我曾经彷徨了好一阵,然后不断的收集资料,不断地研究,终于有一点儿小小的经验适用到我的工作中去了。可能这点儿经验不算什么,但是我想还是有帮助的,特别是对于刚接触CSS不久,然后仍然徘徊的初学者们,希望对你们有所帮助和借鉴。

1、DIV起初布局和CSS的大方向规划

* {margin:0; padding:0;word-break:break-all;}
body {background:#eeeeee url(../images/QZZT_head_bg.jpg) top center no-repeat;padding:0; margin:0; color:#333333; font-family:"宋体"; }
a {color:#333333;text-decoration:none; }
a:hover {color:#ba2636;text-decoration:underline; }
ul, li, span, img{ padding:0; margin:0; list-style:none; }
img{border:none;}
.F12 { font-size:12px; }
.F12 { color:#333333; }
.red { color:#CC0000; }
a.red { color:#CC0000; text-decoration:none; }
a.red:hover { color:#CC0000; text-decoration: underline; }
/*-------边框--------------*/
.border3 { border:1px solid #e6e6e6; }
.border2 {border-left:1px solid #d78327;border-right:1px solid #d78327;border-bottom:1px solid #d78327;}
.border1 {border-left:1px solid #d8d8d8;border-right:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;}
/*通用样式*/
.divline { height:10px; line-height:10px; width:auto; overflow:hidden; clear:both; }/*分割空间 折行*/
.clearboth { width:auto; height:1px; margin-top:-1px; overflow:hidden; clear:both; }/*清除浮动实现自动折行 无高度*/

先拿这段代码来说吧,这是我以前曾经写过的一段样式。

页面起初的CSS设定一定要关系到你后面再操作中的便利和出错,所以这段代码的使用,是防止后面可能出现的错误。

“*”这个大家都知道,是通配符,也就是所有的页面内定义的对象,都会配置这一样式,里面的word-break:break-all是要求必须在限定范围内折行,这样你做出的框内文字才会在限定范围内折行。当然,如果不折行,而是自动适应,那就没有必要用这段样式了。

body中的定义我想就不用多说了,padding,margin,border不特殊情况下,都为0。

整体的链接样式,大方向的,也就是默认的,可以设定一个a和a:hover,这个是你页面中出现最对颜色的链接样式。

ul,li.span,img这些也最好把padding和margin的值设为0,另外ul和li中的列表标记设成none,便于后续操作中可以自己调整。

文字的大小,文字的颜色,可以用组合样式,比如上面的F12,代表12px字体,如果我现在用12px的红色字体,那么class="F12 red"。

边框也是单独设定,然后用组合样式。注意:再具体限定高度和宽度的div时用到组合边框,一定要考虑边框所占得1px。

关键来啦,有人可能遇到这样的问题,就是为什么我的页面是按照块做的,可惜两块怎么叠加到一起了呢?而不是一块块按照顺序向下排列的呢?那就就用这个来调,把divline的样式附加在一个空白div上,然后放在两个块中间,这样就不会使块与块之间干扰了。如果是无缝的,就用clearboth这个样式,它是无高度的。这个方法可能笨点儿,但是很奏效。

好啦,上面的我讲完啦,不知道对你们是否有所帮助。

下面我们讲DIV的布局

2、把握大方向 布局有技巧

浅谈DIV+CSS快速布局几年心得经验-div <a href=css布局入门教程">

先拿这个举例吧。

很明显分两部分,上边两块的为一部分,下边一大一小为另一部分。布局很简单都是两列。要求就是先做外围的大框。

我给写一下div中的css,以及DIV的顺序。

<div class="">

<div></div>

<div></div>

</div>

明白没?这就是第一块的div写法,同样,第二块也属于两列布局,div也可以这些,这样的目的就是先顾全整体,然后再调节细节,这就是div布局。

这是我们再添加你要明确的div的css

<div class="div-warp1">

<div class="div-warp1-left"></div>

<div class="div-warp1-right"></div>

</div>

CSS样式写法要明确,这样便于以后维护查找方便。而且要写好注释。

大家应该都注意到上边的图片中,四个块块的标题样式都一样,对吧?那就写一个通用的,拿来用。这也是大方向的布局之一,也就是title通用时,写一个可以通用的样式。在这里,我就不详细写了。

另外要注意的是,当div样式中存在float:left或者是float:right时,如果它其中有padding和margin,而且值不为0,那么一定要加一个display:inline;防止产生双倍距离,如果有的li中插入图片之后会长一些,加一个overflow:hidden,这个就是让溢出的东西隐藏起来。

好了,呵呵,我今天没做充足的准备,这些是我今天想到的一些经验,不知道管用不管用,拿出来分享一下,谢谢!

改日再谈CSS和DIV的布局

本文由 站酷网 - 20664873 原创,转载请保留此信息,多谢合作。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索布局 , 样式 , color , padding 边框 div css布局入门教程、div css 布局教程、div css布局、div css布局实例、divcss布局经典实例,以便于您获取更多的相关知识。

浏览器-html+css布局问题请教各位

问题描述 html+css布局问题请教各位 这是我的css文件 label{ font-size: 16px; } .titleBar{ background: none repeat scroll 0 0 #F8F8F8; border-bottom: 1px solid #F0F0F0; height: 48px; } .imgcontent{ heigh...

推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页_经验交流

作者:唐国辉 实例网页网址:http://www.hsptc.com/css2.html前言       如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上...

浅谈phpmywind对初学者的学习价值

结论就是:初学者或者刚入门的朋友,非常建议要学phpmywind,因为它有很大的价值。千万不要一来就学TP,Laravel,PHPCMS,Discuz这些大系统。 何故?且听如下分析: 1:首先它是个完整的开源CMS系统,可以用来开发诸如公司网站,你...

2008年对我总体来说是个丰收年

...—WRITE LESS,DO MORE,写更少的代码,做更多的事情。轻量级,快速的,简洁的javaScript库,能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互,一切都是面向对象(OO)的,OOP(面向对象编程),呵,很好 ...

2年前端应该会哪些技能

... 其实最重要的还是自我学习能力,出现一项技术,能够快速的通过文档学习了解,遇到问题能够科学上网,Google、stackoverflow 找到解决方案 我问我师傅,你是怎么能保持七八年如一日不断学习的呢。 师傅想了想说,真的对这个...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备