search

博客列表 >html布局与实例

html布局与实例

自由之上
自由之上原创
2020年08月18日 13:46:09658浏览

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来解决
上一条：js基础知识学习下一条：微博输入字数案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多