Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2019-12-27 m.php.cn网站的首页布局(Flex实现)-PHP培训十期
Blogger Information
Blog 12
fans 0
comment 0
visits 7917
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
2019-12-27 m.php.cn网站的首页布局(Flex实现)-PHP培训十期
ys899
Original
735 people have browsed it

```HTML Code DOM结构 素材库已备齐
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>php中文网移动端首页</title>
<link rel="stylesheet" href="static/css/style.css">
</head>

<body>

<!--顶部固定定位-->

<header>
<img src="static/images/user-pic.jpeg" alt="">
<img src="static/images/logo.png" alt="">
<img src="static/images/user-nav.jpg" alt="">
</header>

<!--banner轮播图, 这里用图片代替-->

<div class="banner">
<img src="static/images/banner.jpg" alt="">
</div>

<!--导航区-->

<nav>
<ul>
<li>
<a href="">
<img src="static/images/html.png" alt="">
<span>HTML/CSS</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/JavaScript.png" alt="">
<span>JavaScipt</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/code.png" alt="">
<span>服务器端</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/sql.png" alt="">
<span>数据库</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="">
<img src="static/images/app.png" alt="">
<span>移动端</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/manual.png" alt="">
<span>手册</span>
</a>
</li>
<li>
<a href=""><img src="static/images/tool2.png" alt="">
<span>工具</span>
</a>
</li>
<li>
<a href="">
<img src="static/images/live.png" alt="">
<span>直播</span>
</a>
</li>
</ul>
</nav>

<!--课程区-->

<main>
<!--推荐课程-->
<article class="recommend">
<h3>推荐课程</h3>
<section>
<a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
<a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
</section>

<section>
<div>
<a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
<span>
<a href="">CI框架30分钟极速入门</a>
<span><i>中级</i>55674</span>
</span>
</div>
<div>
<a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
<span>
<a href="">2019前端入门_HTML5</a>
<span><i>初级</i>257292</span>
</span>
</div>
</section>
</article>
</main>

</body>
</html>

  1. ```CSS Code Flex布局
  2. @import "reset.css";
  4. /*头部样式*/
  5. header {
  6.     /*固定定位*/
  7.     position: fixed;
  8.     top:0;
  10.     width: 100%;
  11.     height: 42px;
  12.     background-color: #555;
  13.     color: #ffffff;
  16.     /*转为Flex*/
  17.     display: flex;
  18.     flex-direction: row;
  19.     justify-content: space-between;
  20.     align-items: center;
  21. }
  23. header > img:first-of-type,
  24. header > img:last-of-type {
  25.     width: 26px;
  26.     height: 26px;
  27.     margin: 5px;
  28. }
  29. header > img:first-of-type {
  30.     border-radius: 50%;
  31. }
  33. header > img {
  34.     width: 94px;
  35. }
  37. /*轮播图*/
  38. .banner {
  39.     display: flex;
  40.     height: 200px;
  41. }
  43. /*导航区*/
  44. nav {
  45.     background-color: #fff;
  46.     display: flex;
  47.     /*主轴为垂直方向, 禁止换行*/
  48.     flex-flow: column nowrap;
  49. }
  51. nav img {
  52.     width: 45px;
  53.     height: 49px;
  54. }
  56. nav > ul {
  57.     display: flex;
  58. }
  59. nav  ul li {
  60.     flex: 1;
  61. }
  62. /*图片与文本做为一个整体/组件, 统一设置*/
  63. nav ul li a {
  64.     display: flex;
  65.     flex-flow: column wrap;
  66.     align-items: center;
  67.     margin: 10px;
  68. }
  69. nav ul li a span {
  70.     margin-top: 5px;
  71. }
  73. /*主体内容区*/
  74. main {
  75.     display: flex;
  76.     flex-direction: column;
  77. }
  79. main > .recommend > section:first-of-type {
  80.     display: flex;
  81. }
  82. main > .recommend > section:first-of-type > a {
  83.     margin: 5px;
  84.     flex: 1;
  85. }
  86. main > .recommend > section:first-of-type > a  > img {
  87.     height: 90px;
  88. }
  90. /*设置垂直排列的推荐课程*/
  91. main > .recommend > section:last-of-type {
  92.     display: flex;
  93.     flex-direction: column;
  94. }
  96. main > .recommend > section:last-of-type > div {
  97.     background-color: #fff;
  98.     margin: 5px;
  100.     display: flex;
  102. }
  103. main > .recommend > section:last-of-type > div img {
  104.     width: 350px;
  105.     height: 90px;
  106. }
  107. main > .recommend > section:last-of-type > div > span {
  109.     flex: 1;
  110.     display: flex;
  111.     flex-direction: column;
  112.     margin-top: 5px;
  113.     padding-left: 10px;
  114. }
  116. main > .recommend > section:last-of-type > div > span i {
  117.     font-style: normal;
  118.     background-color: #333333;
  119.     color: white;
  120.     border-radius: 3px;
  121.     padding: 0 5px;
  122.     font-size: smaller;
  123. }
  125. main > .recommend > section:last-of-type > div > span > span {
  126.     margin-top: 40px;
  127.     display: flex;
  128.     justify-content: space-between;
  130. }
  132. body {
  133.     height: 1000px;
  134. }

效果图

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