Blogger Information
Blog 6
fans 0
comment 0
visits 2997
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0701学习实战作业
移动用户-1604798
Original
602 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. }
  24. body > div:first-of-type {
  25. width: 150px;
  26. height: 150px;
  27. background-color: red;
  28. display: inline-block;
  29. border: 10px solid blue;
  30. padding: 20px;
  31. background-clip: content-box;
  32. box-sizing: border-box;
  33. }
  34. body > div:nth-child(2) {
  35. height: auto;
  36. width: 50vh;
  37. background-color: pink;
  38. margin-top: 20px;
  39. }
  40. body > div:nth-child(3) {
  41. background-color: blue;
  42. color: #fff;
  43. display: inline;
  44. }
  45. body > div:nth-child(4) {
  46. background-color: blueviolet;
  47. color: #fff;
  48. display: inline;
  49. }
  50. body > div:nth-child(1n + 5) {
  51. background-color: brown;
  52. width: 50px;
  53. height: 50px;
  54. margin: 3px;
  55. display: inline-block;
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <div>
  61. <p class="iconfont">&#xe6b2;</p>
  62. </div>
  63. <div>我是块级元素,我自己站一行</div>
  64. <div>我是行内元素 愿意交朋友</div>
  65. <div>我也是行内</div>
  66. <div>行内块</div>
  67. <div>行内块</div>
  68. <div>行内块</div>
  69. </body>
  70. </html>
  71. ![](https://img.php.cn/upload/image/681/717/171/1626011242551016.png)
  72. ### 请求老师 看下上面的图片然后审批一下,感谢,
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