经验分享:CSS组合CLASS来完成网页布局风格

css|网页

  我是这样来做DIV布局代码的.不知道说的清楚不清楚,凑和看吧

  我把class分为2种,布局class,风格class,布局class是骨架,风格class是衣服

  举个例子:

  比如布局中的左栏

  首先它的属性有:是左栏,宽度,背景颜色,字体颜色等

  1.首先会定义一个class,比如:.layout,主要用来控制页面整个的大小

.layout{width:98%;margin:0 auto;text-align:left;}

  2.然后会定义3个基本布局Class(l,m,r)

.l{float:left}
.m{width:auto}
.r{float:right}

  我把2栏布局也归类于3栏布局,因为3栏布局中,左右栏的宽度分别为0的时候,3栏就变成了2栏.

  我们写基本布局代码的时候,最好还是写成3栏格式.

  3.对应布局Class,定义需要的风格Class,比如宽度,高度,背景颜色等等这些都属于风格元素

.class_l{background:#ff0;margin-right: -150px;width:150px;}
.class_m{background:#f00;margin:0 140px 0 150px;}
.class_r{background:#00f;margin-left: -140px;width:140px;}

  布局class只有一套,风格class可以定义很多.比如,要中栏里面在做一个小的2栏布局就可以再定义一个风格class

.mid_l{background:#ff0;margin-right: -100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

  4.将布局class和风格class结合起来,在代码这样引用

<div class="l class_l"></div>
<div class="l mid_l"></div>

  将2个class都引用,中间用空格隔开,前面的是布局class,后面的是风格class,后面还可以继续空格引用,如果需要再特殊定义,你可以给这个div取一个id来定义.

  其他的一些常用的风格class也可以写成通用的,比如隐含可以定义为

.hide{display:none}

  然后需要的时候,class="xxx hide"来引用,很方便.

时间: 2024-11-03 06:39:53

经验分享:CSS组合CLASS来完成网页布局风格的相关文章

组合CLASS来完成网页布局风格

网页 我是这样来做DIV布局代码的.不知道说的清楚不清楚,凑和看吧 我把class分为2种,布局class,风格class,布局class是骨架,风格class是衣服 举个例子: 比如布局中的左栏首先它的属性有:是左栏,宽度,背景颜色,字体颜色等 1.首先会定义一个class,比如:.layout,主要用来控制页面整个的大小 .layout{width:98%;margin:0 auto;text-align:left;} 2.然后会定义3个基本布局Class(l,m,r) .l{float:l

如何掌握CSS精要,学习网页布局教程

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 CSS是不是真的很难学?其实不难,只是缺少了掌握的经验,拿着一本书硬肯,有没有收获?有!但可能成效不大,作为过来人我觉得被动学习想要记住的东西是很难的,学习它我的经验是可以先掌握精要(重要属性开始),待掌握精要自然而然这些属性远远不够满足自己的需求引起自己求知的欲望,自动延伸其他相关的属性从而自然掌握和加深对CSS的认识.这是我认为的一种方法

经验分享:网站主页我们该怎样布局才算合理

对于每个网站来讲,主页无疑是最为至关重要的,无论是蜘蛛还是用户一般都是主要通过主页来进行网站的,并且一般来讲网站的主页在站点的整个页面群中权重也是最高的,所以说布局好网站主页也是非常关键的,那么我们该怎样去布局主页更好的?今天笔者就与大家分享一下布局主页的一些小技巧与需要注意的事项,希望对各位站长有所帮助. (一)网站顶部的布局. 网站的顶部布局是非常关键的,因为一般来讲蜘蛛都是从上到下,从所到右的形式来爬行并且以此来给予权重.头部在一般的网站当中主要分至为三点: 第一点:网站标题title,网

网页设计经验分享;没有CSS时网页的可看性

文章简介:网页设计经验分享;没有CSS时网页的可看性. 先上示例,首页酒店模块的效果图如下: 代码结构如下: <dl>< dt>酒店</dt>< dd>北京</dd>< dd>上海</dd>< /dl>< ul>< li>北京酒店列表</li>< li>北京酒店列表</li>< li>上海酒店列表</li>< li>

网页前端设计实例:常用技巧和经验分享

网页制作Webjx文章简介:前端开发的一些小技巧与经验分享. 自己前端开发中常用到的一些技巧及问题解决方法,会常更新,希望对前端路上的朋友有帮助. 1.文章标题列表中日期居右显示的方法(提供了两种方法,使用时视情况而定):方法一:本版2楼思路(感谢~),耗资源比较少,多两句代码. <p>@Mr.Think这是文章标题<span>2010-10-10</span></p> CSS定义: p{position:relative} p span{position:

设计经验分享:漂亮又特别的网页按钮

网页制作Webjx文章简介:作为一篇关于设计经验分享的博文,我只有靠自己浅薄的经验写出自己个人的看法,关于界面视觉设计,要分类的话能分得很细,所以能写的就很多,所以我打算先从局部来谈谈我总结的一些设计方法. 作为一篇关于设计经验分享的博文,我只有靠自己浅薄的经验写出自己个人的看法,关于界面视觉设计,要分类的话能分得很细,所以能写的就很多,所以我打算先从局部来谈谈我总结的一些设计方法. 经常有同学问我一些关于按钮设计的问题,怎么样做些漂亮又特别的按钮,我常常会告诉他们怎么画按钮的技法.但是我觉得一

ASP动态网页制作技术经验分享_应用技巧

学好一门编程语言有两个条件是必不可少的,一是理论与实践结合.在实际例程去验证书本上的理论能加深你对理论的理解:二是学会总结,把学习.运用中的心得体会记下来,当成一种经验或者教训加以提炼并在日后的应用中加以改进,一定能提高你对这门编程语言的认识.以下是笔者在学习与运用ASP编程中的两点经验,希望能对大家有所帮助. ASP页面内VBScript和JScript的交互 ASP具备管理不同语言脚本程序的能力,能够自动调用合适的脚本引擎以解释脚本代码和执行内置函数.ASP开发环境提供了两种脚本引擎,即VB

div+CSS网页布局的意义与副作用原因小结第1/2页_经验交流

如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手:但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载.而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢. 二.降低流量费用 页面体积

资深web开发程序员建站经验分享

web|web开发|建站|经验分享|程序员 我的历程:C - C++ - HTML - ASP - ASP.NET -JSP - PHP - XHTML(DIV+CSS) - 美工 设计工具:...(非web语言的不算了) - DreamWeaver + Editplus + Eclipse(JSP的时候) + ZEND(PHP时代) + PS(美工设计时代) 不知道有没有人和我类似现在做网站策划规划比较多点,主要在网站设计方面,讲究简为美的观点.现在写代码直接用EDITPLUS了,包括页面和C