简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 0701学习实战作业
Blogger Information
Blog 6
fans 0
comment 0
visits 2941
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0701学习实战作业
移动用户-1604798
Original
591 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         @font-face {
  10.   font-family: 'iconfont';  /* Project id 2197879 */
  11.   src: url('//at.alicdn.com/t/font_2197879_ywawq1zak8.woff2?t=1625987899243') format('woff2'),
  12.        url('//at.alicdn.com/t/font_2197879_ywawq1zak8.woff?t=1625987899243') format('woff'),
  13.        url('//at.alicdn.com/t/font_2197879_ywawq1zak8.ttf?t=1625987899243') format('truetype');
  14. }
  15. .iconfont {
  16.   font-family: "iconfont" !important;
  17.   font-size: 30px;
  18.   margin-left: 28px;
  19.   color: blue;
  20.   font-style: normal;
  21.   -webkit-font-smoothing: antialiased;
  22.   -moz-osx-font-smoothing: grayscale;
  23. }
  26.         body > div:first-of-type {
  27.             width: 150px;
  28.             height: 150px;
  29.             background-color: red;
  30.             display: inline-block;
  31.             border: 10px solid blue;
  32.             padding: 20px;
  33.             background-clip: content-box;
  34.             box-sizing: border-box;
  35.         }
  36.         body > div:nth-child(2) {
  37.               height: auto;
  38.               width: 50vh;
  39.               background-color: pink;
  40.               margin-top: 20px;
  41.         }
  42.         body > div:nth-child(3) {
  43.             background-color: blue;
  44.             color: #fff;
  45.             display: inline;
  46.         }
  47.         body > div:nth-child(4) {
  48.             background-color: blueviolet;
  49.             color: #fff;
  50.             display: inline;
  51.         }
  52.         body > div:nth-child(1n + 5) {
  53.             background-color: brown;
  54.             width: 50px;
  55.             height: 50px;
  56.             margin: 3px;
  57.             display: inline-block;
  59.         }
  62.     </style>
  63. </head>
  64. <body>
  65.     <div>
  66.         <p class="iconfont">&#xe6b2;</p>
  67.     </div>
  68.     <div>我是块级元素，我自己站一行</div>
  69.     <div>我是行内元素 愿意交朋友</div>
  70.     <div>我也是行内</div>
  72.     <div>行内块</div>
  73.     <div>行内块</div>
  74.     <div>行内块</div>
  75. </body>
  76. </html>
  78. ![](https://img.php.cn/upload/image/681/717/171/1626011242551016.png)
  81.  ### 请求老师  看下上面的图片然后审批一下，感谢，
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：可以直接上传图片的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！