search

博客列表 >11 阶段性实战学习：网站首页框架

11 阶段性实战学习：网站首页框架

老黑
老黑原创
2020年06月27日 11:31:43688浏览

主要内容：

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. }
上一条：百度网站首页PC端下一条：仿PHP中文网布局实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多