CSS--头歌(educoder)实训作业题目及答案
admin 阅读: 2024-03-30
后台-插件-广告管理-内容页头部广告(手机) |
目录
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:丰富多彩的网页样式
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Hello Worldtitle>
- <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
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>O Captain! My Captain!title>
- <link rel="stylesheet" href="step2/CSS/style.css">
- <style type="text/css">
- h1 {
- color:darkblue;
- }
- img {
- float: left;
- margin-right: 1em;
- }
- style>
- head>
- <body>
- <div>
- <h1 style="color:cornflowerblue">O Captain! My Captain!h1>
- <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 keelem>, the vessel grim and daring;p>
- <p><small style="font-size:10px;color:lightslategray;">© Walt Whitmansmall>p>
- div>
- body>
- html>
CSS从入门到精通——基础选择器
第1关: CSS 元素选择器
- 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>精选新闻1li>
- <li>精选新闻2li>
- <li>精选新闻3li>
- section>
- <section>
- <h2>时事h2>
- <li>时事新闻1li>
- <li>时事新闻2li>
- <li>时事新闻3li>
- section>
- <section>
- <h2>财政h2>
- <li>财政新闻1li>
- <li>财政新闻2li>
- <li>财政新闻3li>
- section>
- <section>
- <h2>思想h2>
- <li>思想新闻1li>
- <li>思想新闻2li>
- <li>思想新闻3li>
- section>
- <section>
- <h2>生活h2>
- <li>生活新闻1li>
- <li>生活新闻2li>
- <li>生活新闻3li>
- section>
- div>
- <footer>Copyright (c) News Copyright Holder All Rights Reserved.footer>
- div>
- body>
- html>
第2关: CSS 类选择器
- 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>
- <div class = "newsSection">
- <section>
- <h2>精选h2>
- <li>精选新闻1li>
- <li>精选新闻2li>
- <li>精选新闻3li>
- section>
- <section>
- <h2>时事h2>
- <li>时事新闻1li>
- <li>时事新闻2li>
- <li>时事新闻3li>
- section>
- <section>
- <h2>财政h2>
- <li>财政新闻1li>
- <li>财政新闻2li>
- <li>财政新闻3li>
- section>
- <section>
- <h2>思想h2>
- <li>思想新闻1li>
- <li>思想新闻2li>
- <li>思想新闻3li>
- section>
- <section>
- <h2>生活h2>
- <li>生活新闻1li>
- <li>生活新闻2li>
- <li>生活新闻3li>
- section>
- div>
- <footer>Copyright (c) News Copyright Holder All Rights Reserved.footer>
- div>
- body>
- html>
第3关: CSS id选择器
- 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">
- <header id="menu">
- <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>精选新闻1li>
- <li>精选新闻2li>
- <li>精选新闻3li>
- section>
- <section>
- <h2 id="news">时事h2>
- <li>时事新闻1li>
- <li>时事新闻2li>
- <li>时事新闻3li>
- section>
- <section>
- <h2 id="finance">财政h2>
- <li>财政新闻1li>
- <li>财政新闻2li>
- <li>财政新闻3li>
- section>
- <section>
- <h2 id="think">思想h2>
- <li>思想新闻1li>
- <li>思想新闻2li>
- <li>思想新闻3li>
- section>
- <section>
- <h2 id="life">生活h2>
- <li>生活新闻1li>
- <li>生活新闻2li>
- <li>生活新闻3li>
- 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;
- }
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。
在线投稿:投稿 站长QQ:1888636
后台-插件-广告管理-内容页尾部广告(手机) |