实验指导书3

《实验指导书3》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、实验3基于DIV+CSS的布局的网页设计实验目的：1、掌握CSS样式的三种基本类型；2、掌握CSS的基本语法；3、掌握使用CSS设计背景、文字、图片、链接、表单、表格等效果；4、进一步理解HTML代码；5、掌握项目列表的应用6、掌握DIV的应用实验内容：1、学会三种CSS样式的应用；2、掌握项目列表和DIV的应用；实验步骤：一、站点建立1、在D盘新建一个文件夹，文件夹命名为班级+序号+姓名+实验3。运行DW,建立一个本地站点，该站点对应于而面创建的文件夹。2、站点建立后，务必注意将索材中的images文件夹复制到站点下。二

2、、基于DIV+CSS的网页制作1、在站点中新建文件，命名为Ol.htmlo网页按照效果图图1的样子制作。要求:1）正确应用项目列表。2）应用CSS样式，实现图1所示的网页效果。3）应用CSS样式，实现鼠标上移超链接文本后，文字变色的效果。2、在站点屮新建文件，命名为02.htmlo网页按照效果图图2的样子制作。要求:1）综合应用vdiv＞、vp＞、va＞、＜span＞＞vul＞、vli＞等网页元素。2）深入理解block和inline两大类网页元素的区别。3）合理应用CSS样式进行网页排版。回朗经汽车房产A股捋備刪i水重»

3、3/＞8%大盘践回股指媛1曼企思黄金板块逆市上滋港股后市堪优H3K市皙停交易中IE万亿吳＜8戒面临缩水日轻指数收低七H障团发联合声明亦爲保证金港标晋戒再降类信用评级填及慰市跌至两年东量低克默多兗传媒帝国经济根基珀固G7阁5讨关国园惯阵级同題筋易俣护约旷中田碾”欧洲央行出手购入怠色两ES«以色列股市7日務践发改委称成品油价皆不貝备下调条件•一汽大众龜缩二43经糖裔英菲尼迪首款车M系前7月北京轰宅成交逆市増两成李嘉诵称维续看好内地《!市示刃耒曲购城市外堆人购房首奪房贷利率北京外资辗石能打折1）应用DIV+CSS排版,要求排版工

4、整，布局美观。2）合理应用CSS样式,设置右边的项口列表。3）合理使用CSS样式,设置象鼻山图片靠左。3、新建文档，命名为03.html,完成如图3所示的页面。要求:4）合理使用CSS样式，设置七星山图片靠右。oO■訴斤O"历更oMOJfio眈"o椅韓山*诗词otunaO名人站片o巻R蔓S）I驳乩•A參心■力--■«•IM皐中MtHt力•弘疋4一■天7Wj»EISAiNMA.万•山乃♦夭下・Z9.9・4中■乃至世界■養的・«•■■力B»・・R・・W£L凤丸力QWXU享JM•窗山■、水*JW、石

5、

6、・毗-Z9・4".目”現•

7、©叱WXU—・Y＜W：S•-••测I■力W色・ttttttfrge■目rtE丰比・・•炖赳走專・换內堆幣KP，厲仪冬*・四•晒曲■祚債SM他，Ad«xaeMffiKME・山必誉裕WMMm.•轨删宾滋■徧•■ima的厦••希.天下决的豪山■田・■£鼻6.■蓦・徨It悼矗贵总越*0厂..U«＜^OG•和1e«.早知8氏的爾片確越舉鏡刃皿安力*0•尢&贵月.±M.4W3tfi6W注斤■■・0«了父0和？・■•月段了舷.B2^»±»Ail*£(5O■琴a5*E【Z•两辽皿•区【“】►■山•X>A>(U)♦逆外阳30文纽&昵两全总5

8、■•梅就了山水血匕ItWSW.■刁会H、历更文化.・•Kra（tjR・科色的域用・力•桩林布币丹大力"厲怖业•BWk3f«林式粒n,宕上百万人次.iru^«n-dflGtt賽IFF次宙•，披■©的冷g布•期市”・“CDA卫生JT巧理W市”・*力城市-和•中flWWWaW・佗境含人Ml住韋砂XB・•W工ft交.0瞬占4、新建文档，命名为04.html,完成如图4所示的网页，要求如下:1）应用div+CSS排版2）两个菜单均用项口列标实现8冃29日億顶佶之王內测正貳幵始iHAHM脸;URIHtlVia魔兽祂屛:严htt丽呗内耐

9、&申话QO之JL蛰今为1L的故$图45、新建文档，命名为05.html,完成如图5所示的页面。要求：1）页面属性设置：margin为0,字体为10pt,bgcolor为灰色。2）全部应用CSS+DIV布局。3）合理应用各种CSS样式，要求制作美观。4）“本人收藏……”等文字耍求自下而上进行滚动。5）文本“上一页”，“下一页”Z间的距离为20像素。6）实现多种样式的超链接■设置“四叶草”为空链接，链接样式：a:link,aivisited为黑色，无下划线，a:hover为红色有下划线。■设置“下一页”为空链接，链接样式：a:

10、link,a:visited为灰色，无下划线，a:hover为蓝色无卜•划线。BENLY393.NEASE.NETfT&iS"・《A・fl«iRM«■•“・•・«r«ir人“・・■戏it・t-wr-w图5实验要求：1