文档库 最新最全的文档下载
当前位置:文档库 › 实验6 CSS样式表3

实验6 CSS样式表3

实验6 CSS样式表3
实验6 CSS样式表3

实验六样式表制作3

实验内容:

使用盒子相关属性制作样式表。

使用Div+CSS布局网页。

实验步骤:

一、

使用CSS+Div实现自己设计的首页布局,实现效果如下图所示:

●为各区域定义规范的id;

●为各区域设计合适的宽高;

●为各区域临时设计背景颜色和边框颜色(颜色自由设置),以便观察代码效

果和设计效果是否一致。

二、使用盒子相关属性制作样式表,运用基本的盒子属性来改进页面的外观:

1.在浏览器和文本编辑器中打开jenware.html,看看工作内容(要看明白大体

结构),文档被分成三个div(“intro”、“testimonials”、“products”)。背景色被添加到body,testimonials和products中。还有背景图像沿着body元素的上部水平重复,使网页上部产生渐变效果(颜色淡出),testimonials左上角有一个感叹号图像。剩下的规则都是用来格式化文本的。

2.首先,找到#products选择器并添加padding声明。要求padding为2em,看

一下效果。

3.然后,将testimonials的一部分应用一些奇异的效果。在div的左边清出一些

空间,这样漂亮的感叹号背景就清晰可见了,很多方法可应用不同padding 值到各个方向,我们使用下面的方法:

#testimonials{

Padding: 1em;

Padding-left: 60px;

Background: #FFBC53 url(images/ex-circle-corner.gif) no-repeat left top;

Line-height: 1.2em;

}

保存文件,在浏览器中查看效果。

4.文本编辑器中打开jenware.html文档,开始,我们使用快捷border属性在

testimonials部分周围添加橙色(#F26521)虚线,宽度为1px,样式使用dashed.

5.再给“products”区域添加边框规则,使边框颜色为更浅的橙色(#FFBC53),

样式为双线double

6.为了增加网页的趣味性和实用性,在products部分,我们将在标题的两个方

向添加装饰边框。在“products”在div中查找h2元素已有的规则,并在标题上方添加上边框,宽度1像素,样式为solid。再添加另一个声明,添加左边框为3像素solid的规则。最后,为防止文本冲撞左边框,添加一些填充,即添加1em的内边距到标题内容。

7.接着,用装饰底边来替换标题中用于超链接文本的下划线。首先,通过在每

个超链接规则(a:link,a:visited,a:hover,a:active)中设置text-decoration:none;

来去掉下划线,接着,添加1像素dotted边框到每个状态下的底边(注意是下边框)。为了区分下边框和文本,添加下内边距为25px到规则中。保存文件,在浏览器中查看效果。

8.文本编辑器中打开jenware.html文档,在浏览器窗口与内容(即body中)的

各方向添加空白(即外边距)。设置空白边为浏览器窗口宽度的12%。

9.在网页的“intro”部分添加上下空白,上外边距为3em,下外边距也为3em。

10.我们已经使用margin属性专用的计量值。另一个可选的使用关键字auto,来

给浏览器应用尽可能多的空白边,使之填满可用的空间。如果给元素左右方向的margin属性设置auto,那么将保证元素位于浏览器窗口或其他容器元素的中间。我们设置元素#testimonials的width属性值为500px,然后,应用2em的margin属性到上下方向,应用auto值到左右方向。

11.最后,在产品目录h2元素上部分添加3em的空白(即margin-top)。保存文

件,并在浏览器中查看。

三、网页布局(选作,下节课上机的内容,如果之前的做完,可以提前做)

1、在文本编辑器中打开Olympus.html,并另存为Olympus-2col.html。首先,我

们将设置所有的标记文本。因为这是个固定宽度的布局,所以把所有的内容打包进一个标识为“container”的div中。

2、接着,添加标识为四个内容部分的div。分别命名为”header”(Mount Olympus News)、”main”、”extras”(Links to Stories和News。)和”footer”。注意,例子中的“extras”div包含Links to Stories和News。

3、借助适当的标记文本,你可以继续修改样式表。样式表元素和一些基本的文本格式化规则已经为你添加好了。应用width属性到“container”div。这样设置网页区域的宽度。同时,应用border属性来使网页区域的边界清晰可见。

#container{

width:750px;

border: 1px solid;

}

4、然后,使页眉和页脚更突出。给它们一些填充和亮色背景。我使用灰色,但你可以使用你喜欢的颜色。

#header{

Padding: 15px;

Background: #CCC;}

#footer{

Padding: 15px;

Background: #CCC;}

5、现在设置主要内容div的宽度,将它浮动到右边来创建第二栏。

#main{

Float: right;

Width: 550px;}

然后清除页脚使之出现在浮动内容的下面。

#footer{

Clear: both;

Padding: 15px;

Background: #CCC;}

6、保存文档并在浏览器中查看。页面中文本撞击到了栏和浏览器的边缘。做如下修改,给浮动的主栏所有方向和“extras”div的左边添加空白边。

#main{

Float: right;

Width: 550px;

Margin: 0 10px;}

#extras{

Margin-left: 10px;}

7、再次保存文档并查看。

8、布局基本完成,可以修饰一下,使网页看上去感觉更好。首先,通过添加background-color: yellow属性到#main规则中,使“main”div的背景为黄色。可以看到浮动盒子的内容区域下的颜色变化,而并没有扩展到空白边区域。

9、下面的练习中我们将使用绝对定位,用同样的内容来创建一个两栏弹性布局。打开Olympus.html并另存名为elastic-Olympus.html的新文档。

10、删除文档末尾的版权信息段。本布局不包括页脚。

11、接着,添加必要的标记文本。同样,添加一个包含所有内容,名为“container”的div,并把内容分到3个div中:“header”、“main”、“extras”。

12、在样式表中,通过给“container”div一个width属性,把它定位到成为定位栏的容器块的相应位置,这样创建一个网页。因为这是弹性布局,所以宽度应该指定为em单位的值。我们使用保守值40em,这样1024像素宽的浏览器上进行试验时,布局还可以放大。

#container{

Width: 40em;

Position: relative;

}

13、设置页眉的height属性、padding属性和背景色。

#header{

Height: 4em;

Padding: 1em;

Background-color: #CCC;}

14、现在定位“extras”div。添加规则到样式表,定位侧栏于页眉之下,设置左侧栏的宽度为10像素,并带1像素的填充。

#extras{

Width:10em;

Position:absolute;

Top: 6em;

Left: 0;

Padding-left: 1em;}

15、最后,通过在“main”内容div的左边,添加空白边,来为定位侧栏制造空间。我已经添加了12em的空白边,来制造11em宽的侧栏加上1em栏间距。

#main{margin-left: 12em;}

16、保存文件并在浏览器中打开。

17、下面的练习来创建居中对齐的布局。打开刚刚创建的文档elastic-olympic.html。

18、为了让整个网页居中,简单地设置左右margin属性值为auto,这样就完成了。保存文件并在浏览器中打开查看居中的网页。

#container{

Width:40em;

Position: relative;

Margin-left: auto;

Margin-right: auto;}

CSS+DIV布局案例

第一个例子只是告诉大家如何让页面居中,这个代码的用处一般用来做背景图,示例: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;}

DIV+CSS:网站首页布局实例教程

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布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: 无标题文档 这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。 下面,我们在标签对中写入DIV的基本结构,代码如下:

[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS 信息,代码如下: /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

DIV+CSS网页布局技巧实例

DIV+CSS网页布局技巧实例1:设置网页整体居中的代码

DIV+CSS网页布局技巧实例4:使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中,不要交错使用全写和缩写的颜色配置,在系统资源极低时,会导致浏览器渲染失败。 盒尺寸 通常有下面四种书写方法: ?property:value1; 表示所有边都是一个值value1; ?property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 ?property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3 ?property:value1 value2 value3 value4; 四个值依次表示top,right,bottom, left 方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:margin:1em 0 2em 0.5em;

边框(border) 边框的属性如下: ?border-width:1px; ?border-style:solid; ?border-color:#000; 可以缩写为一句:border:1px solid #000; 语法是border:width style color; 背景(Backgrounds) 背景的属性如下: ?background-color:#f00; ?background-image:url(background.gif); ?background-repeat:no-repeat; ?background-attachment:fixed; ?background-position:0 0; 可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position; 你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:?color: transparent ?image: none

第十天 div+css网页标准布局实例教程(一)

第十天div+css网页标准布局实例教程(一) 今天学习《十天学会web标准(div+css)》的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的完成,整个流程下来,希望能对各位有所帮助。由于本节内容较多,将分三部分来讲解。 建立站点 结构分析 搭建框架 切割效果图 布局页面——头部和导航 布局页面——侧边栏 布局页面——主体部分 底部和细节调整 相对路径和相对于根目录路径 一、建立站点 前面的课程都是零碎讲解一些相关知识,那么要做一个网站,首先需要建立一个站点。那么什么是站点,为什么要建立一个站点呢?因为网站不同于其它文件,比如一个图片,放到哪个盘哪个目录下都可以访问。而网站是许多文件相互关联的,所以要专门一个目录把它们分门别类存放起来。如果搞过视频编辑的朋友都知道,需要先建立一个工程,把原始的视频文件、图片素材分类放好,也是这个道理。下面以在D盘建立一jiaocheng文件夹为例,在dreamweaver(简称DW)里创建一个站点指向这个文件夹,然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。

保存后,一个站点就建立起来了,我用的是DW cs5版本,不同版本界面有所不同。如果要连接FTP,需要设置服务器选项(后面会涉及到)。站点建立好后,我们先建立一个images和css文件夹,分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的;在dw建立需要在文件面板列表的根目录上点击右键,选择新建文件夹后更改名字即可。

DIV+CSS布局大全

目录 div+css布局入门 (4) XHTML下css+div布局总结 (6) 网页设计DIV+CSS——第1天:选择什么样的DOCTYPE (9) 第一天 (9) 什么是DOCTYPE (10) 我们选择什么样的DOCTYPE (10) 补充 (10) 网页设计DIV+CSS——第2天:什么是名字空间 (10) 网页设计DIV+CSS——第3天:定义语言编码 (11) 网页设计DIV+CSS——第4天:调用样式表 (11) 外部调用样式表 (11) 双表法调用样式表 (12) 网页设计DIV+CSS——第5天:head区的其他设置 (12) 收藏夹小图标 (12) 为搜索引擎准备的内容 (12) 网页设计DIV+CSS——第6天:XHTML代码规范 (12) 1.所有的标记都必须要有一个相应的结束标记 (13) 2.所有标签的元素和属性的名字都必须使用小写 (13) 3.所有的XML标记都必须合理嵌套 (13) 4.所有的属性必须用引号""括起来 (13) 5.把所有<和&特殊符号用编码表示 (13) 6.给所有属性赋一个值 (13) 7.不要在注释内容中使“--” (13) 网页设计DIV+CSS——第7天:CSS入门 (14) 1.基本语法规范 (14) 2.颜色值 (14) 3.定义字体 (14)

5.派生选择器 (14) 6.id选择器 (14) 6.类别选择器 (15) 7.定义链接的样式 (15) 网页设计DIV+CSS——第8天:CSS布局入门 (15) 1.定义DIV (15) 2.CSS2盒模型 (16) 3.辅助图片一律用背景处理 (17) 网页设计DIV+CSS——第9天:第一个CSS布局实例 (17) 1.确定布局 (18) 2.定义body样式 (18) 3.定义主要的div (18) 4.100%自适应高度? (20) 网页设计DIV+CSS——第10天:自适应高度 (20) 网页设计DIV+CSS——第11天:不用表格的菜单 (21) 1.不用表格的菜单(纵向) (21) 2.不用表格的菜单(横向) (22) 网页设计DIV+CSS——第12天:校验及常见错误 (24) 1.XHTML校验 (24) 2.CSS2校验 (25) CSS的十八般技巧 (25) WEB打印实例教程 (30) Div+CSS布局入门教程 (37)

实验四--Div+CSS网页布局

实验四 Div+CSS网页布局 一、站点规划 在网页制作中,有许多的术语,例如: HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要制作的界面布局简单的构画出来。 下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:

根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。 DIV结构如下: │body {}/*这是一个HTML元素,具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/

至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹,命名为“DIV+CSS页面布局”,在文件夹下新建两个空的记事本文档,输入以下内容: 这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。 下面,我们在标签对中写入DIV的基本结构,代码如下:

CSS布局实例:用CSS布局网站首页

CSS布局实例:用CSS布局网站首页 第一步 下面是我们将要动手制作的设计图。如前所述,你可以阅读PSDTUTS上的这篇教程来学习如何做出这样的设计图。在这篇教程里我们只制作首页,不过你可以以此为基础用相同的布局制作内页。 第二步 首先要做的是确定页面结构。随着你对CSS布局的逐步学习,这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计。 什么是绝对定位?

一个HTML元素(比如

、等等)被放入页面时具有一个天生的位置,这个位置是由之前放入的元素确定的。例如,你放入一个填充了文字的 标签,接着放入另一个 ,它会自然出现在第一个下方。每个元素相对于上一个元素流动。 绝对定位则不同,它给一个对象指定精确的位置使它脱离常规的元素流。如果你像之前一样放入第一个 ,然后绝对定位第二个 为left:500px; top:500px,那它就会无视第一个准确无误地出现在指定的位置。 你可以像这样设置绝对定位: .className { position:absolute; top:0px; left:0px; } 绝对定位的缺点 使用绝对定位的主要问题是你的元素们不会真正地相互关联。例如,你在靠近页面顶端的地方放置了一个文本块,然后稍靠下放置另一个,当每一个块的文本都较短时这看上去很好。 但如果顶部的块内是一篇长文,它就会越过第二个块,而不是把第二个块推向下方。 所以绝对定位只对那些尺寸固定并且不需要与其他元素互动的元素真正有效。 为什么本例中我们要用绝对定位? 因为绝对定位的好处就在于,它真的、真的非常简单!你告诉浏览器东西往哪儿放它就往哪儿放!更棒的是,当你使用绝对定位时,浏览器兼容性问题会大大减少。毕竟不管你用的是Firefox、Internet Explorer还是Safari,100px总归是100px。 嗯...该开始我们的布局了 我们将要制作网站的方法是: ?使用大尺寸的背景图片 ?绝对定位Logo、菜单和头部面板,让它们精确地出现该出现的地方 ?将content(内容)放入惯用的
标签,但设置很高的padding-top(顶部内边距)好让content向下推到该出现的地方 ?让footer(页脚)坐镇底部

实验三DIV+CSS样式应用

实验名称DIV+CSS样式应用 实验3 DIV+CSS样式应用 1实验目的 1)了解页面常用布局结构; 2)掌握使用CSS盒子模型浮动与定位的方法 3)掌握DIV的使用方法; 4)掌握DIV+CSS布局的基本方法; 2实验内容及要求 1)制作一个简单的如下图框架的首页,不需要填写具体内容,使用背景色标 出区域;

3 实验原理 浮动边框可以向左或向右移动,直到外边缘碰到包含框或另一个浮动框的边框为止。 通过float或margin来让元素产生位置移动。 4仪器与材料 安装有Windows7或以上操作系统的计算机,Dreamweaver 5实验内容 5.1CSS 布局入门 CSS 布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF 图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin、padding、border 等属性来控制版块的间距。 定义DIV,分析一个典型的定义div 例子:

说明如下: 1)层的名称为sample,在页面中用就可以调用这个样式; 2)margin 是指层的边框以外留的空白,用于页边距或者与其它层制造一个 间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距,如果都一样,可以缩写成"margin: 10px;"。如果边距为零,要写成"margin: 0px;"; 3)注意:当值是零时,除了rgb 颜色值0%必须跟百分号,其他情况 后面可以不跟单位"px"。margin 是透明元素,不能定义颜色; 4)padding 是指层的边框到层的内容之间的空白。和margin 一样,分 别指定上右下左边框到内容的距离。如果都一样,可以缩写成 "padding:0px"。单独指定左边可以写成"padding-left: 0px;"。padding 是透明元素,不能定义颜色; 5)border 是指层的边框,"border-right: #ccc 2px solid;"是定义层的右边 框颜色为"#ccc",宽度为"2px",样式为"solid"直线。如果要虚线样式可以用"dotted"; 6)background 是定义层的背景。分2 级定义,先定义图片背景,采用 "url(../images/bg_logo.gif)"来指定背景图片路径;其次定义背景色 "#fefefe"。"no-repeat"指背景图片不需要重复,如果需要横向重复用 "repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的

Div+CSS基础代码网页布局+实例教程

Div+css 一,什么是CSS CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术统称。 二.DIV+CSS 简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV 是用于搭建html网页结构(框架)标签,像

等html标签一样,再认识CSS是用于创建网页表现(样式/美化)样式表统称,通过css来设置div标签样式,这一切常常我们称之为div+css。 表格 以前html直接设置高度width="300"这种方式嵌入表格标签内,而且无需带单位,默认以px(像素)为单位。 例子:
我的高度为100px
我高度为50px
分别设置了高度为100px和50px的两行表格 DIV的布局方法 CSS 代码 .yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;} Html body内代码:
https://www.wendangku.net/doc/4518689967.html,演示,内容 测试内容高度超出演示实例,divcss5实例
完整CSS html最小高度实例代码:

CSS列表式布局实例

固定宽度CSS 版式布局 红色字符和背景标识的为比较实用的结构 1列固定宽度居中 1列固定宽度居中 +头部 1列固定宽度居中 +头部+尾部 1列固定宽度居中 +头部+导航+尾部 2列固定宽度居中左 窄右宽型 2列固定宽度居中右 窄左宽型 2列固定宽度居中平分型 2列固定宽度左窄右 宽型+头部 2列固定宽度右窄左 宽型+头部 2列固定宽度左窄右宽型+头部+尾部 2列固定宽度右窄左宽型+头部+尾部 2列固定宽度左窄右宽型+头部+导航+尾 2列固定宽度居中平 分型 2列固定宽度右窄左宽型+头部+导航+尾 部 2列固定宽度左窄右宽型+头部+导航+尾 部 3列固定宽度居中 3列固定宽度居中+ 头部 3列固定宽度居中+ 头部+尾部

自适应(弹性)宽度CSS版式布局红色字符和背景标识的为比较实用的结构 3列固定宽度居中+ 头部+导航 3列固定宽度居中+ 头部+导航+尾部 2列左窄右宽、高度 自适应+头部+导航+ 尾部 2列右窄左宽、高度 自适应+头部+导航+ 尾部 2列左窄右宽高度自 适应且未知高度底 部平齐、型+头部+导 航+尾部 2列右窄左宽、高度 自适应且未知高度 底部平齐+头部+导 航+尾部 1列自适应宽度居中1列自适应宽度+头 部 1列自适应宽度居中 +头部+尾部 1列固定宽度居中+ 头部+导航+尾部 2列左侧固定,右侧 自适应宽度,中间无 缝型 2列右侧固定,左侧 自适应宽度,中间无 缝型 2列左侧固定,右侧 自适应宽度 2列右侧固定,左侧 自适应宽度 2列左侧百分比右侧 自适应 2列左侧固定,右侧 自适应宽度+头部 2列右侧固定左侧自 适应宽度+头部 2列左侧固定右侧自 适应宽度+头部+尾 部

Div+CSS布局示例

实训六Div+CSS布局示例 主要内容: 本周需要完成的任务:根据前几周的设计, 各组创建自己的站点文件夹,并把站点内文件夹结构创建好,搜集相关素材; 使用Div+CSS实现网页框架。 参考图: 操作部分:Div标签及盒子模型 提示:请务必做好准备工作。 在硬盘上创建一个自己的文件夹,专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。 将从FTP上下载下来的”images”文件夹(专门存放图片),存放在自己的“myweb” 文件夹内,以备制作网页时使用。 将从FTP上下载下来的 test.html 文件,存放在自己的“myweb”文件夹内,这是一个网页HTML代码的标准模版。 将 test.html 复制一份,重命名之后以记事本的方式打开,开始编辑代码。 1.在上一节制作的网页的基础上,继续修改,使三个盒子都能居中显示。

保存后测试。 2.会发现得到如下结果:

原因:#red和#blue都被添加了float:left;属性,而#green没有float属性。 结论:margin:0 auto;这种居中对齐方法,对于有浮动属性的div不起作用。 解决办法:将显示在同一行的、需要浮动的盒子,用一个大盒子套起来,这个大盒子不必浮动,也就能使margin:0 auto;这种居中对齐方法有效。 然后修改CSS文件: 注意:HTML文件和CSS文件都保存,测试。

知识链接: 使用CSS实现居中的方法: Margin:0 auto; 注:此方法不适用与具有浮动(float)属性的Div。 Div+CSS应用示例 以如下网页为例,分步讲解: 1.首先,确定网页布局,先横向划分大盒子,划分结果如下:

CSS中常见布局介绍

1开篇 内容决定形式,不同的应用场景需要不同的展现形式。布局最终的目的是为了让内容能够更加灵活和便捷的呈现在最终用户的眼前。 用户只关心他是否能从不同的设备上能够访问到你的内容,而不会关心你通过使用什么技术手段能够达到这种效果。 2布局的目的 页面的布局方式是页面构成的主骨架。 通用布局的目的主要是提供一种抽象,指导设计和开发人员都能够按照某种规范来简化设计和开发的过程。 3常见的布局方式 以下描述的一些布局方式并不是完全互斥的,不同的布局之间可以互相嵌套。并且也没有一种布局方式适用于所有的应用场景。具体采用哪种布局方式还需要看实际需求、应用场景以及实现难易程度。 以下针对一些常见的布局方式进行描述:

3.1固宽布局 固宽布局比较简单,这种布局有一个设置了固定宽度的外包裹,里面的各个模块也是固定宽度而非百分比。重要的是容器(外包裹)元素是设置为不能移动的。一般为适应主流的分辨率,设置固定宽度为950px左右。如果小于这个宽度,则会出现滚动条。如https://www.wendangku.net/doc/4518689967.html,,它为固定宽度为980px。 上图展示的是一个固定宽度布局的基本轮廓,三列,分别为520,200以及200,每列的间距为20px 优点: 1.设计师所设计的就是最终用户所看到的 2.设计更加简单,并且更加容易定制 3.在所有浏览器中宽度一样,所以不会受到图片、表单、视频和其他固定宽度内容的 影响 4.不需要min-width、max-width等属性,因为有些浏览器并不支持这些属性 5.即使需要兼容800×600这么小的分辨率,网页的主体内容仍然有足够的宽度易于阅 读 缺点: 1.对于使用高分辨率的用户,固定宽度布局会留下很大的空白。因此出现了“黄金比 例”,“三分定律”,综合平衡和其他设计原则 2.屏幕分辨率过小时会出现横向滚动条 3.背景图像的平铺,无缝纹理,连续的图案需要能适应更大的分辨率 4.在某些情况下,可用性会很低 另外在考虑固定宽度布局的时候,可能会需要调查实际用户常用的分辨率。下面是W3School 调查的一个结果:

DIV CSS网页布局实例

DIV CSS网页布局实例:十步学会用CSS建站 https://www.wendangku.net/doc/4518689967.html, 更新日期:2007-06-20 20:55 出处:jorux的网站作者:jorux 收藏本文 Update:本篇已得到原作者Steve Dennis的翻译准予,在此Jorux表示感谢! 本教程主要参考Creating a CSS Layout from scratch,由Jorux翻译,以意译为主,其间加入了不少Jorux的个人观点,省略了一些多余的说明,请读者明鉴。 目录: ?第一步:规划网站,本教程将以图示为例构建网站; ?第二步:创建html模板及文件目录等; ?第三步:将网站分为五个div,网页基本布局的基础; ?第四步:网页布局与div浮动等; ?第五步:网页主要框架之外的附加结构的布局与表现; ?第六步:页面内的基本文本的样式(css)设置; ?第七步:网站头部图标与logo部分的设计; ?第八步:页脚信息(版权等)的表现设置; ?第九步:导航条的制作(较难); ?第十步:解决ie浏览器的显示bug; 第一步:规划网站,本教程将以图示为例构建网站 1.规划网站,本教程将以下图为例构建网站。 其基本布局见下图:

主要由五个部分构成:

1.Main Navigation 导航条,具有按钮特效。Width: 760px Height: 50px 2.Header 网站头部图标,包含网站的logo和站名。Width: 760px Height: 150px 3.Content 网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar 边框,一些附加信息。Width: 280px Height: Changes depending on 5.Footer 网站底栏,包含版权信息等。Width: 760px Height: 66px 第二步:创建html模板及文件目录等 1.创建html模板。代码如下:

DIV+CSS网页设计实例教程

DIV+CSS网页设计实例教程 目录: 第一步:规划网站,本教程将以图示为例构建网站; 第二步:创建html模板及文件目录等; 第三步:将网站分为五个div,网页基本布局的基础; 第四步:网页布局与div浮动等; 第五步:网页主要框架之外的附加结构的布局与表现; 第六步:页面内的基本文本的样式(css)设置; 第七步:网站头部图标与logo部分的设计; 第八步:页脚信息(版权等)的表现设置; 第九步:导航条的制作(较难); 第十步:解决IE浏览器的显示BUG; 第一步:规划网站,本教程将以图示为例构建网站 1.规划网站,本教程将以下图为例构建网站。 其基本布局见下图: 主要由五个部分构成: 1.Main Navigation导航条,具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标,包含网站的logo和站名。Width: 760px Height: 150px

3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框,一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏,包含版权信息等。Width: 760px Height: 66px 第二步:创建html模板及文件目录等 1.创建html模板。代码如下: CompanyName - PageName @import "css/master.css"; 将其保存为index.html,并创建文件夹css,images,网站结构如下: 2.创建网站的大框,即建立一个宽760px的盒子,它将包含网站的所有元素。 在html文件的和之间写入 Hello world. 创建css文件,命名为master.css,保存在/css/文件夹下。写入: #page-container { width: 760px; background: red; } 控制html的id为page-container的盒子的宽为760px,背景为红色。表现如下: 现在为了让盒子居中,写入margin: auto;,使css文件为: #page-container { width: 760px; margin: auto; background: red; } 现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙,就需要在css文件中写入: html, body { margin: 0; padding: 0; } 第三步:将网站分为五个div,网页基本布局的基础: 1.将“第一步”提到的五个部分都放入盒子中,在html文件中写入: Main Nav Header Sidebar A Content Footer 表现如下:

Dreamweaver8系列DIV+CSS教程网页标准布局实例教程(一)

div+css网页标准布局实例教程(一) 本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的完成,整个流程下来,希望能对各位有所帮助。由于本节内容较多,将分三部分来讲解。 ?建立站点 ?结构分析 ?搭建框架 ?切割效果图 ?布局页面——头部和导航 ?布局页面——侧边栏 ?布局页面——主体部分 ?底部和细节调整 ?相对路径和相对于根目录路径 一、建立站点 前面的课程都是零碎讲解一些相关知识,那么要做一个网站,首先需要建立一个站点。那么什么是站点,为什么要建立一个站点呢?因为网站不同于其它文件,比如一个图片,放到哪个盘哪个目录下都可以访问。而网站是许多文件相互关联的,所以要专门一个目录把它们分门别类存放起来。如果搞过视频编辑的朋友都知道,需要先建立一个工程,把原始的视频文件、图片素材分类放好,也是这个道理。下面以在D盘建立一个jiaocheng文件夹为例,在dreamweaver(简称DW)里创建一个站点指向这个文件夹,然后在目录下新建im ages文件夹、css文件夹等把各类文件分别存放起来。

保存后,一个站点就建立起来了,我用的是DW cs5版本,不同版本界面有所不同。如果要连接FTP,需要设置服务器选项(后面会涉及到)。站点建立好后,我们先建立一个images和css文件夹,分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的;在dw建立需要在文件面板列表的根目录上点击右键,选择新建文件夹后更改名字即可。 二、结构分析 创建完站点后,就需要对页面结构进行分析了,根据效果图,分析页面分为几大块,该怎么布局更合理。下面这个图是我做的一个企业网站的模板,虽然不怎么好看,但目的是把前边学的东西全都给串起来,让大家掌握各种情况的处理方法,先看下效果图及在网页中显示的样式:

相关文档