实验4 CSS样式表一-CFANZ编程社区




实验要求	实验目标：熟练使用CSS三种基本的选择器熟练使用行内样式，内部样式表和外部样式表为HTML文档添加CSS样式熟练使用复合选择器为特定的网页元素添加CSS样式熟练使用高级选择器为网页元素添加CSS样式实验所需软件： Sublime_Text
实验内容	实验内容：练习—制作热点新闻需求说明按照效果图，使用三种基本选择器制作页面。练习—制作影视简介需求说明制作影视简介，标题使用<h2>标签，其他文本均放在段落标签<p>中，超链接使用<a>，图片使用<img> 使用内部引入CSS样式的方式为网页设置样式使用标签选择器设置标题h2的字体颜色为#003580 使用类选择器设置p段落的文字，字体为14px，颜色为#000033 使用类选择器设置p段落文字中的不同颜色值，从左到右颜色值分别为#F00、#1F87CC、#FAA53B 使用ID选择器设置第一张图片的宽度为600px，高度为200px 使用类选择器设置最后两张图片的宽度为300px，高度为150px 3.练习—制作开心餐厅页面需求说明使用外部引入CSS样式的方式完成页面样式的设置所有的文字放在段落标签中所有的标题放在<h2>标签中所有段落标签中的文本字体大小为14px 把body的后代元素h2字体设置为16px 使用类选择器设置第一个h2元素的字体颜色为红色使用通用兄弟选择器把第一个h2元素后面的所有兄弟h2元素设置为蓝色使用子选择器把第一张图片设置为宽度887px，高度为439px 4.练习-制作爱奇异视频播放列表需求说明使用无序列表来布局影视名称用标题标签文字描述使用p元素使用结构伪类选择器选择li元素下的标题元素，并设置字体大小为16px，字体颜色为#4D4D4D 使用结构伪类选择器选择li下第一个p元素，设置字体大小为14px，字体颜色为 #640000 使用结构伪类选择器选择li下第二个p元素，设置字体大小为12px，字体颜色为蓝色在style样式里添加li{display：inline-block;}
实验过程及结果	1.效果图代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>制作热点新闻</title> <style type="text/css"> h2 { font-size: 22px; color:#666; } li{ font-size:18px; color:#666; } .red{ font-size:20px; color:red; } #bg{ background: #f3f3f3; width:500px; } </style> </head> <body> <h2>热点新闻</h2> <hr color="red" size="5" width="90px" align="left"> <ul id="bg"> <li class="red">总书记为何强调这两个字？中国疫苗惠及世界</li> <li class="red">引领中国特色大国外交在变局中开新局每日一习话</li> <li>谢谢你的“手”护！ “安”然无恙！中国UP 相对论</li> <li>抓好“三农”工作的头等大事</li> <li>西安：防疫升级后的市民生活保障“应考尽考”</li> <li>探月精神：梦想在前方探索无止境</li> <li>完善监管，推动制度型高水平对外开放</li> </ul> </body> </html> 2. 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>制作影视简介</title> <style type="text/css"> h2{ color:#003580; } .word{ font-size:14px; color:#000033; } .red{ color:#F00; } .blue{ color:#1F87CC; } .yellow{ color:#FAA53B; } #picture{ width:600px; height:200px; } .picture{ width:300px; height:150px; } </style> </head> <body> <h2>《我和我的祖国》</h2> <p class="word">《我和我的祖国》是由 <a href="#" class="red">陈凯歌</a>担任总导演，<span class="blue">张一白、管虎、薛晓路、徐峥、宁浩、文牧野</span>联合执导<span class="yellow">黄渤、张译、吴京、杜江、葛优、刘昊然、陈飞宇、宋佳</span>领衔主演的剧情片，该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。2020年1月11日，首届“光影中国”电影荣誉盛典获得2019年度荣誉推介电影。2020年9月26日，该片获得第35届大众电影百花奖最佳影片奖。</p> <img src="images/1.jpg" alt="夺冠" title="夺冠" id="picture" /> <h2>夺冠</h2> <p class="word">1984年8月8日，中国女排在<a href="#" class="red">1984年洛杉矶奥运会</a>夺冠，首获世界大赛三连冠。而与此同时的上海石库门弄堂，黑白电视机摆在弄堂中间，前排马扎、中间椅子、后面踮起脚尖，邻居们层层叠叠聚在一起观看那场振奋人心的比赛，房顶的天线时不时需要有人手动寻找信号，每当中国队得分，欢呼声仿佛能穿破天际</p> <h4>主要演员</h4> <img src="images/2.jpg" alt="马伊P" title="马伊P" class="picture" /> <img src="images/3.jpg" alt="吴京" title="吴京" class="picture" /> </body> </html> 3.效果图代码1： p{ font-size:14px; } body h2{ font-size:16px; } .red{ color:red; } .active~h2{ color:blue; } p>img{ width:887px; height:439px; } 代码2： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>开心餐厅</title> <link rel="stylesheet" href="sty.css" /> </head> <body> <img src="game01.jpg" class="aaa" /><br /> <img src="game02.jpg" /><br /> <p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p> <img src="game03.jpg" /><br /> <h2 class="bbb">如何做菜?</h2> <p>1.点击餐厅中的炉灶，打开菜谱，选择自己要做的食物后，进行烹饪。不断点击炉灶，直到食物进入自动烹饪阶段；<br /> 2.每道菜所需要制作的步骤和烹饪的时间不一样，你可以根据自己的时间和偏好来进行选择，还会有各地特色食物供应哦；<br /> 3.烹饪完毕的食物要及时端到餐台上，否则过一段时间会腐坏；<br /> 4.食物放在餐台上后，服务员会自动端给顾客，顾客吃完后会付钱给你。 </p><br /> <h2>如何经营餐厅？</h2> <p>1.自己做老板，当大厨，雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少，工作的时间越短心情越好；好友间亲密度越高，可雇用的时间越长；<br /> 2.随着等级的升高，可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加；<br /> 3.餐桌椅的摆放位置也很有讲究，它会影响顾客和服务员行走路程。 </p><br /> <h2>如何吸引顾客？</h2> <p>1.美誉度决定了餐厅的客流量，美誉度高的时候来餐厅的顾客多，美誉度低的时候来餐厅的顾客少；<br /> 2.如果不需要等待，就能及时享用到食物，顾客就会满意地增加餐厅美誉度；与之相反，如果没有吃到食物就离开的顾客会降低美誉度；<br /> 3.总而言之，储备充足的食物、及时的服务、足够的餐桌椅是必不可少的！</p><br /> <h2>如何和好友互动？</h2> <p>1.不忍眼睁睁看好友餐厅的食物腐坏，那就帮忙端到餐台吧！自己还可以获得经验值奖励；<br /> 2.仓库里的东西可以赠送给好友，直接拖拽到礼物即可赠送；拖拽到收银即可出售。注意哦，每个级别能收到礼物的总价值是有上限的；<br /> 3.系统的额外食物奖励可和好友分享，把分享消息发布到开心网动态上，让朋友们一起感受快乐！每天最多可以从5位好友的餐厅领取免费食物，食物将被放入仓库的冷藏室里，可出售给系统，也可以拖到餐台上卖给顾客；<br /> 4.在好友需要帮助的时候，给予帮忙，当然啦，你也可以给好友捣捣乱、使使坏。作为奖励，你也会获得经验值和现金。</p><br /> <img src="game04.jpg"/><br /> <p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。步步精心经营，细心打理，我们都能成为餐饮大亨哦。 </p> </body> </html> 4.效果图代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>制作爱奇异视频播放列表</title> <style type="text/css"> .nav li{ display:inline-block; } .nav li>h3:first-of-type{ font-size:16px; color:#4D4D4D; } .nav li>p:first-of-type{ font-size:14px; color:#640000; } .nav li>p:nth-of-type(2){ font-size:12px; color:blue; } </style> </head> <body> <h2>热播</h2> <ul class="nav"> <li> <img src="images/img1.png" alt=" 神武赵子龙" title="神武赵子龙" /> <h3>神武赵子龙</h3> <p>怒，林更新不抱网红抱女神</p> <p>点击次数：242445次</p> </li> <li> <img src="images/img2.png" alt=" 旋风十一人" title="旋风十一人" /> <h3>旋风十一人</h3> <p>胡歌变教练在撩前女友</p> <p>点击次数：242445次</p> </li> <li> <img src="images/img3.png" alt=" 太阳的后裔" title="太阳的后裔" /> <h3>太阳的后裔</h3> <p>宋慧乔吃嫩草</p> <p>点击次数：242445次</p> </li> <li> <img src="images/img4.png" alt=" 山海经之赤影传说" title="山海经之赤影传说" /> <h3>山海经之赤影传说</h3> <p>娜扎张翰再度联手</p> <p>点击次数：242445次</p> </li> </ul> </body> </html>
实验总结	通过对第四章的学习，我对CSS有了一定的了解，并且用我所学到的三种基本选择器、CSS样式、复合选择器、高级选择器以及CSS三大特性可以将自己制作的一些网页进行美化。在网页样式设计时，有三种方法：行内样式，内部样式，外部样式。一般采用的是外部样式，它利于维护，方便复用，也实现了网页内容与样式分离。在行内样式>内部样式>外部样式所以选择器在设计样式时，显得非常重要。




实验要求	实验目标：熟练使用CSS三种基本的选择器熟练使用行内样式，内部样式表和外部样式表为HTML文档添加CSS样式熟练使用复合选择器为特定的网页元素添加CSS样式熟练使用高级选择器为网页元素添加CSS样式实验所需软件： Sublime_Text
实验内容	实验内容：练习—制作热点新闻需求说明按照效果图，使用三种基本选择器制作页面。练习—制作影视简介需求说明制作影视简介，标题使用<h2>标签，其他文本均放在段落标签<p>中，超链接使用<a>，图片使用<img> 使用内部引入CSS样式的方式为网页设置样式使用标签选择器设置标题h2的字体颜色为#003580 使用类选择器设置p段落的文字，字体为14px，颜色为#000033 使用类选择器设置p段落文字中的不同颜色值，从左到右颜色值分别为#F00、#1F87CC、#FAA53B 使用ID选择器设置第一张图片的宽度为600px，高度为200px 使用类选择器设置最后两张图片的宽度为300px，高度为150px 3.练习—制作开心餐厅页面需求说明使用外部引入CSS样式的方式完成页面样式的设置所有的文字放在段落标签中所有的标题放在<h2>标签中所有段落标签中的文本字体大小为14px 把body的后代元素h2字体设置为16px 使用类选择器设置第一个h2元素的字体颜色为红色使用通用兄弟选择器把第一个h2元素后面的所有兄弟h2元素设置为蓝色使用子选择器把第一张图片设置为宽度887px，高度为439px 4.练习-制作爱奇异视频播放列表需求说明使用无序列表来布局影视名称用标题标签文字描述使用p元素使用结构伪类选择器选择li元素下的标题元素，并设置字体大小为16px，字体颜色为#4D4D4D 使用结构伪类选择器选择li下第一个p元素，设置字体大小为14px，字体颜色为 #640000 使用结构伪类选择器选择li下第二个p元素，设置字体大小为12px，字体颜色为蓝色在style样式里添加li{display：inline-block;}
实验过程及结果	1.效果图代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>制作热点新闻</title> <style type="text/css"> h2 { font-size: 22px; color:#666; } li{ font-size:18px; color:#666; } .red{ font-size:20px; color:red; } #bg{ background: #f3f3f3; width:500px; } </style> </head> <body> <h2>热点新闻</h2> <hr color="red" size="5" width="90px" align="left"> <ul id="bg"> <li class="red">总书记为何强调这两个字？中国疫苗惠及世界</li> <li class="red">引领中国特色大国外交在变局中开新局每日一习话</li> <li>谢谢你的“手”护！ “安”然无恙！中国UP 相对论</li> <li>抓好“三农”工作的头等大事</li> <li>西安：防疫升级后的市民生活保障“应考尽考”</li> <li>探月精神：梦想在前方探索无止境</li> <li>完善监管，推动制度型高水平对外开放</li> </ul> </body> </html> 2. 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>制作影视简介</title> <style type="text/css"> h2{ color:#003580; } .word{ font-size:14px; color:#000033; } .red{ color:#F00; } .blue{ color:#1F87CC; } .yellow{ color:#FAA53B; } #picture{ width:600px; height:200px; } .picture{ width:300px; height:150px; } </style> </head> <body> <h2>《我和我的祖国》</h2> <p class="word">《我和我的祖国》是由 <a href="#" class="red">陈凯歌</a>担任总导演，<span class="blue">张一白、管虎、薛晓路、徐峥、宁浩、文牧野</span>联合执导<span class="yellow">黄渤、张译、吴京、杜江、葛优、刘昊然、陈飞宇、宋佳</span>领衔主演的剧情片，该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。2020年1月11日，首届“光影中国”电影荣誉盛典获得2019年度荣誉推介电影。2020年9月26日，该片获得第35届大众电影百花奖最佳影片奖。</p> <img src="images/1.jpg" alt="夺冠" title="夺冠" id="picture" /> <h2>夺冠</h2> <p class="word">1984年8月8日，中国女排在<a href="#" class="red">1984年洛杉矶奥运会</a>夺冠，首获世界大赛三连冠。而与此同时的上海石库门弄堂，黑白电视机摆在弄堂中间，前排马扎、中间椅子、后面踮起脚尖，邻居们层层叠叠聚在一起观看那场振奋人心的比赛，房顶的天线时不时需要有人手动寻找信号，每当中国队得分，欢呼声仿佛能穿破天际</p> <h4>主要演员</h4> <img src="images/2.jpg" alt="马伊P" title="马伊P" class="picture" /> <img src="images/3.jpg" alt="吴京" title="吴京" class="picture" /> </body> </html> 3.效果图代码1： p{ font-size:14px; } body h2{ font-size:16px; } .red{ color:red; } .active~h2{ color:blue; } p>img{ width:887px; height:439px; } 代码2： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>开心餐厅</title> <link rel="stylesheet" href="sty.css" /> </head> <body> <img src="game01.jpg" class="aaa" /><br /> <img src="game02.jpg" /><br /> <p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p> <img src="game03.jpg" /><br /> <h2 class="bbb">如何做菜?</h2> <p>1.点击餐厅中的炉灶，打开菜谱，选择自己要做的食物后，进行烹饪。不断点击炉灶，直到食物进入自动烹饪阶段；<br /> 2.每道菜所需要制作的步骤和烹饪的时间不一样，你可以根据自己的时间和偏好来进行选择，还会有各地特色食物供应哦；<br /> 3.烹饪完毕的食物要及时端到餐台上，否则过一段时间会腐坏；<br /> 4.食物放在餐台上后，服务员会自动端给顾客，顾客吃完后会付钱给你。 </p><br /> <h2>如何经营餐厅？</h2> <p>1.自己做老板，当大厨，雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少，工作的时间越短心情越好；好友间亲密度越高，可雇用的时间越长；<br /> 2.随着等级的升高，可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加；<br /> 3.餐桌椅的摆放位置也很有讲究，它会影响顾客和服务员行走路程。 </p><br /> <h2>如何吸引顾客？</h2> <p>1.美誉度决定了餐厅的客流量，美誉度高的时候来餐厅的顾客多，美誉度低的时候来餐厅的顾客少；<br /> 2.如果不需要等待，就能及时享用到食物，顾客就会满意地增加餐厅美誉度；与之相反，如果没有吃到食物就离开的顾客会降低美誉度；<br /> 3.总而言之，储备充足的食物、及时的服务、足够的餐桌椅是必不可少的！</p><br /> <h2>如何和好友互动？</h2> <p>1.不忍眼睁睁看好友餐厅的食物腐坏，那就帮忙端到餐台吧！自己还可以获得经验值奖励；<br /> 2.仓库里的东西可以赠送给好友，直接拖拽到礼物即可赠送；拖拽到收银即可出售。注意哦，每个级别能收到礼物的总价值是有上限的；<br /> 3.系统的额外食物奖励可和好友分享，把分享消息发布到开心网动态上，让朋友们一起感受快乐！每天最多可以从5位好友的餐厅领取免费食物，食物将被放入仓库的冷藏室里，可出售给系统，也可以拖到餐台上卖给顾客；<br /> 4.在好友需要帮助的时候，给予帮忙，当然啦，你也可以给好友捣捣乱、使使坏。作为奖励，你也会获得经验值和现金。</p><br /> <img src="game04.jpg"/><br /> <p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。步步精心经营，细心打理，我们都能成为餐饮大亨哦。 </p> </body> </html> 4.效果图代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>制作爱奇异视频播放列表</title> <style type="text/css"> .nav li{ display:inline-block; } .nav li>h3:first-of-type{ font-size:16px; color:#4D4D4D; } .nav li>p:first-of-type{ font-size:14px; color:#640000; } .nav li>p:nth-of-type(2){ font-size:12px; color:blue; } </style> </head> <body> <h2>热播</h2> <ul class="nav"> <li> <img src="images/img1.png" alt=" 神武赵子龙" title="神武赵子龙" /> <h3>神武赵子龙</h3> <p>怒，林更新不抱网红抱女神</p> <p>点击次数：242445次</p> </li> <li> <img src="images/img2.png" alt=" 旋风十一人" title="旋风十一人" /> <h3>旋风十一人</h3> <p>胡歌变教练在撩前女友</p> <p>点击次数：242445次</p> </li> <li> <img src="images/img3.png" alt=" 太阳的后裔" title="太阳的后裔" /> <h3>太阳的后裔</h3> <p>宋慧乔吃嫩草</p> <p>点击次数：242445次</p> </li> <li> <img src="images/img4.png" alt=" 山海经之赤影传说" title="山海经之赤影传说" /> <h3>山海经之赤影传说</h3> <p>娜扎张翰再度联手</p> <p>点击次数：242445次</p> </li> </ul> </body> </html>
实验总结	通过对第四章的学习，我对CSS有了一定的了解，并且用我所学到的三种基本选择器、CSS样式、复合选择器、高级选择器以及CSS三大特性可以将自己制作的一些网页进行美化。在网页样式设计时，有三种方法：行内样式，内部样式，外部样式。一般采用的是外部样式，它利于维护，方便复用，也实现了网页内容与样式分离。在行内样式>内部样式>外部样式所以选择器在设计样式时，显得非常重要。