简体中文（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

博客列表 >flex三列布局、移动端首页

flex三列布局、移动端首页

乐作人生
乐作人生原创
2020年08月24日 13:31:39768浏览
  1. flex实现pc端三列布局
    1. <style>
    2.  /* 初始化 */
    3.  * {
    4.    margin: 0;
    5.    padding: 0;
    6.    box-sizing: border-box;
    7.  }
    8.  a {
    9.    text-decoration: none;
    10.    color: #333;
    11.  }
    12.  body {
    13.    /* 将body转为弹性盒子 */
    14.    display: flex;
    15.    /* 确定盒子主轴方向，是否换行。column：主轴方向垂直；row：主轴方向水平；nowrap：不换行 */
    16.    flex-flow: column nowrap;
    17.    /* 整个页面在浏览器窗口中水平居中对齐 */
    18.    /* width: 1000px;
    19.    margin: auto; */
    20.  }
    21.  /* 设置网站顶部、底部样式 */
    22.  header,
    23.  footer {
    24.    height: 60px;
    25.    background-color: #ddd;
    26.  }
    27.  /* 将header、footer转为弹性盒子 */
    28.  header {
    29.    display: flex;
    30.    /* 水平居中对齐 */
    31.    /* justify-content: center; */
    32.    /* 垂直居中对齐 */
    33.    align-items: center;
    34.    font-size: 16px;
    35.    font-weight: 700;
    36.  }
    37.  header > a {
    38.    /* flex是flex-grow，flex-shrink，flex-basis的简写；
    39.    默认值：0 1 auto;(表示禁止放大，可以收缩，项目原始大小自适应) 后来两个属性可选 */
    40.    flex: 0 1 120px;
    41.    /* 文本水平居中 */
    42.    text-align: center;
    43.  }
    44.  /* 除第一个a标签以外的所有a标签的悬停状态 */
    45.  header > a:hover:not(:first-of-type) {
    46.    color: #f00;
    47.  }
    48.  /* 设置第一个a标签（LOGO）与导航栏目的右边距 */
    49.  header > a:first-of-type {
    50.    margin-right: 40px;
    51.  }
    52.  /* 设置最后一个a标签（客服）始终在网站右侧 */
    53.  header > a:last-of-type {
    54.    margin-left: auto;
    55.    font-size: 14px;
    56.    color: #666;
    57.    font-weight: normal;
    58.  }
    59.  /* 将footer转为弹性盒子 */
    60.  footer {
    61.    display: flex;
    62.    justify-content: center;
    63.    align-items: center;
    64.  }
    65.  /* 将container转为弹性盒子 */
    66.  .container {
    67.    display: flex;
    68.    /* 两端对齐 */
    69.    justify-content: space-between;
    70.    min-height: 400px;
    71.  }
    72.  .container > div {
    73.    background-color: aquamarine;
    74.    flex: 0 1 200px;
    75.  }
    76.  .container > .center {
    77.    background-color: burlywood;
    78.    flex: 0 1 600px;
    79.  }
    80.  /* 媒体查询 */
    81.  @media (max-width: 992px) {
    82.    .container > .right {
    83.      display: none;
    84.    }
    85.  }
    86.  @media (max-width: 768px) {
    87.    header > a:last-of-type,
    88.    header > a:nth-of-type(5),
    89.    header > a:nth-of-type(6) {
    90.      /* 隐藏 */
    91.      display: none;
    92.    }
    93.    header > a:not(:first-of-type) {
    94.      font-size: 12px;
    95.      flex: 0 1 80px;
    96.    }
    97.  }
    98. </style>
    99. <body>
    100.  <header>
    101.    <a href="">LOGO</a>
    102.    <a href="">首页</a>
    103.    <a href="">产品列表</a>
    104.    <a href="">产品明细</a>
    105.    <a href="">关于我们</a>
    106.    <a href="">联系我们</a>
    107.    <a href="">客服</a>
    108.  </header>
    109.  <div class="container">
    110.    <div class="left">左侧</div>
    111.    <div class="center">内容区</div>
    112.    <div class="right">右侧</div>
    113.  </div>
    114.  <footer>
    115.    <p>Copyright © 2020 All Rights Reserved 版权所有 网站</p>
    116.  </footer>
    117. </body>
  2. flex实现(m.php.cn)首页
    html代码
    1. <body>
    2.  <header>
    3.    <span class="iconfont">&#xe639;</span>
    4.    <img src="./static/img/0808-logo.png" alt="PHP中文网" />
    5.    <span class="iconfont">&#xe60f;</span>
    6.  </header>
    7.  <div class="banner"><img src="./static/img/0808-1.jpg" alt="" /></div>
    8.  <nav>
    9.    <div>
    10.      <a href="">
    11.        <img src="./static/img/0808-html.png" />
    12.        <p>HTML/CSS</p>
    13.      </a>
    14.    </div>
    15.    <div>
    16.      <a href="">
    17.        <img src="./static/img/0808-JavaScript.png" />
    18.        <p>JavaScript</p>
    19.      </a>
    20.    </div>
    21.    <div>
    22.      <a href="">
    23.        <img src="./static/img/0808-code.png" />
    24.        <p>服务端</p>
    25.      </a>
    26.    </div>
    27.    <div>
    28.      <a href="">
    29.        <img src="./static/img/0808-sql.png" />
    30.        <p>数据库</p>
    31.      </a>
    32.    </div>
    33.    <div>
    34.      <a href="">
    35.        <img src="./static/img/0808-app.png" />
    36.        <p>移动端</p>
    37.      </a>
    38.    </div>
    39.    <div>
    40.      <a href="">
    41.        <img src="./static/img/0808-manual.png" />
    42.        <p>手册</p>
    43.      </a>
    44.    </div>
    45.    <div>
    46.      <a href="">
    47.        <img src="./static/img/0808-tool2.png" />
    48.        <p>工具</p>
    49.      </a>
    50.    </div>
    51.    <div>
    52.      <a href="">
    53.        <img src="./static/img/0808-live.png" />
    54.        <p>直播</p>
    55.      </a>
    56.    </div>
    57.  </nav>
    58.  <div class="container">
    59.    <h4>推荐课程</h4>
    60.    <div class="course">
    61.      <a href=""><img src="./static/img/0808-2.jpg" /></a>
    62.      <a href=""><img src="./static/img/0808-3.jpg" /></a>
    63.    </div>
    64.    <div class="course_main">
    65.      <div class="course_main_one">
    66.        <img src="./static/img/0808-1.jpg" />
    67.        <ul>
    68.          <li><a href="">CI框架30分钟快速入门</a></li>
    69.          <li><span>中级</span><span>67768次播放</span></li>
    70.        </ul>
    71.      </div>
    72.      <div class="course_main_one">
    73.        <img src="./static/img/0808-2.jpg" />
    74.        <ul>
    75.          <li><a href="">2018前端入门——HTML5</a></li>
    76.          <li><span>初级</span><span>353460次播放</span></li>
    77.        </ul>
    78.      </div>
    79.    </div>
    80.  </div>
    81.  <div class="renew">
    82.    <h4>最新更新</h4>
    83.    <div class="renew_main">
    84.      <div class="renew_main_one">
    85.        <img src="./static/img/0808-3.jpg" />
    86.        <ul>
    87.          <li><a href="">《我的十年撸码生涯》公益直播课</a></li>
    88.          <li>
    89.            主题：《我的十年撸码生涯：聊聊没羞没臊的工作和生活》主讲：西门大官人（php中文网）
    90.          </li>
    91.          <li><span>初级</span><span>1973次播放</span></li>
    92.        </ul>
    93.      </div>
    94.      <div class="renew_main_one">
    95.        <img src="./static/img/0808-1.jpg" />
    96.        <ul>
    97.          <li><a href="">2天速成VueJS免费公益直播课</a></li>
    98.          <li>
    99.            php中文网免费公益直播课：两天四个小时Vue.js速成，入门加案例演示，主讲：西门大官人（php中文网）
    100.          </li>
    101.          <li><span>初级</span><span>4997次播放</span></li>
    102.        </ul>
    103.      </div>
    104.      <div class="renew_main_one">
    105.        <img src="./static/img/0808-2.jpg" />
    106.        <ul>
    107.          <li><a href="">PHP进阶篇-函数（玉女心经版）</a></li>
    108.          <li>
    109.            函数就是实现特定功能的代码块，我们定义函数的直接目的就是将程序按功能进.主讲：西门大官人（php中文网）
    110.          </li>
    111.          <li><span>初级</span><span>1973次播放</span></li>
    112.        </ul>
    113.      </div>
    114.      <div class="renew_main_one">
    115.        <img src="./static/img/0808-3.jpg" />
    116.        <ul>
    117.          <li><a href="">《我的十年撸码生涯》公益直播课</a></li>
    118.          <li>
    119.            主题：《我的十年撸码生涯：聊聊没羞没臊的工作和生活》主讲：西门大官人（php中文网）
    120.          </li>
    121.          <li><span>初级</span><span>1973次播放</span></li>
    122.        </ul>
    123.      </div>
    124.    </div>
    125.  </div>
    126.  <div class="news">
    127.    <h4>最新文章</h4>
    128.    <div class="news_main">
    129.      <div class="news_main_one">
    130.        <ul>
    131.          <li><a href="">如何更换照片背景色</a></li>
    132.          <li>发布时间：2020-08-21</li>
    133.        </ul>
    134.        <img src="./static/img/0808-1.jpg" />
    135.      </div>
    136.      <div class="news_main_one">
    137.        <ul>
    138.          <li><a href="">C语言fun函数有什么作用</a></li>
    139.          <li>发布时间：2020-08-21</li>
    140.        </ul>
    141.        <img src="./static/img/0808-2.jpg" />
    142.      </div>
    143.      <div class="news_main_one">
    144.        <ul>
    145.          <li><a href="">MySQL数据库如何修改表结构</a></li>
    146.          <li>发布时间：2020-08-21</li>
    147.        </ul>
    148.        <img src="./static/img/0808-3.jpg" />
    149.      </div>
    150.      <div class="news_main_one">
    151.        <ul>
    152.          <li><a href="">如何更换照片背景色</a></li>
    153.          <li>发布时间：2020-08-21</li>
    154.        </ul>
    155.        <img src="./static/img/0808-1.jpg" />
    156.      </div>
    157.      <div>
    158.        <a href="">更多内容</a>
    159.      </div>
    160.    </div>
    161.  </div>
    162.  <div class="article">
    163.    <h4>最新博文</h4>
    164.    <div class="article_main">
    165.      <div class="article_main_one">
    166.        <ul>
    167.          <li><a href="">Grid栅格布局：实现网站首页布局，实现日历功能</a></li>
    168.          <li>2020-08-21</li>
    169.        </ul>
    170.      </div>
    171.      <div class="article_main_one">
    172.        <ul>
    173.          <li><a href="">第四章 JS特效</a></li>
    174.          <li>2020-08-21</li>
    175.        </ul>
    176.      </div>
    177.      <div class="article_main_one">
    178.        <ul>
    179.          <li><a href="">类与对象基础知识</a></li>
    180.          <li>2020-08-21</li>
    181.        </ul>
    182.      </div>
    183.      <div class="article_main_one">
    184.        <ul>
    185.          <li><a href="">Grid栅格布局：实现网站首页布局，实现日历功能</a></li>
    186.          <li>2020-08-21</li>
    187.        </ul>
    188.      </div>
    189.      <div>
    190.        <a href="">更多内容</a>
    191.      </div>
    192.    </div>
    193.  </div>
    194.  <div class="article">
    195.    <h4>最新问答</h4>
    196.    <div class="article_main" style="margin-bottom: 80px;">
    197.      <div class="article_main_one">
    198.        <ul>
    199.          <li><a href="">求php多线程抛出异常处理解决方案</a></li>
    200.          <li>2020-08-21</li>
    201.        </ul>
    202.      </div>
    203.      <div class="article_main_one">
    204.        <ul>
    205.          <li><a href="">为什么root登录失败</a></li>
    206.          <li>2020-08-21</li>
    207.        </ul>
    208.      </div>
    209.      <div class="article_main_one">
    210.        <ul>
    211.          <li><a href="">求php多线程抛出异常处理解决方案</a></li>
    212.          <li>2020-08-21</li>
    213.        </ul>
    214.      </div>
    215.      <div class="article_main_one">
    216.        <ul>
    217.          <li><a href="">为什么root登录失败</a></li>
    218.          <li>2020-08-21</li>
    219.        </ul>
    220.      </div>
    221.      <div>
    222.        <a href="">更多内容</a>
    223.      </div>
    224.    </div>
    225.  </div>
    226.  <footer>
    227.    <div>
    228.      <a href="">
    229.        <span class="iconfont">&#xe613;</span>
    230.        <span>首页</span>
    231.      </a>
    232.    </div>
    233.    <div>
    234.      <a href="">
    235.        <span class="iconfont">&#xe61e;</span>
    236.        <span>视频</span>
    237.      </a>
    238.    </div>
    239.    <div>
    240.      <a href="">
    241.        <span class="iconfont">&#xe627;</span>
    242.        <span>社区</span>
    243.      </a>
    244.    </div>
    245.    <div>
    246.      <a href="">
    247.        <span class="iconfont">&#xe639;</span>
    248.        <span>我的</span>
    249.      </a>
    250.    </div>
    251.  </footer>
    252. </body>
    css代码
    1. ````* {
    2. margin: 0;
    3. padding: 0;
    4. box-sizing: border-box;
    5. }
    6. a {
    7. text-decoration: none;
    8. color: #333;
    9. }
    10. a:hover {
    11. color: #f00;
    12. }
    13. li {
    14. list-style: none;
    15. }
    16. html {
    17. /* 调整页面的视口宽度（vw）、视口高度（vh） */
    18. width: 100vw;
    19. height: 100vh;
    20. font-size: 14px;
    21. color: #333;
    22. }
    23. body {
    24. /* 转为flex布局，主轴垂直不换行 */
    25. display: flex;
    26. flex-flow: column nowrap;
    27. /* 设置最小宽度 */
    28. min-width: 340px;
    29. background-color: #f4f4f4;
    30. }
    31. header {
    32. background-color: rgb(141, 141, 141);
    33. height: 50px;
    34. display: flex;
    35. /* 水平两端对齐 */
    36. justify-content: space-between;
    37. /* 交叉轴：垂直方向居中 */
    38. align-items: center;
    39. /* 固定定位 */
    40. position: fixed;
    41. width: 100vw;
    42. padding: 0 15px;
    43. }
    44. header > .iconfont {
    45. font-size: 2rem;
    46. padding: 0 15px;
    47. }
    48. .banner {
    49. margin-top: 50px;
    50. }
    51. .banner > img {
    52. width: 100vw;
    53. }
    54. nav {
    55. display: flex;
    56. flex-flow: row wrap;
    57. /* 交叉轴上的分散对齐 */
    58. align-content: space-around;
    59. }
    60. nav > div {
    61. display: flex;
    62. flex-flow: column nowrap;
    63. text-align: center;
    64. width: 25vw;
    65. margin: 10px 0;
    66. }
    67. nav > div img {
    68. width: 50%;
    69. }
    70. nav > div > a > p {
    71. color: #666;
    72. font-weight: 700;
    73. }
    74. .container,
    75. .renew,
    76. .news {
    77. width: 100vw;
    78. }
    79. .container h4,
    80. .renew h4,
    81. .news h4,
    82. .article h4 {
    83. font-weight: 700;
    84. font-size: 16px;
    85. margin-bottom: 10px;
    86. padding: 0 15px;
    87. }
    88. .container > div:first-of-type {
    89. display: flex;
    90. flex-flow: row nowrap;
    91. /* 主轴方向两端对齐 */
    92. justify-content: space-between;
    93. margin-bottom: 20px;
    94. }
    95. .container > div:first-of-type > a > img {
    96. width: 49vw;
    97. }
    98. .course_main > .course_main_one,
    99. .renew_main > .renew_main_one,
    100. .news_main > .news_main_one,
    101. .article_main > .article_main_one {
    102. display: flex;
    103. flex-flow: row nowrap;
    104. margin-bottom: 15px;
    105. background-color: #fff;
    106. padding: 10px;
    107. }
    108. .course_main > .course_main_one > img,
    109. .renew_main > .renew_main_one > img {
    110. width: 50vw;
    111. }
    112. .course_main > .course_main_one > ul,
    113. .renew_main > .renew_main_one > ul,
    114. .news_main > .news_main_one > ul {
    115. width: 50vw;
    116. padding: 15px 40px 15px 15px;
    117. }
    118. .course_main > .course_main_one > ul > li:first-of-type {
    119. font-size: 14px;
    120. font-weight: 700;
    121. color: #666;
    122. margin-bottom: 10px;
    123. }
    124. .course_main > .course_main_one > ul > li:last-of-type {
    125. font-size: 12px;
    126. color: #999;
    127. }
    128. .course_main > .course_main_one > ul > li:last-of-type > span:first-of-type {
    129. background-color: #666;
    130. color: #fff;
    131. padding: 3px 5px;
    132. border-radius: 5px;
    133. margin-right: 3px;
    134. }
    135. .renew_main > .renew_main_one > ul > li:first-of-type,
    136. .news_main > .news_main_one > ul > li:first-of-type {
    137. font-size: 14px;
    138. font-weight: 700;
    139. color: #666;
    140. margin-bottom: 10px;
    141. white-space: nowrap;
    142. text-overflow: ellipsis;
    143. overflow: hidden;
    144. }
    145. .renew_main > .renew_main_one > ul > li:nth-of-type(2) {
    146. white-space: nowrap;
    147. text-overflow: ellipsis;
    148. overflow: hidden;
    149. color: #999;
    150. }
    151. .renew_main > .renew_main_one > ul > li:last-of-type {
    152. color: #999999;
    153. font-size: 12px;
    154. display: flex;
    155. flex-flow: row nowrap;
    156. justify-content: space-between;
    157. margin-top: 10px;
    158. }
    159. .renew_main > .renew_main_one > ul > li:last-of-type > span:first-of-type {
    160. background-color: #666;
    161. color: #fff;
    162. padding: 3px 5px;
    163. border-radius: 5px;
    164. }
    165. .news_main > .news_main_one > ul > li:last-of-type {
    166. color: #999999;
    167. font-size: 12px;
    168. }
    169. .news_main > .news_main_one {
    170. justify-content: space-between;
    171. }
    172. .news_main > .news_main_one > img {
    173. width: 15%;
    174. }
    175. .news_main > div:last-of-type,
    176. .article_main > div:last-of-type {
    177. background-color: #fff;
    178. padding: 5px 10px;
    179. text-align: center;
    180. margin-bottom: 20px;
    181. font-size: 12px;
    182. }
    183. .news_main > div:last-of-type > a {
    184. color: #666;
    185. }
    186. .news_main > div:last-of-type > a:hover,
    187. .news_main > div:last-of-type > a :focus {
    188. color: #f00;
    189. }
    190. .article_main > .article_main_one > ul {
    191. width: 100vw;
    192. display: flex;
    193. flex-flow: row nowrap;
    194. justify-content: space-between;
    195. }
    196. .article_main > .article_main_one > ul > li:last-of-type {
    197. color: #666;
    198. font-size: 12px;
    199. }
    200. footer {
    201. display: flex;
    202. width: 100vw;
    203. /* 固定定位 */
    204. position: fixed;
    205. /* 将位置移动到页面底部 */
    206. bottom: 0;
    207. background-color: #fff;
    208. flex-flow: row nowrap;
    209. justify-content: space-around;
    210. height: 60px;
    211. /* 将footer内部元素在交叉轴上（垂直）居中 */
    212. align-items: center;
    213. }
    214. footer > div > a {
    215. display: flex;
    216. flex-flow: column nowrap;
    217. color: #666;
    218. text-align: center;
    219. }
    220. footer > div > a:hover,
    221. footer > div > a:focus {
    222. color: #f00;
    223. }
    224. footer > div > a > span:first-of-type {
    225. font-size: 1.8rem;
    226. color: #666;
    227. }






上一条：小程序怎样制作？自己怎么制作一个小程序下一条：PHP中9大缓存技术总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议