软件系统定制开发CSS--头歌（educoder）实训作业题目及答案

目录

CSS软件系统定制开发从入门到精通——基础知识

第1关: 初识CSS：软件系统定制开发丰富多彩的网页样式

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Hello World</title>
  6.     <style type="text/css">
  7.       body {
  8.         text-align: center;
  9.       }
  10.  
  11.       h1 {
  12. 	   /* ********** BEGIN ********** */
  13.         text-align: center;
  14.         font-size: 40px;
  15.         color: #62A8CB;
  16. 	  /* ********** END ********** */
  17.       }
  18.  
  19.       img {
  20.         height: 250px;
  21.       }
  22.  
  23.       p {
  24. 	   /* ********** BEGIN ********** */
  25.         color: grey;
  26.         font-size: 18px;
  27. 	    /* ********** END ********** */
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <h1>CSS软件系统定制开发让网页样式更丰富</h1>
  33.     <img src="https://www.educoder.net/attachments/download/189467">
  34.     <p>使用CSS(Cascading Style Sheets)，软件系统定制开发可以使网页样式更加的丰富多彩，软件系统定制开发它解决内容与表现分离的问题，提高了工作效率。</p>
  35.   </body>
  36. </html>

第2关: CSS样式引入方式

  1. style.css
  2.  
  3. ```CSS
  4. body {
  5.     font-family: 'Times New Roman', Times, serif;
  6. }
  7.  
  8. div {
  9.     border: 1px solid #000;
  10.     overflow: hidden;
  11.     padding: 0 1em .25em;
  12. }
  13.  
  14. h1 {
  15.     color: green;
  16. }
  17.  
  18. p {
  19. 	/* ********** BEGIN ********** */
  20.     font-weight: bold;
  21. 	/* ********** END ********** */
  22. }
  23.  
  24. ```
  25.  
  26.  
  27. index.html
  28.  
  29. ```html
  30. <!DOCTYPE html>
  31. <html>
  32.  
  33. <head>
  34.     <meta charset="utf-8">
  35.     <title>O Captain! My Captain!</title>
  36. 	<!-- ********** BEGIN ********** -->
  37.     <link rel="stylesheet" href="step2/CSS/style.css">
  38. 	<!-- ********** END ********** -->
  39.     <style type="text/css">
  40.       h1 {
  41.         color:darkblue;
  42.       }
  43.  
  44.       img {
  45.         float: left;
  46.         margin-right: 1em;
  47.       }
  48.     </style>
  49. </head>
  50.  
  51. <body>
  52.     <div>
  53. 		<!-- ********** BEGIN ********** -->
  54.         <h1 style="color:cornflowerblue">O Captain! My Captain!</h1>
  55.         <!-- ********** END ********** -->
  56.         <img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
  57.         <p>O Captain! my Captain! our fearful trip is done,
  58. The ship has weather’d every rack, the prize we sought is won,
  59. The port is near, the bells I hear, the people all exulting,
  60. While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p>
  61. 		<!-- ********** BEGIN ********** -->
  62.         <p><small style="font-size:10px;color:lightslategray;">&copy; Walt Whitman</small></p>
  63. 		<!-- ********** END ********** -->
  64.     </div>
  65. </body>
  66.  
  67. </html>

CSS从入门到精通——基础选择器

第1关: CSS 元素选择器

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>类选择器</title>
  8.   <style type="text/css">
  9. 	/* ********** BEGIN ********** */
  10.     /* 元素选择器 */
  11.     html {
  12.       background-color: #F0F0F0;
  13.     }
  14.     header {
  15.       padding: 40px;
  16.       background-color: white;
  17.     }
  18.     footer {
  19.       margin-top: 20px;
  20.       font-size: 0.6em;
  21.       color: grey;
  22.     }
  23. 	/* ********** END ********** */
  24.   </style>
  25. </head>
  26. <body>
  27.  
  28. <div>
  29.  
  30.   <header>
  31.     <li><a href="#chosen">精选</a></li>
  32.     <li><a href="#news">时事</a></li>
  33.     <li><a href="#finance">财政</a></li>
  34.     <li><a href="#think">思想</a></li>
  35.     <li><a href="#life">生活</a></li>
  36.   </header>
  37.  
  38.   <div>
  39.     <section>
  40.       <h2>精选</h2>
  41.       <li>精选新闻1</li>
  42.       <li>精选新闻2</li>
  43.       <li>精选新闻3</li>
  44.     </section>
  45.     <section>
  46.       <h2>时事</h2>
  47.       <li>时事新闻1</li>
  48.       <li>时事新闻2</li>
  49.       <li>时事新闻3</li>
  50.     </section>
  51.     <section>
  52.       <h2>财政</h2>
  53.       <li>财政新闻1</li>
  54.       <li>财政新闻2</li>
  55.       <li>财政新闻3</li>
  56.     </section>
  57.     <section>
  58.       <h2>思想</h2>
  59.       <li>思想新闻1</li>
  60.       <li>思想新闻2</li>
  61.       <li>思想新闻3</li>
  62.     </section>
  63.     <section>
  64.       <h2>生活</h2>
  65.       <li>生活新闻1</li>
  66.       <li>生活新闻2</li>
  67.       <li>生活新闻3</li>
  68.     </section>
  69.   </div>
  70.  
  71.   <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
  72.  
  73. </div>
  74.  
  75. </body>
  76. </html>

第2关: CSS 

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>类选择器</title>
  8.   <style type="text/css">
  9.     /* 元素选择器 */
  10.     html {
  11.       background-color: #F0F0F0;
  12.     }
  13.     header {
  14.       padding: 40px;
  15.       background-color: white;
  16.     }
  17.     footer {
  18.       margin-top: 20px;
  19.       font-size: 0.6em;
  20.       color: grey;
  21.     }
  22.     /* 类选择器 */
  23.     .main {
  24.       margin: 10px;
  25.     }
  26. 	/* ********** BEGIN ********** */
  27. 	.newsSection{
  28.     	margin-top: 20px;
  29.         padding: 20px;
  30.         background-color: white;
  31.     }
  32.  
  33.  
  34.     /* ********** END ********** */
  35.   </style>
  36. </head>
  37. <body>
  38. <div class="main">
  39.   <header>
  40.     <li><a href="#chosen">精选</a></li>
  41.     <li><a href="#news">时事</a></li>
  42.     <li><a href="#finance">财政</a></li>
  43.     <li><a href="#think">思想</a></li>
  44.     <li><a href="#life">生活</a></li>
  45.   </header>
  46.   <!-- ********** BEGIN ********** -->
  47.   <div class = "newsSection">
  48.   <!-- ********** END ********** -->      
  49.     <section>
  50.       <h2>精选</h2>
  51.       <li>精选新闻1</li>
  52.       <li>精选新闻2</li>
  53.       <li>精选新闻3</li>
  54.     </section>
  55.     <section>
  56.       <h2>时事</h2>
  57.       <li>时事新闻1</li>
  58.       <li>时事新闻2</li>
  59.       <li>时事新闻3</li>
  60.     </section>
  61.     <section>
  62.       <h2>财政</h2>
  63.       <li>财政新闻1</li>
  64.       <li>财政新闻2</li>
  65.       <li>财政新闻3</li>
  66.     </section>
  67.     <section>
  68.       <h2>思想</h2>
  69.       <li>思想新闻1</li>
  70.       <li>思想新闻2</li>
  71.       <li>思想新闻3</li>
  72.     </section>
  73.     <section>
  74.       <h2>生活</h2>
  75.       <li>生活新闻1</li>
  76.       <li>生活新闻2</li>
  77.       <li>生活新闻3</li>
  78.     </section>
  79.   </div>
  80.   
  81.   <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
  82. </div>
  83.  
  84. </body>
  85. </html>

第3关: CSS 

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>类选择器</title>
  8.   
  9.   <style type="text/css">
  10.     /* 元素选择器 */
  11.     html {
  12.       background-color: #F0F0F0;
  13.     }
  14.     header {
  15.       padding: 40px;
  16.       background-color: white;
  17.     }
  18.     footer {
  19.       margin-top: 20px;
  20.       font-size: 0.6em;
  21.       color: grey;
  22.     }
  23.  
  24.     /* 类选择器 */
  25.     .main {
  26.       margin: 10px;
  27.     }
  28.     .newsSection {
  29.       margin-top: 20px;
  30.       padding: 20px;
  31.       background-color: white;
  32.     }
  33. 	/* ********** BEIGN ********** */
  34.  
  35.     /*选择menu元素下的li子元素*/
  36.     #menu li {
  37.       float: left;
  38.       width: 70px;
  39.       font-size: 1.2em;
  40.       font-weight: lighter;
  41.     }
  42.  
  43.     #menu li, li a {
  44.       list-style: none;
  45.       text-decoration: none;
  46.     }
  47.  
  48.     #chosen {
  49.       color: red;
  50.     }
  51.     #news {
  52.       color:blue;
  53.     }
  54.     #finance {
  55.       color:olive;
  56.     }
  57.     #think {
  58.       color:green;
  59.     }
  60.     #life {
  61.       color:orange;
  62.     }
  63. 	 /* ********** END ********** */
  64.   </style>
  65. </head>
  66. <body>
  67. <div class="main">
  68.   <!-- ********** BEGIN ********** -->
  69.   <header id="menu">
  70.   <!-- ********** END ********** -->
  71.     <li><a href="#chosen">精选</a></li>
  72.     <li><a href="#news">时事</a></li>
  73.     <li><a href="#finance">财政</a></li>
  74.     <li><a href="#think">思想</a></li>
  75.     <li><a href="#life">生活</a></li>
  76.   </header>
  77.  
  78.   <div class="newsSection">
  79.     <section>
  80.       <h2 id="chosen">精选</h2>
  81.       <li>精选新闻1</li>
  82.       <li>精选新闻2</li>
  83.       <li>精选新闻3</li>
  84.     </section>
  85.     <section>
  86.       <h2 id="news">时事</h2>
  87.       <li>时事新闻1</li>
  88.       <li>时事新闻2</li>
  89.       <li>时事新闻3</li>
  90.     </section>
  91.     <section>
  92.       <h2 id="finance">财政</h2>
  93.       <li>财政新闻1</li>
  94.       <li>财政新闻2</li>
  95.       <li>财政新闻3</li>
  96.     </section>
  97.     <section>
  98.       <h2 id="think">思想</h2>
  99.       <li>思想新闻1</li>
  100.       <li>思想新闻2</li>
  101.       <li>思想新闻3</li>
  102.     </section>
  103.     <section>
  104.       <h2 id="life">生活</h2>
  105.       <li>生活新闻1</li>
  106.       <li>生活新闻2</li>
  107.       <li>生活新闻3</li>
  108.     </section>
  109.   </div>
  110.   <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
  111. </div>
  112.  
  113. </body>
  114. </html>

CSS从入门到精通——文本与字体样式

第1关: 字体颜色、类型与大小

  1. body {
  2.     /*背景渐变*/
  3.     background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
  4.     /* Safari 5.1 - 6.0 */
  5.     background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
  6.     /* Opera 11.1 - 12.0 */
  7.     background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
  8.     /* Firefox 3.6 - 15 */
  9.     background: linear-gradient(to right, #7ECABA, #E2FCCB);
  10.     /* 标准的语法 */
  11.     font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  12.     /*居中页面*/
  13.     width: 45em;
  14.     margin: 0 auto;
  15. }
  16.  
  17. h1,
  18. h2 {
  19.     /* ********** BEGIN ***********/
  20.     font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  21.     /* ********** END ***********/
  22. }
  23.  
  24. h1 {
  25.     /* ********** BEGIN ***********/
  26.     font-size: 2.1875em;
  27.     /* 35px/16px */
  28.     /* ********** END ************/
  29. }
  30.  
  31. h2 {
  32.     background-color: #eaebef;
  33.     /* ********** BEGIN ***********/
  34.     color: #7d717c;
  35.     /* 使用em的方式设置h2元素为 28px 的字体大小 */
  36.     font-size: 1.75em;
  37.     /*28px/16px */
  38.     /* ********** END ************/
  39. }
  40.  
  41. h3 {
  42.     background-color: white;
  43.     /* ********** BEGIN ***********/
  44.     font-size: 1.25em;
  45.     color: green;
  46.     /* ********** END ************/
  47.     padding-left: 10px;
  48. }
  49.  
  50. hr {
  51.     height: 1px;
  52.     border: none;
  53.     border-top: 2px dashed #88b2d2;
  54. }
  55.  
  56. footer {
  57.     margin: 10px auto;
  58. }
  59.  
  60. /* CONTENT
  61. ----------------------------------- */
  62.  
  63. .architect {
  64.     background-color: #fff;
  65.     padding: 1.5em 1.75em;
  66. }
  67.  
  68. /* :::: Intro ::::: */
  69.  
  70. .intro {
  71.     background-color: #888888;
  72.     /* ********** BEGIN ***********/
  73.     color: #fefefe;
  74.     /* ********** END ************/
  75.     padding: 1px 1.875em .7em;
  76. }
  77.  
  78. .intro .subhead {
  79.     /* ********** BEGIN ***********/
  80.     font-size: 1.125em;
  81.     /* ********** END ************/
  82. }
  83.  
  84. .intro p {
  85.     font-size: 1.0625em;
  86. }
  87.  
  88. /* :::: chapter Descriptions ::::: */
  89.  
  90. .chapter p {
  91.     font-size: .9375em;
  92. }
  93.  
  94. img {
  95.     border-radius: 8px;
  96. }
  97.  
  98. /* :::: Links :::: */
  99.  
  100. a:link {
  101.     color: #e10000;
  102. }
  103.  
  104. a:visited {
  105.     color: #b44f4f;
  106. }
  107.  
  108. a:hover {
  109.     color: #f00;
  110. }
  111.  
  112. .intro a {
  113.     color: #fdb09d;
  114. }
  115.  
  116. .intro a:hover {
  117.     color: #fec4b6;
  118. }

第2关: 字体粗细与风格

  1. body {
  2.     /*背景渐变*/
  3.     background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
  4.     /* Safari 5.1 - 6.0 */
  5.     background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
  6.     /* Opera 11.1 - 12.0 */
  7.     background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
  8.     /* Firefox 3.6 - 15 */
  9.     background: linear-gradient(to right, #7ECABA, #E2FCCB);
  10.     /* 标准的语法 */
  11.     font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  12.     /*居中页面*/
  13.     width: 45em;
  14.     margin: 0 auto;
  15. }
  16.  
  17. h1,
  18. h2 {
  19.     /* 设置h1, h2 的font-family*/
  20.     font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  21.     /* ********** BEGIN ***********/
  22.     font-weight: normal;
  23.     /* ********** END ***********/
  24. }
  25.  
  26. h1 {
  27.     /* 设置h1元素为 35px 的字体大小 */
  28.     font-size: 2.1875em;
  29.     /* 35px/16px */
  30. }
  31.  
  32. h2 {
  33.     background-color: #eaebef;
  34.     /* 设置h2元素的字体颜色为：#7d717c */
  35.     color: #7d717c;
  36.     /* 使用em的方式设置h2元素为 28px 的字体大小 */
  37.     font-size: 1.75em;
  38.     /*28px/16px */
  39. }
  40.  
  41. h3 {
  42.     background-color: white;
  43.     /* 使用em的方式设置h3元素为 20px 的字体大小 */
  44.     font-size: 1.25em;
  45.     /* 设置h3元素的字体颜色为：green */
  46.     color: green;
  47.     padding-left: 10px;
  48. }
  49.  
  50. hr {
  51.     height: 1px;
  52.     border: none;
  53.     border-top: 2px dashed #88b2d2;
  54. }
  55.  
  56. /* 子选择器 */
  57.  
  58. em,
  59. a:link,
  60. .intro .subhead {
  61.     font-weight: bold;
  62. }
  63.  
  64. footer {
  65.     /* ********** BEGIN ***********/
  66.     font-weight: light;
  67.     font-style: italic;
  68.     /* ********** END ***********/
  69.     margin: 10px auto;
  70. }
  71.  
  72. footer a {
  73.     font-style: normal;
  74. }
  75.  
  76. /* CONTENT
  77. ----------------------------------- */
  78.  
  79. .architect {
  80.     background-color: #fff;
  81.     padding: 1.5em 1.75em;
  82. }
  83.  
  84. /* :::: Intro ::::: */
  85.  
  86. .intro {
  87.     background-color: #888888;
  88.     /* 设置 .intro 类元素的字体颜色为 #fefefe */
  89.     color: #fefefe;
  90.     padding: 1px 1.875em .7em;
  91. }
  92.  
  93. .intro .subhead {
  94.     /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */
  95.     font-size: 1.125em;
  96. }
  97.  
  98. .intro p {
  99.     font-size: 1.0625em;
  100. }
  101.  
  102. /* :::: chapter Descriptions ::::: */
  103.  
  104. .chapter p {
  105.     font-size: .9375em;
  106. }
  107.  
  108. img {
  109.     border-radius: 8px;
  110. }
  111.  
  112. /* :::: Links :::: */
  113.  
  114. a:link {
  115.     /* 设置 a:link 元素的字体颜色为 #b44f4f */
  116.     color: #e10000;
  117. }
  118.  
  119. a:visited {
  120.     color: #b44f4f;
  121. }
  122.  
  123. a:hover {
  124.     color: #f00;
  125. }
  126.  
  127. .intro a {
  128.     color: #fdb09d;
  129. }
  130.  
  131. .intro a:hover {
  132.     color: #fec4b6;
  133. }

第3关: 文本装饰与文本布局

  1. body {
  2.     /*背景渐变*/
  3.     background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
  4.     /* Safari 5.1 - 6.0 */
  5.     background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
  6.     /* Opera 11.1 - 12.0 */
  7.     background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
  8.     /* Firefox 3.6 - 15 */
  9.     background: linear-gradient(to right, #7ECABA, #E2FCCB);
  10.     /* 标准的语法 */
  11.     font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  12.     /*居中页面*/
  13.     width: 45em;
  14.     margin: 0 auto;
  15. }
  16.  
  17. h1,
  18. h2 {
  19.     font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  20.     font-weight: normal;
  21.     /*********** BEGIN ***********/
  22.     text-align: center;
  23.     /************ END ************/
  24. }
  25.  
  26. h1 {
  27.     /* 设置h1元素为 35px 的字体大小 */
  28.     font-size: 2.1875em;
  29.     /* 35px/16px */
  30. }
  31.  
  32. h2 {
  33.     background-color: #eaebef;
  34.     /* 设置h2元素的字体颜色为：#7d717c */
  35.     color: #7d717c;
  36.     /* 使用em的方式设置h2元素为 28px 的字体大小 */
  37.     font-size: 1.75em;
  38.     /*28px/16px */
  39. }
  40.  
  41. h3 {
  42.     background-color: white;
  43.     /* 使用em的方式设置h3元素为 20px 的字体大小 */
  44.     font-size: 1.25em;
  45.     /* 设置h3元素的字体颜色为：green */
  46.     color: green;
  47.     padding-left: 10px;
  48.     /*********** BEGIN ***********/
  49.     text-align: left;
  50.     /************ END ************/
  51. }
  52.  
  53. p {
  54.     /*********** BEGIN ***********/
  55.     text-align: justify;
  56.     /************ END ************/
  57. }
  58.  
  59. hr {
  60.     height: 1px;
  61.     border: none;
  62.     border-top: 2px dashed #88b2d2;
  63. }
  64.  
  65. /* 子选择器 */
  66.  
  67. em,
  68. a:link,
  69. .intro .subhead {
  70.     font-weight: bold;
  71. }
  72.  
  73. footer {
  74.     font-weight: light;
  75.     font-style: italic;
  76.     /* ********** BEGIN ***********/
  77.     text-align: center;
  78.     /* ********** END ***********/
  79.     margin: 10px auto;
  80. }
  81.  
  82. footer a {
  83.     font-style: normal;
  84. }
  85.  
  86. /* CONTENT
  87. ----------------------------------- */
  88.  
  89. .architect {
  90.     background-color: #fff;
  91.     padding: 1.5em 1.75em;
  92. }
  93.  
  94. /* :::: Intro ::::: */
  95.  
  96. .intro {
  97.     background-color: #888888;
  98.     /* 设置 .intro 类元素的字体颜色为 #fefefe */
  99.     color: #fefefe;
  100.     padding: 1px 1.875em .7em;
  101. }
  102.  
  103. .intro .subhead {
  104.     /* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */
  105.     font-size: 1.125em;
  106.     text-align: center;
  107. }
  108.  
  109. .intro p {
  110.     font-size: 1.0625em;
  111. }
  112.  
  113. /* :::: chapter Descriptions ::::: */
  114.  
  115. .chapter p {
  116.     font-size: .9375em;
  117. }
  118.  
  119. .photos {
  120.     /*********** BEGIN ***********/
  121.     text-align: center;
  122.     /*********** END *************/
  123. }
  124.  
  125. img {
  126.     border-radius: 8px;
  127. }
  128.  
  129. /* :::: Links :::: */
  130.  
  131. /* 默认显示样式 */
  132.  
  133. a:link {
  134.     color: #e10000;
  135.     /*********** BEGIN ***********/
  136.     text-decoration: none;
  137.     /*********** END *************/
  138. }
  139.  
  140. a:visited {
  141.     color: #b44f4f;
  142. }
  143.  
  144. /* 鼠标放在上面的显示样式 */
  145.  
  146. a:hover {
  147.     color: #f00;
  148.     /*********** BEGIN ***********/
  149.     text-decoration: underline;
  150.     /*********** END *************/
  151. }
  152.  
  153. .intro a {
  154.     color: #fdb09d;
  155. }
  156.  
  157. .intro a:hover {
  158.     color: #fec4b6;
  159. }

CSS从入门到精通——背景样式

第1关: 背景颜色

  1. /* ********** BEGIN ********** */
  2. body {
  3.     background-color: ivory;
  4. }
  5. /* ********** END ********** */
  6.  
  7. h1 {
  8.     font-size: 40px;
  9.     text-align: center;
  10. }
  11.  
  12. p {
  13.     font-size: 18px;
  14.     color:grey;
  15.     /* ********** BEGIN ********** */
  16.     background-color: lightblue;
  17.     /* ********** END ********** */
  18. }

第2关: 背景图片

  1. body {
  2.     /* ********** BEGIN ********** */
  3.     /*设置背景图片*/
  4.     background-image: url("https://www.educoder.net/attachments/download/211106")
  5. 	
  6.     /*设置背景图片模式*/
  7.     /* ********** END ********** */
  8. }
  9.  
  10. div {
  11.     width: 90%;
  12.     height: 100%;
  13.     margin: auto;
  14. }

第3关: 背景定位与背景关联

  1. body {
  2.      margin-right: 200px;
  3.      /* ********** BEGIN ********** */
  4.      /*设置背景图片*/
  5.      background: url("https://www.educoder.net/attachments/download/211104") no-repeat fixed right top;
  6.      /* ********** END ********** */
  7.  }
  8.  
  9.  div {
  10.      width: 90%;
  11.      height: 100%;
  12.      margin: auto;
  13.  }

CSS入门到精通——表格样式

第1关: 表格边框

  1. table {
  2. 	/* ********** BEGIN ********** */
  3. 	border-collapse: collapse;
  4. 	border: 2px solid black;
  5. 	/* ********** END ********** */
  6. }
  7. th, td {
  8. 	 padding: .5em .75em;
  9. }
  10. th {
  11. 	/* ********** BEGIN ********** */
  12. 	border: 1px solid grey;
  13. 	/* ********** END ********** */
  14. }
  15.  
  16. td {
  17. 	/* ********** BEGIN ********** */
  18. 	border: 1px dotted grey ;
  19. 	/* ********** END ********** */
  20. }

第2关: 表格颜色、文字与大小

  1. table {
  2.     border-collapse: collapse;
  3.     border: 2px solid black;
  4. }
  5.  
  6. caption {
  7.     /* ********** BEGIN ********** */
  8.     font-weight: bold;
  9.     font-size: 20px;
  10.     height: 40px;
  11.     /* ********** END ********** */
  12. }
  13.  
  14. th,
  15. td {
  16.     /* ********** BEGIN ********** */
  17.     width: 100px;
  18.     height: 50px;
  19.     text-align: center;
  20.     /* ********** END ********** */
  21. }
  22.  
  23. th {
  24.     /* ********** BEGIN ********** */
  25.     border: 1px solid white;
  26.     background: lightseagreen;
  27.     color: white;
  28.     /* ********** END ********** */
  29. }
  30.  
  31. td {
  32.     border: 1px solid grey;
  33. }

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发