Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html之仿站php.cn
Blogger Information
Blog 36
fans 1
comment 0
visits 29663
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
html之仿站php.cn
Jason
Original
752 people have browsed it

作业地址

仿站

总结

通过这次大的作业，让我对弹性盒子又有了新的认识，弹性盒子是flex布局的基础，通过padding以及margin的设置来控制间距，用border来画出大概的框架，flex布局将盒模型发挥了极致，用flex可以搭建出任何我们想要的框架模型，主要用到了flex-flow属性来设置，整个项目下来，让我感受最深的就是，知识的整合，很多小的东西容易忘，比如纵轴的对齐方式,一些细节还需要加强练习，总的来说做了项目后，知识点在脑海里又巩固了一遍

效果图如下


代码部分

  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>Document</title>
  7. <style>
  8.     @font-face {
  9.   font-family: 'iconfont';
  10.   src: url('./font_icon/iconfont.eot');
  11.   src: url('./font_icon/iconfont.eot?#iefix') format('embedded-opentype'),
  12.   url('./font_icon/iconfont.woff2') format('woff2'),
  13.   url('./font_icon/iconfont.woff') format('woff'),
  14.   url('./font_icon/iconfont.ttf') format('truetype'),
  15.   url('./font_icon/iconfont.svg#iconfont') format('svg');
  16. }
  18. .iconfont {
  19.   font-family: "iconfont" !important;
  20.   font-size: 16px;
  21.   font-style: normal;
  22.   -webkit-font-smoothing: antialiased;
  23.   -moz-osx-font-smoothing: grayscale;
  24. }
  26. /* 初始化 */
  27. * {
  28.     padding: 0;
  29.     margin: 0;
  30.     font-size: 14px;
  32. }
  33. a {
  34.     /* 文本下划线 */
  35.     text-decoration: none;
  36.     color: #666;
  37. }
  38. p {
  39.     padding:2px;
  40. }
  41. .big {
  42.     font-size:18px;
  43.     font-weight: bold;
  44. }
  46. .small {
  47.     font-size:10px;
  48. }
  49. html {
  50.     /* vw:可视区宽度，100vm：表示沾满100份 */
  51.     width: 100vw;
  52.     height: 100vh;
  53.     /* 在HTML中设置字体大小，给后面的rem单位用 */
  54.     font-size: 14px;
  55. }
  56. body {
  57.     min-width: 360px;
  58.     background-color: #f1f1f1;
  59.     display: flex;
  60.     flex-flow: column nowrap;
  61. }
  63. body > header {
  64.     background-color: gray;
  65.     color: lightgray;
  66.     height:30px;
  67.     display: flex;
  68.     align-items: center;
  69.     justify-content: space-between;
  71.     padding: 0 15px;
  72.     position: fixed;
  73.     width: 95vw;
  74. }
  75. header > a:not(:last-of-type){
  76.     color:honeydew;
  77. }
  78. header > .size {
  79.     width: 50px;
  80.     height: 20px;
  81. }
  82. /* 设置slider高度 */
  83. body > .slider {
  84.     height: 200px;
  85. }
  87. /* 设置图片宽度 */
  88. body > .slider > img {
  89.     width: 100%;
  90.     height: 100%;
  91. }
  92. nav .size {
  93.     width: 50px;
  94.     height: 50px;
  95. }
  97. /* 主导航区 */
  98. nav {
  99.     /* 设置导航区高度 */
  100.     height: 100px; 
  101.     padding-top: 20px;
  102.     display:flex;
  103.     /* 变成多行容器 */
  104.     flex-flow: row wrap;
  105. }
  107. nav > div > a:first-of-type {
  108.     text-align: center;
  109. }
  111. nav > div img {
  112.     width: 50%;
  113. }
  115. nav > div {
  116.     /* 占宽度四分之一 */
  117.     width: 25vw;
  118.     display: flex;
  119.     flex-flow: column nowrap;
  120.     align-items: center;;
  121. }
  122. .title{
  123.     color:gray;
  124.     font-size: 1.2rem;
  125.     padding-left: 12px;
  126.     padding-bottom: 10px;
  127. }
  128. .Recommended_courses {
  129.     margin-top: 65px;
  131. }
  133. .Recommended_courses > .courses {
  134.     width:100vw;
  135. }
  137. .Recently_and_new {
  138.     margin-top: 20px;
  139. }
  141. .Recently_and_new > .courses {
  142.     width:100vw;
  143. }
  144. .courses {
  145.     width: 100vw;
  146.     height: 100px;
  148.     display: flex;
  149.     flex-wrap: nowrap;
  150. }
  151. .courses > .courses-img {
  153.     width: 50%;
  154.     height: auto;
  156.     margin: 0 12px;
  157.     justify-content: space-around;
  158. }
  159. .courses > .courses-img > img {
  160.     width:100%;
  162. }
  163. .more-list {
  164.     width: 95%;
  165.     height: 100px;
  167.     background-color: #ffffff;
  168.     margin: 12px auto;
  169.     display: flex;
  170. }
  171. .more-list > .more-img {
  172.     width:40%;
  173.     height:auto;
  175.     margin:12px 12px;
  176. }
  177. .more-list > .more-text {
  178.     width:50%;
  179.     height:auto;
  181.     margin:12px 0;
  182. }
  184. .more-play {
  185.     width: 200px;
  186.     height:20px;
  188.     display: flex;
  189.     flex-flow: row nowrap;
  190.     justify-content: space-between;
  191. }
  194. .latest-list {
  195.     width: 95%;
  196.     height: 100px;
  198.     background-color: #ffffff;
  199.     margin: 12px auto;
  200.     display: flex;
  201. }
  202. .latest-list > .latest-img {
  203.     width:40%;
  204.     height:auto;
  205.    margin:12px 0;
  207. }
  208. .latest-list > .latest-text {
  209.     width:50%;
  210.     height:auto;
  211.      margin:12px 12px;
  213. }
  214. .latest-title {
  215.     padding: 10px 12px;
  216. }
  218. .Latest-articles > .latest-footer {
  219.     width:95%;
  220.     margin: 12px auto;
  221.     background-color: rgb(255, 255, 255);
  222.     text-align: center;
  224. }
  225. .Latest-articles > .latest-footer > p {
  226.     padding:12px;
  228. }
  229. /* 最新问答 */
  230. .latest-box {
  231.     width: 95%;
  232.     height: 70px;
  234.     background-color: #ffffff;
  235.     margin: 12px auto;
  236.     display: flex;
  237.     justify-content: space-between;
  238. }
  239. .latest-question {
  240.     padding:12px 12px;
  241. }
  242. .latest-answer{
  243.     padding:12px 12px;
  244. }
  246. .latest-qa > .latest-more {
  247.     width:95%;
  248.     margin: 12px auto;
  249.     background-color: rgb(255, 255, 255);
  250.     text-align: center;
  252. }
  253. .latest-qa > .latest-more > p {
  254.     padding:12px;
  256. }
  258. /* 底部导航栏 */
  259. body >footer {
  260.     color: 666;
  261.     background-color: cadetblue;
  262.     border-top: 1px solid #ccc;
  263.     height: 50px;
  265.     position: fixed;
  266.     bottom: 0;
  267.     width: 100vw;
  269.     display: flex;
  270.     justify-content: space-around;
  272. }
  273. body > footer > a {
  274.     margin-top: 10px;
  275.     font-size: 0.8rem;
  276.     display: flex;
  277.     flex-flow: column nowrap;
  278.     align-items: center;
  279. }
  281. body > footer > a > span:first-of-type {
  282.     font-size:  1.6rem;
  283. }
  285. footer .size{
  286.     width:30px;
  287.     height:30px;
  288. }
  289. </style>
  290. </head>
  291. <body>
  293. <!-- 页眉 -->
  294. <header>
  295.     <a href="">LOGO</a>
  296.     <a href="">PHP中文网</a>
  297.     <a href="">
  298.     <span>
  299.         <span class="iconfont size">&#xe652;</span>
  300.     </span>
  301. </a>
  302. </header>
  304. <!-- 轮播图 -->
  305. <div class="slider">
  306.     <img src="static/images/banner.png" alt="" />
  307. </div>
  309. <!-- 主导航区 -->
  310. <nav>
  311.     <div>
  312.         <a href="">
  313.             <span class="iconfont size">&#xe8af;</span>
  314.         </a>
  315.         <a href="">HTML/css</a>
  316.     </div>
  317.     <div>
  318.         <a href="">
  319.             <span class="iconfont size">&#xe614;</span>
  320.         </a>
  321.         <a href="">JavaScript</a>
  322.     </div>
  323.     <div>
  324.         <a href="">
  325.             <span class="iconfont size">&#xe70b;</span>
  326.         </a>
  327.         <a href="">服务端</a>
  328.     </div>
  329.     <div>
  330.         <a href="">
  331.             <span class="iconfont size">&#xe8af;</span>
  332.         </a>
  333.         <a href="">数据库</a>
  334.     </div>
  335.     <div>
  336.         <a href="">
  337.             <span class="iconfont size">&#xe670;</span>
  338.         </a>
  339.         <a href="">直播</a>
  340.     </div>
  341.     <div>
  342.         <a href="">
  343.             <span class="iconfont size">&#xe63f;</span> 
  344.         </a>
  345.         <a href="">移动端</a>
  346.     </div>
  347.     <div>
  348.         <a href="">
  349.             <span class="iconfont size">&#xe617;</span>
  350.         </a>
  351.         <a href="">手册</a>
  352.     </div>
  353.     <div>
  354.         <a href="">
  355.             <span class="iconfont size">&#xe648;
  356.             </span>
  357.         </a>
  358.         <a href="">工具</a>
  359.     </div>
  360. </nav>
  362. <!-- 推荐课程 -->
  363. <div class="Recommended_courses">
  364.     <h2 class="title">推荐课程</h2>
  365.     <!-- banner部分 -->
  366.     <div class="courses">
  367.         <div class="courses-img">
  368.             <a href=""><img src="static/images/1.jpg" width="100%" height="100%"/></a>
  369.         </div>
  370.         <div class="courses-img">
  371.             <a href=""><img src="static/images/1.jpg" width="100%" height="100%"/></a>
  372.         </div>
  373.     </div>
  374.     <!-- 详情部分 -->
  375.     <div class="more">
  376.       <div class="more-list">
  377.         <div class="more-img">
  378.             <a href=""><img src="static/images/2.jpg" width="100%" height="100%"/></a>
  380.         </div>
  381.         <div class="more-text">
  382.             <p class="big"><a href="">CI框架30分钟极速入门</a></p>
  383.             <p class="small">
  384.                 <svg class="icon size" aria-hidden="true">
  385.                 <use xlink:href="#icon--devil"></use>
  386.             </svg> 61272次播放</p>
  388.         </div>
  389.       </div>
  390.     </div>
  392.     <div class="more">
  393.         <div class="more-list">
  394.           <div class="more-img">
  395.               <a href=""><img src="static/images/2.jpg" width="100%" height="100%"/></a>
  397.           </div>
  398.           <div class="more-text">
  399.               <p class="big"><a href="">CI框架30分钟极速入门</a></p>
  400.               <p class="small">
  401.                   <svg class="icon size" aria-hidden="true">
  402.                   <use xlink:href="#icon--devil"></use>
  403.               </svg> 61272次播放</p>
  405.           </div>
  406.         </div>
  407.       </div>
  408. </div>
  410. <!-- 最近跟新 -->
  411. <div class="Recently_and_new">
  412.     <h2 class="title">最近跟新</h2>
  414.     <!-- 详情部分 -->
  415.     <div class="more">
  416.       <div class="more-list">
  417.         <div class="more-img">
  418.             <a href=""><img src="static/images/2.jpg" width="100%" height="100%"/></a>
  420.         </div>
  421.         <div class="more-text">
  422.             <p class="big"><a href="">CI框架30分钟极速入门</a></p>
  423.             <p class="small">CI框架30分钟极速入门</p>
  425.             <div class="more-play">
  426.               <div class="more-left">
  427.               <span>
  428.                 <svg class="icon size" aria-hidden="true">
  429.                 <use xlink:href="#icon--devil"></use>
  430.                 </svg>
  431.               </span>
  432.               </div>
  434.               <div class="more-right">
  435.                 <span class="small">
  436.                     61272次播放
  437.                 </span>
  438.               </div>
  439.             </div>
  441.         </div>
  442.       </div>
  443.     </div>
  445.     <div class="more">
  446.         <div class="more-list">
  447.           <div class="more-img">
  448.               <a href=""><img src="static/images/2.jpg" width="100%" height="100%"/></a>
  450.           </div>
  451.           <div class="more-text">
  452.               <p class="big"><a href="">CI框架30分钟极速入门</a></p>
  453.               <p class="small">CI框架30分钟极速入门</p>
  455.               <div class="more-play">
  456.                 <div class="more-left">
  457.                 <span>
  458.                   <svg class="icon size" aria-hidden="true">
  459.                   <use xlink:href="#icon--devil"></use>
  460.                   </svg>
  461.                 </span>
  462.                 </div>
  464.                 <div class="more-right">
  465.                   <span class="small">
  466.                       61272次播放
  467.                   </span>
  468.                 </div>
  469.               </div>
  471.           </div>
  472.         </div>
  473.       </div>
  475.       <div class="more">
  476.         <div class="more-list">
  477.           <div class="more-img">
  478.               <a href=""><img src="static/images/2.jpg" width="100%" height="100%"/></a>
  480.           </div>
  481.           <div class="more-text">
  482.               <p class="big"><a href="">CI框架30分钟极速入门</a></p>
  483.               <p class="small">CI框架30分钟极速入门</p>
  485.               <div class="more-play">
  486.                 <div class="more-left">
  487.                 <span>
  488.                   <svg class="icon size" aria-hidden="true">
  489.                   <use xlink:href="#icon--devil"></use>
  490.                   </svg>
  491.                 </span>
  492.                 </div>
  494.                 <div class="more-right">
  495.                   <span class="small">
  496.                       61272次播放
  497.                   </span>
  498.                 </div>
  499.               </div>
  501.           </div>
  502.         </div>
  503.       </div>
  506. </div>
  510. <!-- 最新文章 -->
  511.   <!-- 最近跟新 -->
  512.   <div class="Latest-articles">
  513.     <h2 class="title">最新文章</h2>
  515.     <!-- 详情部分 -->
  516.     <div class="latest">
  517.       <div class="latest-list">
  519.         <div class="latest-text">
  520.             <p class="big"><a href="">thinkphp5 + barcode 生成条形码的方法</a></p>
  521.             <p class="small">发布时间：2020-04-12</p>                           
  522.         </div>
  523.          <div class="latest-img">
  524.             <a href=""><img src="static/images/3.jpg" width="100%" height="100%"/></a>
  526.         </div>
  527.       </div>
  528.     </div>
  530.     <div class="latest">
  531.         <div class="latest-list">
  533.           <div class="latest-text">
  534.               <p class="big"><a href="">如何使用html+css+js实现3D相册</a></p>
  535.               <p class="small">发布时间：2020-04-12</p>
  537.           </div>
  538.           <div class="latest-img">
  539.               <a href=""><img src="static/images/3.jpg" width="100%" height="100%"/></a>
  541.           </div>
  542.         </div>
  543.       </div>
  545.       <div class="latest">
  546.         <div class="latest-list">
  548.           <div class="latest-text">
  549.               <p class="big"><a href="">CI框架30分钟极速入门</a></p>
  550.               <p class="small">发布时间：2020-04-12</p>
  554.           </div>
  555.           <div class="latest-img">
  556.               <a href=""><img src="static/images/3.jpg" width="100%" height="100%"/></a>
  558.           </div>
  559.         </div>
  560.       </div>
  562.       <div class="latest-footer">
  563.           <p>更多内容</p>
  564.       </div>
  565.     </div>
  568. </div>
  569. <!-- 最新问答 -->
  570. <div class="latest-qa">
  571.     <h2 class="title">最新文章</h2>
  573.     <div class="latest-box">
  574.       <div class="latest-question">
  575.           <p class="big">CSS3：弹性盒子flex布局</p>
  576.       </div>
  578.       <div class="latest-answer">
  579.           <p class="small">2020-04-12</p>
  580.       </div>
  581.     </div>
  583.     <div class="latest-box">
  584.         <div class="latest-question">
  585.             <p class="big">Composer windows安装详细介绍</p>
  586.         </div>
  588.         <div class="latest-answer">
  589.             <p class="small">2020-04-12</p>
  590.         </div>
  591.       </div>
  593.       <div class="latest-box">
  594.         <div class="latest-question">
  595.             <p class="big">Jquery+AJAX上传文件，无刷新上传并重命名文件</p>
  596.         </div>
  598.         <div class="latest-answer">
  599.             <p class="small">2020-04-12</p>
  600.         </div>
  601.     </div>
  603.     <div class="latest-more">
  604.         <p>更多内容</p>
  605.     </div>
  609. </div>
  610. <!-- 页脚 -->
  611. <footer>
  612.     <a href="">
  613.         <span>
  614.             <span class="iconfont size">&#xe621;</span>
  615.         </span>
  616.         <span>
  617.             首页
  618.         </span>
  619.     </a>
  621.     <a href="">
  622.         <span>
  623.             <span class="iconfont size">&#xe618;</span>
  624.         </span>
  625.         <span>
  626.             视频
  627.         </span>
  628.     </a>
  630.     <a href="">
  631.         <span>
  632.             <span class="iconfont size">&#xe6f9;</span>
  633.         </span>
  634.         <span>
  635.             社区
  636.         </span>
  637.     </a>
  639.     <a href="">
  640.         <span>
  641.             <span class="iconfont size">&#xe61d;
  642.             </span>
  643.         </span>
  644.         <span>
  645.             我的
  646.         </span>
  647.     </a>
  648. </footer>
  649. </body>
  650. </html>
Correcting teacher：天蓬老师天蓬老师

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