简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >html之仿站php.cn

html之仿站php.cn

Jason
Jason原创
2020年04月13日 19:55:01743浏览

作业地址

仿站

总结

通过这次大的作业，让我对弹性盒子又有了新的认识，弹性盒子是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>
上一条：字体与字体图标、文本属性下一条：2020年4月5日作业--CSS 基础知识及案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多