简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 仿PHP中文网手机版首页
Blogger Information
Blog 16
fans 0
comment 0
visits 16961
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
仿PHP中文网手机版首页
HTML基础标签
Original
856 people have browsed it

效果:

1.JPG

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿PHP手机端首页</title>
    <style>
        /********<!--初始化init-->***********/
        body , footer{
            box-sizing: border-box;
            min-width: 320px;
            max-width: 768px;
            margin: 0 auto;
            background: #edeff0;
            position:relative;
            color: grey;
            overflow-x:hidden;
            /*不要出现水平滚动条*/
            -webkit-tap-highlight-color: transparent;
            /*点击链接跳转时出现高亮 设置为透明:iOS/iPad*/
        }
        /*设置全部图片自适应父容器 响应式显示*/
        img{
            width: 100%;
        }
        ul , li {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a{
            text-decoration: none;
            color: grey;
        }

        /*********头部样式************/
        header {
            position: fixed;
            top:0;
            /*固定定位*/

            width:100%;
            height: 42px;
            background: #444;
            color: white;
            /*固定定位元素必须设置宽高度*/

            min-width:320px;
            max-width: 768px;
            /*设置最小尺寸*/

            display:flex;
            justify-content: space-between;
            /*主轴分散 两端对齐*/
            align-items: center;
            /*交叉轴 居中*/
        }
        header > img:first-of-type , header >img:last-of-type{
            width: 26px;
            height: 26px;
            margin: 5px;
        }
        header > img:first-of-type{
            border-radius: 50%;
        }
        header > img{
            width: 94px;
        }
        /**********轮播图***********/
        .banner {
            display: flex;
            height: 200px;
        }
        /**********导航区***********/
        nav {
            background-color: white;
            display: flex;
            flex-flow: column nowrap;
            /*主轴为垂直方向  不换行*/
        }
        nav  img {
            width: 45px;
            height: 49px;
            /*图片默认大小*/
        }
        nav > ul {
            display: flex;
            /*flex-flow: row nowrap;*/
            /*每个菜单主轴 水平 不换行*/
        }
        nav ul li {
            flex: 1;
            /*每一菜单项均分全部空间*/
        }
        nav ul li a {
            display: flex;
            flex-flow: column nowrap;
            /*图片 文本垂直排列*/
            align-items: center;
            /*交叉轴居中*/
            margin: 15px;
            /*外边距设置使菜单项之间不拥挤*/
        }
        nav ul li a span {
            margin-top: 6px;
            /*设置文本与图标之间的间隙*/
        }
        /************主体区************/
        /*推荐课程*/
        main {
            height: 1000px;
        }
        main h3 {
            padding-left: 5px;
        }
        main > .recommend > section:first-of-type{
            display: flex;
            flex-flow: row nowrap;
            /*图片主轴水平排列不换行*/
        }
        main > .recommend > section:first-of-type > a {
            height: 90px;
            margin: 5px;
            /*增加外边距空隙*/
            flex: 1;
            /*图片均分全部空间 */
        }
        main > .recommend > section:first-of-type > a > img {
            height: 90px;
        }

        /*设置垂直排列的推荐课程*/
        main > .recommend > section:last-of-type{
            display: flex;
            flex-flow: column nowrap;
        }
        main > .recommend > section:last-of-type > div {
            background-color: #fff;
            margin: 5px;
            display: flex;
            /*flex-flow:  row nowrap;*/
        }
        main > .recommend > section:last-of-type > div img {
            width: 250px;
            height: 90px;
        }
        main > .recommend > section:last-of-type > div > span {
            display: flex;
            flex-flow: column nowrap;
            /*文本垂直排列*/
            margin-top: 8px;
            padding-left: 10px;
        }
        main > .recommend > section:last-of-type > div > span span {
            font-size: 11px;
            margin-top: 10px;

        }
        main > .recommend > section:last-of-type > div > span i {
            width:20px;
            font-style: normal;
            background-color: #333;
            color: white;
            border-radius: 10px;
            padding: 0 5px;
            font-size: 10px;
            /*字体大小    更小的*/
        }
        /************页脚区***********/
        footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 60px;
            min-width: 320px;
            max-width: 768px;
            background-color:#eee;
        }
        footer img {
            width: 20px;
            margin-top: 12px;
        }

        footer > ul {
            display: flex;
            border-top: 1px solid #ccc;
        }
        footer ul li {
            flex: 1;
        }
        footer ul li a {
            display:flex;
            flex-flow:  column nowrap;
            align-items: center;
        }
        footer ul li a span {
            font-size: 13px;
            margin-top: 2px;
        }
    </style>
</head>
<body>
<!--     头部固定栏-->
      <header>
          <img src="images/user-pic.jpeg" alt="">
          <img src="images/logo.png" alt="">
          <img src="images/user-nav.jpg" alt="">
      </header>
<!--     轮播图  暂用图片代替-->
      <div class="banner">
          <img src="images/banner.jpg" alt="">
      </div>
<!--     导航区-->
      <nav>
          <ul>
              <li>
                  <a href="">
                      <img src="images/html.png" alt="">
                      <span>HTML/CSS</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <img src="images/JavaScript.png" alt="">
                      <span>JavaScript</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <img src="images/code.png" alt="">
                      <span>服务端</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <img src="images/sql.png" alt="">
                      <span>数据库</span>
                  </a>
              </li>
          </ul>
          <ul>
              <li>
                  <a href="">
                      <img src="images/manual.png" alt="">
                      <span>手册</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <img src="images/tool2.png" alt="">
                      <span>工具</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <img src="images/live.png" alt="">
                      <span>直播</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <img src="images/app.png" alt="">
                      <span>移动端</span>
                  </a>
              </li>
          </ul>
      </nav>
<!--     课程区-->
      <main>
          <article class="recommend">
              <h3>推荐课程</h3>
              <section>
                  <a href=""><img src="images/tjkc1.jpg" alt=""></a>
                  <a href=""><img src="images/tjkc2.jpg" alt=""></a>
              </section>
              <section>
                  <div>
                      <a href=""><img src="images/tjkc3.jpg" alt=""></a>
                      <span>
                          <a href="">ci框架30分钟入门</a>
                          <span><i>中级</i>4945546次播放</span>
                      </span>
                  </div>
                  <div>
                      <a href=""><img src="images/tjkc4.jpg" alt=""></a>
                      <span>
                          <a href="">2018前端入门基础</a>
                          <span><i>中级</i>4945546次播放</span>
                      </span>
                  </div>
              </section>
          </article>
      </main>
<!--      页尾-->
      <footer>
          <ul>
              <li>
                  <a href="">
                      <img src="font-icon/zhuye.png" alt="">
                      <span style="color: red">首页</span>
                  </a>

              </li>
              <li>
                  <a href="">
                      <img src="font-icon/video.png" alt="">
                       <span>视频</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <img src="font-icon/luntan.png" alt="">
                      <span>社区</span>
                  </a>
              </li>
              <li>
                  <a href="">
                      <img src="font-icon/geren.png" alt="">
                      <span>我的</span>
                  </a>
              </li>
          </ul>
      </footer>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:

         看到这页面 不能着急敲 要观察整体结构布局 比喻由大到小的盒子 盒子与盒子同级或嵌套的关系 脑子里要思路明确 要回荡着flex等知识点 然后根据结构有序有规律还要仔细但要抱有疑问的心 一层又一层码代码

手抄:

微信图片_20191108230556.jpg


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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！