《网页设计与制作》(DIV+CSS) 职业技术学院 信息工程系目录实训1:从基础开始 1实训2:摄影师个人布局 6实训3:生物研究中心布局 10实训4:教育公司布局 22实训1:从基础开始实训名称:成绩:实训日期:年月日实训报告日期:年月日一、实训目的1、掌握CSS的各种选择器及其各自的使用方法;2、掌握CSS的继承性与层叠特性以及它们的作用。二、实训容实例制作三、实训环境AdobeDreamweaverCS5四、实训步骤、过程1、动手体验CSS首先建立HTML文件,构建最简单的页面框架,其容包括标题和正文部分,每一个部分又分别处于不同的模块中,代码如下所示:<!DOCTYPEhtmlPUBLIC"-//W3C////EN""./TR/xhtml1/DTD/xhtml1-"><htmlxmlns="./1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>体验CSS</title><linkhref=""rel="stylesheet"type="text/css"/></head><body><h1>畅思网络</h1><imgsrc="Pictures/"width="128"height="128"><pid="p1">首先建立HTML文件,构建最简单的页面框架,其容包括标题和正文部分,每一个部分又分别处于不同的模块中。</p><pid="p2">首先建立HTML文件,构建最简单的页面框架,其容包括标题和正文部分,每一个部分又分别处于不同的模块中。</p></body></html>2、“交集”选择器“交集”复合选择器由两个选择器直接连接构成,其结果是选中二者各自元素围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格,必须连续书写。举例代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C////EN""./TR/xhtml1/DTD/xhtml1-"><htmlxmlns="./1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><styletype="text/css"><!--p{color:blue;}{color:red;}.special{color:#889900;}--></style></head><body><p>其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。</p><h3>其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。</h3><pclass="special">其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。</p><h3class="special">其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。</h3></body></html>:、类别选择器示例3、CSS的继承性CSS的继承指的是子标记会继承你标记的所有样式风格,并可以在父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式风格完全不会影响父标记。举例代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C////EN""./TR/xhtml1/DTD/xhtml1-"><htmlxmlns="./1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><styletype="text/css">h1{color:blue;text-decoration:underline;}em{color:#FF0000;}ululli{font-weight:bold;}</style></head><body><h1>前沿<em>WEB开发</em>教室</h1><ul><li>WEB设计与开发需要使用以下技术:<ul><li>HTML</li><li>CSS</li> <ul> <li>并可以在父标记样式风格的基础上再加以修改</li> <li>并可以在父标记
《网页设计与制作(div+css)》实训指导书 来自淘豆网m.daumloan.com转载请标明出处.
