这是身体
第一个例子只是告诉大家如何让页面居中,这个代码的用处一般用来做背景图,示例:http://www.smarter.co.jp/,外围是灰色的,当中页面的正文底是白色的,非常大气。这个例子主要讲上下两列,这是最常见的,也是最简单的页面表现形式,头部放logo和banner,下面是主体内容。
CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}
#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#mainContent { height:300px; background:#cff;}
页面代码如下:
这是身体
效果下图显示:点击看大图
其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中,宽度由#container决定。
第二个例子是告诉大家如何让页面居中,如何加上头部。这个例子加上了尾部,这也是一种常见的页面表现形式,头部放logo和banner,中间是主体内容,尾部放copyright 等内容。
CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}
#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#mainContent { height:300px; background:#cff; margin-bottom:5px;}
#footer { height:60px; background:#6cf;}
页面代码如下:
这是主体
效果下图显示:点击看大图
其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中,宽度由#container决定。
第三个例子是我们在页面布局中加上了尾部,但一个标准的网站都有导航。这个例子加上了导航,这是最常用的页面表现形式,本次例子中还涉及了另三个要点,是很多朋友在CSS定义时经常遇到的问题。
CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}
p{margin:0;}
#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#menu { height:30px; background:#09c; margin-bottom:5px;line-height:30px}
#mainContent { height:300px; background:#cff; margin-bottom:5px;}
#footer { height:60px; background:#6cf;}
页面代码如下:
1列固定宽度居中+头部+导航+尾部
效果下图显示:点击看大图
本例有三个关键要点
1、p标签有默认值
一样都是“margin-bottom:5px;”,如果仔细比较以前的示例,会发现,mainContent的上边界比较宽,超出了5px,原因是mainContent里嵌套了一个
。“p{margin:0;}”是将
的默认值清空。
一样的代码有
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, td
{margin:0; padding:0;}
p标签有默认值为:p{margin:1em 0;} /* p标签上下外间距为16px; */
ul标签有默认值为:ul{padding-left:40px;margin:1em 0;} /* ul 标签上下外间距为16px;左内间距为40px; */
2、px和em的换算
16px = 1em
12px = 0.75em
10px = 0.625em
3、文字垂直对齐
说到文字垂直对齐,很多人第一反应是vertical-align:middle; 但,其实如想设置文字垂直居中,那么一定要设置ling-height的属性值和height值一样,这样才会使文字垂直居中,单独设置vertical-align:middil是不会使文字垂直居中的。所以在“menu”的样式定义中我没有使用“vertical-align:middil”而是使用了“ line-height:30px”。
从这个例子开始,我们开始讲左右的布局的CSS,DIV左右布局是CSS中最复杂的。
CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;}
#container {margin:0 auto; width:900px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#mainContent { margin-bottom:5px;}
#sidebar { float:left; width:200px; height:500px; background:#9ff;}
#content { float:right; width:695px; height:500px; background:#cff;}
页面代码如下:
效果下图显示:点击看大图
本居中的关键是一左一右“float:left; float:right;”
本例子讲的是DIV中最复杂的DIV3列并排居中,这是DIV左右布局最复杂的,也是最难做的地方,很多新手都不能将三列并排显示,其实DIV3列并排是非常简单的。
CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}
#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#mainContent { height:300px; margin-bottom:5px;}
#sidebar { float:left; width:200px; height:300px; background:#9ff;}
#sidebar2 { float:right; width:200px; height:300px; background:#9ff;}
#content { margin:0 205px; height:300px; background:#cff;}
页面代码如下:
效果下图显示:点击看大图
本例中的关键是先写左右,再写中间。
本例子将DIV3列并排居中配上头部和尾部,这是国外BLOG经常使用的格式。CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}
#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#menu { height:30px; background:#09c; margin-bottom:5px;line-height:30px}
#mainContent { height:300px; margin-bottom:5px;}
#sidebar { float:left; width:200px; height:300px; background:#9ff;}
#sidebar2 { float:right; width:200px; height:300px; background:#9ff;}
#content { margin:0 205px; height:300px; background:#cff;}
#footer { height:60px; background:#6cf;}
页面代码如下:
效果下图显示:点击看大图
本例中的关键是先写左右,再写中间。
此例子与前面的例子的区别在于当正文的高度不统一时,怎么办,这也是页面DIV布局时经常碰到的格式问题。
CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}
#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#menu { height:30px; background:#09c; margin-bottom:5px; line-height:30px}
#mainContent { }
#sidebar { float:right; width:200px; background:#9ff; margin-bottom:5px;}
#content { float:left; width:695px; background:#cff; margin-bottom:5px;}
#footer { height:60px; background:#6cf;}
页面代码如下:
效果下图显示:点击看大图
本例中的关键是
。这句话是清除浮动用的,因为我们在header和menu内设计时都可能涉及到浮动,还有sidebar栏和content,本身已经浮动了,这样如果content的高度没有sidebar高时,footer会浮动到sidebar右侧,造成整个页面错乱,采用这种方式可以有效避免错乱。另外,sidebar和content分别采用左浮动和右浮动的方式,当然也可以采用自适应宽度,将“sidebar”和“content”按显示的次序摆放,
此例子与前面的例子的区别在于当正文的高度不统一时,怎么办,这也是页面DIV布局时经常碰到的格式问题。
CSS代码如下:
body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}
#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#menu { height:30px; background:#09c; margin-bottom:5px; line-height:30px}
#mainContent { }
#sidebar { float:right; width:200px; background:#9ff; margin-bottom:5px;}
#content { float:left; width:695px; background:#cff; margin-bottom:5px;}
#footer { height:60px; background:#6cf;}
页面代码如下:
document.getElementById("sidebar").style.height=document.getElementById("content").o ffsetHeight+"px";
效果下图显示:点击看大图
这个例子使用到了JS和CSS的配合使用,关键是。这句话是用来将左边的DIV的高度与右边的自动齐平,但需要注意的,此方法只限于左边的"sidebar"的高度一定小于右边的"content",反之则不能实现。
另外,需要注意的是,因为是使用JS,所以sidebar和content必须是使用ID,而不能使用CLASS来定义CSS,id="sidebar"。最次由于HTML是逐渐显示编译的,所以要将JS写在
的前面。
写在最后的话
所有的DIV+CSS布局案例示范到此已经全部结束了,为了显示上的直观,一直都是采用整个的色块来表达效果,而实际的网页上面一般会有很多元素影响你的判断,所以一个优秀的网页布局架构师都要经历“看山是山,看山不是山,然后再看山是山”的过程。如下图一,将整个网页的效果图中华丽的部分抽去,其实整个网站的布局就是这个样子。
而页面中的一个栏目的布局,也是同样的道理,如图二。
使用布局视口 摘要:在浩辰CAD中要用好布局,必须了解视口的应用,视口是联系模型空间和布局空间的纽带,利用视口可以将模型空间绘制的图纸按一定比例缩放后摆放到布局空间的虚拟图纸上的。在浩辰CAD中,与视口相关的操作很多,视口本身可以调整比例、尺寸、显示锁定等设置在不同的视口还可以通过冻结(隐藏)不同的图层得到不同的打印效果。下面简单给大家介绍一下视口的概念和基本操作。 什么是视口 布局空间的视口实际上跟模型空间的图形窗口是类似的,相当于一个相机的镜头,通过此镜头我们可以观察和显示模型的不同部分,也可以调整图形显示的大小,也就是我们说的缩放、平移。但布局空间视口与模型空间不同的是,为了控制打印的效果,布局空间视口的大小、比例必须严格进行控制。 布局中视口的应用非常灵活。视口可以是常规的矩形,视口还可以是圆形或任意多变形;一个布局中可以只用一个视口,也可以使用多个视口;多个视口可以用相同比例来显示三维模型的不同视图,也可以用不同比例来展示图形的整体和局部细节。设置有些设计师利用布局空间视口来拼接模型空间绘制的图形,但我并不建议大家这样去操作。 创建视口 在创建布局时,浩辰CAD已经默认创建视口,当然,读者还可以根据需要创建多个视口,下面介绍一种视口创建最常用的方法。 1、切换到布局空间,新建一个图层,在该图层上绘制好图框。关于图框,每个行业都 有图框绘制标准,读者可以查阅相关的行业标准。 2、再创建一个名为“视口”的图层,在图层上绘制一个如下图所示的矩形。需要注意 的是,在后续的操作中,我们将会把此矩形变为视口,由于我们不希望模型空间中 的图形显示在图框之外,因此,矩形也不应该超出图框之外。
第一个例子只是告诉大家如何让页面居中,这个代码的用处一般用来做背景图,示例:http://www.smarter.co.jp/,外围是灰色的,当中页面的正文底是白色的,非常大气。这个例子主要讲上下两列,这是最常见的,也是最简单的页面表现形式,头部放logo和banner,下面是主体内容。 CSS代码如下: body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} #container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;} #header { height:100px; background:#6cf; margin-bottom:5px;} #mainContent { height:300px; background:#cff;} 页面代码如下:
效果下图显示:点击看大图 其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中,宽度由#container决定。 第二个例子是告诉大家如何让页面居中,如何加上头部。这个例子加上了尾部,这也是一种常见的页面表现形式,头部放logo和banner,中间是主体内容,尾部放copyright 等内容。 CSS代码如下: body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} #container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;} #header { height:100px; background:#6cf; margin-bottom:5px;}
我从事网页设计行业,已经有两年光景了,浏览器对CSS的识别是让我最头疼的,我曾经彷徨了好一阵,然后不断的收集资料,不断地研究,终于有一点儿小小的经验适用到我的工作中去了。可能这点儿经验不算什么,但是我想还是有帮助的,特别是对于刚接触CSS不久,然后仍然徘徊的初学者们,希望对你们有所帮助和借鉴。 好啦,闲话少说,咱们言归正传https://www.sodocs.net/doc/0f5295745.html,e on,let's go!! 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。
DIV+CSS:网站首页布局实例教程 第一步:页面布局与规划 在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。 下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:
根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。 DIV结构如下: │body {}/*这是一个HTML元素,具体我就不说明了*/ └#Container {}/*页面层容器*/
├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。 第二步:写入整体层结构和CSS 接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: