当前位置：文档库 › 实验三 CSS实验

实验三 CSS实验

学生实验报告

实验指导书五步骤

（1）新建一个文件夹试验五将“唯存教育”文件夹中的myweb文件夹复制到此新文件夹中。（2）启动dreamweaver新建一个站点保存在实验五文件夹中。（3）新建一个打开

中的article.html切换至代码视图。新建css样式保存至实验五中，在代码视图

加link标记。（4）再添加css控制网页表

实验指导书六步骤

）新建一个文件夹试验六将“八大行星”文件夹中的myweb文件夹复制到此新文件夹中。

dreamweaver新建一个站点保存在六文件夹中。（3）打开index.html，将窗口切换至代码视图，为body中的container和list添加div标签。（4）建立命名标记：点击菜单栏上的命名锚记输入名称确定后在文档设计视图中选择创建连接文本，在属性检查器“链接”

入数字符号#和锚记名称。（5）新建css样式表控制网

实验指导书七

（1）新建一个文件夹试验七将“77号作品”文件夹中的myweb文件夹复制到此新文件夹中。（2）启动dreamweaver新建一个站点保存在实验七文件夹中。（3）打开index.html和style.css，在style.css中补充网页背景样式，未添加样式前的网页如图

（四）给网页添加背景颜色#f2caff如图。

（五）添加css样式后如图

实验指导书八步骤

（1）新建一个文件夹试验八将“信息与网络中心”文件夹中的myweb文件夹复制到此新文件夹中。（2）启动dreamweaver新建一个站点保存在实验八文件夹中。（3）打开index.html 和style.css，打开style.css补充网页样式后如图

实验指导书九步骤

（1）新建一个文件夹试验九将“信息与网络中心”文件夹中的myweb文件夹复制到此新文件夹中。（2）启动dreamweaver新建一个站点保存在实验九文件夹中。（3）打开index.html 和style.css，打开style.css补充网页样式

修改sidebar和content后

Head添加图片和高度后如图

加footer后

添加圆角框顶部后如图

添加圆角框中部和底部图像如图

添加fltlt浮动后

添加图片元素填充和边框和水平排列后如图

最终效果如图

实验指导书十一步骤

（1）新建一个文件夹试验十一将“宝贝屋”文件夹中的myweb文件夹复制到此新文件（2）启动dreamweaver新建一个站点保存在实验十一文件夹中。（3）打开index.html和style.css文件，补充css文件完整后如图

实验指导书十步骤

（1）新建一个文件夹实验十将myweb文件夹复制该文件夹中；（2）启动Dreamweaver，使用“站点｜新建站点”命令新建“潜水俱乐部”站点，并指定myweb文件夹为“潜水俱乐部”站点的本地根文件夹。

（3）打开index.html和style.css，补充css样式：1更改字与字之间的行距后如图

2，

3，添加编号列表和项目列表后如

4，添加超级连接后如图

5，添加container元素后如图

6，设置header居中如图

7导航变化如图

8，添加footer样式

8，添加extradiv元素设置（共七个）后最终结果如图

HTML+CSS标签属性大全

HTML CSS标签属性大全 a卷标, 属性名称, 简介批注 1、跑马灯 …普通卷动 …滑动 …预设卷动 …来回卷动 …向下卷动 …向上卷动向右卷动向左卷动 …卷动次数 …设定宽度 …设定高度 …设定背景颜色 …设定卷动距离 …设定卷动时间 2、字体效果

…

标题字(最大)

…

标题字(最小) …粗体字 …粗体字(强调) …斜体字 …斜体字(强调) …斜体字(表示定义) …底线 …底线(表示插入文字) …横线 …删除线 …删除线(表示删除) …键盘文字 … 打字体 …固定宽度字体(在文件中空白、换行、定位功能有效) …</plaintext>固定宽度字体(不执行标记符号) <listing>…</listing> 固定宽度小字体 <font color=00ff00>…</font>字体颜色 <font size=1>…</font>最小字体 <font style =font-size:100 px>…</font>无限增大 3、区断标记 <hr>水平线 <hr size=9>水平线(设定大小) <hr width=80%>水平线(设定宽度) <hr color=ff0000>水平线(设定颜色) <br>(换行) <nobr>…</nobr>水域(不换行)</p><h2>CSS+DIV布局案例</h2><p>第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：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;} 页面代码如下： <body> <div id="container"> <div id="header">这是头部</div> <div id="mainContent"> 这是身体 </div> </div> </body> 效果下图显示：点击看大图其中居中的关键是将“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;}</p><h2>html-css</h2><p>HTML结构 <html>...</html>包含整个HTML文档。 <head>...</head>包含HTML文档的标题。 <title>...</title>指明文档的标题，用于<head>内。<body>...</body>包含HTML文档的正文。 ... 包含一个段落；段落间隔一行。<br/>分行。 <hr/>水平标尺线。 <h1>...</h1>一级标题。 <h2>...</h2>二级标题。 <h3>...</h3>三级标题。 <h4>...</h4>四级标题。 <h5>...</h5>五级标题。 <h6>...</h6>六级标题。 HTML链接 <a>...</a>使用href可创建指向另一个文档或锚点的链接。属性 href="address"要链接的文档或锚点的地址。target="_blank"在新浏览器窗口中打开链接的页面，但该属性不符合XHTML的要求，可以使用javascript来避开这种限制。 HTML文本的对齐和格式化 <em>...</em>强调(通常是斜体)。 <strong>...</strong>更重的强调(通常是粗体)。 <b>...</b>粗体文本。 <i>...</i>斜体文本。 <tt>...</tt>打字机(等宽)字体。 <pre>...</pre>预格式化的文本(原来的分行和空格都将被保留---这些分行的空格通常以等宽字体显示)。 <big>...</big>比正常字体稍大的文本。 <small>...</smail>比正常字体稍小的文本。<sub>...</sub>下标。 <sup>...</sup>上标。 <div>...</div>要要格式化的文本区域。属性 style="text-align:alignment"将文本居中对齐、左对齐或右对齐(也可用于、<h1>、<h2>和<h3>等)。 s tyle="font-family:typeface"文本的字体名称。（同上） style="font-size:size"字体大小。 style="color:color"修改文本的颜色。 <ol>...</ol>有序(带编号的)列表。属性style=list-style-type:numtype" 用于标记列表的编号类型，可能的值包括：decimal(十进制数字)、lower-roman(小写罗马数字)、lower-alpha(小写alpha数字)、upper-alpha(大写alpha数字)、以及none(无) <ul>...</ul>无序(带项目符号的)列表。属性 style="list-style-tyle:bullettype" 用于标记列表项的项目符号类型。可能的值包括disc、circle、square和none。 <li>...</li>用于<ol>或<ul>的列表项。属性 style="list-style-type:type" 标记列表的编号或项目符号。可能的值包括disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、 upper-alpha和none。 <dl>...</dl>定义列表。 <dt>...</dt>定义项，作为定义列表的一部分。<dd>...</dd>与定义项对应的定义。也是定义列表的一部分。 HTML文本链接 <a>...</a>通过href属性，创建指向另一个文档或锚点的链接；通过name属性，创建可被链接的锚点属性 href="addres s"要链接的文档或锚点的地址 id="name"锚点在这个文档中的名称 HTML图像 <img/>将图像放在网页中属性 src="地址"图像的地址或文件名 alt="取代图像的描述"显示在图像位置上的对图像的描述，主要提供给不能看到图像的用户看 title="标题"作为图像标题显示的文本信息，通常显示在图像上的一个弹出窗口(工具提示) width="宽度"图像的宽度，单位是像素 height="高度"图像的高度，单位是像素 style="border-style:none"如果图像时链接，就去掉图像周围的边框 style="vertical-align:alignment"图像在垂直方向上按text-top、top、text-bottom、bottom、middle 或baseline对齐 style="float:float"使图像浮动在一边，文本环绕在另一边。可选的值右left、right和none(默认值)</p><h2>DIV+CSS：网站首页布局实例教程</h2><p>DIV+CSS：网站首页布局实例教程第一步：页面布局与规划在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:</p><p>根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/</p><p>├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。第二步：写入整体层结构和CSS 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.wendangku.net/doc/cc11457367.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.wendangku.net/doc/cc11457367.html,/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html> 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下： <div id="container">[color=#aaaaaa][/color] <div id="Header">[color=#aaaaaa][/color] </div> <div id="PageBody">[color=#aaaaaa][/color] <div id="Sidebar">[color=#aaaaaa][/color] </div> <div id="MainBody">[color=#aaaaaa][/color] </div> </div> <div id="Footer">[color=#aaaaaa][/color] </div> </div> 为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开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}</p><h2>CSS选择器笔记</h2><p>CSS选择器笔记阮一峰整理参考网址：456 Berea Street 一、基本选择器实例： * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } https://www.wendangku.net/doc/cc11457367.html, { background:#ff0; } https://www.wendangku.net/doc/cc11457367.html,.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器</p><p>实例： div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器实例： p[title] { color:#f00; } div[class=error] { color:#f00; }</p><p>td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类实例： p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、 CSS 2.1中的伪元素</p><h2>html+css</h2><p>1.万维网(www)和w3c组织 WWW是环球信息网的缩写,英文全称为World Wide Web，中文名字为"万维网",常简称为Web。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构,又称W3C理事会(就是我们常说的w3c组织). W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。 w3c的官网: https://www.wendangku.net/doc/cc11457367.html,/ 网站中有w3c组织推出的各种的技术的标准的使用及其开发教程. 2.什么是HTML HTML 是用来描述网页的一种语言(开发网页) HTML 指的是超文本标记语言(Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言(markup language) 标记语言是一套标记标签(markup tag)例如:<table></table>等等 HTML 使用标记标签来描述网页 HTML属于web开发中前端技术的一种: HTML + CSS + JavaScript + Ajax + (JQeury)等等 3.什么是网页 HTML 文档= 网页 HTML 文档描述网页 HTML 文档包含HTML 标签和纯文本 HTML 文档也被称为网页通常我们看到的网页，都是以htm 或html 后缀结尾的文件，俗称HTML 文件。不同的后缀，分别代表不同类型的网页文件，例如以ASP 、PHP 、JSP 等等。不同后缀名的网页中都是由HTML的标签语言+其他语言或标签组成的例如: .html结尾的网页文件内容中全部是html标签 .jsp结尾的网页文件内容中一般是由html标签+java代码组成 .php结尾的网页文件内容中一般是由html标签+php代码组成</p><h2>CSS选择器</h2><p>CSS选择器 1.常用选择器常用的选择器有类型选择器和后代选择器。 1.1类型选择器类型选择器用来选择特定类型的元素。可以根据三种类型来选择。 1）ID选择器，根据元素ID来选择元素。前面以”#”号来标志，在样式里面可以这样定义： #demoDiv{ color:#FF0000; } 这里代表id为demoDiv的元素的设置它的字体颜色为红色。我们在页面上定义一个元素把它的ID定义为demoDiv，如： <div id="demoDiv"> 这个区域字体颜色为红色 </div> 用浏览器浏览，我们可以看到因为区域内的颜色变成了红色再定义一个区域 <div> 这个区域没有定义颜色 </div> 用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。 2）类选择器根据类名来选择前面以”.”来标志，如： .demoDiv{ color:#FF0000; } 在HTML中，元素可以定义一个class的属性。如： <div class="demo"> 这个区域字体颜色为红色 </div> 同时，我们可以再定义一个元素： <p class="demo"> 这个段落字体颜色为红色</p><p>最后，用浏览器浏览，我们可以发现所有class为demo的元素都应用了这个样式。包括了页面中的div元素和p元素。上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那个一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。我们可以改成这样来定义。 <div class="demo"> <div> 这个区域字体颜色为红色 </div> 同时，我们可以再定义一个元素：这个段落字体颜色为红色 </div> 这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。 3）标签选择器根据标签选择用标签选择指根据标签名来应用样式，定义时，直接用标签名。如： div{ color:#FF0000; } 我们再定义一个元素。 <div> 这个区域字体颜色为红色 </div> <div> 这个区域字体颜色也为红色 </div> 用浏览器浏览，我们发现两个DIV元素都被应用了样式，这里不用定义id，也无需要定义class属性。示例参见：根据标签来选择元素.html 这种选择方式非常的有用，比如你觉得锚链接的下划线不太美观，想把所有的锚链接的样式都设成无下划线形式，颜色为鲜艳的蓝色。可以这样定义。 a{ text-decoration:none; color:#00CCCC; } 1.2 后代选择器后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两个常用选择器，中间加一个空格表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中。</p><h2>CSS选择器的声明与嵌套</h2><p>CSS选择器的声明与嵌套使用CSS选择器控制HTML标记的时候，每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个。并且，任何形式的选择器，都是合法的，标记选择器，class选择器和ID选择器都可以集体声明。集体声明在声明CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以使用集体声明的方式，将风格相同的选择器同时声明。 [html]view plain copy print? 1.<span style="font-size:24px;"><html> 2.<head> 3.<title> 4.集体声明 5.</title> 6.<style type="text/css"> 7. 16.</style></p><p>17.</head> 18. 19.<body> 20.<h1>集体声明h1</h1> 21.<h2class="special">集体声明h2</h2> 22.<h3>集体声明h3</h3> 23.<h4>集体声明h4</h4> 24.<h5>集体声明h5</h5> 25.集体声明p1 26.<p class="special">集体声明p2 27.<p id="one">集体声明p3 28.</body> 29.</html> 30.</span> 全局声明对于实际网站中，如果希望页面中所有的标记都使用同一种CSS样式，但是，又不希望逐个来集体声明，这是可以使用全局声明符号*来声明。 [html]view plain copy print? 1.<span style="font-size:24px;"><html> 2.<head> 3.<title> 4.集体声明 5.</title> 6.<style type="text/css"> 7. <!-- 8. *{ 9. color:purple; 10. font-size:15px; 11. } 12. h2.special,.special,#one{ 13. text-decoration:underline; 14. }</p><h2>实验一HTML、CSS网页制作实验</h2><p>实验一HTML、CSS网页制作实验一、做出网页1.html，效果如下图所示：要求如下： 1、诗的题目格式为红色、加粗、居中显示。 2、作者格式为红色、斜体、居右显示。 3、诗的内容字体格式从上到下分别是<h4><h3><h2><h1>，诗的第一行和第三行内容为蓝色字体。二、做出网页2.html，效果如下图所示。要求如下： 1、图像加边框。 2、图像相对于文字左对齐。三、做出网页3.html，效果如下图所示：要求如下：文字颜色正常是#3c3c3c、白色背景，鼠标经过时变为#FF8400、#EDEEF0色背景。</p><p>四、请做出网页4.html，效果如下图所示。五、请做出以下网页，效果如下图所示，保存为5.html：六、请做出网页6.html，效果如下图所示：要求如下：</p><p>1、使用内嵌式引入CSS样式表。 2、使用类选择器定义元素。（1）通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px 字体；第二个字母“o”设置为红色、加粗、60px字体；第三个字母“o”设置为黄色、加粗、60px字体；第四个字母“g”设置为蓝色、加粗、60px字体。（2）剩余字母“le”按默认样式输出。七、请做出网页7.html，效果如下图所示。要求如下： 1、设置所有文本为宋体、12像素、绿色字体，“春季”字体颜色设为红色。 2、设置标题“春天”为16像素、红色、加粗、居中、上划线的效果。 3、设置文本首行缩进2个字符。八、请做出网页8.html，效果如下图所示：要求如下： 1、设置所有文本为微软雅黑、14像素、黑色字体。 2、新浪”、“新浪网”为红色字体，“博客首页”为蓝色字体，网址及日期为绿色字体。 3、设置标题为16像素、左对齐、下划线的效果。 4、设置文本“-百度快照-评价”为灰色、下划线的效果。</p><h2>DIV+CSS网页布局技巧实例</h2><p>DIV+CSS网页布局技巧实例1：设置网页整体居中的代码</p><p>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;</p><p>边框(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</p><h2>css3选择器伪类伪元素</h2><p>CSS3选择器在css3中新增了很多选择器，大部分浏览器都支持了，但是要知道坑爹的IE还在拖后腿，希望不久的将来IE能赶上来。下面就介绍一下css3中都增加了哪些选择器。 1.属性选择器 E[attr] →有attr属性的E元素。 E[attr^=’value’] →寻找属性值以value开头的元素。 E[attr$=’value’] →寻找以属性值value结束的元素。 E[attr*=’value’] →寻找属性值包含value的元素。灵活运用，可以组合使用，例如： a[href^=’http://’][href*=’/folder2/’][href$=’.pdf’]{ } E ~ F { } 相邻兄弟连接符，选择的是文档树的同一层级中，紧邻元素E之后的任意元素F。 E + F { } 普通兄弟连接符，选择的是文档树的同一层级中，位于元素E之后的任意元素F，不管它是否直接相邻。以上选择器大部分浏览器都支持，包括坑爹的IE。 2.伪类 E：first-child{ } //在css2引入，css3中增加11个新的结构伪类。 E：nth-child(n/2n/3n-1/odd/even){ } E：nth-of-type(n/2n/3n-1/odd/even){ } E：nth-last-child( ){ }和E：nth-last-of-type( ){ }与上面参数相同，但是元素要从最后一个算。 first-child{ }和:first-of-type{ } //选择其父元素的第一个子元素和其父元素的某种指定类型的第一个子元素。 last-child{ }和:last-of-type{ } //选择父元素的最后一个子元素和属于某种类型的最后一个子元素。 only-child和only-of-type，选择的是该元素有一个父元素，但没有任何的兄弟元素或者没有相同类型的兄弟元素。例：p:only-of-type{ } p:only-child{ } 3.其它伪类 target伪类，指向网页内部特定元素的链接。例： <h4 id=”my_id”>Lorem ipsum</h4> <a href=”https://www.wendangku.net/doc/cc11457367.html,/page.html#my_id”>Lorem</a> Target伪类能够在涉及的URI被使用的时候，把样式应用到元素上。 #my_id:target{ } 其它例子.comment:target{ } empty伪类，选择没有子元素（包括文本节点）的元素。例： <td>我</td><td></td><td>是</td> td:empty{ } //只会应用到第二个td元素，因为其它两个包含有文本节点 root伪类，选择文档树中的第一个元素，它的唯一真正作用就是发生在为XML文档添</p><h2>html+css考试题</h2><p>达职院第一次内测（3月份）一、选择 1.在一个框架的属性面板中，不能设置下面哪一项。( D ) A．源文件; B．边框颜色; C．边框宽度 D．滚动条 2. 下列哪一项表示的不是按钮（C ） A．type="submit" B．type="reset" C．type="image" D．type="button" 3.下面哪一个属性不是文本的标签属性？（ B ） A．nbsp; B．align C．color D．Face 4.下面哪一项的电子邮件链接是正确的？（ D ） A．https://www.wendangku.net/doc/cc11457367.html, B．xxx@.net C．xxx@com D．xxx@https://www.wendangku.net/doc/cc11457367.html, 5.当链接指向下列哪一种文件时，不打开该文件，而是提供给浏览器下载。（ C ） A．ASP B．HTML C．ZIP D．CGI 6.关于表格的描述正确的一项是。（ D ） A．在单元格内不能继续插入整个表格 B．可以同时选定不相邻的单元格 C．粘贴表格时，不粘贴表格的内容 D．在网页中，水平方向可以并排多个独立的表格 7.如果一个表格包括有1行4列，表格的总宽度为“699”，间距为“5”，填充为“0”，边框为“3”，每列的宽度相同，那么应将单元格定制为多少像素宽。（ D ） A．126 B．136 C．147 D．167 8.关于文本对齐，源代码设置不正确的一项是：（ A ） A．居中对齐：<div align="middle">…</div> B．居右对齐：<div align="right">…</div> C．居左对齐：<div align="left">…</div> D．两端对齐：<div align="justify">…</div> 9.下面哪一项是换行符标签？（ C ） A．<body> B．<font> C．<br> D． 10.下列哪一项是在新窗口中打开网页文档。（ B ） A．_self B．_blank C．_top D．_parent 11.下面对JPEG格式描述不正确的一项是。（ C ） A．照片、油画和一些细腻、讲求色彩浓淡的图片常采用JPEG格式 B．JPEG支持很高的压缩率，因此其图像的下载速度非常快</p><h2>第十天 div+css网页标准布局实例教程(一)</h2><p>第十天div+css网页标准布局实例教程（一）今天学习《十天学会web标准(div+css)》的最后一个章节，本章节把前面学习的零碎内容串联起来，组织成一个网站，将根据本人这些年来的从业经验，从建立站点到一个完整的div+css网页的完成，整个流程下来，希望能对各位有所帮助。由于本节内容较多，将分三部分来讲解。建立站点结构分析搭建框架切割效果图布局页面——头部和导航布局页面——侧边栏布局页面——主体部分底部和细节调整相对路径和相对于根目录路径一、建立站点前面的课程都是零碎讲解一些相关知识，那么要做一个网站，首先需要建立一个站点。那么什么是站点，为什么要建立一个站点呢？因为网站不同于其它文件，比如一个图片，放到哪个盘哪个目录下都可以访问。而网站是许多文件相互关联的，所以要专门一个目录把它们分门别类存放起来。如果搞过视频编辑的朋友都知道，需要先建立一个工程，把原始的视频文件、图片素材分类放好，也是这个道理。下面以在D盘建立一jiaocheng文件夹为例，在dreamweaver(简称DW)里创建一个站点指向这个文件夹，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。</p><p>保存后，一个站点就建立起来了，我用的是DW cs5版本，不同版本界面有所不同。如果要连接FTP，需要设置服务器选项（后面会涉及到）。站点建立好后，我们先建立一个images和css文件夹，分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的；在dw建立需要在文件面板列表的根目录上点击右键，选择新建文件夹后更改名字即可。</p><h2>DIV+CSS布局大全</h2><p>目录 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)</p><p>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)</p><h2>css的选择器描述</h2><p>css的选择器描述选择器：选择器（selector）是CSS中重要的概念，所有的HTML标记都在通过不同的CSS选择器进行控制的，用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明即可，即可实现各种效果。今天我们来看：css如何引入HTML文件进行了介绍。 1.标签选择器一个HTML页面中很多不同的标记组成，在css标记选择器就是声明哪些标记采用哪种CSS样式，例如段落的p标签选择器，就是用于声明页面中所有的标签的样式风格。同样可以通过h1选择器来声明页面中所有的<h1>标记的CSS 风格。代码和语法如下： P{ color: red ;} 每个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记，声明多种样式风格。 CSS语言对所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。 2.Id选择器 Id选择器只能在HTML页面中使用一次，因此其针对性更强，在HTML标记中只需要用id属性，就可以直接调用CSS的ID选择器代码和语法如下： #d1{ width:100px; height:100px; color：red; } <div id=”d1”></dv> class选择器可以用于多个标记，但这里需要指出的是，将ID选择器用于多个标记是错误的，因为每个标记定义的id不只是css可以调用，JavaScript等其他脚本也可以调用，如果一个HTML中有两个相同的id的标记，将会导致JavaScript在查找id时出错，例如JavaScript中的函数getElementById()；正因为JavaScript等脚本也可以调用HTML中设置的id，因此id选择器一直被广泛应用，网站建设者在编写CSS代码时，应该养成良好的习惯，一个id最多只能赋予一个HTML标记，而且在CSS中，id选择器不支持像class选择器那样多风格同时使用，类似id=“one two”是完全错误的语法。 3.类选择器</p><h2>实验四--Div+CSS网页布局</h2><p>实验四 Div+CSS网页布局一、站点规划在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:</p><p>根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/</p><p>至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容：这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：</p><h2>CSS中的基本选择器</h2><p>海文国际https://www.wendangku.net/doc/cc11457367.html, CSS中的基本选择器使用简单且频率高的一些选择器归类为基本选择器。 1.通用选择器 * { border: 1px solid red; } 解释：“*”号选择器是通用选择器，功能是匹配所有html 元素的选择器包括<html>和<body>标签。可以使用如下元素标记测试效果：段落 <b>加粗</b> <span>无</span> 通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用。 2.元素选择器 p { color: red; } 段落</p><p>海文国际https://www.wendangku.net/doc/cc11457367.html, 解释：直接使用元素名称作为选择器名即可。 3.ID 选择器 #abc { font-size: 20px; } <p id="abc">段落解释：通过对元素设置全局属性id，然后使用#id 值来选择页面唯一元素。 4.类选择器 .abc { border: 1px solid red; } <b class="abc">加粗</b> <span class="abc">无</span> 解释：通过对元素设置全局属性class，然后使用.class 值选择页面一个或多个元素。 b.abc { border: 1px solid red; } 解释：也可以使用“元素.class 值”的形式，限定某种类型的元素。<span class="abcedf">无</span></p><p>海文国际https://www.wendangku.net/doc/cc11457367.html, 解释：类选择器还可以调用多个样式，中间用空格隔开进行层叠。 5.属性选择器 //所需CSS2 版本 [href] { color: orange; } 解释：属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。 //所需CSS2 版本 [type="password"] { border: 1px solid red; } 解释：匹配属性值的属性选择器。 //所需版本CSS3 [href^="http"] { color: orange; } 解释：属性值开头匹配的属性选择器。 //所需版本CSS3 [href$=".com"] { color: orange;</p><h2>HTML与CSS简介</h2><p>第一部分HTML语言一、关于HTML的官方标准 1.HTML全称：HyperText Markup Language 2.最新版本：HTML4.01规范W3C建议1999.12.24 二、HTML文档结构 1．最简单的HTML文档 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.wendangku.net/doc/cc11457367.html,/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <P>Hello world! </BODY> </HTML> 2．组成HTML文档的三个部分 1）HTML版本信息 2) Head头信息补充：<META name="keywords" lang="en-us" content="news,sports,jokes">元信息META：搜索的需要 3）BODY主体内容三、常用标签详解（元素、属性、内容） 1．注释： 2．标题级别： <H1>1级标题</H1> <H2>2级标题</H2> <H3>3级标题</H3> <H4>4级标题</H4> <H5>5级标题</H5> <H6>6级标题</H6> 3．段落：段落内容（可选） 4．链接：<A href=https://www.wendangku.net/doc/cc11457367.html, Title=请点击>Google链接</A> 5．常用字符格式 <CITE> 引用 </CITE> <B> 粗体字</B> <I> 斜体字 </I> <TT> 打字机字体 </TT> <U>下划线</U> <STRONG>加重强调</STRONG> <STRIKE> 删除线 </STRIKE> <BIG>加大</BIG></p></div> </div> <div> <div>相关文档</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="2398093"><a href="/topic/2398093/" target="_blank">htmlcss</a></li> <li id="22745585"><a href="/topic/22745585/" target="_blank">css选择器</a></li> <li id="18746887"><a href="/topic/18746887/" target="_blank">css布局实例</a></li> </ul> </div> </div> </div> </div> <div class="category"> <span class="navname">相关文档</span> <ul class="lista"> <li><a href="/doc/af13658033.html" target="_blank">html-css试卷</a></li> <li><a href="/doc/ed17552489.html" target="_blank">html+css网页设计复习题</a></li> <li><a href="/doc/225906074.html" target="_blank">html+css</a></li> <li><a href="/doc/3b12996822.html" target="_blank">HTML_CSS测试题</a></li> <li><a href="/doc/6017746607.html" target="_blank">HTML+CSS测试</a></li> <li><a href="/doc/c56975346.html" target="_blank">html+css标记大全</a></li> <li><a href="/doc/f84699460.html" target="_blank">HTML+CSS从入门到精通</a></li> <li><a href="/doc/3a10128611.html" target="_blank">各种HTML+CSS网页效果代码分享</a></li> <li><a href="/doc/543009801.html" target="_blank">HTML与CSS简介</a></li> <li><a href="/doc/9f17780189.html" target="_blank">HTML+CSS从入门到精通(中文)</a></li> <li><a href="/doc/ee14535289.html" target="_blank">HTML之CSS参考手册(完美整理版)</a></li> <li><a href="/doc/f818745650.html" target="_blank">htmlcss考试题</a></li> <li><a href="/doc/141868597.html" target="_blank">html-css</a></li> <li><a href="/doc/3012857360.html" target="_blank">案例1-HTML中使用css+div设计简单网页</a></li> <li><a href="/doc/5b14868838.html" target="_blank">html+css入门教程</a></li> <li><a href="/doc/ba14841377.html" target="_blank">HTML和css的关系</a></li> <li><a href="/doc/f03813002.html" target="_blank">htmlcss考试题</a></li> <li><a href="/doc/317981372.html" target="_blank">实验一HTML、CSS网页制作实验</a></li> <li><a href="/doc/4817235148.html" target="_blank">1.HTMLCSS基本练习</a></li> <li><a href="/doc/8a15605919.html" target="_blank">HTML+CSS总结</a></li> </ul> <span class="navname">最新文档</span> <ul class="lista"> <li><a href="/doc/0719509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0e19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9319184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/db19211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/af19240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9919184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8b19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8019195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7a19336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6719035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6a19035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4d19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3a19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2519396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2419396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1f19338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ef19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bc19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "c9a15456c281e53a5902ff39"; </script> <div class="footer"> <p><a href="/tousu.html" target="_blank">侵权投诉</a>  © 2013-2023 www.wendangku.net  <a href="/sitemap.html">站点地图</a> | <a href="https://m.wendangku.net">手机版</a></p> <p><a href="https://beian.miit.gov.cn" target="_blank">闽ICP备11023808号-7</a>  本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈</p> </div> <script type="text/javascript">foot();</script> </div> </body> </html>