当前位置：首页>免费文档>文库资料>综合文库>CSS 制作与操作

CSS 制作与操作

更新时间：2024-03-09 20:18:01 阅读量：综合文库文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

css是什么意思推荐度：
相关推荐

HTML基础篇

网页设计基础知识验证器

HTML验证器在http://validator.w3.org/

CSS验证器在http://jigsaw.w3.org/css-validator/

WEB标准概述：网页由3个部分组成：结构（由什么构成的）表现（每种部分用什么样的字体、格式）行为（决定网页做什么）

文件夹名称。如果一个网站含有大量的音频片段，那么最好是将其放在一个名为music或sound的文件夹中进行管理。

主页对于一个实例网站，其名称应该简化为index.html网站的主页面不能放在任何一个子文件夹中。

HTML网页文档结构

基本语法为：<标记>内容

以

标记一个文本段落标记定义一个表格标记所有文字以粗体显示斜体显示

HTML文件结构

标记做为形式上的开始头文件放在标记中标记为标题标记包含在<head>标记中<body>主体标记网页显示的内容都放在这个标记中。 </p><p><font color=#></font>标记来控制文本颜色。<img src=https://www.bwwdw.com/plus/cup.gir>图片插入的标记为<img >它有一个src属性用于指明图像文件的位置。 </p><p>注释标记 <html> <head> </p><p> <title>注释标记

这是正文文本

在之间的内容是不会显示在浏览器上的。用HTML设置文本和图像

段落与换行

互联网发展的起源

1969年，为了能
为了保障

标记定义网页中一段文字，文本在一个段落中会自动换行。在一个段落中间换行则可以使用
标记。只需要在希望换行的地方放置一个
标记即可。
设置标题
??

数字越小，级别越高文字也相应越大。
段落与换行

互联网发展的起源

1969年，为了能
为了保障

使文字水平居中

段落与换行

互联网发展的起源

1969年，为了能
为了保障

设置文本段落的缩进
在代码中原来的两个
用标记的段落改为
定义
段落与换行

互联网发展的起源

1969年，为了能
为了保障

第一段落

1969年，??的新纪元

设置文字列表（项目列表和序号列表）
建立无序列表其中每一个列表项使用标记
第一项第二项
无序列表
这是一个无序列表：
第一项第二项

建立有序列表

第1项第2项

有序列表
这是一个有序列表：
第一项第二项

HTML标记和HTML属性
基本语法<标记名称属性名 1=\属性值1\属性名2=\属性值2\??>如果一个标记中使用多个属性，各个属性之间以空格来间隔。
1，用align 属性控制段落的水平位置
段落与换行

1969年，为了能
为了保障

1969年，??的新纪元

2,用bgcolor属性设置背景颜色
将一行改为标记的text属性设置
文字以加强强调方式显示文字以强调方式显示
段落与换行

发展的起源

1969年，为了能
为了保障

1969年，??的新纪元

3,设置文字的大小和颜色
标记有三个属性分别为：face设置字体 size控制文字的大小color设置文字的颜色

发展的起源

空格符号为 @符号为© 在网页中使用图像
插入的图片与HTML文件是处于同一目录下的，如果不处于同一目录下，就必须采用路径的方式来指定图片的文件位置。
1,用width和height属性设置图片的尺寸

当图片只设置一个属性图片的高度就以图片的原始比例来显示。 2，用alt属性来为图片设置替换文本

如果在制作网页的时候，能够为图像都配有清晰明确的替换文本，就可以帮助搜索引擎更好的理解网页内容，从而有利于搜索引擎的优化。
用HTML建立超链接 1，设置文本超链接
超链接指向目标和链接文本
链接到图像网页。
2，设定页面内部的特定目标链接

形如意思是指明网页所应跳转到哪个目标名称的位置上
3，设置图像的超链接

点击该图像放大
4，设置电子邮件的超链接

5，设置以新窗口显示链接页面就是在标记中设置\属性
方式打开一个网页
6，创建热点区域，和
HTML可以使用3种热点区域：矩形、圆形、多边形。

>area shape=\
标记只是一个属性即是name属性标记除起到插入图像作用外，还需要引用区域名字，这就要加入一个usemap属性，其设置值为标记中name属性的设置值再加上#例如
7，框架之间的链接
建立框架与框架集和
标记和标记是同一级的。不可放在中用cols属性将窗口分为左右两部分
语法结构
窗体分割

用rows属性将窗口分为上中下三部分
窗体分割

用src属性在框架中插入网页
语法结构
窗体分割

创建嵌入式框架 </p><p><iframe width=https://www.bwwdw.com/plus/\ .cn> ，/iframe> 链接增多后网站的组织结构与维护 </p><p>方案1，按照文件类型进行分类管理。将不同类型的文件放在不同的文件夹中。方案2，按照主题对文件进行分类管理。并且再进行划分。用HTML创建表格 </p><p>1，表格的基本结构 </p><p>标记定义一个表格定义一行，代码中有多少个标记，就表示有多少行的表格。定义一个单元格或一列。它必须放在标记里使用，一个标记内有多少个就表示这行时有多少列表。 <body> <center> </p><p> a1 a2 </p><p> b1 b2 </p><p>2，合并单元格 </p><p>用colspan属性左右合并单元格用rowspan属性上下合并单元格 </p><p> a1 <p> b1 rowspan=https://www.bwwdw.com/plus/\ </p><p>colspan=https://www.bwwdw.com/plus/\这个单元格就会横跨两列 </p><p>3，用align属性设置对齐方式 </p><p> a1 <p> </p><p> b1 b4 </p><p>用valign属性控制表内文字的对齐方式 </p><p>4,用bgcolor属性设置表格背景色和边框颜色设置背景色可以是对设置 </p><p> a1 <p> <p> b1 b4 </p><p> <p> c1 <p>5,用cellpadding 和cellapacing属性设定距离 </p><p>用cellpadding属性设定表格单元格中的内容距离格线的距离用cellapacing属性设定表格相邻单元格的边线之间的距离 </p><p><p>W3C是全球万维网联盟的简称。 </p><p>DOCTYPE（文档类型）指令来声明使用哪种规范解释文档。过渡类型兼容以前版本定义的，而在新版本已经废弃的标记和属性。严格类型则不兼容已经废弃的标记和属性。建议使用XHTNL1.0过渡类型 </p><p>XHTML与HTML的重要区别 </p><p>1，在XHTML中标记名称必须小写， 2，在XHTML是属性名称必须小写 3，在XHTML中标记必须严格嵌套例如：<i><b>这行文本必须以粗体倾斜显示</b></i>b与i不能互换 </p><p>4，在XHTML中标记必须封闭 </p><p>5，在XHTML中即使是空元素的标记也必须封闭。就是不成对的指令。如换行<br/>水平线<hr/>图像 <img src=https://www.bwwdw.com/plus/\ <br />br 和/之间有空格。 </p><p>6，在XHTML中属性值用双引号括起来 </p><p>7，在XHTML中属性值必须使用完整形式如<input checked=https://www.bwwdw.com/plus/\（X）HTML与CSS </p><p>(X)html与css的关系是“内容结构”与“表现形式”的关系。CSS为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 </p><p>对于CSS默认的情况下都采用粉红色进行语法着色，而HTML代码中的标记则是蓝色，</p><p>正文内容默认为黑色。在编写CSS代码时，按“ENTER”或空格键都可以触发语法提示。 </p><p>CSS核心基础 </p><p>构造CSS规则“CSS的思想就是首先指定对什么对象进行设置，然后指定对该对象的哪个方面的属性进行设置，最后给出该设置的值。CSS就是由：对象、属性和值三部分构成的。 </p><p>基本选择器 </p><p>在CSS中，对象指定了对哪些网页元素进行设置。它有一个专门的名称为”选择器“基本选择器有标记选择器、类别选择器、和ID选择器。 </p><p>一，标记选择器 </p><p>一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种样式。因此，每一种HTML的标记的名称都可以作为相应的标记选择器的名称。 <style> </p><p> h1{color:red; font-size: 25px； } </p><p></style>可以同时包含多个属性和值。各属性之间用空格分开。 </p><p>当浏览器下载样式表时，它将样式表保存在一个称为cache的文件夹中。二，CLASS类别选择器 </p><p>类别选择器的名称可以由用户自定义，属性和值。在HTML中还可以同时给一个标记运用多个class类别选择器。CLASS类别选择器前面有一个.加名称 <style type=https://www.bwwdw.com/plus/\ .red{color:red; </p><p> font-xize:18px; } </p><p></style> <body> </p><p><p class=https://www.bwwdw.com/plus/\文本内容</p>在这的red前不用小圆点 /body> </p><p>三，ID选择器 </p><p>ID选择器与类别选择器一样不同之处在于ID选择器只能在HTML页面中使用一次，因此针对性很强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器。 </p><p>声明由后跟有冒号的属性，一个空格，和值组成。 <style type=https://www.bwwdw.com/plus/\#content{font-size:18px; }</style> <body> </p><p><p id=https://www.bwwdw.com/plus/\文本内容</p>在这的content前不用# </p><p>在HTNL中使用CSS的方法 1，行内样式 </p><p>行内样式是所有样式方法中最为直接的一种，它直接对HTML地标记使用style属性。然后将CSS代码写在其中。 <title>正文标题</title> <body> </p><p> <p style=https://www.bwwdw.com/plus/\正文内容</p> </p><p></body> </p><p>由于需要为每一个标记设置style属性，后期维护成本较高。 2，内嵌式 </p><p>内嵌样式表就是将CSS写<head>在head>与</head>之间，并且用<style>和</style>标记进行声明， </p><p><title>正文标题</title> <style type=https://www.bwwdw.com/plus/\</p><p>p{color:#00000; font-size:12px } </p><p></style> </head> <body> </p><p> <p>这是第一行的正文内容</p> </body> </p><p>所有CSS代码部分都集中在同一区域中。但对于不同标记都采用相同方法时，较为麻烦 </p><p>三,链接式 </p><p>链接样式是使用频率最高，也是最为实用的方法。它将HTML页面本身与XSS样式分离为两个或者多个文件。同一个CSS文件可以链接到多个HTML文件中。 <title>正文标题</title> </p><p><link href+https://www.bwwdw.com/plus/\ rel=https://www.bwwdw.com/plus/\</head> <body> </p><p> <h2>正文标题</h2> </p><p> <p>这是正文内容??</p> </body> </p><p>然后创建CSS文件并保存在同一个文件夹中。 h2{color:#00000; } </p><p>p{color:#00000; font-size:12px </p><p>}链接样式表最大的优势就是将CSS代码与HTML代码完全分离。四，导入样式 </p><p>采用导入样式表在HTML初始化时，会被导入到HTML文件中，作为文件的一部分。类似内嵌式的效果，而链接式样式表则是在HTML的标记需要格式时才以链接的方式引入。在HTNL文件中导入样式表，常用的有如下几种语句@import语句，可以选择任意一种放在<style>与</style>标记之间 </p><p>@import url(sheet1.css) @import url(https://www.bwwdw.com/plus/\<title>正文标题</title> <style type=https://www.bwwdw.com/plus/\ </p><p></style> </head> </p><p><body> </p><p><h2>正文标题</h2> </p><p><p>这是正文内容??</P> </body> </p><p>导入样式表是最大用处就是可以让一个HTNL文件导入很多的样式表。也可以同时使用两个@import语句将07-08.css和07-09.css同时导入到HTML中 然后再创建一个08-09.css)的样式表即可。各级方式的优先级问题 </p><p>在行内、嵌入和导入式之间的优先级关系是：1，行内式>嵌入式>外部样式（导入式和链接式称为外部样式）2，外部样式中，出现在后面的优先级高于出现在前面的。 </p><p>如果在<head>中存在多个<style>标记，那么这些<style>标记和链接式之间将由先后顺序决定优先级，而在同一个<style>内部，才会遵循嵌入式优先于导入式的规则 </p><p>CSS的高级特性复合选择器 1交集选择器 </p><p>交集复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中，第一个必须是标记选择器，第二个必须是类别选择器或是ID选择器。这两个选择器之间不能有空格。必须连续书写。 <title>选择器.class</title> <style type=https://www.bwwdw.com/plus/\p{color:blue; } </p><p>p.red{color:red; }.red{color:gteen; } </p><p></style> <body> </p><p><p>普通文本蓝色/p> <h3>标题文本黑色</h3> </p><p><p class=https://www.bwwdw.com/plus/\指定了.red类别的段落文本红色</p> <h3 class=https://www.bwwdw.com/plus/\指定了.red类别的标题文本绿色</h3> </body> </p><p>2，并集选择器 </p><p>或称为集体声明它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器都可以作为并集选择器的一部分。并集选择器是多个选择器通过逗号连接还有一个空格而成的。 </p><p><title>选择器.class</title> <style type=https://www.bwwdw.com/plus/\h1,h2,h3,p{color:blue; } </p><p>h2.special,.special, #one{ 集体声明 </p><p></p><p>text-decration:underline; } </p><p></style> <body> </p><p><h1>普通文本蓝色/h1> <h3>标题文本黑色</h3> </p><p><h2 class=\指定了.special类别的段落文本下划线</p> <p id=\指定了#oneID的标题文本下划线</h3> </body> </p><p>h2.special,.special, #one的声明不影响前一个集体声明。 </p><p>另外，对于一些页面，希望这些页面中所有的标记都使用相同的CSS样式。但不仰望逐个来声明的情况可以利用全局选择器“*” *{color:blue; } </p><p>3，后代选择器 </p><p>后代选择器的写法就是把外部的标记写在前面。内层的标记写在后面，之间用空格隔开当标记发生嵌套时内层的标记就成为外层标记的后代。 </p><p>例如：<p>这是最外层的文字，这是中间的文字 <b>这是最内层的文字。</b></p>最外层的：<p>标记，里面嵌套了标记，标记中又嵌套了<b>标记，则称<b>是的子元素，是<p>的子元素。 <title>后代选择器class</title> <style type=\p span{color:red; }span{color:blue; }</style> <body> </p><p><p>嵌套使用红色标记的方法</p> 嵌套之外的标记蓝色不生效。 </p><p></body> 后代选择器只对<p>标记中的生效。 </p><p>后代选择器的使用十分广泛，不仅标记选择器可以组合，类别选择器和ID选择器都可以进行嵌套。 </p><p>需要注意的是：后代选择器产生的影响不仅限于元素的“直接后代”而且会影响它的“各级后代” </p><p>还有一种选择器叫“子选择器”只对直接后代有影响而对“孙子”以及多个层的后代不产生作用。子选择器与后代选择器的语法区别是使用大于号连接 p>span{color:red; } </p><p>CSS的继承特性 </p><p>所有的CSS语句都是基于各个标记之间的继承关系的，即“树型关系”在这个树型关系中处于最上面的<html标记称之为根，它是所有标记的源头。在每一个分支中，称上层标记为其与层标记的父标记。相应的下层标记称为上层标记的子标记。 </p><p>继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新样式，而子标记的样式风格完全不会影响父标记。 </p><p>CSS的层叠特性 </p><p>并不是所有的属性都会自动的传给子元素。因为有时候会发生、冲突。即层叠 <title>层叠特性</title> <style type=\p{color:green; }.red{color:red; </p><p>}.purple{color:purple; } </p><p>#line3{color:blue; }</style> <body> </p><p><p>这是第一行的文本</p> </p><p><p cladd=\这是第二行的谇、本/p> 红色 </p><p><p id=\这是第三行的文本</p> 蓝色 </p><p><p style=\这是第四行的文本</p> 橙色 <p class=\这是第五行的文本</p> 紫色 </body> </p><p>优先级的表述为：行内样式>ID样式>类别样式>标记样式要把握一个原则：针对性强、越特殊的样式，优先级越高。用CSS设置文本样式 </p><p>em是字符单位，2em就会以目前字符的两倍高度来显示。颜色定义：#aabbcc的颜色值可以写成#abc 设置文本的字体font-family h1{font-family:黑体; </p><p>}p{font-family:Arial,\</p><p>}同时声明了两个字体，其含义是告诉浏览器首先在访问者的计算机中寻找Arial字体，如果该用户没有Arial字体，就寻找Tines new Roman，如果两个字体都没有，则使用浏览器默认的字体。 </p><p>font-family属性可以同时声明多种字体，字体之间用逗号隔开。另外一些字体的名称中会出现空格，Tines new Roman这时需要用双引号括起来。一定要设置多个备选字体 </p><p>设置字体的倾斜效果 </p><p>倾斜有两种，一种是italic意大利体，即我们平常说的 oblique即真正的倾斜。font-style #p1{font- style:normal; p{font-style:italic; } </p><p>设置文字的加粗效果 font-weight:bold; </p><p>如果在一个网页的文本中突出某些文字，则应该用<strong>标记。大多数搜索引擎都对网页中的<strong>标记很重视，一方面设计者希望把网页上的文字用<strong>标记来强调。另一方面设计者以不希望些字以粗体显示，就可以对<strong>标记使用font-weight:normal; </p><p>英文字母大小转换 </p><p>font-transform:capitalize; 单词首字大写 font- transform:uppercase; 全部大写 font-transform:lowercase; 全部小写控制文字的大小。font-size </p><p>指的是对之间的内容起作用。即定义范围。 </p><p>文字的装饰效果text-decortion这是属性可以作用多个属性值，用空格分开。设置段落首行缩进 text-indent p{padding-left:2em; </p><p>text-imdent:-2em;}悬挂缩进 </p><p>设置字词间距 letter-spacing 字母间距word-spacing单词间距 </p><p>对于中方而言，如果要调整汉字之间的距离，需要设置 letter-spacing 属性。设置段落内部的文字行高 line-height 设置段落之间的距离 margin </p><p>设置文本的水平位置text-align justify两端对齐设置文字与背景的颜色 color 与background-color </p><p>设置段落的垂直对齐方式 vertical-align在目前的浏览器中，只能对表格单元格的对象进行竖直方向的对齐设置。而对于一般的块级元素例如 div都不起作用 </p><p>但是对于单选文本可以用line-height与height相同的办法使文字竖直居中 p{height:100px; line-height:100px; } body{ </p><p> font-size: 48px !impirtant; </p><p>}!impirtant在声明的结尾但在分号之前。!impirtant总是占优势 </p><p>用CSS设置图像效果设置图片边框 border </p><p><img src=https://www.bwwdw.com/plus/\线型 border-width border-color </p><p>事实上在绝大多数情况下，各条边框的样式基本是相同的，仅有个别样式不一样，这时就可以先进行统一设置再针对个别的边框属性进行特殊设置。 img{border-style:dashed; border-width:2px border-left-style:soli </p><p>图文混排 </p><p>1，文字环绕float img{float:right; } </p><p>设置图片与文字的间距 </p><p>添加margin padding img{float:right; margin:10px} 设置图片与文字的对齐方式 </p><p>1横向对齐图片的水平对齐通常不能直接通过设置图片text-align的属性，而是通过设置其父元素的该属性来实现的 <body> </p><p><p> <p style=\<p style=\</p><p>2,纵向对齐 </p><p>图片竖直方向上的对齐方式主要体现在与文本搭配的情况下，尤其是图片的高度与文字本身不一致时，。vertical-align </p><p>用CSS设置背景颜色与图像设置背景颜色 background-color 设置背景图像 background-image body{background-image:url(bg.gif);} </p><p>平铺background-repeat </p><p>位置background-position第一个值为水平方向。第二个为竖直方向 </p><p>设置背景图像位置固定background-attachment fixed可以把图片设置成固定的效果，而不跟随网页内容一起滚动。 </p><p>设置标题的图像替换 </p><p>因为有些字体其他人的计算机上没有。其核心思想是在HTML中，文字以文本形式存在，便于维持页面的内容和结构完整性，然后通过CSS使文字不显示在页面上，而将图片以背景图像的形式出现。 </p><p>首先准备标题图像，接着设置H1的CSS属性 h1{height:40px; </p><p>background-image:url(hi.jpg); </p><p>baxkground-repeat:no-repeat; center}下一步使文字隐藏起来。使浏览者仅看到图像 <h1>Head Line</h1> span{display:none; </p><p>}或者改为h1 span{display:none; 后代选择器 </p><p>CSS高级篇 </p><p>CSS盒子模型 box </p><p>假设墙上整齐排列着4幅画，对于每幅画来说，都有一个边框，在英文中称为border每个画框中，画和边框通常会有一定的距离这个距离称内边距在英文中称padding各幅画之间通常也不会紧贴着，它们之间的距离称为外边距大英文中称margin </p><p>在CSS中一个独立的盒子模型由内容，边框、内边距、外边距组成。一个盒子实际所占有的宽度或高度是由内容+内边距+边框+外边距组成的。 </p><p>border属性有3个color width style border-width:length表示具体值 IE浏览器不支持border-style效果，在实际制作网页地时候不推荐使用属性的简写形式 </p><p>1，对不同的边框设置不同的属性值 </p><p>方法是按照规定的顺序，给出2个。3个或4个属性值 </p><p>如果给出2个属性值，那么前者表示上下边框的属性，后者表示左右边框的属性 </p><p>如果给出3个属性值，那么前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。 </p><p>如果给出4个属性值，那么依次表示上，右，下，左边框的属性，即顺时针排序。 2，在一行中同时设置边框的宽度、颜色和样式 border-width border-color border-style可写成 border:2px green dashed </p><p>3，对一条边框设置与其他边框不同的属性 border:2px green dashed border-left:1px red solid </p><p>4,同时制定一条边框的一种属性 border-left-color:red </p><p>当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置 </p><p>边框和背景 </p><p>在给元素设置背景色时，IE作用的区域为content+padding而FIRFOX的作用区域为content+padding+border </p><p>设置内边距 </p><p>设置内边距也可以给出2个。3个或4个属性值背景图像以padding的左上角为基准点平铺背景图像 </p><p>设置外边距 </p><p>margin属性值的设置方法的padding一样盒子之间的关系 1HTML与DOM </p><p>DOM就是文档对象模型，一个网页的所有元素组织在一起，就构成了一棵DOM树一个HTML文档并不是一个简单的文本文件，而一个具有层次结构的逻辑文档每一个HTML元素都作为这个层次结构中的一个节点存在，每一个节点反映在浏览器上会具有不同的表现形式。具体的表现形式由css来决定 </p><p>标准文档流 </p><p>标准流就是指在不使用其他与排列的定位相关的特殊CSS规则时，各种元素的排列规则。即一层层的进行。 </p><p>1，块级元素block level </p><p>块级元素即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满比如li占据一个矩形区域 </p><p>2，行内元素inline </p><p>对于文字元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素为行内元素。比如<strong></strong>标记仅在其他元素上指定范围标记 s标记与标记 </p><p>是一个区块容器标记，即与之间相当于一个容器，可以容纳段落、标题。表格。图像等各种HTML元素。可以把与中的内容视为一个独立的对象，用CSS的控制。声明时只需要对进行相应的控制。其中各标记元素都会随之改变是一个通用的块级元素 <style tpye=\div{font-size:12px; width:300px; 块宽度 } </p><p></style> <body> </p><p> 这是一个块级标记。 </body> </p><p>标记和标记一样这两个起的作用都是独立出各个区块 </p><p>区别，是一个块级元素，它包围的元素会自动换行而是一个行内元素，在它的前后不会换行元素 <body> </p><p><p>这是不同行的</p> </p><p></p><p><img src=https://www.bwwdw.com/plus/\<p>这是同一行的</p> </p><p><img src=https://www.bwwdw.com/plus/\</body> </p><p>标记可以包含在标记中成为它的子元素，反过来不可以、盒子在标准流中的定位原则行内元素之间的水平marfin 当两个行内元素紧邻时，它们之间的距离为第一个元素的margin-right加上第二个元素的margin-left </p><p>块级元素的竖直margin </p><p>当两个块级元素之间的距离不是margin-botton与margin-top的总和，而是两者中的较大者。这个现象称为margin的塌陷或合并 </p><p>嵌套盒子之间的margin </p><p>当一个块包含在另一个块中时，便形成了典型的父子关系，其中子块的margin将以父块的内容为参考在标准流中，一个块级元素的盒子水平方向的宽度会自动延伸直至上一级盒子的限制位置。 </p><p>margin属性可以设置为负值 </p><p>当块之间是父子关系时，通过设置子块的margin参数为负数，可以使子块从父块分享出来。 </p><p>盒子的浮动和定位 </p><p>CSS中有一个float属性，默认为none，也就是标准流通常的情况，如果将float属性的值设置left为或right，元素就会向其父元素的左侧或右侧靠紧，同时默认的情况下，盒子的宽度不会伸展，而是收缩，根据盒子里面的内容的宽度来确定。 <style type=\<body{margin:15px; </p><p>font-family:Arial; font-xize:12px; } </p><p>.father{background-color:#ffff99; border:1px solid #11111; padding:5px; } </p><p>.father div{ padding:10px; margin:15px; </p><p>border:1px dashed #111111; background-color:#90baff; } </p><p>.father p{border:1px dashes #11111; background-color:#90baff; } </p><p>.son1{} 这里设置son1的浮动方式。 .son2{} .son3{} </style> </p><p><body。 </p><p><p> <p> <p>这是浮动框外围的文字，这是浮动框外围的文字</p> </p><p>设置第一个浮动 .son1{float:left;} </p><p>此时Box-1已经脱离标准流，标准流中的Box-2会顶到原来Box-1的位置。Box-2的左边框与Box-1的左边框重合。而文字会围绕着Box-1排列。 </p><p>都设置为左浮动。把浏览器窗口慢慢变窄，Box-3会被挤到下一行中，但仍保持左浮动。文字仍会自动排列 </p><p>此外，搜索引擎是不管CSS有，它只根据网页的内容的价值来确定页面的排名。而对于一人HTL文档，越靠前的内容。搜索引擎会赋予越高的权重，因此把页面中最重要的内容放在前面。对于提高网站的搜索引擎的排名很有意义。 </p><p>但如何在排版中实现某个盒子浮动，但使它后面的标准流中的盒子不爱它的影响。这就需要一个与float属性配合的属性clear，它的作用是为了消除浮动的盒子对其他盒子的影响 </p><p>用clear属性消除浮动的影响 </p><p>如果不希望文字围绕浮动的盒子，就需要增加一行对clear属性的设置 .father p{border:1px dashes #11111; background-color:#90baff; clear:left; } </p><p>这样段落的上边界向下移动，直到文字不受左边的影响。 </p><p>注意对clear属性的设置要放在文字所在的盒子中。例如一个P段落的CSS中。而不要放在对浮动盒子的设置里面。 </p><p>扩展盒子的高度文字被删除后，父div的范围缩成一条，是由padding和border构成的也就是说一个div的范围是由它里面的标准流内容决定的，与里面的浮动内容无关。如果要使父div的范围包含这3个浮动盒子 </p><p>在3个div的后面再增加一个div <p> <p>然后为这个div设置样式，这里必须要指定其父div，并覆盖原来对margin/padding和border的设置 .father .clear{ margin:0; padding:0; border:0; clear:both; </p><p>} </p><p>盒子的定位 </p><p>position 属性可以设置四个属性值 </p><p>static这是默认的属性值，也就是该盒子按照标准流进行布局。 </p><p>relative为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基准，然后使盒子相对它在原本标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 </p><p>absolute绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这艰意味着它们对其后的兄弟盒子的定位没有影响。其他的盒子就好像这个盒子不存在一样。 </p><p>fixed 固定定位它和绝对定位相似，只是以浏览器窗口为基准进行定位。相对定位 </p><p>除了将position设置为relative之外，还需要指定一定的偏移量 #block{background-color:#fff0ac; border:1px dashed #00000; padding10px; position:relative; left:30px; </p><p>right:30px; 偏移量向右向下分别移动了30 </p><p>也就是说，left:30px;的作用是使BOX的新位置在它原来位置的左边框右侧30像素的地方。即各个边界与原来位置的距离。它对父块没有影响。 </p><p>绝对定位 #block2{ </p><p>position:absolute; top:30px; right:30px </p><p> 这时的效果是以浏览器窗口为基准的，从左上角开始向下和向左各移动30 #father{ </p><p>background-colorr:#a0c8ff; padding:15px; position:relative </p><p>这时的效果是以它的父div为基准的，从左上角开始向下和向左各移动30 </p><p>使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移如果没有已经定位的祖先元素，那么会以浏览器窗口为基准。 </p><p> </p><p>绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。 </p><p>所谓已经定位元素的含义是position属性被设置，并且被设置为不是static的任意一种方式，那么该元素就被定义为已经定位的元素。关于最近，在一个节点的所有祖先节点中，找出所有已经定位的元素，其中距离节点最近的一牙节点。 </p><p>在父div没设置position属性时，BOX2这个div的所有祖先都不符合已经定位的要求，因此它会以浏览器窗口为基准来定位，而当父div将position属性设置为relative以后，它就符合已经定位的要求了，它又是祖先中惟一一个已经定位的，也就满足最近这个要求，因</p><p>此就会以它为基准进行定位。将绝对定位的基准称为包含块 </p><p> 如果设置了绝对定位，而没有设置偏移量，那么它仍将保持在原来的位置。这个性质可以用于需要使某个元素脱离标准流，而仍希望它保持在原来的位置的情况。 </p><p>固定定位 </p><p>z-index属性用来调整定位时重叠块的上下位置。z-index值大的页面位于其值小的上方。当块被设置了position属性时，该值便可设置各块之间的重叠高低关系。 </p><p> 盒子的display属性 <body> </p><p> Box-1 Box-2 Box-3 Box-4 </body> </p><p>BOX-3 BOX4是span它们在一行中。其余各占一行。下面把div的display属性设置为inline即行内。把span的display属性设置block为即块级 <body> </p><p> </p><p>可以看到原本是块级元素的div变成了行内元素。原本是行内元素的span变成了块级元素，并且设置为none的盒子消失了。 </p><p>用CSS设置表格样式 </p><p>表格相关的标记是、和。其中用于定义整个表格定义一行定义一个单元格或者列 </p><p>1<caption标记。就是用于定义表格的大标题该标记可出现在和之间的任意位置，一般紧接着标记 </p><p>2，<th>即表头，在表格中主要用于行或列的名称。行和列都可以使用各自的名称 <body> </p><p>期中考试成绩单</caption> </p><p> <th>姓名</th> <th>物理</th> <th>化学</th> </p><p> <th>牛小花</th> 32 17 <th>伽小略</th> 28 14 <th>薛小谔</th> 26 22 <th>波小乐</th> 23 52 </p><p>设置表格的边框设置一个类别.record </p><p>.record td{border:1px #777 dashed;} </p><p>td和th可以分别设置各自的边框样式。 </p><p>设置单元格的边框 border-collapse </p><p>CSS提供两种完全不同的方法来设置单元格的边框一种。用于独立的单元格中设置分离的边框。另一种适合设置从表格到另一端的连续边框。默认的情况是分离边框 </p><p>在.record的设置中增加一个属性 </p><p> border-collapse:collapse;可以看到相邻单元格之间原来的两条边框重合为一条边框了。 2，相邻边框的合并规则 </p><p>1，如果边框的border=style设置为hidden那么它的优先级高于任何其他相冲突的边框任何边框只要有该设置，其他边框的设置就都将无效。 </p><p>2，如果边框的属性中有none,那么它的优先级是最低的， </p><p>3，如果重合的边框没有被设置为hidden的并且至少有一个不是none的那么，重合的边框中粗的优先于细的。如果几个边框的border-width相同，那么样式的优先次序由高到低依次为double solid dashed dotted ridge outset groove inset </p><p>4，如果边框样式的其他设置相同，只是颜色上有区别，那么单元格的样式最优先，然后依次是行，行组，列，列组的样式，最后是表格的样式。 </p><p>边框的分离 </p><p>在使用HTML属性格式表格时可以通过使用cellpadding来设置单元格内容和边框之间的距离以及使用cellspacing设置相邻单元格边框之间的距离。要用CSS实现cellpadding的作用和，只要对td 使用padding就可以了。要实现cellspacing的作用需要对table使用另一个属性border-spacing来代替。并确保没有将border-collapse属性设置为 collapse </p><p>确定表格的宽度 </p><p>一种与表格内部的内容相关称为自动方式，另一种与内容无关称为固定方式 </p><p>使用自动方式时，实际宽度可能不是width属性的设置值，因为它会根据单元格中的内容多少进行调整。而在固定方式下，表格的水平布局不依赖于单元格的内容，而明确地由width属性指定，如果取值为auto就意味着使用自动方式。要使用固定方式设置table-layout属性设置为fixed </p><p>用CSS设置链接秘导航菜单 </p><p> </p><p>去掉下划线a{text-decoration:none;} 利用CSS的伪类别来制作动态效果 </p><p>a:link超链接的普通样式 a:visited 被点击过的超链接样式 </p><p>a:hover鼠标指针经过超链接时的样式 a:ative在超链接上点击时即，当前激活时样式 <body> </p><p>background-colot:#99ccff;} a{font-size:14px; font-family:Atial; } </p><p>a:link{color:red; </p><p> text-decoratiom:none;} a:visited{color:black; </p><p> text-decoratiom:none;} a:hover{color:blue; </p><p> text-decoratiom:underline; background-color:blue;} </style> </p><p></p><p><body> </p><p> <p>可以看出，超链接本身都变成了红色，且没有下划线，而点击过的超链接变成了黑色，同样没有下划线，当鼠标指针经过时，超链接则变成了蓝色，且出现了下划线。 </p><p>请注意以下几点： </p><p>1，不仅是上面代码涉及的文字相关的CSS样式，其他各种设置。边框和排版的CSS样式都可以随意加入到超链接的几个伪类别的样式规则中。 </p><p>2，当前激活状态a:active一般被显示的情况委少。在设定一个a元素的这4种伪类别时，需要注意顺序要依次按照a:link a:visited a:hover a:active这样的顺序，即LoVe HaTe </p><p>3,每一个伪类别的冒号前面的选择器之间不要有空格，要连续书写。如a.classname:hove即.classname的A元素在鼠标经过时的样式 </p><p> 创建按钮式超链接 <body> </p><p> </p><p>下面对a和3个伪属性进行设置 <style> </p><p>a{font-family:Areal; font-size:12px; text-aline:center; margin:3px;} a:link, a:visited{ color:#a62020; </p><p>padding:4px 10px 4px 10px; background-color:#ddd; text-decoration:none; </p><p>border-top:1px solid #eeee; border-left:1px solid #eeeee; border-botton:1px solid #717171; border-right:1px solid #717171; } </p><p>a:hover{color:#821818; padding:5px 8px 3px 12px ; background-color:#ccc; </p><p>border-top:1px solid #717171; border-left:1px solid #717171; border-botton:1px solid #eeee; border-right:1px solid #eeee;} </style> </p><p>cursor可以控制鼠标指针的形状设置项目列表样式超链接 </p><p><style> </p><p> ul{font-size:0.9cm; color:#00458c; </p><p> list-style-typc:decimal;项目符号｝ </p><p></style> <body> </p><p> Home Contact Web dev Map </body> </p><p>图片符号 </p><p>如果希望项目符号采用图片的方式，则建议将list-style-typc属性的值设为none，然后修改标记的背景属性background来实现 <style> </p><p> ul{font-size:0.9cm; color:#00458c; </p><p> list-style-typc:none;项目符号｝ li{ </p><p>background:url(icon.jpg) no-repeat; padding-left:25px; } </p><p></style> <body> </p><p> Home Contact Web dev Map </body> </p><p>创建简单的导航菜单简单的竖直菜单 </p><p>当项目列表的list-style-typc属性值设为:none时，制作各式各样瓣菜单和导航条便成了项目列表的最大用处之一。 <body> </p><p> </p><p> <p> </body> </p><p>body{background-color:#deeoff; } </p><p>##navigation{width:150px; font-family:Arial; font-size:14px; text-align:right; } </p><p>#navigation ul{ list-style-type:none; margin:0px; padding:0px; } </p><p>#navigation li{ </p><p>border-bottom:1px solid #9f9fed; } </p><p>#navigation li a{ display:block; height:1em; </p><p>paddinh:5px 5px 5px 0.5m; text-decoration:none; </p><p>border-left:12px solid #151571; border-right:1px solid #151571;} </p><p>display:block;语句，通过该语句超链接被设置成了块元素，当鼠标指针进入该块的任何部分时都会被激活，而不是仅在文字上方时才被激活。 #navigation li a:link, #navigation li a:visited{ background-color:#1136c1; color:#fffff; </p><p>}#navigation li a:hover{ background-color:#002099; color:#ffff00; </p><p>border-left:12px solid yellow; } </p><p>横竖自由转换菜单 </p><p>两处改动1，把width:120这条规则从#navigation移动到#navigation li a中。这样，这个列表就没有宽度限制了，同时可保证每个列表项的宽度都是120像素。 </p><p>2，在#navigation li的样式中增加一条float:left也就是使各个列表项变为向左浮动。这样就会依次排列。直至浏览器窗口容纳不下。再折行排列。 </p><p>鼠标经过时给图片增加边框 <body> </p><p> <img src=https://www.bwwdw.com/plus/\三个图像 </p><p></body> img{ </p><p>padding:5px; </p><p>border:1px white solid; } </p><p>img:hover｛ </p><p>border:1px green solie; } </p><p>对于IE6浏览器不支持img 的元素的:hover伪类。只有对标记支持:hover伪类。因此必须在图像的外面套上个标记 <p>padding:5px; </p><p>}a:link img, a:visited img{ border:1px white solid; } </p><p>a:hover img, a;active img{ border:1px green solid; </p><p>注意把img 写在a:hover的后面，就表示在a元素处于鼠标指针经过状态时，里面的图像被选中。 </p><p>用CSS建立表单表单输入类型 </p><p> </p><p>文本输入框 </p><p>每个表单元素之所以会有不同的类型，原因就在于type属性的值设定的不同，当type=\时，显示的就是文本输入框。name名称设定此一栏的名称，程式中会用到 size 设定此一栏显现的宽度vaue 预设内容align 对齐方式maxlength可设定输入的最大长度。 </p><p>单选按钮 type属性为radio </p><p>checked当需要将某个单选按钮设置为被选中状态时，就要为该单选按钮设置checked=\</p><p> name需要将一组供选择的单选按钮设置为相同的名称，以保证在这一组中只能有一个</p><p>单选按钮被选中。复选按钮 <p>兴趣 </p><p> <input type=\文学 <input type=\音乐 </p><p> <input type=\美术 </p> </p><p>可同时设置多个checked=\密码输入框 </p><p>当 type属性设置为password时就会产生一个密码输入框。它和文本输入框几乎完全相同。但是密码输入框在输入时会以圆点来取代输入的文字。 </p><p> </p><p>姓名：<input type=\</p><p>按钮 </p><p>将type属性设置为submit即为提交按钮type属性设置为reset即为重置按钮 <input type=\提交\</p><p>如果将type属性设置为button即可设为普通按钮将type设置为 image即可设为图像按钮 <input type\按钮\</p><p><input type=\</p><p>多行文本框 <textarea> </p><p><textarea name=\</p><p>cols用于定义这个多行文本框的宽度 rows用于定义它的高度 </p><p>wrap用于定义它的换行方式off输入文字不会自动换行 </p><p>virtual输入文字在屏幕上会自动换行，但是如果访问者没有按回车键换行，则提交到服务器时也视为没有换行。 </p><p>physical输入文字时会自动换行，提交到服务器时，会将屏幕上的自动换行视为换行效果提交。 </p><p>列表框<select>标记 </p><p><select name=\</p><p> <option value=\ <option value=\ <option value=\</selcet> </p><p>列表中每一个项目使用一个<option></option>标记来定义。此外，<select>标记还有另一种表现形式，即列表形式，与上面的代码区别在于在<select>标记中用size属性设定列表格行数 </p><p><select name=\</p><p> <option value=\ <option value=\ <option value=\</selcet> </p><p>像文字一样的按钮 </p><p>通过CSS的嶧设置可以将按钮变成跟普通文字一样，首先跟变通的表单一样，定义</p><p></p><p> </body> </p><p>然后给表单的元素添加CSS样式，关键在于将按钮的背景颜色设置为透明transparent，这样无论页面body的背景颜色如何修改，按钮的背景颜色都会发生相应的修改，接下来将按钮地边框设置为0 <style> <!-- body{ </p><p>background-color:#daeeff; } </p><p>form{margin:0px padding:0px; font14px;｝ </p><p>input{font:14px; Arial; } .txt{ </p><p>border-bottom:1px solid #005aa7; color:#005aa7; </p><p>border-top:0px border-left:0px; border-right:0px; background-color:transparent; } </p><p>.btn{background-color:trasparent; border:0px; } </p><p>多彩的下拉菜单 </p><p>首先建立相应的HTML部分，包括表单。下拉菜单。各个选项和按钮等并且为每一个下拉菜单指定一个相应的CSS类型 </p><p> </p><p> </p><p> </p><p>.blue{ </p><p>background-color#7598fb; color:#00000; } .red{ </p><p>background-color#7e2055b; color:#fffff; } </p><p>.green{ </p><p>background-color#3cb371; color:#00000 </p><p>对齐文本框和旁边的图像按钮 </p><p>把上面的代码修改为 </p><p>箭头菜单三角形效果。如果将一个盒子的heightt width设置为0。然后将它的边框设置的比较粗，并且使左或右边框的颜色不同于背景色，而其余三条边框的颜色和背景相同，就可以产生所需的三角形效果了。 </p><p>制作准备 <body> </p><p> 基本设置 <style> </p><p>#menu { font-family:Arial; font-size:16px; width:140px; margin:0 auto; border:solid 1px #ccc; } </p><p>#menu a, #menu a:visited { text-decoration:none; text-align:center; color:#c00; display:block; padding:4px; background-color:#fff; border:solid 1px #fff; position:relative; width:130px; } </p><p>#menu a span { display:none; } </p><p>#menu a:hover { </p><p> border-color:#c00; } </p><p>#menu a:hover span { display:block; position:absolute; height:0; width:0; border:solid 8px #fff; /*对menu层设置*/ /*字体*/ /*字号*/ /*宽度*/ /*菜单项之间间隔0.5em，并水平居中*/ /*灰色细边框*/ /*文字无下划线*/ /*文字水平居中对齐*/ /*红色文字*/ /*设置为块级元素*/ /*内边距*/ /*背景色*/ /*与背景色相同边框，防止跳动*/ /*使用相对定位*/ /*边框颜色红色*/ /*设置为块级元素*/ /*使用绝对定位*/ /*高度为0*/ /*宽度为0*/ /*设置默认的边框样式*/ </p><p> top:4px; /*竖直方向的定位*/ overflow:hidden; } </p><p> #menu a:hover span.left { border-left-color:#c00; left:8px; } </p><p> #menu a:hover span.right { border-right-color:#c00; right:8px; } </p><p></style> </p><p>不使用图像的圆角效果一个圆角 <head> </p><p><meta http-equiv=\<title>text</title> </p><p><style type=\.item{ width:100px; margin:0 auto; padding 0; font: 14px Arial; font-weight:bold; } </p><p>.item p{ padding:0 0 2px 0; margin:0px; text-align:center; background:#cc6; border:solid 1px #000; border-top-width:0; } </p><p>.item div{ height:1px; overflow:hidden; background:#cc6; border-left:solid 1px #000; </p><p> border-right:solid 1px #000; } </p><p>.item .row1{ margin:0 5px; background:#000; height:1px; } </p><p>.item .row2{ margin:0 3px; border:0 2px; } </p><p>.item .row3{ margin:0 2px; } </p><p>.item .row4{ margin:0 1px; height:2px; } </p><p></style> </head> </p><p><body> Home</p> </body> </p><p>多个圆角 <head> </p><p><meta http-equiv=\<title>不用图像文件的圆角解决方法</title> <style type=%ul{ height:26px; margin:0; padding:10px; list-style-type:none; </p><p></p><p> background:#ddd; } </p><p>.item{ float:left; width:100px; margin:0 -1px 0 0; padding 0; font: 14px Arial; font-weight:bold; } </p><p>.item p{ padding:0 0 2px 0; margin:0px; text-align:center; background:#cc6; border:solid 1px #000; border-top-width:0; } </p><p>.item div{ height:1px; overflow:hidden; background:#cc6; border-left:solid 1px #000; border-right:solid 1px #000; } </p><p>.item .row1{ margin:0 5px; background:#000; } </p><p>.item .row2{ margin:0 3px; border:0 2px; } </p><p>.item .row3{ margin:0 2px; } </p><p>.item .row4{ margin:0 1px; </p><p> height:2px; } </p><p>.item a , .item a:visted{ display:block; color:#000; text-decoration:none; } </p><p>.item a:hover{ background:transparent; } </p><p>.item a:hover p{ background:#884; color:#fff; } </p><p>.item a:hover .row2, .item a:hover .row3 , .item a:hover .row4{ background:#884; } </p><p></style> </head> </p><p><body> <li class=\ Home</p> <li class=\ Contact Us</p> <li class=\ <p> Web Dev</p> <li class=\ Map</p> </body> </p><p></html> </p><p>dl,dtdd这组标记的 ul，li相似，也用于列表结构，dl被称为定义列表在使用方法上相当于ul，dt和dd分别称为定义标题和定义描述 <body> <dl> </p><p> 北京的大学清华大学北京大学人民大学上海的大学复旦大学上海大学 </dl> </body> </p><p><p>大学</p> </p><p> <ol>北京的大学</ol> 清华大学北京大学 <ol>北京师范</ol> 北京人民大学 </ol> </p><p> 上海大学 </ol> </p><p> 上海的大学山东的大学 </ol> </p><p><p>接下来</p> <ol start=\</p><p> 广州的大学 </ol> </p><p><p>接下来</p> </p><p><ol start=\这个列表被一全非列表元素中断，在这个中断后面再开始新的列表元素时，可以继续按顺序给各步骤编号。 </p><p>CSS布局篇 </p><p>布局结构的表达式与结构图 </p><p>1-2-1 1表示一共一列，减号表示竖直方向上下排列或上下相邻加号表示左右相邻或横向分割 </p><p>1-（（1-2）+1）-1可理解为最上面为1列。它的下面分别为左右两列，其中左边的列一的上侧是一列。下侧是两列，页面的最下侧是一个单列。 </p><p>圆角框 </p><p>固定宽度的圆角框 1，两背景图像法 </p><p>使用两个背景图像文件，宽度固定。这种方法只适用于制作单色圆角框。首先要确定圆角框的颜色和圆角框后面的网页背景的颜色。然后根据这两种颜色制作两个图像文件。 </p><p>上面的图像为两端是圆角下面的图像也是。这样一个在最上面，一个在最下面。中间的主体的颜色可以通过设置背景颜色来实现 </p><p>在编写HTML的整体结构，实际上只需要一个div作为圆角框的容器。里面有一个h3标记和 p标记 <head> </p><p> <title>固定宽度</title> </p><p> <meta http-equiv=\ </p><p></head> <body> </p><p> Fixed Rounded</h3> <p> 这是一个固定宽度的圆角框，增多可以自由会被破坏。</p> <p> 这是一个固定宽度的圆角框，由角不会被破坏。</p> </body> </html> </p><p><style type=\ #rounded{ font: 12px/1.6 arial; background: #cba276 url('images/bottom.gif') no-repeat left bottom; width: 280px; padding: 0 0 18px; </p><p> margin:0 auto; } #rounded h3 { background: url('images/top.gif') no-repeat; padding: 20px 20px 0; font-size: 170%; color: #FFF; line-height: 1; margin: 0; } #rounded p { padding: 10px 20px 0; color: #1B220F; margin: 0; 设为0。因为margin部分不会有背景。 text-indent:2em; } </style> </p><p>单背景图像的带边框的固定宽度圆角框 </p><p>如果边框特殊到只有一个像素宽。或者边框虽然不是1像素宽，但它本身是一种单色。就可以使用CSS的边框属性来做中间段的边框。这样就不需要3个背景图像了。 <head> </p><p><meta http-equiv=\<title>固定宽度圆角框</title> <style type=\ .rounded { font: 12px/1.5 Arial; width:430px; padding:0 0 14px 0; margin:10px auto; background:url(\ } .rounded h3 { margin:0; padding:5px 10px 7px 10px; background:url(\ color:#666; } .rounded p { text-indent:2em; margin:0; padding:2px 10px 3px; </p><p></p><p> border:1px solid #777; border-width:0 1px; background:#fff; } </style> </p><p></head> </p><p><body> </p><p>fixed width CSS Box</h3> <p> </p><p> 这是一个固定宽度的圆角框，件得到的。</p> <p> 这是第二段文字，这是一个样例方向可以无限伸展。</p> </body> </p><p></html> </p><p>不固定宽度的圆角框 </p><p> 不同的方式1，可变：含义是这个圆角框本身在网页上的宽度是固定的，但是在制作网页地时候。只要简单的设定该圆角框的宽度，就能产生效果。使用绝对单位。 </p><p>2，流动方式：含义是圆角框的宽度是跟着浏览器的窗口宽度的变化而变化的。使用百分比或者auto实现。例如标准流中的div的宽度就是自动伸展的。 </p><p>3，弹性方式：含义是圆角框的宽度在文字大小不变的情况下，宽度不变，而文字大小发生变化的时候，宽度也随之改变。使用相对单位例如em来设置 </p><p>对于流动方式来说，一行的文字不要设的太多一般在40个字 </p><p>“4图像”单色不固定宽度圆角框 </p><p>基本思路就是整体背景色用div的背景色，然后4个图像分别作为某一元素的背景放置在适当的位置。 </p><p>而在HTML中。一共只有3个元素，即div h3,p因此，必须要在HTML中增加一个冗余的标记。这里有很锪选择。可以为标题增加一个a 标记，连接到详细的页面。或者在div外面套一层div，或者在p标记里面套一层span.这样就可以一个元素控制一个圆角。必须准备好4个圆角 <head> </p><p> <title>不固定宽度</title> </p><p> <meta http-equiv=\ <style type=\ #rounded{ font: 12px/1.6 arial; </p><p> background: #cba276 url('images/right-top.gif') no-repeat right top; width: 70%; padding: 0; margin:0 auto; } #rounded h3 { background: url('images/left-top.gif') no-repeat; padding: 20px 20px 0; font-size: 170%; color: #FFF; margin: 0; } #rounded p { margin: 0; text-indent:2em; background: url('images/left-bottom.gif') no-repeat left bottom; } #rounded span{ </p><p> padding: 10px 20px 18px; color: #1B220F; display:block; 因为span是行内元素这里要设置为块级元素。 background:url('images/right-bottom.gif') no-repeat right bottom; } </style> </head> <body> </p><p> Unfixed Round</h3> <p> 这是一个不固定宽度的圆角框设置为不同的宽度，也同样适用。</p> </body> </html> </p><p>圆角没有出现在圆角框的右下角的。是因为p样式中设置了padding:因此span变成块级元素后，它的范围就是p段落所占据的矩形除去padding以后的范围。只需要在p中对padding的设置移动到span中就可以了。 </p><p>“5图像”二维滑动门经典圆角框首先准备图像。在Photoshop 或Fireworks中绘制一800*600的圆角矩形。并进行切片。分为right-top.gif，right,right-bottom,left-top,left-bottom这五部分 </p><p>1，搭建HTNL结构。代码中临时设置了一些实线，边框。用来确认各个盒子的大小和位置，后面再去掉。 </p><p><head> </p><p><title>5背景图可变宽圆角框</title> </p><p><meta http-equiv=\<style type=\body { </p><p>background: #FFFF99; font: 12px/1.5 Arial; } </p><p>.rounded { width:90%; </p><p> border: 1px solid red; } </p><p>.rounded h3 { </p><p> border: 1px solid blue; } </p><p>.rounded .main { </p><p> border: 1px solid black; } </p><p>.rounded .footer { </p><p> border: 1px solid blue; } </p><p>.rounded .footer p { </p><p> border: 1px solid magenta; } </style> </head> <body> </p><p>Article header</h3> 这是一行文本，这里作为样例，显示在圆角框。<br /> 这是一行文本，这里作为样例，显示在圆角框。 </p> <p> 这是一行文本，这里作为样例，显示在圆角框。<br /> 这是一行文本，这里作为样例，显示在圆角框。 </p> 这是版权信息文字。 </p> </p><p> </body> </html> </p><p>放置背景图像 </p><p><title>5背景图可变宽圆角框</title> </p><p><meta http-equiv=\<style type=\body { </p><p>background: #FFFF99; font: 12px/1.5 Arial; } </p><p>.rounded { </p><p> background:url(images/left-top.gif) top left no-repeat; width:90%; } </p><p>.rounded h3 { </p><p> background: url(images/right-top.gif) top right no-repeat; } </p><p>.rounded .main { </p><p> background: url(images/right.gif) top right repeat-y; } </p><p>.rounded .footer { </p><p> background: url(images/left-bottom.gif) bottom left no-repeat; } </p><p>.rounded .footer p { </p><p> background: url(images/right-bottom.gif) bottom right no-repeat; } </style> </head> <body> </p><p>Article header</h3> 这是一行文本，这里作为样例，显示在圆角框。<br /> 这是一行文本，这里作为样例，显示在圆角框。 </p> <p> 这是一行文本，这里作为样例，显示在圆角框。<br /> 这是一行文本，这里作为样例，显示在圆角框。 </p> </p><p> 这是版权信息文字。 </p> </body> </html> </p><p>出现了两个问题，1，是文字没放在圆角框中，第二是右侧的边框有两个裂缝。设置样式并修复缺口。 .rounded { </p><p> background: url(images/left-top.gif) top left no-repeat; width:90%; } </p><p>.rounded h3 { </p><p> background: url(images/right-top.gif) top right no-repeat; padding:20px 20px 10px; margin:0; } </p><p>.rounded .main { </p><p> background: url(images/right.gif) top right repeat-y; padding:10px 20px; margin:-2em 0 0 0; } </p><p>.rounded .footer { </p><p> background: url(images/left-bottom.gif) bottom left no-repeat; } </p><p>.rounded .footer p { </p><p> background:url(images/right-bottom.gif) bottom right no-repeat; display:block; </p><p> padding:10px 20px 20px; margin:-2em 0 0 0; } </p><p>在整体页面中使用圆角框 </p><p>这个页面一共使用了4个上面制作的圆角框，把圆角框中与宽度有关的设置去掉，即在.rounded中，将 width:90%;去掉。因为这圼每个圆角框的宽度都是100%r . </p><p>考虑一下整体布局，整个页面分为上中下3部分。使用宽度固定且居中的布局方式，上部和下部的设置只要设置为固定宽度即可，然后通过 margin:设置为居中。 #header,#pagefooter{margin:0 auto; width:760px;} </p><p>中间部分为宽窄两部分。需要把它们放到一个div容器中，先对这个容器进行设置 #container{ position:relative; margin:0 auto; width:760px; } </p><p></p><p>#wide{ </p><p>position:absolute; top:0; left:0; </p><p>width:500px; } </p><p>将position:属性设置为相对定位目的是为了让它里面的div可以以它为基准进行绝对定位设置margin:实现居中。宽度与上下两个部分相同。 </p><p>将容器的左边的圆角框设置为绝对定位，宽度为500 #wide{ </p><p>position:absolute; top:0; left:0; </p><p>width:500px; } </p><p>设置右边的窄栏，使用标准流方式，左边使用margin留出左边圆角框的位置 #side{ </p><p>position:relative; margin:0 0 0 500px; } </p><p>每一个圆角框都同时有一个class属性和id属性。class属性用于指定roundrd类别的样式。id属性用于指定定位和布局的样式。 </p><p>注意，把图像放在images文件夹中，为每一种皮肤设置一个文件夹，然后将所有的皮肤文件夹诉在一个总的文件夹中。 </p><p>单列布局 </p><p><title>1-1-1 布局固定宽度</title> </p><p><meta http-equiv=\<style type=\body { </p><p>background: #FFF; font: 13px/1.5 Arial; margin:0; padding:0; } </p><p>.rounded { </p><p> background: url(images/left-top.gif) top left no-repeat; width:100%; } </p><p>.rounded h2 { background: url(images/right-top.gif) top right no-repeat; </p><p> padding:20px 20px 10px; margin:0; } </p><p>.rounded .main { background: url(images/right.gif) top right repeat-y; padding:10px 20px; margin:-2em 0 0 0; } </p><p>.rounded .footer { background: url(images/left-bottom.gif) bottom left no-repeat; } </p><p>.rounded .footer p { color:#888; text-align:right; </p><p> background:url(images/right-bottom.gif) bottom right no-repeat; display:block; </p><p> padding:10px 20px 20px; margin:-2em 0 0 0; font:0/0; } </p><p> #header,#pagefooter,#content{ margin:0 auto; width:760px;} </p><p></style> </head> <body> </p><p>Page Header</h2> 这是一行文本，这里作为样例，显示在布局框中。<br/> 这是一行文本，这里作为样例，显示在布局框中。 </p> <p> <p> 查看详细信息>> </p> </p><p>Page Content</h2> 这是一行文本，这里作为样例，显示在布局框中。<br /> 这是一行文本，这里作为样例，显示在布局框中。 </p> <p> 这是一行文本，这里作为样例，显示在布局框中。<br /> 这是一行文本，这里作为样例，显示在布局框中。 </p> 查看详细信息>> </p> </p><p>Page Footer</h2> 这是一行文本，这里作为样例，显示在布局框中。 </p> 查看详细信息>> </p> </p><p></body> </html> </p><p>从代码中看出。3个div的宽度都设置为固定值760像素，并且通过设置margin的值来实现居中放置。即左右margin都设置为auto就像左两边各有一个弹簧一样，把内容挤到页面中央。 </p><p>如果要使它们紧贴浏览器窗口左侧，可以设置margin:0auto,0 0即只保留右侧的一根，就会把内容挤到左边。反之，如果要使它们紧贴浏览器窗口右侧。可以将margin:0 0 0 auto。 </p><p>1-2-1固定宽度布局 </p><p>在这个布局中增加了一上side栏，但是在通常状况下，两个div只能竖直排列，为了让content和 side能够水平排列，必须把它们放在另一个div中。然后使用浮动或才绝对定位的方法，使content和 side并列起来。 </p><p>在content和 side的外面套一个div称为contented </p><p><title>1-2-1 布局固定宽度 - 绝对定位法 </title> </p><p><meta http-equiv=\<style type=\body { </p><p>background: #FFF; font: 13px/1.5 Arial; margin:0; padding:0; } p{ </p><p>text-indent:2em; } </p><p>.rounded { </p><p> background: url(images/left-top.gif) top left no-repeat; width:100%; } </p><p>.rounded h2 { background: url(images/right-top.gif) top right no-repeat; </p><p> padding:20px 20px 10px; margin:0; } </p><p>.rounded .main { background: url(images/right.gif) top right repeat-y; padding:10px 20px; margin:-2em 0 0 0; </p><p> } </p><p>.rounded .footer { background: url(images/left-bottom.gif) bottom left no-repeat; } </p><p>.rounded .footer p { color:#888; text-align:right; </p><p> background:url(images/right-bottom.gif) bottom right no-repeat; display:block; </p><p> padding:10px 20px 20px; margin:-2em 0 0 0; } </p><p>#header,#pagefooter,#container{ margin:0 auto; width:760px; } </p><p>#container{ </p><p> position:relative; } </p><p>#content{ position:absolute; top:0; left:0; width:500px; } </p><p>#content img{ float:right; 图片使用浮动设置，文字会围绕它排列。 } </p><p>#side{ margin:0 0 0 500px; } </p><p></style> </head> <body> </p><p>Page Header</h2> </p><p></p><p> 查看详细信息>> </p> </p><p>Page Content 2</h2> 对于一个网页设计者来说，HTMCSS，并对CSS进行初步的体验。</p> 查看详细信息>> </p> </p><p>Side Bar</h2> 对于一个网页设计者来说，CSS在这中间扮演着重要的角色。</p> <p> 但是如果希望网页能够美观、间扮演着重要的角色。 </p> 查看详细信息>> </p> </p><p>Page Footer</h2> 这是一行文本，这里作为样例，显示在布局框中。 </p> 查看详细信息>> </p> </p><p></body> </html> </p><p>为了使content能够使用绝对定位，必须考虑用哪个元素作为它的定位基准，显然它该是contenter这个div因此。将#container设置为{position:relative; }相对定位。使它成为下级元素的绝对定位基准。然后将#content{设置为绝对定位。这样它就脱离标准流了。side就会向上移动占据原来content所在的位置。将content的宽度和 side的左 margin设置相同的数值。就保证它们并列紧挨着放置。且不会重叠。但是由于content已经脱离标准流了如果它的高度超过side这个div就会与下面的pagefooter重叠。 </p><p>2，浮动法 </p><p>在CSS样式中，稍作修改。将#container的position属性去掉，将#containe和#side都设置为向左浮动。二者的宽度相加等于总宽度。 <style type=\body { </p><p>background: #FFF; font: 13px/1.5 Arial; margin:0; padding:0; } p{ </p><p>text-indent:2em; } </p><p>.rounded { </p><p> background: url(images/left-top.gif) top left no-repeat; width:100%; } </p><p>.rounded h2 { </p><p> background: url(images/right-top.gif) top right no-repeat; </p><p> padding:20px 20px 10px; margin:0; } </p><p>.rounded .main { background: url(images/right.gif) top right repeat-y; padding:10px 20px; margin:-2em 0 0 0; } </p><p>.rounded .footer { background: url(images/left-bottom.gif) bottom left no-repeat; } </p><p>.rounded .footer p { color:#888; text-align:right; </p><p> background:url(images/right-bottom.gif) bottom right no-repeat; display:block; </p><p> padding:10px 20px 20px; margin:-2em 0 0 0; } </p><p>#header,#pagefooter,#container{ margin:0 auto; width:760px; } </p><p>#content{ float:left; width:500px; } </p><p>#content img{ float:right; } </p><p>#side{ </p><p> float:left; width:260px; } </p><p>#pagefooter{ clear:both; } </p><p>然后把#pagefooter设置clear:属性，以保证清除浮动对它的影响。 1-3-1固定宽度布局 </p><p>要在1-2-1布局的基础上修改HTML的结构。只要在contenter中的左边增加一列即可。并命名为 navi </p><p><style type=\body { </p><p>background: #FFF; font: 13px/1.5 Arial; margin:0; padding:0; } p{ </p><p>text-indent:2em; } </p><p>.rounded { </p><p> background: url(images/left-top.gif) top left no-repeat; width:100%; } </p><p>.rounded h2 { background: url(images/right-top.gif) top right no-repeat; </p><p> padding:20px 20px 10px; margin:0; } </p><p>.rounded .main { background: url(images/right.gif) top right repeat-y; padding:10px 20px; margin:-2em 0 0 0; } </p><p>.rounded .footer { </p><p> background: url(images/left-bottom.gif) bottom left no-repeat; } </p><p>.rounded .footer p { color:#888; text-align:right; </p><p> background:url(images/right-bottom.gif) bottom right no-repeat; display:block; </p><p> padding:10px 20px 20px; margin:-2em 0 0 0; } </p><p>#header,#pagefooter,#container{ margin:0 auto; width:760px; } </p><p>#navi{ float:left; width:200px; } </p><p>#content{ float:left; width:360px; } </p><p>#content img{ float:right; } </p><p>#side{ float:left; width:200px; } </p><p>#pagefooter{ clear:both; } </p><p></style> </head> <body> </p><p></p> <p>本文来源：<a href="https://www.bwwdw.com/article/vgua.html">https://www.bwwdw.com/article/vgua.html</a></p><span class="doc-download-e"></span> </div> <script type="text/javascript">s("download_bottom");</script> <div class="related_article"> <div class="related_top"><code>相关文章：</code></div> <ul><li><a href="https://www.bwwdw.com/article/vgua.html" target="_blank" title="CSS 制作与操作">CSS 制作与操作</a></li><li><a href="https://www.bwwdw.com/article/flm7.html" target="_blank" title="CSS网页设计制作（配合李炎恢 css 视频教程）">CSS网页设计制作（配合李炎恢 css 视频教程）</a></li><li><a href="https://www.bwwdw.com/article/o9re.html" target="_blank" title="用UL制作横向CSS导航菜单">用UL制作横向CSS导航菜单</a></li><li><a href="https://www.bwwdw.com/article/sanj.html" target="_blank" title="用UL制作横向CSS导航菜单">用UL制作横向CSS导航菜单</a></li><li><a href="https://www.bwwdw.com/article/eqb2.html" target="_blank" title="浅谈DIV+CSS网页制作快速布局">浅谈DIV+CSS网页制作快速布局</a></li><li><a href="https://www.bwwdw.com/article/sw6j.html" target="_blank" title="12天学会div+css 网页制作布局">12天学会div+css 网页制作布局</a></li><li><a href="https://www.bwwdw.com/article/f76m.html" target="_blank" title="div css布局与样式详解">div css布局与样式详解</a></li><li><a href="https://www.bwwdw.com/article/kpkb.html" target="_blank" title="教你制作最精良的CSS自定义导航条">教你制作最精良的CSS自定义导航条</a></li><li><a href="https://www.bwwdw.com/article/6kda.html" target="_blank" title="30个css精选案例分析和实际操作">30个css精选案例分析和实际操作</a></li><li><a href="https://www.bwwdw.com/article/zvw7.html" target="_blank" title="装配式混凝土构件制作与安装操作规程">装配式混凝土构件制作与安装操作规程</a></li></ul> </div> <div class="in_reading"><p class="rel_art_line">正在阅读：</p><p><a target="_blank" href="https://www.bwwdw.com/article/vgua.html" title="CSS 制作与操作">CSS 制作与操作</a><span>03-09</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/et4h.html" title="AP和AC配置步骤">AP和AC配置步骤</a><span>09-11</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/244k.html" title="美丽的克拉玛依河作文300字">美丽的克拉玛依河作文300字</a><span>06-27</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/kro7.html" title="天津大学网络教育学院《多媒体技术》课程大作业答案">天津大学网络教育学院《多媒体技术》课程大作业答案</a><span>05-24</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/b0a.html" title="五下单元七(试卷)">五下单元七(试卷)</a><span>03-08</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/bwiq.html" title="酒店新业务培训教材pos">酒店新业务培训教材pos</a><span>04-20</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/7ab5.html" title="xxx教学楼施工组织设计开题报告 - 图文">xxx教学楼施工组织设计开题报告 - 图文</a><span>12-20</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/q9p3.html" title="第3讲化学平衡常数、化学反应进行的方向（带答案）">第3讲化学平衡常数、化学反应进行的方向（带答案）</a><span>06-28</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/rekn.html" title="炎热的夏天作文400字">炎热的夏天作文400字</a><span>07-11</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/8onl.html" title="网购的感受作文5篇">网购的感受作文5篇</a><span>04-01</span></p></div> <div class="previous"> <span class="pre">上一篇：<a title="化学竞赛专题讲座二：共价粒子的空间构型（分子结构）" href="https://www.bwwdw.com/article/tgua.html">化学竞赛专题讲座二：共价粒子的空间构型（分子结构）</a></span> <span class="next">下一篇：<a title="汽车用单组分聚氨酯密封胶（征求意见稿）" href="https://www.bwwdw.com/article/2gua.html">汽车用单组分聚氨酯密封胶（征求意见稿）</a></span> </div> </div> </div> <div class="right-side"> <div class="right_fix"> <script type="text/javascript">s("right_top");</script> <div class="hotSearch"><div class="hotSearch_tl"><span></span>相关文章</div><ul><li><span>1</span><a href="https://www.bwwdw.com/article/pjg3.html" title="《CSS样式》习题" target="_blank">《CSS样式》习题</a></li><li><span>2</span><a href="https://www.bwwdw.com/article/n1mt.html" title="css课堂笔记" target="_blank">css课堂笔记</a></li><li><span>3</span><a href="https://www.bwwdw.com/article/04bi.html" title="CSS定义问题" target="_blank">CSS定义问题</a></li><li><span>4</span><a href="https://www.bwwdw.com/article/tlad.html" title="CSS样式详解" target="_blank">CSS样式详解</a></li><li><span>5</span><a href="https://www.bwwdw.com/article/w8m8.html" title="基于HTML5和CSS3的响应式网页制作毕业论文" target="_blank">基于HTML5和CSS3的响应式网页制作毕业论文</a></li><li><span>6</span><a href="https://www.bwwdw.com/article/e9ix.html" title="基于HTML5和CSS3的响应式网页制作毕业论文" target="_blank">基于HTML5和CSS3的响应式网页制作毕业论文</a></li><li><span>7</span><a href="https://www.bwwdw.com/article/utkb.html" title="CSS实例教程:十步学会用CSS建站" target="_blank">CSS实例教程:十步学会用CSS建站</a></li><li><span>8</span><a href="https://www.bwwdw.com/article/h6w1.html" title="Sketchup建筑模型制作操作流程" target="_blank">Sketchup建筑模型制作操作流程</a></li><li><span>9</span><a href="https://www.bwwdw.com/article/5g4t.html" title="css常用属性" target="_blank">css常用属性</a></li><li><span>10</span><a href="https://www.bwwdw.com/article/5wyo.html" title="DIV CSS课程大纲" target="_blank">DIV CSS课程大纲</a></li></ul></div> <script type="text/javascript">s("right_mid");</script> <div class="right_list"><div class="right_list_t"><i></i><span>最新文章</span></div><ul><li><a href="https://www.bwwdw.com/article/inb.html" target="_blank" title="多层物业服务方案">多层物业服务方案</a></li><li><a href="https://www.bwwdw.com/article/hnb.html" target="_blank" title="（审判实务）习惯法与少数民族地区民间纠纷解决问题（孙潋）">（审判实务）习惯法与少数民族地区民间纠纷解决问题（孙潋）</a></li><li><a href="https://www.bwwdw.com/article/mnb.html" target="_blank" title="人教版新课标六年级下册语文全册教案">人教版新课标六年级下册语文全册教案</a></li><li><a href="https://www.bwwdw.com/article/jnb.html" target="_blank" title="词语打卡">词语打卡</a></li><li><a href="https://www.bwwdw.com/article/4nb.html" target="_blank" title="photoshop实习报告">photoshop实习报告</a></li><li><a href="https://www.bwwdw.com/article/1nb.html" target="_blank" title="钢结构设计原理综合测试2">钢结构设计原理综合测试2</a></li><li><a href="https://www.bwwdw.com/article/qnb.html" target="_blank" title="2014年期末练习题">2014年期末练习题</a></li><li><a href="https://www.bwwdw.com/article/enb.html" target="_blank" title="高中数学中的逆向思维解题方法探讨">高中数学中的逆向思维解题方法探讨</a></li><li><a href="https://www.bwwdw.com/article/nnb.html" target="_blank" title="名师原创全国通用2014-2015学年高二寒假作业政治（一）Word版">名师原创全国通用2014-2015学年高二寒假作业政治（一）Word版</a></li><li><a href="https://www.bwwdw.com/article/lnb.html" target="_blank" title="北航《建筑结构检测鉴定与加固》在线作业三">北航《建筑结构检测鉴定与加固》在线作业三</a></li><li><a href="https://www.bwwdw.com/article/snb.html" target="_blank" title="XX县卫生监督所工程建设项目可行性研究报告">XX县卫生监督所工程建设项目可行性研究报告</a></li><li><a href="https://www.bwwdw.com/article/knb.html" target="_blank" title="小学四年级观察作文经典评语">小学四年级观察作文经典评语</a></li><li><a href="https://www.bwwdw.com/article/znb.html" target="_blank" title="浅谈110KV变电站电气一次设计-程泉焱(1)">浅谈110KV变电站电气一次设计-程泉焱(1)</a></li><li><a href="https://www.bwwdw.com/article/0nb.html" target="_blank" title="安全员考试题库">安全员考试题库</a></li><li><a href="https://www.bwwdw.com/article/cnb.html" target="_blank" title="国家电网公司变电运维管理规定(试行)">国家电网公司变电运维管理规定(试行)</a></li><li><a href="https://www.bwwdw.com/article/9nb.html" target="_blank" title="义务教育课程标准稿征求意见提纲">义务教育课程标准稿征求意见提纲</a></li><li><a href="https://www.bwwdw.com/article/ukb.html" target="_blank" title="教学秘书面试技巧">教学秘书面试技巧</a></li><li><a href="https://www.bwwdw.com/article/ynb.html" target="_blank" title="钢结构工程施工组织设计">钢结构工程施工组织设计</a></li><li><a href="https://www.bwwdw.com/article/6kb.html" target="_blank" title="水利工程概论论文">水利工程概论论文</a></li><li><a href="https://www.bwwdw.com/article/3kb.html" target="_blank" title="09届九年级数学第四次模拟试卷">09届九年级数学第四次模拟试卷</a></li><li><a href="https://www.bwwdw.com/%E6%93%8D%E4%BD%9C/" target="_blank" title="操作">操作</a></li><li><a href="https://www.bwwdw.com/%E5%88%B6%E4%BD%9C/" target="_blank" title="制作">制作</a></li><li><a href="https://www.bwwdw.com/CSS/" target="_blank" title="CSS">CSS</a></li></ul></div> <script type="text/javascript">s("right_bottom");</script> <div class="right_list"><div class="right_list_t"><i></i><span>推荐文章</span></div><ul><li><a href="https://www.bwwdw.com/article/fgua.html" target="_blank" title="心得体会范文英语教学培训心得">心得体会范文英语教学培训心得</a></li><li><a href="https://www.bwwdw.com/article/dgua.html" target="_blank" title="第10课春秋战国的科技与文艺">第10课春秋战国的科技与文艺</a></li><li><a href="https://www.bwwdw.com/article/hgua.html" target="_blank" title="《白杨》教学设计1">《白杨》教学设计1</a></li><li><a href="https://www.bwwdw.com/article/igua.html" target="_blank" title="人教版-小学语文三年级下册课程纲要石金凤">人教版-小学语文三年级下册课程纲要石金凤</a></li><li><a href="https://www.bwwdw.com/article/jgua.html" target="_blank" title="犬猫的生理指标">犬猫的生理指标</a></li><li><a href="https://www.bwwdw.com/article/mgua.html" target="_blank" title="重金属污染知识推广巡回策划">重金属污染知识推广巡回策划</a></li><li><a href="https://www.bwwdw.com/article/1gua.html" target="_blank" title="新标准（政府发） - 图文">新标准（政府发） - 图文</a></li><li><a href="https://www.bwwdw.com/article/4gua.html" target="_blank" title="机电一体化，数控人才培养方案2010年">机电一体化，数控人才培养方案2010年</a></li><li><a href="https://www.bwwdw.com/article/egua.html" target="_blank" title="注册美国商标是保护好品牌的有效途径">注册美国商标是保护好品牌的有效途径</a></li><li><a href="https://www.bwwdw.com/article/qgua.html" target="_blank" title="商务日语报刊文章选读（教案）">商务日语报刊文章选读（教案）</a></li><li><a href="https://www.bwwdw.com/article/5gua.html" target="_blank" title="浅谈PEP小学英语阅读课教学">浅谈PEP小学英语阅读课教学</a></li><li><a href="https://www.bwwdw.com/article/xgua.html" target="_blank" title="软件测试岗前就业培训资料">软件测试岗前就业培训资料</a></li><li><a href="https://www.bwwdw.com/article/ogua.html" target="_blank" title="《得道多助失道寡助》教学设计 - 图文">《得道多助失道寡助》教学设计 - 图文</a></li><li><a href="https://www.bwwdw.com/article/wgua.html" target="_blank" title="MessageBox() 的用法及其示例">MessageBox() 的用法及其示例</a></li><li><a href="https://www.bwwdw.com/article/bgua.html" target="_blank" title="优秀集体申报材料集锦">优秀集体申报材料集锦</a></li><li><a href="https://www.bwwdw.com/article/agua.html" target="_blank" title="大学计算机基础网上课程第一章答案">大学计算机基础网上课程第一章答案</a></li><li><a href="https://www.bwwdw.com/article/8gua.html" target="_blank" title="找准支点，拨动全篇">找准支点，拨动全篇</a></li><li><a href="https://www.bwwdw.com/article/rgua.html" target="_blank" title="防治水知识培训讲义">防治水知识培训讲义</a></li><li><a href="https://www.bwwdw.com/article/pgua.html" target="_blank" title="触摸屏行业技术特点分析">触摸屏行业技术特点分析</a></li><li><a href="https://www.bwwdw.com/article/ggua.html" target="_blank" title="《计算机应用基础》各章课后习题-有答案">《计算机应用基础》各章课后习题-有答案</a></li></ul></div> </div> </div> </div> <div class="footer"> <p>Copyright©<script>timestamp2date(1);</script><a href="https://www.bwwdw.com/" target="_blank" title="博文网">博文网</a>bwwdw.com 版权所有</p> <p class="gray"><a href="https://www.bwwdw.com/article/" target="_blank">最新更新</a> | <a href="https://www.bwwdw.com/hot/" target="_blank">热点专题</a> | <a href="https://www.bwwdw.com/sitemap.html" target="_blank">网站地图</a> | <a href="https://www.bwwdw.com/tag/" target="_blank">TAG专题</a> | <a href="https://www.bwwdw.com/sitemap.xml" target="_blank">XML地图</a> | <a href="https://so.bwwdw.com" target="_blank">范文搜索</a><script type="text/javascript">tj();</script></p> </div> <a href="#0" class="cd-top">Top</a> <script src="/static/fanwen/js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> document.write('<script type="text/javascript" src="/static/fanwen/js/pubuliu.js?'+RAND_STR+'"><\/script>'); document.write('<script type="text/javascript" src="/static/fanwen/js/lazyimg.js?'+RAND_STR+'"><\/script>'); document.write('<script type="text/javascript" src="/static/fanwen/js/gotop.js?'+RAND_STR+'"><\/script>'); </script> <script type="text/javascript"> $.ajax({ "url":"https://www.bwwdw.com/open/doc/readViews.json?id=vgua", "type":"get", "data":"", "dataType":"json", "success":function(res){ $("#read_views").html(res.data); } }); </script> <script type="text/javascript">bottomAction();</script> </body> </html>