Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 我是怎样的我自己？
Blogger Information
Blog 29
fans 0
comment 0
visits 19631
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
我是怎样的我自己？
牡丹飞
Original
547 people have browsed it

1 效果

2 代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>当快乐装进盒子</title>
  7.     <style>
  8.       h1 {
  9.         border: 1em solid violet;
  10.         border-left: 2em solid violet;
  11.         border-right: 2em solid violet;
  12.         border-bottom: 3em solid violet;
  13.         border-radius: 1em;
  14.         text-align: center;
  15.       }
  17.       h1 {
  18.         font-size: 16px;
  19.       }
  21.       header p {
  22.         box-sizing: border-box;
  23.         padding-top: 1em;
  24.         padding-bottom: 2em;
  25.         border: thistle 0.1em solid;
  26.         color: #fff;
  27.         background-color: black;
  28.         text-align: center;
  29.         line-height: 1.8em;
  30.       }
  31.       main {
  32.         height: 12em;
  33.       }
  34.       footer p {
  35.         box-sizing: border-box;
  36.         border: yellowgreen 1em solid;
  37.         text-align: center;
  38.         color: #fff;
  39.         background-color: yellowgreen;
  40.         text-decoration: underline;
  41.         font-weight: bold;
  42.         border-bottom-left-radius: 1em;
  43.         border-bottom-right-radius: 1em;
  44.       }
  46.       .box {
  47.         box-sizing: border-box;
  48.         margin-top: 0.5em;
  49.         width: 10em;
  50.         height: 1.5em;
  51.         background-color: chartreuse;
  52.         text-align: center;
  53.       }
  55.       .right {
  56.         position: relative;
  57.         top: -12.47em;
  58.         left: 12em;
  59.       }
  61.       .box-row {
  62.         width: 25em;
  63.         height: 1.5em;
  64.         margin-top: 1em;
  65.         box-sizing: content-box;
  66.         background-color: aquamarine;
  67.         color: #fff;
  68.       }
  70.       .box-sub {
  71.         margin-top: 0em;
  72.         height: 1.4em;
  73.       }
  75.       .box-sub-right {
  76.         position: relative;
  77.         top: -2.4em;
  78.         left: 11em;
  79.         width: 14em;
  80.         /* width: auto; */
  81.       }
  82.     </style>
  83.   </head>
  84.   <body>
  85.     <header>
  86.       <h1>当快乐装进盒子</h1>
  87.       <h1>人生就有了弹性</h1>
  88.       <p>
  89.         如果朱老师的盒子是最好的盒子，<br />
  90.         我们就有了方向。<br />
  91.         如果朱老师还告诉了我们很多很好的盒子，<br />
  92.         我们会有很多幸福的可能性！
  93.       </p>
  94.     </header>
  95.     <main>
  96.       <section class="left">
  97.         <div class="box"><p>元素</p></div>
  98.         <div class="box"><p>类</p></div>
  99.         <div class="box"><p>ID</p></div>
  100.         <div class="box"><p>!important</p></div>
  101.         <div class="box"><p>脚本</p></div>
  102.       </section>
  103.       <section class="right">
  104.         <div class="box box-row">
  105.           <div class="box box-sub"><p style="color: red">朱老师说话很亲切</p></div>
  106.           <div class="box box-sub box-sub-right">
  107.             <p style="color: rebeccapurple">听着感觉自己在写代码</p>
  108.           </div>
  109.         </div>
  110.         <div class="box box-row">
  111.           <div class="box box-sub"><p style="color: red">朱老师讲的很深入</p></div>
  112.           <div class="box box-sub box-sub-right"><p style="color: rebeccapurple">从值到规则集生动鲜活</p></div>
  113.         </div>
  114.         <div class="box box-row">
  115.           <div class="box box-sub"><p style="color: red">朱老师不愧是朱老师</p></div>
  116.           <div class="box box-sub box-sub-right"><p style="color: rebeccapurple">业内佼佼者我们的好榜样</p></div>
  117.         </div>
  118.         <div class="box box-row">
  119.           <div class="box box-sub"><p style="color: red">朱老师在挑战自己</p></div>
  120.           <div class="box box-sub box-sub-right"><p style="color: rebeccapurple">从传统讲法升级成实例讲法</p></div>
  121.         </div>
  122.         <div class="box box-row">
  123.           <div class="box box-sub"><p style="color: red">朱老师写给我们看</p></div>
  124.           <div class="box box-sub box-sub-right"><p style="color: rebeccapurple">希望桃李的芬芳到处是足迹</p></div>
  125.         </div>
  126.       </section>
  127.     </main>
  128.     <footer>
  129.       <p>我是怎样的我自己？</p>
  130.     </footer>
  131.   </body>
  132. </html>

3 总结

进入代码中感觉很是幸福，回到生活中发现，美是一样的。

CSS 等于 生活
元素 === 五官
类 === 职业
id === 能力
重要 === 感情
脚本 === 人生
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：边框不要用em了, 下次注意
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