头歌网页制作实训作业答案（CSS–头歌（educoder）实训作业题目及答案）
导读：目录...
目录
CSS——基础知识
第1关: 初识CSS：丰富多彩的网页样式
第2关: CSS样式引入方式
CSS——基础选择器
第1关: CSS 元素选择器
第2关: CSS 类选择器
第3关: CSS id选择器
CSS——文本与字体样式
第1关: 字体颜色 、类型与大小
第2关: 字体粗细与风格
第3关: 文本装饰与文本布局
CSS——背景样式
第1关: 背景颜色
第2关: 背景图片
第3关: 背景定位与背景关联
CSS——表格样式
第1关: 表格边框
第2关: 表格颜色 、文字与大小
CSS从入门到精通——基础知识
第1关: 初识CSS：丰富多彩的网页样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> <style type="text/css"> body { text-align: center; } h1 { /* ********** BEGIN ********** */ text-align: center; font-size: 40px; color: #62A8CB; /* ********** END ********** */ } img { height: 250px; } p { /* ********** BEGIN ********** */ color: grey; font-size: 18px; /* ********** END ********** */ } </style> </head> <body> <h1>CSS让网页样式更丰富</h1> <img src="https://www.educoder.net/attachments/download/189467"> <p>使用CSS(Cascading Style Sheets) ，可以使网页样式更加的丰富多彩 ，它解决内容与表现分离的问题 ，提高了工作效率 。</p> </body> </html>第2关: CSS样式引入方式
style.css ```CSS body { font-family: Times New Roman, Times, serif; } div { border: 1px solid #000; overflow: hidden; padding: 0 1em .25em; } h1 { color: green; } p { /* ********** BEGIN ********** */ font-weight: bold; /* ********** END ********** */ } ``` index.html ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>O Captain! My Captain!</title> <!-- ********** BEGIN ********** --> <link rel="stylesheet" href="step2/CSS/style.css"> <!-- ********** END ********** --> <style type="text/css"> h1 { color:darkblue; } img { float: left; margin-right: 1em; } </style> </head> <body> <div> <!-- ********** BEGIN ********** --> <h1 style="color:cornflowerblue">O Captain! My Captain!</h1> <!-- ********** END ********** --> <img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" /> <p>O Captain! my Captain! our fearful trip is done, The ship has weather’d every rack, the prize we sought is won, The port is near, the bells I hear, the people all exulting, While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p> <!-- ********** BEGIN ********** --> <p><small style="font-size:10px;color:lightslategray;">© Walt Whitman</small></p> <!-- ********** END ********** --> </div> </body> </html>CSS从入门到精通——基础选择器
第1关: CSS 元素选择器
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>类选择器</title> <style type="text/css"> /* ********** BEGIN ********** */ /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* ********** END ********** */ </style> </head> <body> <div> <header> <li><a href="#chosen">精选</a></li> <li><a href="#news">时事</a></li> <li><a href="#finance">财政</a></li> <li><a href="#think">思想</a></li> <li><a href="#life">生活</a></li> </header> <div> <section> <h2>精选</h2> <li>精选新闻1</li> <li>精选新闻2</li> <li>精选新闻3</li> </section> <section> <h2>时事</h2> <li>时事新闻1</li> <li>时事新闻2</li> <li>时事新闻3</li> </section> <section> <h2>财政</h2> <li>财政新闻1</li> <li>财政新闻2</li> <li>财政新闻3</li> </section> <section> <h2>思想</h2> <li>思想新闻1</li> <li>思想新闻2</li> <li>思想新闻3</li> </section> <section> <h2>生活</h2> <li>生活新闻1</li> <li>生活新闻2</li> <li>生活新闻3</li> </section> </div> <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer> </div> </body> </html>第2关: CSS 类选择器
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>类选择器</title> <style type="text/css"> /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* 类选择器 */ .main { margin: 10px; } /* ********** BEGIN ********** */ .newsSection{ margin-top: 20px; padding: 20px; background-color: white; } /* ********** END ********** */ </style> </head> <body> <div class="main"> <header> <li><a href="#chosen">精选</a></li> <li><a href="#news">时事</a></li> <li><a href="#finance">财政</a></li> <li><a href="#think">思想</a></li> <li><a href="#life">生活</a></li> </header> <!-- ********** BEGIN ********** --> <div class = "newsSection"> <!-- ********** END ********** --> <section> <h2>精选</h2> <li>精选新闻1</li> <li>精选新闻2</li> <li>精选新闻3</li> </section> <section> <h2>时事</h2> <li>时事新闻1</li> <li>时事新闻2</li> <li>时事新闻3</li> </section> <section> <h2>财政</h2> <li>财政新闻1</li> <li>财政新闻2</li> <li>财政新闻3</li> </section> <section> <h2>思想</h2> <li>思想新闻1</li> <li>思想新闻2</li> <li>思想新闻3</li> </section> <section> <h2>生活</h2> <li>生活新闻1</li> <li>生活新闻2</li> <li>生活新闻3</li> </section> </div> <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer> </div> </body> </html>第3关: CSS id选择器
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>类选择器</title> <style type="text/css"> /* 元素选择器 */ html { background-color: #F0F0F0; } header { padding: 40px; background-color: white; } footer { margin-top: 20px; font-size: 0.6em; color: grey; } /* 类选择器 */ .main { margin: 10px; } .newsSection { margin-top: 20px; padding: 20px; background-color: white; } /* ********** BEIGN ********** */ /*选择menu元素下的li子元素*/ #menu li { float: left; width: 70px; font-size: 1.2em; font-weight: lighter; } #menu li, li a { list-style: none; text-decoration: none; } #chosen { color: red; } #news { color:blue; } #finance { color:olive; } #think { color:green; } #life { color:orange; } /* ********** END ********** */ </style> </head> <body> <div class="main"> <!-- ********** BEGIN ********** --> <header id="menu"> <!-- ********** END ********** --> <li><a href="#chosen">精选</a></li> <li><a href="#news">时事</a></li> <li><a href="#finance">财政</a></li> <li><a href="#think">思想</a></li> <li><a href="#life">生活</a></li> </header> <div class="newsSection"> <section> <h2 id="chosen">精选</h2> <li>精选新闻1</li> <li>精选新闻2</li> <li>精选新闻3</li> </section> <section> <h2 id="news">时事</h2> <li>时事新闻1</li> <li>时事新闻2</li> <li>时事新闻3</li> </section> <section> <h2 id="finance">财政</h2> <li>财政新闻1</li> <li>财政新闻2</li> <li>财政新闻3</li> </section> <section> <h2 id="think">思想</h2> <li>思想新闻1</li> <li>思想新闻2</li> <li>思想新闻3</li> </section> <section> <h2 id="life">生活</h2> <li>生活新闻1</li> <li>生活新闻2</li> <li>生活新闻3</li> </section> </div> <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer> </div> </body> </html>CSS从入门到精通——文本与字体样式
第1关: 字体颜色 、类型与大小
body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #7ECABA, #E2FCCB); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #7ECABA, #E2FCCB); /* 标准的语法 */ font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /*居中页面*/ width: 45em; margin: 0 auto; } h1, h2 { /* ********** BEGIN ***********/ font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /* ********** END ***********/ } h1 { /* ********** BEGIN ***********/ font-size: 2.1875em; /* 35px/16px */ /* ********** END ************/ } h2 { background-color: #eaebef; /* ********** BEGIN ***********/ color: #7d717c; /* 使用em的方式设置h2元素为 28px 的字体大小 */ font-size: 1.75em; /*28px/16px */ /* ********** END ************/ } h3 { background-color: white; /* ********** BEGIN ***********/ font-size: 1.25em; color: green; /* ********** END ************/ padding-left: 10px; } hr { height: 1px; border: none; border-top: 2px dashed #88b2d2; } footer { margin: 10px auto; } /* CONTENT ----------------------------------- */ .architect { background-color: #fff; padding: 1.5em 1.75em; } /* :::: Intro ::::: */ .intro { background-color: #888888; /* ********** BEGIN ***********/ color: #fefefe; /* ********** END ************/ padding: 1px 1.875em .7em; } .intro .subhead { /* ********** BEGIN ***********/ font-size: 1.125em; /* ********** END ************/ } .intro p { font-size: 1.0625em; } /* :::: chapter Descriptions ::::: */ .chapter p { font-size: .9375em; } img { border-radius: 8px; } /* :::: Links :::: */ a:link { color: #e10000; } a:visited { color: #b44f4f; } a:hover { color: #f00; } .intro a { color: #fdb09d; } .intro a:hover { color: #fec4b6; }第2关: 字体粗细与风格
body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #7ECABA, #E2FCCB); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #7ECABA, #E2FCCB); /* 标准的语法 */ font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /*居中页面*/ width: 45em; margin: 0 auto; } h1, h2 { /* 设置h1, h2 的font-family*/ font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /* ********** BEGIN ***********/ font-weight: normal; /* ********** END ***********/ } h1 { /* 设置h1元素为 35px 的字体大小 */ font-size: 2.1875em; /* 35px/16px */ } h2 { background-color: #eaebef; /* 设置h2元素的字体颜色为：#7d717c */ color: #7d717c; /* 使用em的方式设置h2元素为 28px 的字体大小 */ font-size: 1.75em; /*28px/16px */ } h3 { background-color: white; /* 使用em的方式设置h3元素为 20px 的字体大小 */ font-size: 1.25em; /* 设置h3元素的字体颜色为：green */ color: green; padding-left: 10px; } hr { height: 1px; border: none; border-top: 2px dashed #88b2d2; } /* 子选择器 */ em, a:link, .intro .subhead { font-weight: bold; } footer { /* ********** BEGIN ***********/ font-weight: light; font-style: italic; /* ********** END ***********/ margin: 10px auto; } footer a { font-style: normal; } /* CONTENT ----------------------------------- */ .architect { background-color: #fff; padding: 1.5em 1.75em; } /* :::: Intro ::::: */ .intro { background-color: #888888; /* 设置 .intro 类元素的字体颜色为 #fefefe */ color: #fefefe; padding: 1px 1.875em .7em; } .intro .subhead { /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小 。 */ font-size: 1.125em; } .intro p { font-size: 1.0625em; } /* :::: chapter Descriptions ::::: */ .chapter p { font-size: .9375em; } img { border-radius: 8px; } /* :::: Links :::: */ a:link { /* 设置 a:link 元素的字体颜色为 #b44f4f */ color: #e10000; } a:visited { color: #b44f4f; } a:hover { color: #f00; } .intro a { color: #fdb09d; } .intro a:hover { color: #fec4b6; }第3关: 文本装饰与文本布局
body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #7ECABA, #E2FCCB); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #7ECABA, #E2FCCB); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #7ECABA, #E2FCCB); /* 标准的语法 */ font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; /*居中页面*/ width: 45em; margin: 0 auto; } h1, h2 { font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; font-weight: normal; /*********** BEGIN ***********/ text-align: center; /************ END ************/ } h1 { /* 设置h1元素为 35px 的字体大小 */ font-size: 2.1875em; /* 35px/16px */ } h2 { background-color: #eaebef; /* 设置h2元素的字体颜色为：#7d717c */ color: #7d717c; /* 使用em的方式设置h2元素为 28px 的字体大小 */ font-size: 1.75em; /*28px/16px */ } h3 { background-color: white; /* 使用em的方式设置h3元素为 20px 的字体大小 */ font-size: 1.25em; /* 设置h3元素的字体颜色为：green */ color: green; padding-left: 10px; /*********** BEGIN ***********/ text-align: left; /************ END ************/ } p { /*********** BEGIN ***********/ text-align: justify; /************ END ************/ } hr { height: 1px; border: none; border-top: 2px dashed #88b2d2; } /* 子选择器 */ em, a:link, .intro .subhead { font-weight: bold; } footer { font-weight: light; font-style: italic; /* ********** BEGIN ***********/ text-align: center; /* ********** END ***********/ margin: 10px auto; } footer a { font-style: normal; } /* CONTENT ----------------------------------- */ .architect { background-color: #fff; padding: 1.5em 1.75em; } /* :::: Intro ::::: */ .intro { background-color: #888888; /* 设置 .intro 类元素的字体颜色为 #fefefe */ color: #fefefe; padding: 1px 1.875em .7em; } .intro .subhead { /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小 。 */ font-size: 1.125em; text-align: center; } .intro p { font-size: 1.0625em; } /* :::: chapter Descriptions ::::: */ .chapter p { font-size: .9375em; } .photos { /*********** BEGIN ***********/ text-align: center; /*********** END *************/ } img { border-radius: 8px; } /* :::: Links :::: */ /* 默认显示样式 */ a:link { color: #e10000; /*********** BEGIN ***********/ text-decoration: none; /*********** END *************/ } a:visited { color: #b44f4f; } /* 鼠标放在上面的显示样式 */ a:hover { color: #f00; /*********** BEGIN ***********/ text-decoration: underline; /*********** END *************/ } .intro a { color: #fdb09d; } .intro a:hover { color: #fec4b6; }CSS从入门到精通——背景样式
第1关: 背景颜色
/* ********** BEGIN ********** */ body { background-color: ivory; } /* ********** END ********** */ h1 { font-size: 40px; text-align: center; } p { font-size: 18px; color:grey; /* ********** BEGIN ********** */ background-color: lightblue; /* ********** END ********** */ }第2关: 背景图片
body { /* ********** BEGIN ********** */ /*设置背景图片*/ background-image: url("https://www.educoder.net/attachments/download/211106") /*设置背景图片模式*/ /* ********** END ********** */ } div { width: 90%; height: 100%; margin: auto; }第3关: 背景定位与背景关联
body { margin-right: 200px; /* ********** BEGIN ********** */ /*设置背景图片*/ background: url("https://www.educoder.net/attachments/download/211104") no-repeat fixed right top; /* ********** END ********** */ } div { width: 90%; height: 100%; margin: auto; }CSS入门到精通——表格样式
第1关: 表格边框
table { /* ********** BEGIN ********** */ border-collapse: collapse; border: 2px solid black; /* ********** END ********** */ } th, td { padding: .5em .75em; } th { /* ********** BEGIN ********** */ border: 1px solid grey; /* ********** END ********** */ } td { /* ********** BEGIN ********** */ border: 1px dotted grey ; /* ********** END ********** */ }第2关: 表格颜色 、文字与大小
table { border-collapse: collapse; border: 2px solid black; } caption { /* ********** BEGIN ********** */ font-weight: bold; font-size: 20px; height: 40px; /* ********** END ********** */ } th, td { /* ********** BEGIN ********** */ width: 100px; height: 50px; text-align: center; /* ********** END ********** */ } th { /* ********** BEGIN ********** */ border: 1px solid white; background: lightseagreen; color: white; /* ********** END ********** */ } td { border: 1px solid grey; }创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！