实战模仿PHP手机版-前端篇 - PHP培训班第11期

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 实战模仿PHP手机版-前端篇

博主信息

博文 10

粉丝 0

访问量 8401

专题推荐

更多>

我的网址：http://www.uc5566.com:90/410/php.html

总结：对选择器和属性，不太熟悉，导致写代码的过程中，经常会写不出来卡壳。在页面的布局中，每次要借助看老师或者同学的代码才能完成简单的布局。还不行，基础太差，顿生挫败感！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="static/css/font-icon.css" />
    <link rel="stylesheet" href="static/css/styly1.css" />
  </head>
  <body>
    <!-- 页眉 -->
    <header>
      <a href=""><img src="static/images/user.jpg" alt="" /></a>
      <img src="static/images/logo.png" alt="" />
      <span class="iconfont">&#xe61f;</span>
    </header>
    <!-- 轮播图 -->
    <div class="slider">
      <img src="static/images/11.png" alt="" />
    </div>
    <!-- 主导航 -->
    <nav>
      <div>
        <a href=""><img src="static/images/html.png" alt="" /></a>
        <a href="">HTML/CSS</a>
      </div>
      <div>
        <a href=""
          ><img src="static/images/JavaScript.png" alt=""
        /></a>
        <a href="">JavaScript</a>
      </div>
      <div>
        <a href=""><img src="static/images/code.png" alt="" /></a>
        <a href="">服务端</a>
      </div>
      <div>
        <a href=""><img src="static/images/sql.png" alt="" /></a>
        <a href="">数据库</a>
      </div>
      <div>
        <a href=""><img src="static/images/app.png" alt="" /></a>
        <a href="">移动端</a>
      </div>
      <div>
        <a href=""><img src="static/images/manual.png" alt="" /></a>
        <a href="">手册</a>
      </div>
      <div>
        <a href=""><img src="static/images/tool2.png" alt="" /></a>
        <a href="">工具</a>
      </div>
      <div>
        <a href=""><img src="static/images/live.png" alt="" /></a>
        <a href="">直播</a>
      </div>
    </nav>
    <!-- 推荐课程 -->
    <h2 class="title">推荐课程</h2>
    <div class="course">
      <a href=""><img src="static/images/tjkc.jpg" alt="" /></a>
      <a href=""><img src="static/images/tjkc.jpg" alt="" /></a>
    </div>
    <div class="list-course">
      <div class="list-course2">
        <a href=""><img src="static/images/rm.jpg" alt="" /></a>
      </div>
      <div class="coursename">
        <a href="">CI框架30分钟极速入门</a>
        <div class="span-wenzhang">
          <span>初级</span>
          <span>310032次播放</span>
        </div>
      </div>
    </div>
    <div class="list-courset">
      <div class="list-course2t">
        <a href=""><img src="static/images/rm.jpg" alt="" /></a>
      </div>
      <div class="coursenamet">
        <a href="">2018前端入门——HTML5</a>
        <div class="span-wenzhang">
          <span>初级</span>
          <span>31550032次播放</span>
        </div>
      </div>
    </div>
    <!-- 最新课程################# -->
    <h2 class="title">最新课程</h2>
    <div class="list-course">
      <div class="list-course2">
        <a href=""
          ><img
            src="https://img.php.cn/upload/course/000/000/015/5e0d6387e45cc764.png"
            alt=""
        /></a>
      </div>
      <div class="coursename">
        <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
        <div class="span-wenzhang">
          <!-- <a style="font-size: 12px;" href=""
            >老的PHPExcel已经停止更新了，目前最新的是使用...</a
          ><br /> -->
          <span>初级</span>
          <span>310032次播放</span>
        </div>
      </div>
    </div>
    <div class="list-courset">
      <div class="list-course2t">
        <a href=""
          ><img
            src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg"
            alt=""
        /></a>
      </div>
      <div class="coursenamet">
        <a href="">2018前端入门——HTML5</a>
        <div class="span-wenzhang">
          <!-- <a style="font-size: 12px;" href=""
            >老的PHPExcel已经停止更新了，目前最新的是使用...</a
          ><br /> -->
          <span>初级</span>
          <span>31550032次播放</span>
        </div>
      </div>
    </div>
    <div class="list-course">
      <div class="list-course2">
        <a href=""
          ><img
            src="https://img.php.cn/upload/course/000/000/015/5da7e9b7895ed229.png"
            alt=""
        /></a>
      </div>
      <div class="coursename">
        <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
        <div class="span-wenzhang">
          <!-- <a style="font-size: 12px;" href=""
            >老的PHPExcel已经停止更新了，目前最新的是使用...</a
          ><br /> -->
          <span>初级</span>
          <span>310032次播放</span>
        </div>
      </div>
    </div>
    <div class="list-courset">
      <div class="list-course2t">
        <a href=""
          ><img
            src="https://img.php.cn/upload/course/000/000/015/5e0d82773b4fe808.png"
            alt=""
        /></a>
      </div>
      <div class="coursenamet">
        <a href="">2018前端入门——HTML5</a>
        <div class="span-wenzhang">
          <!-- <a style="font-size: 12px;" href=""
            >老的PHPExcel已经停止更新了，目前最新的是使用...</a
          ><br /> -->
          <span>初级</span>
          <span>31550032次播放</span>
        </div>
      </div>
    </div>
    <div class="list-course">
      <div class="list-course2">
        <a href=""
          ><img
            src="https://img.php.cn/upload/course/000/000/014/5da6a50535529903.jpg"
            alt=""
        /></a>
      </div>
      <div class="coursename">
        <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
        <div class="span-wenzhang">
          <!-- <a style="font-size: 12px;" href=""
            >老的PHPExcel已经停止更新了，目前最新的是使用...</a
          ><br /> -->
          <span>初级</span>
          <span>310032次播放</span>
        </div>
      </div>
    </div>
    <div class="list-courset">
      <div class="list-course2t">
        <a href=""
          ><img
            src="https://img.php.cn/upload/course/000/000/015/5da51b8ff1224244.png"
            alt=""
        /></a>
      </div>
      <div class="coursenamet">
        <a href="">2018前端入门——HTML5</a>
        <div class="span-wenzhang">
          <!-- <a style="font-size: 12px;" href=""
            >老的PHPExcel已经停止更新了，目前最新的是使用...</a
          ><br /> -->
          <span>初级</span>
          <span>31550032次播放</span>
        </div>
      </div>
    </div>
    <!-- 最新更新 -->
    <!-- 最新文章 -->
    <h2 class="title">最新文章</h2>
    <div class="list-five">
      <div class="list-six">
        <a href=""
          ><p>THINKPHP5 + BARCODE 生成条形码的方法</p>
          <span>发布时间：</span>
          <span>2020-04-12</span>
        </a>
        <div>
          <a href=""
            ><img
              src="https://img.php.cn/upload/article/000/000/020/5e92b93e1d459556.jpg"
              alt=""
          /></a>
        </div>
      </div>
    </div>
    <div class="list-five">
      <div class="list-six">
        <a href=""
          ><p>THINKPHP5 + BARCODE 生成条形码的方法</p>
          <span>发布时间：</span>
          <span>2020-04-12</span>
        </a>
        <div>
          <a href=""
            ><img
              src="https://img.php.cn/upload/article/000/000/020/5e92b93e1d459556.jpg"
              alt=""
          /></a>
        </div>
      </div>
    </div>
    <div class="list-five">
      <div class="list-six">
        <a href=""
          ><p>THINKPHP5 + BARCODE 生成条形码的方法</p>
          <span>发布时间：</span>
          <span>2020-04-12</span>
        </a>
        <div>
          <a href=""
            ><img
              src="https://img.php.cn/upload/article/000/000/020/5e92b93e1d459556.jpg"
              alt=""
          /></a>
        </div>
      </div>
    </div>
    <div class="list-five">
      <div class="list-six">
        <a href=""
          ><p>THINKPHP5 + BARCODE 生成条形码的方法</p>
          <span>发布时间：2020-04-12</span>
        </a>
        <div>
          <a href=""
            ><img
              src="https://img.php.cn/upload/article/000/000/020/5e92b93e1d459556.jpg"
              alt=""
          /></a>
        </div>
      </div>
    </div>
    <!-- 最新博文 -->
    <h2>最新博文</h2>
    <section>
      <div class="list-bolg">
        <a href=""
          ><p>csss-弹性盒子flex布局</p>
          <p>2020-04-12</p></a
        >
      </div>
      <div class="list-bolg">
        <a href=""
          ><p>csss-弹性盒子flex布局</p>
          <p>2020-04-12</p></a
        >
      </div>
      <div class="list-bolg">
        <a href=""
          ><p>csss-弹性盒子flex布局</p>
          <p>2020-04-12</p></a
        >
      </div>
      <div class="list-bolg">
        <a href=""
          ><p>csss-弹性盒子flex布局</p>
          <p>2020-04-12</p></a
        >
      </div>
      <div class="list-bolg">
        <a href=""
          ><p>csss-弹性盒子flex布局</p>
          <p>2020-04-12</p></a
        >
      </div>
    </section>
    <!-- 最新问答 -->
    <!-- 页脚 -->
    <footer>
        <a href=""><span class="iconfont hot">&#xe60c</span><span>首页</span></a>
        <a href=""><span class="iconfont hot">&#xe60c</span><span>分类</span></a>
        <a href=""><span class="iconfont hot">&#xe60c</span><span>购物车</span></a>
        <a href=""><span class="iconfont hot">&#xe60c</span><span>未登录</span></a>
      </footer>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: lightslategrey;
}
html {
  width: 100vw;
  height: 100vh;
  font-size: 14px;
}
body {
  min-width: 360px;
  background-color: rgb(209, 207, 207);
  display: flex;
  flex-flow: column nowrap;
}
body > header {
  background-color: #333;
  color: white;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body > header > a:first-of-type > img {
  width: 25px;
  vertical-align: middle;
  border-radius: 50%;
}
body > .slider {
  height: 180px;
}
body > .slider img {
  width: 100%;
}
/* 主导航区 */
nav {
  height: 200px;
  margin-top: -30px;
  background-color: #ffffff;
  display: flex;
  flex-flow: row wrap;
}
nav > div {
  margin-top: 10px;
  width: 25vw;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
nav > div > a {
  text-align: center;
}
nav > div img {
  width: 50%;
}
.title {
  margin: 10px 15px;
  color: #676767;
}
.course {
  display: flex;
}
.course > a img {
  width: 50vw;
  height: 100px;
  padding: 5px;
  background-color: white;
  box-sizing: border-box;
}
/* 推荐课程 */
.list-course {
  margin: 10px 0;
  display: flex;
  flex-flow: row wrap;
}
.list-course2 {
  background-color: white;
}
.coursename {
  width: 60vw;
  height: 12vh;
  background-color: white;
}
.span-wenzhang {
  margin: 10px;
}
.span-wenzhangt span:first-of-type {
  border-radius: 3px;
  background-color: dodgerblue;
  border: 1px solid #000;
}
body > div > .list-course2 img {
  width: 40vw;
  height: 10vh;
  margin: 5px 0px;
}
/* zzuixin最新课程` */
.list-courset {
  margin: 10px 0;
  display: flex;
  flex-flow: row wrap;
}
.list-course2t {
  background-color: white;
}
.coursenamet {
  width: 60vw;
  background-color: white;
}
.span-wenzhangt span:first-of-type {
  border-radius: 3px;
  background-color: dodgerblue;
  border: 1px solid #000;
}
.span-wenzhang span:first-of-type {
  border-radius: 3px;
  background-color: dodgerblue;
  border: 1px solid #000;
}
body > div > .list-course2t img {
  width: 40vw;
  height: 10vh;
}
/* 最新文章 */
.list-five {
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  margin: 10px 0;
}
.list-five > .list-six {
  width: 100vw;
  background-color: white;
  display: flex;
  flex-flow: row nowrap;
}
.list-six > a p,
span {
  /* white-space: nowrap; */
  margin: 5px;
}
.list-six > a {
  margin: 10px;
}
.list-six img {
  width: 40vw;
  height: 12vh;
  margin: 5px;
}
section {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}
.list-bolg > a {
  height: 50px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  background-color: white;
  /* margin: 0 15px; */
  padding-top: 15px;
  margin: 10px 0;
}
.list-bolg > a p:first-of-type {
  font-size: 1.2rem;
  margin: 0 10px;
}
section > div:last-of-type {
  margin-bottom: 70px;
}
/* footer */
footer {
  color: #666;
  background-color: #efefef;
  border: 1px solid rgb(160, 160, 160);
  height: 55px;
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: space-around;
}
footer > a {
  font-size: 1.2rem;
  color: coral;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
footer > a > span:first-of-type {
  /* font-size: 1.8rem; */
}