search

博客列表 >php中文网移动端首页布局实例（flex布局，包括字体图标的引用）

php中文网移动端首页布局实例（flex布局，包括字体图标的引用）

辛迪
辛迪原创
2020年04月15日 16:45:15526浏览

总结：通过以下实例，可对网页布局形成一个系统的概念，对网页布局的各部分源码有一个初步认识。实例中包括 html 中标签等的使用、css 中 flex 等的使用以及字体图标的引用。

网页布局源码

  1. ！<!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- 引入字体图标 -->
  7.     <link rel="stylesheet" href="font-icon.css" />
  8.     <title>php中文网</title>
  9.     <style>
  10.       /* 初始化 */
  11.       * {
  12.         margin: 0;
  13.         padding: 0;
  14.       }
  16.       /* 设置链接样式 */
  17.       a {
  18.         text-decoration: none;
  19.         color: gray;
  20.       }
  22.       /* 设置p标签颜色 */
  23.       p {
  24.         color: grey;
  25.       }
  27.       /* 设置网页宽度高度和大小 */
  28.       html {
  29.         width: 100vw;
  30.         min-height: 100vw;
  31.         font-size: 14px;
  32.       }
  34.       /* 主体区域样式 */
  35.       body {
  36.         min-width: 360px;
  37.         background-color: #f1f0ef;
  38.         display: flex;
  39.         flex-flow: column nowrap;
  40.       }
  42.       /* 页眉样式 */
  43.       body > header {
  44.         background-color: rgb(31, 30, 30);
  45.         height: 30px;
  46.         color: white;
  47.         display: flex;
  48.         justify-content: space-between;
  49.         align-items: center;
  50.         padding: 5px 10px;
  51.         position: fixed;
  52.         width: 100vw;
  53.       }
  55.       /* 页眉中字体图标右侧内边距 */
  56.       body > header .iconfont {
  57.         padding-right: 20px;
  58.       }
  60.       /* 设置页眉中图片样式 */
  61.       body > header > a > img {
  62.         height: 50px;
  63.         border-radius: 50%;
  64.       }
  66.       /* 轮播图样式 */
  67.       body > .slider {
  68.         margin-top: 20px;
  69.         padding-bottom: 10px;
  70.         background-color: #fff;
  71.       }
  73.       /* 设置轮播图中图片大小 */
  74.       body > .slider > img {
  75.         width: 100%;
  76.       }
  78.       /* 主导航区样式 */
  79.       body > nav {
  80.         display: flex;
  81.         flex-flow: row wrap;
  82.         padding: 15px;
  83.         background-color: #fff;
  84.       }
  86.       /* 主导航区每个div占设备宽度的1/4 */
  87.       body > nav > div {
  88.         display: flex;
  89.         flex-flow: column nowrap;
  90.         width: 25%;
  91.         align-items: center;
  92.         padding-bottom: 10px;
  93.       }
  95.       /* 主导航区图片链接的对齐方式 */
  96.       body > nav > div > a:first-of-type {
  97.         text-align: center;
  98.       }
  100.       /* 主导航区图片宽度 */
  101.       body > nav img {
  102.         width: 50%;
  103.       }
  105.       /* 标题样式 */
  106.       body > .title {
  107.         font-size: 1.2rem;
  108.         margin: 20px auto 10px 10px;
  109.         font-weight: bold;
  110.       }
  112.       /* 推荐课程第一部分 */
  113.       body > div > div:first-of-type {
  114.         display: flex;
  115.         margin: 0 5px;
  116.       }
  118.       /* 推荐课程第一部分内边距 */
  119.       .item.kc > a {
  120.         padding: 5px;
  121.       }
  123.       /* 推荐课程第一部分图片大小 */
  124.       body > div > div:first-of-type > a > img {
  125.         width: 100%;
  126.       }
  128.       /* 推荐课程，最新更新，最新文章，最新博文，最新问答设成flex */
  129.       .tjkc2,
  130.       .zxgx,
  131.       .zxwz,
  132.       .zxbw,
  133.       .zxwd {
  134.         display: flex;
  135.         flex-flow: column nowrap;
  136.       }
  138.       /* 项目样式 */
  139.       .item:not([class="item kc"]) {
  140.         display: flex;
  141.         justify-content: space-between;
  142.         background-color: #fff;
  143.         margin: 5px 10px;
  144.       }
  146.       /* 项目中的图片模块 */
  147.       .itemimg {
  148.         width: 70%;
  149.         padding: 10px;
  150.       }
  152.       /* 项目中的图片模块的图片宽度 */
  153.       .itemimg > img {
  154.         width: 100%;
  155.       }
  157.       /* 项目标题样式 */
  158.       .itemtitle:not([class="itemtitle wz"]):not([class="itemtitle bw"]) {
  159.         padding-bottom: 5px;
  160.         font-size: 1.2rem;
  161.       }
  163.       /* 课程级别样式 */
  164.       .kcjb {
  165.         color: honeydew;
  166.         background-color: grey;
  167.         border-radius: 30%;
  168.       }
  170.       /* 最新更新模块样式 */
  171.       .item > span {
  172.         display: flex;
  173.         flex-flow: column nowrap;
  174.         width: 100%;
  175.         padding: 10px;
  176.       }
  178.       /* 推荐课程中课程描述模块 */
  179.       .kcms {
  180.         justify-content: space-between;
  181.       }
  183.       /* 课程级别行设为flex */
  184.       .itemjb {
  185.         display: flex;
  186.       }
  188.       /* 项目中各文字部分设为flex */
  189.       body span > div:not([class="itemjb"]) {
  190.         display: flex;
  191.         justify-content: space-between;
  192.       }
  194.       /* 最新文章，最新博文文字描述标题加粗 */
  195.       .itemtitle.wz,
  196.       .itemtitle.bw {
  197.         font-weight: bold;
  198.       }
  200.       /* 最新博文内容样式 */
  201.       .item.bw,
  202.       .item.wd {
  203.         padding: 5px 10px;
  204.       }
  206.       /* 更多内容样式 */
  207.       .gdnr {
  208.         text-align: center;
  209.         background-color: #fff;
  210.         margin: 5px 10px;
  211.         padding: 5px 0;
  212.       }
  214.       /* 距离页脚最近的项目距离底部设置外边距，不被页脚遮盖 */
  215.       .gdnr.bottom {
  216.         margin-bottom: 55px;
  217.       }
  219.       /* 页脚样式 */
  220.       body > footer {
  221.         display: flex;
  222.         justify-content: space-around;
  223.         align-items: center;
  224.         border: 1px solid #c9c8c8;
  225.         height: 45px;
  226.         position: fixed;
  227.         bottom: 0;
  228.         width: 100vw;
  229.         background-color: #f1f0ef;
  230.       }
  232.       /* 页脚中项目样式 */
  233.       .itemyj {
  234.         display: flex;
  235.         flex-flow: column nowrap;
  236.         align-items: center;
  237.         width: 25%;
  238.       }
  240.       /* 字体图标大小 */
  241.       .iconfont {
  242.         font-size: 1.5rem;
  243.       }
  245.       /* 页脚“首页”红色 */
  246.       .itemyj:first-of-type > a {
  247.         color: red;
  248.       }
  250.       /* 设置一个空项目 */
  251.       .kong {
  252.         display: flex;
  253.         margin-bottom: 40px;
  254.       }
  255.     </style>
  256.   </head>
  257.   <body>
  258.     <!-- 页眉 -->
  259.     <header>
  260.       <span class="iconfont"> &#xe657; </span>
  261.       <a href=""><img src="logo.png" alt="" /></a>
  262.       <span class="iconfont"> &#xe611; </span>
  263.     </header>
  265.     <!-- 轮播图 -->
  266.     <div class="slider">
  267.       <img src="lb.png" />
  268.     </div>
  270.     <!-- 主导航 -->
  271.     <nav>
  272.       <div>
  273.         <a href=""><img src="html.png" /></a>
  274.         <a href="">HTML/CSS</a>
  275.       </div>
  276.       <div>
  277.         <a href=""><img src="JavaScript.png" /></a>
  278.         <a href="">JavaScript</a>
  279.       </div>
  280.       <div>
  281.         <a href=""><img src="code.png" /></a>
  282.         <a href="">服务端</a>
  283.       </div>
  284.       <div>
  285.         <a href=""><img src="sql.png" /></a>
  286.         <a href="">数据库</a>
  287.       </div>
  288.       <div>
  289.         <a href=""><img src="app.png" /></a>
  290.         <a href="">移动端</a>
  291.       </div>
  292.       <div>
  293.         <a href=""><img src="manual.png" /></a>
  294.         <a href="">手册</a>
  295.       </div>
  296.       <div>
  297.         <a href=""><img src="tool2.png" /></a>
  298.         <a href="">工具</a>
  299.       </div>
  300.       <div>
  301.         <a href=""><img src="live.png" /></a>
  302.         <a href="">直播</a>
  303.       </div>
  304.     </nav>
  306.     <!-- 推荐课程 -->
  307.     <p class="tjkc title">推荐课程</p>
  308.     <div class="tjkc">
  309.       <div class="item kc">
  310.         <a href=""><img src="tjkc01.jpg" /></a>
  311.         <a href=""><img src="tjkc02.jpg" /></a>
  312.       </div>
  313.     </div>
  314.     <div class="tjkc2">
  315.       <div class="item">
  316.         <a href="" class="itemimg"><img src="tjkc03.jpg" /></a>
  317.         <span class="wzms">
  318.           <a href="" class="itemtitle">CI框架30分钟极速入门</a>
  319.           <div class="itemjb">
  320.             <p class="kcjb"> 中级 </p>
  321.             <p>310590次播放</p>
  322.           </div>
  323.         </span>
  324.       </div>
  325.       <div class="item">
  326.         <a href="" class="itemimg"><img src="tjkc04.jpg" /></a>
  327.         <span class="wzms">
  328.           <a href="" class="itemtitle">2018前端入门_HTML5</a>
  329.           <div class="itemjb">
  330.             <p class="kcjb"> 初级 </p>
  331.             <p>310590次播放</p>
  332.           </div>
  333.         </span>
  334.       </div>
  335.     </div>
  337.     <!-- 最新更新 -->
  338.     <p class="zxgx title">最新更新</p>
  339.     <div class="zxgx">
  340.       <div class="item">
  341.         <a href="" class="itemimg"><img src="zxgx01.png" /></a>
  342.         <span class="kcms">
  343.           <a href="" class="itemtitle">PHP快速操控Excel之PhpSpreadsheet</a>
  344.           <p>
  345.             老的PHPExcel已经停止更新了...
  346.           </p>
  347.           <div>
  348.             <p class="kcjb"> 中级 </p>
  349.             <p>49598次播放</p>
  350.           </div>
  351.         </span>
  352.       </div>
  353.       <div class="item">
  354.         <a href="" class="itemimg"><img src="zxgx02.png" /></a>
  355.         <span class="kcms">
  356.           <a href="" class="itemtitle">Thinkphp6.0正式版视频教程</a>
  357.           <p>
  358.             Thinkphp6.0从2019年10月24日正式发布...
  359.           </p>
  360.           <div>
  361.             <p class="kcjb"> 中级 </p>
  362.             <p>49598次播放</p>
  363.           </div>
  364.         </span>
  365.       </div>
  366.       <div class="item">
  367.         <a href="" class="itemimg"><img src="zxgx03.jpg" /></a>
  368.         <span class="kcms">
  369.           <a href="" class="itemtitle">2019python自学视频</a>
  370.           <p>
  371.             本课程适合想从零开始学习 Python 编程语言...
  372.           </p>
  373.           <div>
  374.             <p class="kcjb"> 初级 </p>
  375.             <p>49598次播放</p>
  376.           </div>
  377.         </span>
  378.       </div>
  379.       <div class="item">
  380.         <a href="" class="itemimg"><img src="zxgx04.png" /></a>
  381.         <span class="kcms">
  382.           <a href="" class="itemtitle">PHP开发免费公益直播课</a>
  383.           <p>
  384.             主讲：php中文网-朱老师( Peter Zhu) ...
  385.           </p>
  386.           <div>
  387.             <p class="kcjb"> 初级 </p>
  388.             <p>49598次播放</p>
  389.           </div>
  390.         </span>
  391.       </div>
  392.       <div class="item">
  393.         <a href="" class="itemimg"><img src="zxgx05.jpg" /></a>
  394.         <span class="kcms">
  395.           <a href="" class="itemtitle">PHP开发免费公益直播课</a>
  396.           <p>
  397.             主讲：php中文网-朱老师( Peter Zhu) ...
  398.           </p>
  399.           <div>
  400.             <p class="kcjb"> 初级 </p>
  401.             <p>49598次播放</p>
  402.           </div>
  403.         </span>
  404.       </div>
  405.       <div class="item">
  406.         <a href="" class="itemimg"><img src="zxgx06.png" /></a>
  407.         <span class="kcms">
  408.           <a href="" class="itemtitle">PHP开发免费公益直播课</a>
  409.           <p>
  410.             主讲：php中文网-朱老师( Peter Zhu) ...
  411.           </p>
  412.           <div>
  413.             <p class="kcjb"> 中级 </p>
  414.             <p>49598次播放</p>
  415.           </div>
  416.         </span>
  417.       </div>
  418.     </div>
  420.     <!-- 最新文章 -->
  421.     <p class="zxwz title">最新文章</p>
  422.     <div class="zxwz">
  423.       <div class="item">
  424.         <span>
  425.           <a href="" class="itemtitle wz">Web 服务器排行榜（2020年04月）</a>
  426.           <a href=""><p>发布时间：2020-04-14</p></a>
  427.         </span>
  428.         <a href="" class="itemimg"><img src="zxwz01.jpg" /></a>
  429.       </div>
  430.       <div class="item">
  431.         <span>
  432.           <a href="" class="itemtitle wz">docker容器之间怎么互相调用</a>
  433.           <a href=""><p>发布时间：2020-04-14</p></a>
  434.         </span>
  435.         <a href="" class="itemimg"><img src="zxwz02.png" /></a>
  436.       </div>
  437.       <div class="item">
  438.         <span>
  439.           <a href="" class="itemtitle wz">win10用u盘做开机密钥的方法</a>
  440.           <a href=""><p>发布时间：2020-04-14</p></a>
  441.         </span>
  442.         <a href="" class="itemimg"><img src="zxwz03.jpg" /></a>
  443.       </div>
  444.       <div class="item">
  445.         <span>
  446.           <a href="" class="itemtitle wz">如何在mac上配置apache和php</a>
  447.           <a href=""><p>发布时间：2020-04-14</p></a>
  448.         </span>
  449.         <a href="" class="itemimg"><img src="zxwz04.png" /></a>
  450.       </div>
  451.       <div class="item">
  452.         <span>
  453.           <a href="" class="itemtitle wz">蓝屏无法进入任何模式怎么办</a>
  454.           <a href=""><p>发布时间：2020-04-14</p></a>
  455.         </span>
  456.         <a href="" class="itemimg"><img src="zxwz05.jpg" /></a>
  457.       </div>
  458.       <a href=""><p class="gdnr">更多内容</p></a>
  459.     </div>
  461.     <!-- 最新博文 -->
  462.     <p class="zxwz title">最新博文</p>
  463.     <div class="zxbw">
  464.       <div class="item bw">
  465.         <a href="" class="itemtitle bw">微信的openid和unionid</a>
  466.         <a href=""><p>2020-04-14</p></a>
  467.       </div>
  468.       <div class="item bw">
  469.         <a href="" class="itemtitle bw">JS实现HTML标签转义及反转义</a>
  470.         <a href=""><p>2020-04-14</p></a>
  471.       </div>
  472.       <div class="item bw">
  473.         <a href="" class="itemtitle bw"
  474.           >细说选择器：简单选择器、上下文选择器、伪类选择器、其它选择器</a
  475.         >
  476.         <a href=""><p>2020-04-14</p></a>
  477.       </div>
  478.       <div class="item bw">
  479.         <a href="" class="itemtitle bw">CSS 中各类选择器的属性及应用</a>
  480.         <a href=""><p>2020-04-14</p></a>
  481.       </div>
  482.       <div class="item bw">
  483.         <a href="" class="itemtitle bw">CSS3：弹性盒子flex布局</a>
  484.         <a href=""><p>2020-04-14</p></a>
  485.       </div>
  486.       <a href=""><p class="gdnr">更多内容</p></a>
  487.     </div>
  489.     <!-- 最新问答 -->
  490.     <p class="zxwz title">最新问答</p>
  491.     <div class="zxwd">
  492.       <div class="item wd">
  493.         <a href="" class="itemtitle bw">免费的虚拟主机分享</a>
  494.         <a href=""><p>2020-04-14</p></a>
  495.       </div>
  496.       <div class="item wd">
  497.         <a href="" class="itemtitle bw">登陆验证出错</a>
  498.         <a href=""><p>2020-04-14</p></a>
  499.       </div>
  500.       <div class="item wd">
  501.         <a href="" class="itemtitle bw">请教thinkPHP安装问题</a>
  502.         <a href=""><p>2020-04-14</p></a>
  503.       </div>
  504.       <div class="item wd">
  505.         <a href="" class="itemtitle bw">输入cmd命令</a>
  506.         <a href=""><p>2020-04-14</p></a>
  507.       </div>
  508.       <div class="item wd">
  509.         <a href="" class="itemtitle bw">cmd输入出现这个问题是怎么回事</a>
  510.         <a href=""><p>2020-04-14</p></a>
  511.       </div>
  512.       <a href=""><p class="gdnr bottom">更多内容</p></a>
  513.     </div>
  515.     <!-- 页脚 -->
  516.     <footer>
  517.       <div class="itemyj">
  518.         <a href=""><span class="iconfont"> &#xe64a; </span></a>
  519.         <a href="">首页</a>
  520.       </div>
  521.       <div class="itemyj">
  522.         <a href=""><span class="iconfont"> &#xe637; </span></a>
  523.         <a href="">视频</a>
  524.       </div>
  525.       <div class="itemyj">
  526.         <a href=""><span class="iconfont"> &#xe8b8; </span></a>
  527.         <a href="">社区</a>
  528.       </div>
  529.       <div class="itemyj">
  530.         <a href=""><span class="iconfont"> &#xe60e; </span></a>
  531.         <a href="">我的</a>
  532.       </div>
  533.     </footer>
  534.   </body>
  535. </html>

引用字体图标

首页布局中需要引用字体图标，引用方式如下：

<!-- 以下字体图标的引用方式为字体编码引入 --> 

  1. <link rel="stylesheet" href="font-icon.css" />
  1. <body>
  2.   <a href=""><span class="iconfont"></span></a>
  3. </body>

字体图标的下载方式(以阿里图标为例):

  • 1、在浏览器中搜索“阿里图标”，点击“Iconfont-阿里巴巴矢量图标库”。

    搜索阿里图标

  • 2、打开“Iconfont-阿里巴巴矢量图标库”，选择需要的字体库点击打开字体库。

    字体库

  • 3、选择需要的字体图标加入购物车。

    加入购物车

  • 4、点击购物车，下载代码。

    购物车

  • 5、下载的是一个名为“download.zip”的压缩包，解压缩后为字体文件夹。

  • 6、打开文件夹中的“demo_index.html”，根据说明引用字体图标。

Unicode 使用步骤如下：

<!-- 也可以font-class 引用、Symbol 引用 -->

第一步：拷贝项目下面生成的@font-face

  1. @font-face {
  2.   font-family: "iconfont";
  3.   src: url("iconfont.eot");
  4.   src: url("iconfont.eot?#iefix") format("embedded-opentype"), url("iconfont.woff2")
  5.       format("woff2"), url("iconfont.woff") format("woff"), url("iconfont.ttf")
  6.       format("truetype"), url("iconfont.svg#iconfont") format("svg");
  7. }

第二步：定义使用 iconfont 的样式

  1. .iconfont {
  2.   font-family: "iconfont" !important;
  3.   font-size: 16px;
  4.   font-style: normal;
  5.   -webkit-font-smoothing: antialiased;
  6.   -moz-osx-font-smoothing: grayscale;
  7. }

第三步：挑选相应图标并获取字体编码，应用于页面

  1. <span class="iconfont">  &#x33; </span>

&#x33;为所需要的字体图标的编码，在“demo_index.html”中选择需要的字体图标的编码。

网页中引入的 css 文件

font-icon.css

  1. @font-face {
  2.   font-family: "iconfont";
  3.   /* 所有的url地址根据实际路径修改 */
  4.   src: url("font_icon/iconfont.eot");
  5.   src: url("font_icon/iconfont.eot?#iefix") format("embedded-opentype"), url("font_icon/iconfont.woff2")
  6.       format("woff2"), url("font_icon/iconfont.woff") format("woff"), url("font_icon/iconfont.ttf")
  7.       format("truetype"), url("font_icon/iconfont.svg#iconfont") format("svg");
  8. }
  10. .iconfont {
  11.   font-family: "iconfont" !important;
  12.   font-size: 16px;
  13.   font-style: normal;
  14.   -webkit-font-smoothing: antialiased;
  15.   -moz-osx-font-smoothing: grayscale;
  16. }

网页实例效果

实例效果图1

实例效果图2

实例效果图3

实例效果图4

上一条：Flex弹性布局下一条：Flex布局的详解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多