Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html布局与实例
Blogger Information
Blog 41
fans 0
comment 0
visits 25286
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
html布局与实例
自由之上
Original
659 people have browsed it

flex布局与glid布局

flex实现pc端三列布局



  1. <header>
  2.     <nav>
  3.         <a href="">LOGO</a>
  4.         <a href="">导航1</a>
  5.         <a href="">导航2</a>
  6.         <a href="">导航3</a>
  7.         <a href="">导航4</a>
  8.         <a href="">导航5</a>
  9.         <a href="">导航6</a>
  10.         <a href="">登录</a>
  11.     </nav>
  12. </header>
  13. <div class="container">
  14.     <div class="left">左侧</div>
  15.     <main>内容</main>
  16.     <div class="right">右侧</div>
  17. </div>
  18. <footer>
  19.     <p>欢迎光临，版权号239082308230894</p>
  20.     <p>地址：北京上海广州</p>
  21. </footer>
  1. /* 重置样式 */
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.         box-sizing: border-box;
  6.     }
  8.     a {
  9.         text-decoration: none;
  10.         color: #666;
  11.     }
  13.     /* 显示内容使用flex布局垂直排列 */
  14.     body {
  15.         display: flex;
  16.         flex-flow: column nowrap;
  17.     }
  19.     /* 设置页眉与页脚具有相同属性的样式 */
  20.     header,
  21.     footer {
  22.         height: 50px;
  23.         background-color: lightcyan;
  25.         display: flex;
  26.         flex-flow: column nowrap;
  27.         justify-content: center;
  28.         align-items: stretch;
  29.     }
  31.     /* 设置导航栏 */
  32.     header>nav {
  33.         display: flex;
  34.         justify-content: center;
  35.         align-items: center;
  36.     }
  38.     header>nav>a {
  39.         padding: 0 10px;
  40.     }
  42.     /* logo标签与登录标签区别对待 */
  43.     header>nav>a:first-of-type {
  44.         margin-right: 20px;
  45.         font-size: 2.0rem;
  46.         color: blue;
  47.     }
  49.     header>nav>a:last-of-type {
  50.         margin-left: auto;
  51.         margin-right: 50px;
  52.     }
  54.     header>nav>a:hover:not(:first-of-type) {
  55.         color: red;
  56.     }
  58.     /* 设置主体区样式 */
  59.     .container {
  60.         min-height: 500px;
  61.         margin: 10px;
  62.         display: flex;
  63.     }
  65.     .container>.left,
  66.     .container>.right {
  67.         background-color: lightgray;
  68.         flex: 0 0 200px;
  69.     }
  71.     .container>main {
  72.         margin-left: 10px;
  73.         margin-right: 10px;
  74.         background-color: lightpink;
  75.         flex: 1 1 600px;
  76.     }
  78.     footer {
  79.         align-items: center;
  80.     }
  82.     /* 使用媒体查询适配终端设备样式 */
  83.     @media screen and (max-width:800px) {
  84.         .container>.right {
  85.             display: none;
  86.         }
  88.         .container>main {
  89.             margin-right: 0;
  90.         }
  91.     }
  93.     @media screen and (max-width:600px) {
  94.         .container>.left {
  95.             display: none;
  96.         }
  98.         .container>main {
  99.             margin-left: 0;
  100.         }
  102.         header a:not(:first-of-type):not(:last-of-type) {
  103.             display: none;
  104.         }
  105.     }

说明：

  1. 界面分为页眉、主体、页脚，使用flex布局垂直排列
  2. 页眉与页脚使用flex垂直水平居中对齐，固定高度与背景颜色
  3. 导航区使用flex水平布局，对logo图标与登录分别处理
  4. 左栏、内容区、左栏通过flex的放大因子、缩小因子，基准尺寸设置大小
  5. 使用媒体查询适配终端设备样式

flex实现(m.php.cn)首页

图一 图二 图三

参考：
解决img在a标签中存在下间距问题

  1. <header>
  2.     <!-- 导航栏 -->
  3.     <a href=""><span class="user"><img id="user_avater" src="image/user_avatar.jpg"></span></a>
  4.     <a href=""><span class="logo"><img id="logo" src="image/logo.png"></span></a>
  5.     <a href=""><span class="iconfont more">&#xe655;</span></a>
  6. </header>
  7. <!-- 轮播图 -->
  8. <a href=""><img class="banner" src="image/lunbotu.png" alt=""></a>
  9. <!-- 菜单栏 -->
  10. <div class="menu">
  11.     <div class="item"><a href=""><img src="image/html.png" alt=""></a><a href="">HTML/CSS</a></div>
  12.     <div class="item"><a href=""><img src="image/JavaScript.png" alt=""></a><a href="">JavaScript</a></div>
  13.     <div class="item"><a href=""><img src="image/code.png" alt=""></a><a href="">服务端</a></div>
  14.     <div class="item"><a href=""><img src="image/sql.png" alt=""></a><a href="">数据库</a></div>
  15.     <div class="item"><a href=""><img src="image/app.png" alt=""></a><a href="">移动端</a></div>
  16.     <div class="item"><a href=""><img src="image/manual.png" alt=""></a><a href="">手册</a></div>
  17.     <div class="item"><a href=""><img src="image/tool2.png" alt=""></a><a href="">工具</a></div>
  18.     <div class="item"><a href=""><img src="image/live.png" alt=""></a><a href="">直播</a></div>
  19. </div>
  20. <!-- 推荐课程 -->
  21. <h2 class="title">推荐课程</h2>
  22. <div class="recommend">
  23.     <div class="head">
  24.         <a href=""><img src="image/recommed1.jpg" alt=""></a>
  25.         <a href=""><img src="image/recommed2.jpg" alt=""></a>
  26.     </div>
  27.     <div class="body">
  28.         <a href="">
  29.             <img src="image/recommed4.jpg" alt="">
  30.             <dl>
  31.                 <dt>CI框架30分钟极速入门</dt>
  32.                 <dd>
  33.                     <span class="tip">中级</span>3232次播放
  34.                 </dd>
  35.             </dl>
  36.         </a>
  37.         <a href="">
  38.             <img src="image/recommed3.jpg" alt="">
  39.             <dl>
  40.                 <dt>CI框架30分钟极速入门</dt>
  41.                 <dd>
  42.                     <span class="tip">中级</span>3232次播放
  43.                 </dd>
  44.             </dl>
  45.         </a>
  46.     </div>
  47. </div>
  48. <!-- 最近更新 -->
  49. <h2 class="title">最近更新</h2>
  50. <div class="new">
  51.     <a href="">
  52.         <img src="image/new1.png" alt="">
  53.         <dl>
  54.             <dt>我的十年撸码生涯啦啦啦啦出港年费2天</dt>
  55.             <dd>主题：2天速成vuejs出港年费2天速成vuejs出港年费</dd>
  56.             <dd><span class="tip">初级</span><span>1234次播放</span></dd>
  57.         </dl>
  58.     </a>
  59.     <a href="">
  60.         <img src="image/new2.png" alt="">
  61.         <dl>
  62.             <dt>我的十年撸码生涯啦啦啦啦出港年费2天</dt>
  63.             <dd>主题：2天速成vuejs出港年费2天速成vuejs出港年费</dd>
  64.             <dd><span class="tip">初级</span><span>1234次播放</span></dd>
  65.         </dl>
  66.     </a>
  67.     <a href="">
  68.         <img src="image/new3.png" alt="">
  69.         <dl>
  70.             <dt>我的十年撸码生涯啦啦啦啦出港年费2天</dt>
  71.             <dd>主题：2天速成vuejs出港年费2天速成vuejs出港年费</dd>
  72.             <dd><span class="tip">初级</span><span>1234次播放</span></dd>
  73.         </dl>
  74.     </a>
  75. </div>
  76. <!-- 最新文章 -->
  77. <h2 class="title">最新文章</h2>
  78. <div class="article">
  79.     <a href="">
  80.         <dl>
  81.             <dt>centos7的网卡如何重启</dt>
  82.             <dd>发布时间：2020-08-12</dd>
  83.         </dl>
  84.         <img src="image/article1.jpg" alt="">
  85.     </a>
  86.     <a href="">
  87.         <dl>
  88.             <dt>centos7的网卡如何重启</dt>
  89.             <dd>发布时间：2020-08-12</dd>
  90.         </dl>
  91.         <img src="image/article2.jpg" alt="">
  92.     </a>
  93.     <a href="">
  94.         <dl>
  95.             <dt>centos7的网卡如何重启</dt>
  96.             <dd>发布时间：2020-08-12</dd>
  97.         </dl>
  98.         <img src="image/article3.jpg" alt="">
  99.     </a>
  100.     <a  href="">
  101.         <span>更多内容</span>
  102.     </a>
  103. </div>
  104. <!-- 最新博文 -->
  105. <h2 class="title">最新博文</h2>
  106. <div class="blog">
  107.     <a href="">
  108.         <dl>
  109.             <dt>火狐浏览器如何设置爬虫代理</dt>
  110.             <dd>2020-08-12</dd>
  111.         </dl>
  112.     </a>
  113.     <a href="">
  114.         <dl>
  115.             <dt>火狐浏览器如何设置爬虫代理</dt>
  116.             <dd>2020-08-12</dd>
  117.         </dl>
  118.     </a>
  119.     <a href="">
  120.         <dl>
  121.             <dt>火狐浏览器如何设置爬虫代理</dt>
  122.             <dd>2020-08-12</dd>
  123.         </dl>
  124.     </a>
  125.     <a href="">
  126.         <dl>
  127.             <dt>火狐浏览器如何设置爬虫代理</dt>
  128.             <dd>2020-08-12</dd>
  129.         </dl>
  130.     </a>
  131.     <a href="">
  132.         <dl>
  133.             <dt>火狐浏览器如何设置爬虫代理</dt>
  134.             <dd>2020-08-12</dd>
  135.         </dl>
  136.     </a>
  137.     <a  href="">
  138.         <span>更多内容</span>
  139.     </a>
  140. </div>
  141. <!-- 页脚 -->
  142. <footer>
  143.     <a href=""><span class="iconfont tab">&#xe61f;</span><span>首页</span></a>
  144.     <a href=""><span class="iconfont tab">&#xe61e;</span><span>视频</span></a>
  145.     <a href=""><span class="iconfont tab">&#xe64f;</span><span>发现</span></a>
  146.     <a href=""><span class="iconfont tab">&#xe62f;</span><span>我的</span></a>
  147. </footer>
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. a {
  8.     text-decoration: none;
  9.     color: #666;
  10. }
  12. html {
  13.     font-size: 16px;
  14. }
  16. body {
  17.     min-width: 360px;
  18.     display: flex;
  19.     flex-flow: column nowrap;
  20.     background-color: #efefef;
  21. }
  23. /* 头部导航栏 */
  24. header {
  25.     width: 100vw;
  26.     height: 42px;
  27.     background-color: black;
  28.     position: fixed;
  30.     display: flex;
  31.     justify-content: space-between;
  32.     align-items: center;
  33. }
  35. header>a {
  36.     padding: 0 10px;
  37. }
  39. #user_avater {
  40.     width: 25px;
  41.     height: 25px;
  42.     border-radius: 25px;
  43. }
  45. #logo {
  46.     height: 45px;
  47. }
  49. .iconfont.more {
  50.     font-size: 1.5rem;
  51.     color: white;
  52.     font-weight: bold;
  53. }
  55. /* 轮播图 */
  56. .banner {
  57.     width: 100%;
  58.     height: 150px;
  59.     margin-top: 42px;
  60. }
  62. /* 菜单栏 */
  63. .menu {
  64.     display: flex;
  65.     flex-flow: row wrap;
  66.     background-color: white;
  67. }
  69. .menu>.item {
  70.     width: 25vw;
  71.     text-align: center;
  72.     padding: 10px;
  74.     display: flex;
  75.     flex-flow: column;
  76.     align-items: center;
  77. }
  79. .menu img {
  80.     width: 50%;
  81. }
  83. .menu>.item>a {
  84.     font-size: 0.8rem;
  85. }
  87. /* 推荐课程 */
  88. .title {
  89.     padding: 20px 10px 0;
  90.     color: #666;
  91.     font-weight: 500;
  92.     font-size: 1.3rem;
  93. }
  95. .recommend {
  96.     padding: 10px;
  98.     display: flex;
  99.     flex-flow: column;
  100. }
  102. .recommend>.head {
  103.     display: flex;
  104.     justify-content: center;
  105.     align-items: center;
  106. }
  108. .recommend>.head>a {
  109.     font-size: 0;
  110. }
  112. .recommend>.head>a:last-of-type {
  113.     margin-left: 10px;
  114. }
  116. .recommend>.head img {
  117.     width: 100%;
  118. }
  120. .recommend>.body {
  121.     display: flex;
  122.     flex-flow: column;
  123. }
  125. .recommend>.body a {
  126.     height: 98px;
  127.     margin-top: 20px;
  128.     padding: 10px;
  129.     background-color: white;
  131.     display: flex;
  132. }
  134. .recommend>.body img {
  135.     width: 40%;
  136. }
  138. .recommend>.body dl {
  139.     margin-left: 10px;
  140. }
  142. .recommend>.body dl>dt {
  143.     color: #999;
  144. }
  146. .tip {
  147.     padding: 3px 5px;
  148.     color: white;
  149.     margin-right: 5px;
  150.     background-color: #000000;
  151.     border-radius: 10px;
  152.     font-size: 0.7rem;
  153.     font-weight: 800;
  154. }
  156. .recommend>.body dl>dd {
  157.     color: #999;
  158.     font-size: 0.7rem;
  159.     margin-top: 15px;
  160. }
  162. /* 最近更新 */
  163. .new {
  164.     padding: 10px;
  165.     display: flex;
  166.     flex-flow: column;
  167. }
  169. .new a {
  170.     height: 98px;
  171.     margin-top: 20px;
  172.     padding: 10px;
  173.     background-color: white;
  175.     display: flex;
  176. }
  178. .new a:first-of-type {
  179.     margin-top: 0px;
  180. }
  182. .new img {
  183.     width: 40%;
  184. }
  186. .new dl {
  187.     width: 56%;
  188.     margin-left: 10px;
  189.     display: flex;
  190.     flex-flow: column;
  191.     justify-content: space-around;
  192. }
  194. .new dt,
  195. .new dd {
  196.     color: #999;
  197.     overflow: hidden;
  198.     text-overflow: ellipsis;
  199.     white-space: nowrap;
  200. }
  202. .new dd {
  203.     font-size: 0.7rem;
  204. }
  206. .new dd:last-of-type {
  207.     display: flex;
  208.     justify-content: space-between;
  209.     align-items: center;
  210. }
  212. /* 最新文章 */
  213. .article {
  214.     padding: 10px;
  216.     display: flex;
  217.     flex-flow: column;
  218. }
  220. .article>a {
  221.     height: 84px;
  222.     margin-top: 10px;
  223.     padding: 10px;
  224.     background-color: white;
  226.     display: flex;
  227.     flex-flow: row nowrap;
  228.     justify-content: space-between;
  229. }
  231. .article>a:first-of-type {
  232.     margin-top: 0;
  233. }
  235. .article img {
  236.     width: 30%;
  237. }
  239. .article dt {
  240.     font-size: 0.9rem;
  241.     font-weight: bold;
  242.     color: #999;
  243. }
  245. .article dd {
  246.     margin-top: 10px;
  247.     font-size: 0.7rem;
  248.     color: #999;
  249. }
  251. .article>a:last-of-type {
  252.     height: 30px;
  253.     width: 100%;
  254.     padding: 0;
  255.     font-size: 0.9rem;
  256.     color: #999;
  257.     text-align: center;
  258.     line-height: 30px;
  260.     display: initial;
  261. }
  263. /* 最新博文 */
  264. .blog {
  265.     padding: 10px;
  266.     margin-bottom: 50px;
  268.     display: flex;
  269.     flex-flow: column;
  270. }
  272. .blog>a {
  273.     padding: 10px;
  274.     margin-top: 10px;
  275.     background-color: white;
  276. }
  278. .blog a:first-of-type {
  279.     margin-top: 0;
  280. }
  282. .blog dl {
  283.     display: flex;
  284.     flex-flow: row nowrap;
  285.     justify-content: space-between;
  286.     align-items: center;
  287. }
  289. .blog dt {
  290.     font-size: 0.8rem;
  291.     color: #999;
  292.     font-weight: bold;
  293. }
  295. .blog dd {
  296.     font-size: 0.6rem;
  297.     color: #999;
  298. }
  299. .blog>a:last-of-type {
  300.     height: 30px;
  301.     width: 100%;
  302.     padding: 0;
  303.     font-size: 0.9rem;
  304.     color: #999;
  305.     text-align: center;
  306.     line-height: 30px;
  308.     display: initial;
  309. }
  310. /* 页脚 */
  311. footer{
  312.     height:50px;
  313.     background-color: #efefef;
  314.     border-top:1px solid #ccc;
  315.     position:fixed;
  316.     bottom:0;
  317.     left: 0;
  318.     right:0;
  320.     display: flex;
  321.     flex-flow:row nowrap;
  322.     justify-content: space-around;
  323.     align-items: center;
  324. }
  325. footer>a{
  326.     display:flex;
  327.     flex-flow:column nowrap;
  328.     align-items:center;
  329. }
  330. footer>a:first-of-type{
  331.     color:red;
  332. }
  333. footer .tab{
  334.     font-size: 1.2rem;
  335. }
  336. footer span:last-of-type{
  337.     font-size: 0.8rem;
  338. }

说明

  1. 准备素材 网站右键另存内将素材保存到本地
  2. 准备字体图标 iconfont网站查找素材添加到项目,下载到本地
  3. 分块处理 头部导航栏/轮播图/菜单栏/推荐课程/最近更新/最新文章/最新博文/底部选项卡
  4. 头部导航栏 flex水平排列,两端对齐,整体加一个左右边距,使用固定定位,不随滚动条的上下滚动而滚动
  5. 轮播图 宽度占满,高度固定
  6. 菜单栏 flex水平排列允许换行显示,项目宽度为设备宽度4/1(25vw)项目内部再使用flex垂直排列交叉轴方向居中显示
  7. 推荐/最近/最新博文 标题栏可统一设置样式,整体模块采用flex垂直排列,项目内再使用flex水平与垂直排列相互嵌套完成大致布局
  8. 底部选项卡 flex水平排列两端对齐,项目内使用flex垂直排列居中对齐,使用固定定位将该模块定位在页面底部

某企业站首页:星巴克

参考链接：星巴克官网: 用每一杯咖啡传递星巴克独特的咖啡体验

  • 媒体查询规则：
  • 设备屏幕最大为1024像素时:关闭侧边栏
图一 图二 图三 
  1. <!-- 左侧导航 -->
  2.         <nav>
  3.             <header>
  4.                 <a href="" class="logo"><img src="image2/logo.svg" alt=""></a>
  5.                 <a href="">门店</a>
  6.                 <a href="">我的账户</a>
  7.                 <a href="">菜单</a>
  8.                 <a href="">
  9.                     <img src="image2/icon-hamburger.svg" alt="">
  10.                 </a>
  11.             </header>
  12.             <div class="body">
  13.                 <div class="con">
  14.                     <div class="content">
  15.                         <span>心情惬意，来杯咖啡吧 ☕</span>
  16.                     </div>
  17.                     <footer>
  18.                         <a href="">
  19.                             <img src="" alt=""><span>登录</span>
  20.                         </a>
  21.                         <a href=""><span>注册</span></a>
  22.                     </footer>
  23.                 </div>
  24.             </div>
  25.         </nav>
  26.         <!-- 内容区 -->
  27.         <section class="container">
  28.             <section class="row">
  29.                 <div class="col-12 bigimg ">
  30.                     <span class="tag_ad">广告</span>
  31.                     <div class="hero"><img src="image2/banner.jpg" alt=""></div>
  32.                 </div>
  33.             </section>
  34.             <section class="row small_img">
  35.                 <div class="col-4"><img src="image2/tmall-2020-06-29-zh.jpg" alt=""></div>
  36.                 <div class="col-4"><img src="image2/starbucks-design-studio-web-china.jpg" alt=""></div>
  37.                 <div class="col-4"><img src="image2/homepage-career-cn.jpg" alt=""></div>
  39.             </section>
  40.             <!-- 第三部分 -->
  41.             <section class="row msg">
  42.                 <div class="col-6 small_msg">
  43.                     <h2>星享俱乐部</h2>
  44.                     <p>开启您的星享之旅，星星越多、会员等级越高、<br>好礼越丰富。
  45.                         <a href="">了解更多 ›</a>
  46.                     </p>
  47.                     <p class="account"><a href="">注册</a><a href="">登录</a></p>
  48.                 </div>
  49.                 <div class="col-6 small_logo"><img src="image2/logo-msr-new.svg" alt=""></div>
  50.             </section>
  51.             <section class="row goods">
  52.                 <div class="col-12">
  53.                     <h2>星巴克精选</h2>
  54.                     <p>在星巴克天猫旗舰店发现更多咖啡心意</p>
  55.                     <div class="card">
  56.                         <a href="">
  57.                             <img src="image2/tmall-card-01.png" alt="">
  58.                             <span class="content">
  59.                                 <h2>会员星礼包</h2>
  60.                                 <p>星享卡新升级<br>更多心意好礼</p>
  61.                                 <p>了解更多 ›</p>
  62.                             </span>
  63.                         </a>
  64.                         <a href="">
  65.                             <img src="image2/tmall-card-02.png" alt="">
  66.                             <span class="content">
  67.                                 <h2>会员星礼包</h2>
  68.                                 <p>星享卡新升级<br>更多心意好礼</p>
  69.                                 <p>了解更多 ›</p>
  70.                             </span>
  71.                         </a>
  72.                         <a href="">
  73.                             <img src="image2/tmall-eticket.png" alt="">
  74.                             <span class="content">
  75.                                 <h2>会员星礼包</h2>
  76.                                 <p>星享卡新升级<br>更多心意好礼</p>
  77.                                 <p>了解更多 ›</p>
  78.                             </span>
  79.                         </a>
  80.                         <a href="">
  81.                             <img src="image2/tmall-reserve.png" alt="">
  82.                             <span class="content">
  83.                                 <h2>会员星礼包</h2>
  84.                                 <p>星享卡新升级<br>更多心意好礼</p>
  85.                                 <p>了解更多 ›</p>
  86.                             </span>
  87.                         </a>
  88.                     </div>
  89.                 </div>
  90.             </section>
  91.             <section class="row forum">
  92.                 <div class="col-12">
  93.                     <h2 class="title1">1912 派克街 | 咖啡星讲堂</h2>
  94.                     <p class="title2">了解更多星巴克咖啡文化</p>
  95.                     <div class="content">
  96.                         <a href="">
  97.                             <img src="image2/coffeehouse-coffee-cultivation-kv.jpg" alt="">
  98.                             <span class="tag_type"></span>
  99.                             <strong>咖啡的起源与培植</strong>
  100.                         </a>
  101.                         <a href="">
  102.                             <img src="image2/coffeehouse-4-fundamentals-kv.jpg" alt="">
  103.                             <span class="tag_type"></span>
  104.                             <strong>咖啡的起源与培植</strong>
  105.                         </a>
  106.                         <a href="">
  107.                             <img src="image2/coffeehouse-roast-story-kv.jpg" alt="">
  108.                             <span class="tag_type"></span>
  109.                             <strong>咖啡的起源与培植</strong>
  110.                         </a>
  111.                         <a href="">
  112.                             <img src="image2/coffeehouse-pour-over-kv.jpg" alt="">
  113.                             <span class="tag_type"></span>
  114.                             <strong>咖啡的起源与培植</strong>
  115.                         </a>
  116.                         <a href="">
  117.                             <img src="image2/coffeehouse-coffee-cultivation-kv.jpg" alt="">
  118.                             <span class="tag_type"></span>
  119.                             <strong>咖啡的起源与培植</strong>
  120.                         </a>
  121.                         <a href="">
  122.                             <img src="image2/coffeehouse-4-fundamentals-kv.jpg" alt="">
  123.                             <span class="tag_type"></span>
  124.                             <strong>咖啡的起源与培植</strong>
  125.                         </a>
  126.                         <a href="">
  127.                             <img src="image2/coffeehouse-roast-story-kv.jpg" alt="">
  128.                             <span class="tag_type"></span>
  129.                             <strong>咖啡的起源与培植</strong>
  130.                         </a>
  131.                         <a href="">
  132.                             <img src="image2/coffeehouse-pour-over-kv.jpg" alt="">
  133.                             <span class="tag_type"></span>
  134.                             <strong>咖啡的起源与培植</strong>
  135.                         </a>
  136.                         <a href="">
  137.                             <img src="image2/coffeehouse-coffee-cultivation-kv.jpg" alt="">
  138.                             <span class="tag_type"></span>
  139.                             <strong>咖啡的起源与培植</strong>
  140.                         </a>
  141.                         <a href="">
  142.                             <img src="image2/coffeehouse-4-fundamentals-kv.jpg" alt="">
  143.                             <span class="tag_type"></span>
  144.                             <strong>咖啡的起源与培植</strong>
  145.                         </a>
  146.                         <a href="">
  147.                             <img src="image2/coffeehouse-roast-story-kv.jpg" alt="">
  148.                             <span class="tag_type"></span>
  149.                             <strong>咖啡的起源与培植</strong>
  150.                         </a>
  151.                         <a href="">
  152.                             <img src="image2/coffeehouse-pour-over-kv.jpg" alt="">
  153.                             <span class="tag_type"></span>
  154.                             <strong>咖啡的起源与培植</strong>
  155.                         </a>
  156.                     </div>
  157.                 </div>
  158.             </section>
  159.             <section class="row">
  160.                 <footer class="col-12">
  161.                     <a href=""><img src="image2/icpicon.png" alt="">沪公网安备 ************号</a>
  162.                     <a href="">沪ICP备*****号</a>
  163.                 </footer>
  164.             </section>
  165.         </section>
  1.         <style type="text/css">
  2.             * {
  3.                 margin: 0;
  4.                 padding: 0;
  5.                 box-sizing: border-box;
  6.             }
  8.             a {
  9.                 text-decoration: none;
  10.             }
  12.             html {
  13.                 font-size: 10px;
  14.             }
  16.             /* 左侧导航 */
  17.             nav {
  18.                 width: 30%;
  19.                 height: 100vh;
  20.                 background-color: white;
  22.                 display: flex;
  23.                 flex-flow: column nowrap;
  25.                 position: fixed;
  26.             }
  28.             nav>header {
  29.                 padding: 0 10px;
  30.                 height: 96px;
  31.                 background-color: lightcyan;
  33.                 display: flex;
  34.                 flex-flow: row nowrap;
  35.                 align-items: center;
  36.             }
  38.             nav>header>a {
  39.                 margin: 0 10px;
  40.                 color: inherit;
  41.                 font-weight: bold;
  42.                 font-size: 1.6rem;
  43.             }
  45.             nav>header>a:last-of-type {
  46.                 margin-left: auto;
  47.             }
  49.             nav>header>a:first-of-type>img {
  50.                 width: 36px;
  51.             }
  53.             nav>header>a:last-of-type>img {
  54.                 width: 24px;
  55.             }
  57.             nav>.body {
  58.                 width: 100%;
  59.                 height: 80vh;
  61.                 display: flex;
  62.                 flex-flow: column;
  63.                 justify-content: center;
  64.                 align-items: end;
  65.             }
  67.             nav>.body>.con {
  68.                 width: 70%;
  69.                 height: 100px;
  70.                 margin-right: 30px;
  71.             }
  73.             nav>.body .content>span {
  74.                 font-size: 2.5rem;
  75.                 font-weight: bold;
  76.             }
  78.             nav footer {
  79.                 margin-top: 30px;
  80.             }
  82.             nav>.body footer span {
  83.                 margin: 0 10px;
  84.                 padding: 2px 10px;
  85.                 color: #55A532;
  86.                 font-size: 1.7rem;
  87.                 border: 1px solid #55A532;
  88.                 border-radius: 10px;
  89.                 ;
  90.             }
  92.             /* 内容区 */
  93.             .title1 {
  94.                 font-size: 2.2rem;
  95.                 font-weight: 400;
  96.                 margin-bottom: 18px;
  97.                 text-align: center;
  98.             }
  100.             .title2 {
  101.                 font-size: 1.6rem;
  102.                 text-align: center;
  103.                 color: rgba(0, 0, 0, 0.56);
  104.             }
  106.             .container {
  107.                 width: 70%;
  108.                 margin-left: 30%;
  109.                 border-left: 1px solid #D3D3D3;
  110.                 float: left;
  111.             }
  113.             .bigimg {
  114.                 position: relative;
  115.             }
  117.             .bigimg .tag_ad {
  118.                 padding: 3px 6px;
  119.                 font-size: 1.2rem;
  120.                 border-radius: 5px;
  121.                 color: #bbb;
  122.                 background-color: #555555;
  124.                 position: absolute;
  125.                 right: 10px;
  126.                 top: 10px;
  127.             }
  129.             .bigimg img {
  130.                 width: 100%;
  131.                 display: block;
  132.             }
  134.             /* 第二部分 */
  135.             .small_img {
  136.                 padding: 0 10px;
  137.                 background-color: #F7F7F7;
  138.                 box-shadow: 0 0 2px #eee;
  139.             }
  141.             .small_img img {
  142.                 padding: 20px 10px;
  143.                 width: 100%;
  144.                 border-radius: 21px;
  145.             }
  147.             /* 第三部分 */
  148.             .msg {
  149.                 height: 250px;
  150.             }
  152.             .msg .small_msg {
  153.                 margin-left: auto;
  154.                 display: flex;
  155.                 flex-flow: column;
  156.                 justify-content: center;
  157.             }
  159.             .msg h2 {
  160.                 font-size: 2.2rem;
  161.                 font-weight: 400;
  162.             }
  164.             .msg p {
  165.                 margin-top: 20px;
  166.                 font-size: 1.6rem;
  167.                 font-weight: 200;
  168.                 color: rgba(0, 0, 0, 0.56);
  169.                 line-height: 30px;
  170.             }
  172.             .msg a {
  173.                 color: #C2A661;
  174.             }
  176.             .msg .account a {
  177.                 color: #00A862;
  178.                 padding: 5px 15px;
  179.                 margin-top: 30px;
  180.                 border: 1px solid #00A862;
  181.                 border-radius: 20px;
  182.             }
  184.             .msg .account a:last-of-type {
  185.                 margin-left: 5px;
  186.             }
  188.             .msg img {
  189.                 width: 236px;
  190.             }
  192.             .msg .small_logo {
  193.                 display: flex;
  194.                 justify-content: center;
  195.                 align-items: center;
  196.             }
  198.             /* 第四部分 */
  199.             .goods {
  200.                 height: 416px;
  201.                 background-color: #F7F7F7;
  203.                 display: flex;
  204.                 flex-flow: column;
  205.                 align-items: center;
  206.                 justify-content: center;
  207.             }
  209.             .goods h2 {
  210.                 font-size: 2.2rem;
  211.                 font-weight: 400;
  212.                 margin-bottom: 18px;
  213.                 text-align: center;
  214.             }
  216.             .goods p {
  217.                 font-size: 1.6rem;
  218.                 text-align: center;
  219.                 color: rgba(0, 0, 0, 0.56);
  220.             }
  222.             .goods .card {
  223.                 margin: 60px auto 0;
  224.                 max-width: 786px;
  225.                 display: flex;
  226.                 align-items: center;
  227.             }
  229.             .goods .card a {
  230.                 width: 25%;
  231.                 height: 197px;
  232.                 margin: 0 10px;
  233.                 background-color: white;
  234.                 display: flex;
  235.                 flex-flow: column;
  236.                 justify-content: center;
  237.                 border-right: 1px solid #EEEEEE;
  238.                 border-bottom: 1px solid #EEEEEE;
  239.                 border-left: 1px solid #EEEEEE;
  241.                 position: relative;
  242.             }
  244.             .goods .card a:hover {
  245.                 top: -8px;
  246.                 box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.12);
  247.             }
  249.             .goods .card img {
  250.                 width: 101.4px;
  251.                 height: 72px;
  252.                 position: absolute;
  253.                 top: -30px;
  254.                 left: 0;
  255.                 right: 0;
  256.                 margin: 0 auto;
  257.             }
  259.             .goods .card h2 {
  260.                 margin-top: 20px;
  261.                 font-size: 1.6rem;
  262.                 color: rgba(0, 0, 0, 0.87);
  263.             }
  265.             .goods .card p {
  266.                 margin-top: 10px;
  267.                 color: rgba(0, 0, 0, 0.56);
  268.                 line-height: 30px;
  269.             }
  271.             .goods .card p:last-of-type {
  272.                 color: #887035;
  273.                 font-size: 1.2rem;
  274.             }
  276.             /* 第五部分 */
  277.             .forum {
  278.             }
  279.             .forum h2{
  280.                 margin-top: 40px;
  281.             }
  282.             .forum a {
  283.                 width: 290px;
  284.                 background-color: white;
  285.                 border: 1px solid #CCCCCC;
  286.                 border-radius: 5px;
  287.                 overflow: hidden;
  289.                 display: inline-block;
  291.                 position: relative;
  292.             }
  293.             .forum a:hover{
  294.                 top:-5px;
  295.                 box-shadow: 2px 2px 2px #D3D3D3;
  296.             }
  297.             .forum img {
  298.                 width: 100%;
  299.                 height:168px;
  300.             }
  301.             .forum .content{
  302.                 margin-top: 40px;
  304.                 display: grid;
  305.                 grid-template-columns: repeat(auto-fill,290px);
  306.                 grid-template-rows: repeat(auto-fill,225px);
  307.                 place-content: space-evenly;
  308.                 gap:25px;
  309.             }
  311.             .forum strong{
  312.                 font-size: 1.6rem;
  313.                 font-weight: 400;
  314.                 padding: 0 20px;
  315.                 color:rgba(0, 0, 0, 0.87);
  316.                 line-height: 50px;
  317.             }
  318.             /* 结尾部分 */
  319.             footer{
  320.                 margin-top: 30px;
  321.                 height:50px;
  322.                 text-align: center;
  323.             }
  324.             footer a{
  325.                 line-height: 50px;
  326.                 font-size: 1.4rem;
  327.                 color:rgb(51, 51, 51);
  328.             }
  329.             /* 设备屏幕最大为1024像素时使用该媒体查询 */
  330.             @media screen and (max-width:1024px){
  331.                 nav{
  332.                     display: none;
  333.                 }
  334.                 .container {
  335.                     width: 100%;
  336.                     margin-left: 0;
  337.                 }
  338.             }
  340.         </style>

说明

  • 左侧菜单使用固定定位，不随屏幕的滚动而滚动，宽度为30%
  • 右侧内容区使用据左边距为30%来防止覆盖左侧菜单
  • a标签包含img元素，设置圆角时图片部分不响应，可对a标签设置overflow:hidden来解决
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