微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 UI设计 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > html布局与实例
博主信息
博文 41
粉丝 0
评论 0
访问量 40819
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html布局与实例
自由之上
原创
907人浏览过

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来解决
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：整体效果还可以, 随着经验的积累, 不少细节处会越来越好的
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录