Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 11 阶段性实战学习：网站首页框架
Blogger Information
Blog 62
fans 2
comment 1
visits 42270
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
11 阶段性实战学习：网站首页框架
老黑
Original
689 people have browsed it

主要内容：

1-建立一个css文件，通过class的方式将有可能用到的所有flex设置都放到里面。这样就不用再为每个类去写flex设置了。
2-header、聚焦图等里面有很多好玩的地方，当然也是要动心思的地方，见下面吧。

1、flex的通用设置文件

例如下面这种，而且在class取名方面就想好。这样的话，后面要用的时候直接取就好了。

这种情况类似于将flex所有的设置通过.class变成了属性的选项。只要在搭建的时候给对应的元素赋予对应的.class名称，那么这个元素就具有了对应的flex特征。是一种很巧妙的方法。

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. html,
  8. body {
  9.   width: 100%;
  10.   height: 100%;
  11.   overflow: hidden;
  12.   overflow-y: auto;
  13. }
  15.  {
  16.   transition: all 200ms ease;
  17. }
  19. @font-face {
  20.   font-family: icon;
  21.   src: url("../fonts/icon.ttf") format("truetype"),
  22.     url("../fonts/icon.eot") format("embedded-opentype"),
  23.     url("../fonts/icon.woff") format("woff"),
  24.     url("../fonts/icon.svg") format("svg");
  25. }
  27. a {
  28.   color: #444;
  29.   text-decoration: none;
  30. }
  31. li,
  32. dd {
  33.   list-style: none;
  34. }
  35. button,
  36. img {
  37.   border: none;
  38.   outline: none;
  39. }
  41. .contrain {
  42.   width: 1200px;
  43.   margin: 0 auto;
  44. }
  46. .flexDis {
  47.   display: -webkit-flex;
  48.   display: -moz-flex;
  49.   display: -o-flex;
  50.   display: -ms-flexbox;
  51.   display: flex;
  52. }
  54. .applyFlex {
  55.   flex-grow: 1;
  56. }
  58. .flexShrinkStatic {
  59.   flex-shrink: 0;
  60. }
  61. .flexShrinkAuto {
  62.   flex-shrink: 1;
  63. }
  65. .flexDirV {
  66.   flex-direction: column;
  67. }
  69. .flexDirH {
  70.   flex-direction: row;
  71. }
  73. .flexWrap {
  74.   flex-wrap: wrap;
  75. }
  77. .flexNoWrap {
  78.   flex-wrap: nowrap;
  79. }
  81. .flexContentS {
  82.   justify-content: flex-start;
  83. }
  85. .flexContentC {
  86.   justify-content: center;
  87. }
  89. .flexContentE {
  90.   justify-content: flex-end;
  91. }
  93. .flexContentV {
  94.   justify-content: space-evenly;
  95. }
  97. .flexContentA {
  98.   justify-content: space-around;
  99. }
  101. .flexContentB {
  102.   justify-content: space-between;
  103. }
  105. .flexAlignS {
  106.   align-items: flex-start;
  107. }
  109. .flexAlignC {
  110.   align-items: center;
  111. }
  113. .flexAlignE {
  114.   align-items: flex-end;
  115. }
  117. .flexAlignB {
  118.   align-items: baseline;
  119. }
  121. .flexAlignT {
  122.   align-items: stretch;
  123. }

2、header的解析

  1.     <header id="mainHeader" class="flexDis"> <!--这个地方直接设置flexdis就实现了flex效果-->
  2.       <div>LOGO</div>
  3.       <ul>
  4.         <li><a href="#">导航1</a></li>
  5.         <li><a href="#">导航2</a></li>
  6.         <li><a href="#">导航3</a></li>
  7.         <li><a href="#">导航4</a></li>
  8.       </ul>
  9.       <div class="searchInfo">
  10.         <input type="text" placeholder="请输入关键字" value="" /><a
  11.           href="#"
  12.         ></a>
  13.       </div>
  14.       <p><a href="#">登录</a><a href="#">注册</a></p>
  15.     </header>
  • 每块用相对独立的块区分开。
  • 菜单直接用ul li。
  • 搜索用一个input+a。
  • 登录、注销用一个p中间加两个a。

css部分：

  1. #mainHeader {
  2.   background: white;
  3.   padding: 1.5em;
  4.   box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.2);
  5. }
  7. #mainHeader ul {
  8.   padding: 0 1em;
  9. }
  11. #mainHeader ul li {
  12.   display: inline-block;/*这个是让li水平显示*/
  13.   padding: 0 0.8em;
  14. }
  16. #mainHeader ul li a {
  17.   color: #38e;
  18. }
  20. #mainHeader ul li a:hover {
  21.   color: black;
  22. }
  24. #mainHeader .searchInfo {
  25.   padding: 0 1em;
  26. }
  28. #mainHeader .searchInfo a {
  29.   vertical-align: middle;
  30.   background: #38e;/*这个地方是一个搜索icon一样的，设置了背景色。具体内容则是由下面的伪元素来占据*/
  31.   padding: 0.3em 0.6em;
  32.   color: white;
  33. }
  34. #mainHeader .searchInfo a::after {
  35.   content: "\f001";/*添加伪元素*/
  36.   font-family: icon;
  37. }
  39. #mainHeader .searchInfo input {
  40.   border: solid 1px silver;
  41.   padding: 0.5em;
  42.   outline: none;
  43.   vertical-align: middle;
  44.   border-radius: 0.3em 0 0 0.3em;
  45. }
  47. #mainHeader > p {
  48.   margin-left: auto;
  49. }
  50. /*p"登录、注销"通过margin-left自动放大来实现向最右侧的靠齐*/
  52. #mainHeader > p a {
  53.   color: #38e;
  54.   margin: 0 0.6em;
  55. }

3、焦点图部分focus area的解析

  1.     <section class="contrain secCon1 flexDis">
  2.       <ul>
  3.         <li><a href="#">列表1</a></li>
  4.         <li><a href="#">列表2</a></li>
  5.         <li><a href="#">列表3</a></li>
  6.         <li><a href="#">列表4</a></li>
  7.         <li><a href="#">列表5</a></li>
  8.         <li><a href="#">列表6</a></li>
  9.         <li><a href="#">列表7</a></li>
  10.       </ul>
  11.       <div class="preview applyFlex">
  12.         <p><a href="#"></a><a href="#"></a></p>
  13.         <!--这里用两个box旋转（后面会看到）来形成向左、向右的两个箭头——旋转并只加两个变的border。见下图-->
  14.         <div class="applyFlex">
  15.           <img src="./images/1.jpg" alt="" />
  16.           <img src="./images/2.jpg" alt="" />
  17.           <img src="./images/3.jpg" alt="" />
  18.           <img src="./images/4.jpg" alt="" />
  19.         </div>
  20.         <div class="controler">
  21.           <span></span><span></span>
  22.           <span></span><span></span>
  23.         /*通过span实现右下角的小点*/
  24.         </div>
  25.       </div>
  26.     </section>

css部分：

  1. .secCon1 {
  2.   height: 480px;
  3.   margin: 1em auto;
  4. }
  6. /* ① 左侧的几个列表部分*/
  7. .secCon1 ul {
  8.   width: 200px;
  9.   background: gray;
  10. }
  12. .secCon1 ul li {
  13.   background: gray;
  14. }
  16. .secCon1 ul li a {
  17.   display: block;
  18. /*上面这个还挺关键的，没有的话就无法让a像块（block）一样地去操作*/
  19.   color: white;
  20.   padding: 1em 1.5em;
  21. }
  23. .secCon1 ul li a:hover {
  24.   background: rgba(255, 255, 255, 0.2);
  25. }
  26. .secCon1 .preview {
  27.   position: relative;
  28.   height: 100%;
  29. }
  32. /* ② 下面为焦点图部分*/
  33. .secCon1 .preview .applyFlex {
  34.   position: relative;
  35.   height: 100%;
  36. }
  37. .secCon1 .preview img {
  38.   position: absolute;
  39.   display: block;  /*重点*/
  40.   left: 0;
  41.   top: 0;
  42.   width: 100%;
  43.   height: 100%;
  44.   object-fit: cover;  /*重点*/
  45. }
  48. /* ③ 两个箭头的地方*/
  49. .secCon1 .preview p {
  50.   position: absolute;
  51.   width: 100%;
  52.   top: 50%;
  53.   left: 0;
  54.   z-index: 1;/*这个还不知道是干什么的*/
  55. }
  56. .secCon1 .preview p a {
  57.   position: absolute;
  58.   width: 30px;
  59.   height: 30px;
  60. }
  62. .secCon1 .preview p a:first-of-type {
  63.   border: solid 2px white;
  64.   border-style: solid none none solid;
  65.   transform: rotate(-45deg); /*旋转*/
  66.   left: 1em;
  67. }
  69. .secCon1 .preview p a:last-of-type {
  70.   border: solid 2px white;
  71.   border-style: none solid solid none;
  72.   transform: rotate(-45deg);
  73.   right: 1em;
  74. }
  77. /* ④ 下面四个小控制点*/
  78. .secCon1 .controler {
  79.   position: absolute;
  80.   right: 1em;
  81.   bottom: 1em;
  82. }
  84. .secCon1 .controler span {
  85.   display: inline-block;/*重点*/
  86.   width: 9px;
  87.   height: 9px;
  88.   background: white;
  89.   border-radius: 1em;
  90.   margin: 0 1em;
  91.   cursor: pointer;
  92.   opacity: 0.5;/*透明度*/
  93. }
  95. .secCon1 .controler span:hover {
  96.   opacity: 1;
  97. }

主体内容、footer部分也有值得学习的点，以后再复习代码吸收。

4、某度假景点网站照猫画虎

臭了点，主要是为了练习。

代码如下：
html部分：

  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.     <link rel="stylesheet" href="css/header.css">
  7.     <link rel="stylesheet" href="myicon/iconfont.css">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.     <section class = "h1">
  12.         <a class = "h1-itms" href="">浏览Disney.cn</a>
  13.         <div>
  14.             <a class = "h1-itms" href="">登陆或创建账号</a>
  15.             <a class = "h1-itms" href="">简体中文 (Simplified Chinese)</a>
  16.             <input class = "h1-itms" type="text"> 
  18.         </div>       
  19.     </section>
  21.     <section class = "h2">
  22.         <a href="" class="h2-itms">
  23.             <img src="img/logo.png" alt="">
  24.         </a>
  25.         <a href="" class="h2-itms">乐园门票与年卡</a>
  26.         <a href="" class="h2-itms">住宿体验</a>
  27.         <a href="" class="h2-itms">活动一览</a>
  28.         <a href="" class="h2-itms">年卡</a>
  29.         <a href="" class="h2-itms">旅行信息</a>
  30.         <a href="" class="h2-itms">须知及帮助</a>
  31.     </section>
  32.     <section class = "slide">
  33.         <img src="img/slide1.png" alt="" class="slide-img">
  34.         <img src="" alt="" class="slide-img">
  35.     </section>
  36.     <section class = "focus">
  37.         <div class="focus-itms">
  38.             <a href="" class="focus-eles">
  39.                 <img src="img/prom1.png" alt="">
  40.             </a>
  41.             <div>
  42.                 <a href="" class="focus-eles">立即购买</a>
  43.                 <a href="" class="focus-eles">主题乐园门票</a>                
  44.                 <span class="iconfont icon-taiyang-shuishang"></span>
  45.             </div>
  46.         </div>
  47.         <div class="focus-itms">
  48.             <a href="" class="focus-eles">
  49.                 <img src="img/prom2.png" alt="">
  50.             </a>
  51.             <div>
  52.                 <a href="" class="focus-eles">立即购买</a>
  53.                 <a href="" class="focus-eles">主题乐园门票</a>                
  54.                 <span class="iconfont icon-taiyang-shuishang"></span>
  55.             </div>
  56.         </div>
  57.         <div class="focus-itms">
  58.             <a href="" class="focus-eles">
  59.                 <img src="img/prom3.png" alt="">
  60.             </a>
  61.             <div>
  62.                 <a href="" class="focus-eles">立即购买</a>
  63.                 <a href="" class="focus-eles">主题乐园门票</a>                
  64.                 <span class="iconfont icon-taiyang-shuishang"></span>
  65.             </div>
  66.         </div>
  68.     </section>
  69.     <section class = "links1">
  71.     </section>
  72.     <section class = "links2">
  74.     </section>  
  75.     <section class = "links3">
  77.     </section> 
  78.     <section class = "footer">
  80.     </section>     
  81. </body>
  82. </html>

css部分：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. :root {
  7.   font-size: 14px;
  8.   background-color: #d3d3d3;
  9. }
  10. a {
  11.   text-decoration: none;
  12. }
  13. body {
  14.   width: 85vw;
  15.   min-height: 100vh;
  16.   border: 1px solid black;
  17.   margin: 5px auto;
  18. }
  19. .h1 {
  20.   height: 35px;
  21.   line-height: 35px;
  22.   display: flex;
  23.   justify-content: space-between;
  24. }
  25. .h1 > .h1-itms {
  26.   margin: 2px 10px;
  27. }
  28. .h2 {
  29.   height: 60px;
  30.   line-height: 60px;
  31.   display: flex;
  32. }
  33. .h2 > .h2-itms:not(:first-of-type ) {
  34.   margin: 0 15px;
  35. }
  36. .h2 > .h2-itms:first-of-type > img {
  37.   height: 60px;
  38. }
  39. .slide {
  40.   display: flex;
  41.   flex: row nowrap;
  42.   justify-content: center;
  43.   height: 450px;
  44. }
  45. .slide > img {
  46.   width: 200vw;
  47. }
  48. .focus {
  49.   display: flex;
  50.   flex: row nowrap;
  51.   justify-content: space-around;
  52.   height: 150px;
  53. }
  54. .focus > .focus-itms {
  55.   display: flex;
  56.   align-items: center;
  57. }
  58. .focus > .focus-itms > .focus-eles > img {
  59.   height: 140px;
  60. }
  61. .focus > .focus-itms > div {
  62.   display: flex;
  63.   flex-flow: column nowrap;
  64. }
  65. .focus-eles {
  66.   margin: 5px 5px;
  67. }
  68. .iconfont {
  69.   font-size: larger;
  70.   color: yellowgreen;
  71.   text-align: right;
  72. }
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