search

博客列表 >仿php中文网移动端

仿php中文网移动端

hg199
hg199原创
2020年04月12日 15:29:59770浏览

学习总结

1、有关图片的排版布局很含糊

2、FLEX弹性布局常用属性需要进一步理解

3、当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。另外一个需要理解的重点是 flexbox 不会对文档的书写模式提供假设。过去，CSS的书写模式主要被认为是水平的，从左到右的。现代的布局方式涵盖了书写模式的范围，所以我们不再假设一行文字是从文档的左上角开始向右书写, 新的行也不是必须出现在另一行的下面。flexbox 的区域就叫做 flex 容器。为了创建 flex 容器， 我们把一个容器的 display 属性值改为 flex 或者 inline-flex。 完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为 为：

a、元素排列为一行 (flex-direction 属性的初始值是 row)。
b、元素从主轴的起始线开始。
c、元素不会在主维度方向拉伸，但是可以缩小。
d、元素被拉伸来填充交叉轴大小。
f、flex-basis 属性为 auto。
g、flex-wrap 属性为 nowrap。

5、在 flex 容器中添加 flex-direction 属性可以让我们更改 flex 元素的排列方向。设置 flex-direction: row-reverse 可以让元素沿着行的方向显示，但是起始线和终止线位置会交换。

6、虽然flexbox是一维模型，但可以使我们的flex项目应用到多行中。 在这样做的时候，您应该把每一行看作一个新的flex容器。 任何空间分布都将在该行上发生，而不影响该空间分布的其他行。

仿商城效果网页地址：http://118.24.239.163/0411/myphp.html

效果切图

" class="reference-link">

代码示例

  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>防移动商城</title>
  7.     <link rel="stylesheet" href="css/font_icon.css" />
  8.     <link rel="stylesheet" href="css/myphp.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 头部区 -->
  12.     <header>
  13.       <a href="">LOGO</a>
  14.       <span class="iconfont"></span>
  15.     </header>
  16.     <!-- 轮播区 -->
  17.     <div style="width: 100vw; height: 26px;"></div>
  18.     <div class="slider"><img src="image/1.jpg" alt="" /></div>
  19.     <!-- 导航区 -->
  20.     <nav>
  21.       <div>
  22.         <a href=""><img src="image/link1.webp" alt="" /></a>
  23.         <a href="">HTML/CSS</a>
  24.       </div>
  25.       <div>
  26.         <a href=""><img src="image/link2.webp" alt="" /></a>
  27.         <a href="">JavaScript</a>
  28.       </div>
  29.       <div>
  30.         <a href=""><img src="image/link3.webp" alt="" /></a>
  31.         <a href="">服务端</a>
  32.       </div>
  33.       <div>
  34.         <a href=""><img src="image/link4.webp" alt="" /></a>
  35.         <a href="">数据库</a>
  36.       </div>
  37.       <div>
  38.         <a href=""><img src="image/link1.webp" alt="" /></a>
  39.         <a href="">移动端</a>
  40.       </div>
  41.       <div>
  42.         <a href=""><img src="image/link2.webp" alt="" /></a>
  43.         <a href="">手册</a>
  44.       </div>
  45.       <div>
  46.         <a href=""><img src="image/link3.webp" alt="" /></a>
  47.         <a href="">工具</a>
  48.       </div>
  49.       <div>
  50.         <a href=""><img src="image/link4.webp" alt="" /></a>
  51.         <a href="">直播</a>
  52.       </div>
  53.     </nav>
  54.     <!-- 推荐课程 -->
  55.     <h3>推荐课程</h3>
  56.     <div class="tuijian">
  57.       <a href=""><img src="image/tianlong2.jpg" alt="" /></a>
  58.       <a href=""> <img src="image/tianlong2.jpg" alt="" /></a>
  59.     </div>
  60.     <div class="tj2">
  61.       <a href=""><img src="image/tianlong3.jpg" alt="" /></a>
  62.       <div>
  63.         <h4>CI框架30分钟极速入门</h4>
  64.         <span class="iconfont"></span>
  65.         <span>61258次播放</span>
  66.       </div>
  67.     </div>
  68.     <div class="tj2">
  69.       <a href=""><img src="image/tianlong4.jpg" alt="" /></a>
  70.       <div>
  71.         <h4>CI框架30分钟极速入门</h4>
  72.         <span class="iconfont"></span>
  73.         <span>61258次播放</span>
  74.       </div>
  75.     </div>
  76.     <div class="tj2">
  77.       <a href=""><img src="image/tianlong2.jpg" alt="" /></a>
  78.       <div>
  79.         <h4>CI框架30分钟极速入门</h4>
  80.         <span class="iconfont"></span>
  81.         <span>61258次播放</span>
  82.       </div>
  83.     </div>
  84.     <!-- 最新更新 -->
  85.     <h3>最新更新</h3>
  86.     <div class="tj2">
  87.       <a href=""><img src="image/tianlong3.jpg" alt="" /></a>
  88.       <div>
  89.         <h4>CI框架30分钟极速入门</h4>
  90.         <span class="iconfont"></span>
  91.         <span>61258次播放</span>
  92.       </div>
  93.     </div>
  94.     <div class="tj2">
  95.       <a href=""><img src="image/tianlong4.jpg" alt="" /></a>
  96.       <div>
  97.         <h4>CI框架30分钟极速入门</h4>
  98.         <span class="iconfont"></span>
  99.         <span>61258次播放</span>
  100.       </div>
  101.     </div>
  102.     <div class="tj2">
  103.       <a href=""><img src="image/tianlong2.jpg" alt="" /></a>
  104.       <div>
  105.         <h4>CI框架30分钟极速入门</h4>
  106.         <span class="iconfont"></span>
  107.         <span>61258次播放</span>
  108.       </div>
  109.     </div>
  110.     <!-- 最新文章 -->
  111.     <!-- 最瓣博文 -->
  112.     <!-- 最新回答 -->
  113.     <!-- 页脚 -->
  114.     <div style="width: 100vw; height: 85px;"></div>
  115.     <footer>
  116.       <a href=""
  117.         ><span class="iconfont"></span>
  118.         <span>首页</span>
  119.       </a>
  120.       <a href=""
  121.         ><span class="iconfont"></span>
  122.         <span>视频</span>
  123.       </a>
  124.       <a href=""
  125.         ><span class="iconfont"></span>
  126.         <span>社区</span>
  127.       </a>
  128.       <a href=""
  129.         ><span class="iconfont"></span>
  130.         <span>我的</span>
  131.       </a>
  132.     </footer>
  133.   </body>
  134. </html>
  1. * {
  2.   margin: 0px;
  3.   padding: 0px;
  4. }
  5. a {
  6.   text-decoration: none;
  7.   color: #666;
  8. }
  9. html {
  10.   width: 100vw;
  11.   height: 100vh;
  12.   /* background-color: #888; */
  13.   font-size: 14px;
  14. }
  15. body {
  16.   min-width: 360px;
  17.   max-width: 780px;
  18.   /* width: 360px; */
  19.   background-color: #cecece;
  20.   display: flex;
  21.   flex-flow: column nowrap;
  22. }
  23. body > header {
  24.   background-color: #333;
  25.   color: white;
  26.   height: 26px;
  27.   display: flex;
  28.   align-items: center;
  29.   justify-content: space-between;
  30.   padding: 0 15px;
  31.   position: fixed;
  33.   width: 96vw;
  34. }
  35. body > .slider {
  36.   /* height: 146px; */
  37. }
  38. body > .slider > img {
  39.   width: 100vw;
  40. }
  41. nav {
  42.   background-color: white;
  43.   padding-top: 15px;
  44.   /* height: 18vh; */
  45.   display: flex;
  46.   flex-flow: row wrap;
  47. }
  48. nav > div {
  49.   width: 25vw;
  50.   display: flex;
  51.   flex-flow: column nowrap;
  52.   align-items: center;
  53. }
  54. nav > div > a:first-of-type {
  55.   text-align: center;
  56. }
  57. nav > div img {
  58.   width: 25%;
  59. }
  60. h3 {
  61.   padding-left: 12px;
  62.   /* background-color: #b8cad4; */
  63.   width: 100vw;
  64.   color: #666;
  65. }
  66. .tuijian {
  67.   /* padding-left: 12px; */
  68.   width: 100vw;
  69.   display: flex;
  70.   flex-flow: row nowrap;
  71.   justify-content: space-around;
  72. }
  73. .tuijian > a > img {
  74.   width: 100%;
  75. }
  76. .tuijian > a:first-child {
  77.   margin-left: 12px;
  78.   /* width: 168px; */
  79. }
  80. .tuijian > a:last-child {
  81.   margin-left: 6px;
  82.   /* width: 168px; */
  83. }
  84. .tj2 {
  85.   margin: 15px 0 0 0px;
  86.   width: 100%;
  87.   background-color: white;
  88.   display: flex;
  89.   flex-flow: row nowrap;
  90. }
  92. .tj2 > a {
  93.   margin: 6px 0px 0px 12px;
  94.   width: 36vw;
  95. }
  96. .tj2 > a > img {
  97.   width: 100%;
  98. }
  99. .tj2 > div {
  100.   margin-left: 12px;
  101.   margin-top: 15px;
  102.   color: #666;
  103.   flex-flow: row;
  104. }
  105. .tj2 > div > span {
  106.   margin-top: 30px;
  107. }
  108. footer {
  109.   width: 100vw;
  110.   height: 55px;
  111.   color: #666;
  112.   background-color: #efefef;
  113.   border-top: 1px solid #ccc;
  114.   position: fixed;
  115.   bottom: 0;
  116.   display: flex;
  117.   justify-content: space-around;
  118. }
  119. body > footer > a {
  120.   margin-top: 10px;
  121.   font-size: 0.8rem;
  122.   display: flex;
  123.   flex-flow: column nowrap;
  124.   align-items: center;
  125. }
  126. body > footer > a > span:first-of-type {
  127.   font-size: 1.6rem;
  128. }
上一条：CSS 中各类选择器的属性及应用下一条：细说CSS选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多