仿php中文网移动端 - 作业

首页 > 博客列表 > 仿php中文网移动端

博主信息

博文 17

粉丝 0

访问量 17487

专题推荐

更多>

原站效果

php中文网

仿布局效果在线地址

作业地址

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="static/css/font-icon.css" />
    <link rel="stylesheet" href="css/html.css" />
    <link rel="stylesheet" href="css/body.css" />
    <link rel="stylesheet" href="css/header.css" />
    <link rel="stylesheet" href="css/banner.css" />
    <link rel="stylesheet" href="css/channel.css" />
    <link rel="stylesheet" href="css/course.css" />
    <link rel="stylesheet" href="css/newUpdate.css" />
    <link rel="stylesheet" href="css/newArticle.css" />
    <link rel="stylesheet" href="css/newBlog.css" />
    <link rel="stylesheet" href="css/footer.css" />
    <style>
        /* 初始化 */
        * {
            margin: 0;
            padding: 0;
            color: #888;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!-- 主导航header三个图标分散 -->
    <header>
        <img src="static/images/user_avatar.jpg" alt="">
        <img src="static/images/logo.png" alt="">
        <span class="iconfont"></span>
    </header>
    <!-- 焦点图 -->
    <div class="banner">
        <img src="static/images/banner.png" alt="">
    </div>
    <!-- 频道位 -->
    <div class="channel">
        <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>
    </div>
    <!-- 推荐课程 -->
    <div class="course">
        <div>
            <h3>
                <font color=#888 ; size=4rem>推荐课程</font>
            </h3>
        </div>
        <div class="rowTow">
            <!-- 一排排2个 -->
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt=""></a>
            </div>
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt=""></a>
            </div>
        </div>
        <div class="colTow">
            <!-- 剩下得一排一个 -->
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg"></a>
            </div>
            <div>
                <a href="">CI框架30分钟极速入门 </a>
                <p>
                    <span class="level">中级</span>
                    <span>43454次播放</span>
                </p>
            </div>
        </div>
        <!-- 重复剩下得一排一个 -->
        <div class="colTow">
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"></a>
            </div>
            <div>
                <a href="">2018前端入门_HTML5 </a>
                <p>
                    <span class="level">初级</span>
                    <span>66666次播放</span>
                </p>
            </div>
        </div>
    </div>
    <!--最新更新 -->
    <div class="newUpdate">
        <div>
            <h3>
                <font color=#888 ; size=4rem>最新更新</font>
            </h3>
        </div>
        <div class="colTow">
            <!-- 剩下得一排一个 -->
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/015/5e0d6387e45cc764.png"></a>
            </div>
            <div>
                <a href="">PHP快速操控Excel </a>
                <div>
                    <p>老的PHPExcel已经停p止更新了！
                    </p>
                    <p>
                        <span class="level">中级</span>
                        <span>43454次播放</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="colTow">
            <!-- 剩下得一排一个 -->
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/015/5da7e9b7895ed229.png"></a>
            </div>
            <div>
                <a href="">PHP开发免费公益直播课</a>
                <div>
                    <p>主讲：php中文网-朱老师
                    </p>
                    <p>
                        <span class="level">中级</span>
                        <span>43454次播放</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="colTow">
            <!-- 剩下得一排一个 -->
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/015/5e0d82773b4fe808.png"></a>
            </div>
            <div>
                <a href="">Thinkphp6.0视频教程</a>
                <div>
                    <p>Thinkphp6.0从2019年10月24日发布
                    </p>
                    <p>
                        <span class="level">中级</span>
                        <span>43454次播放</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!--最新文章 -->
    <div class="newArticle">
        <div>
            <h3>
                <font color=#888 ; size=4rem>最新文章</font>
            </h3>
        </div>
        <div class="colTow">
            <!-- 剩下得一排一个 -->
            <div>
                <a href="">如何在linux环境下安装docker </a>
                <p>发布时间：2020-04-14
                </p>
            </div>
            <div>
                <a href=""><img src="https://img.php.cn/upload/article/000/000/041/5e956ebe721df901.jpg"></a>
            </div>
        </div>
        <div class="colTow">
            <!-- 剩下得一排一个 -->
            <div>
                <a href="">docker镜像如何导出 </a>
                <p>发布时间：2020-04-14
                </p>
            </div>
            <div>
                <a href=""><img src="https://img.php.cn/upload/article/000/000/041/5e9569d1d88e9841.jpg"></a>
            </div>
        </div>
        <div class="colTow">
            <!-- 剩下得一排一个 -->
            <div>
                <a href="">docker如何安装centos镜像 </a>
                <p>发布时间：2020-04-14
                </p>
            </div>
            <div>
                <a href=""><img src="https://img.php.cn/upload/article/000/000/041/5e955f5617478886.jpg"></a>
            </div>
        </div>
        <div><a href="">更多内容</a>
        </div>
    </div>
    <!--最新博文 -->
    <div class="newBlog">
        <div>
            <h3>
                <font color=#888 ; size=4rem>最新博文</font>
            </h3>
        </div>
        <div class="blog">
            <a href="">PhpStrom 安装PHPUnit-9单元测试 </a>
            <p>2020-04-14
            </p>
        </div>
        <div class="blog">
            <a href="">微信的openid和unionid </a>
            <p>2020-04-14
            </p>
        </div>
        <div class="blog">
            <a href="">CSS 中各类选择器的属性及应用</a>
            <p>2020-04-14
            </p>
        </div>
        <div><a href="">更多内容</a>
        </div>
    </div>
    <!-- 页脚 -->
    <footer>
        <a href="">
            <span class="iconfont hot"></span>
            <span>首页</span>
        </a>
        <a href="">
            <span class="iconfont "></span>
            <span>视频</span>
        </a>
        <a href="">
            <span class="iconfont "></span>
            <span>社区</span>
        </a>
        <a href="">
            <span class="iconfont "></span>
            <span>我的</span>
        </a>
    </footer>
</body>
</html>

css样式

1.header

body > header {
    /* 转成弹性盒子，图标2端对齐 */
    background-color: #333;
    color: white;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    position: fixed;
    width: 95vw;
}
/* 设置图片样式 */
body > header > img {
    height: 100%;
}
/* 将方形头像改成圆形，并设置图片高度 */
body > header > img:first-child {
    height: 25px;
    border-radius:25px;
}


/* 设置焦点图高度 */
body > .banner {
    /* 发现图片会和顶部得导航有重叠部分，所以减去了导航高度 */
    margin-top: 40px;
    height: 150px;
}
/* 设置图片宽度，让正常显示在页面中 */
body > .banner > img {
    width: 100%; 
    height: 100%;
}

3.channel

/* 设置频道位为弹性盒子，并且自动换行 */
body > .channel {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-flow: row wrap;
    background-color: #fff;
}
/* 针对单个块div设置样式,2个a标签水平，垂直居中 */
body > .channel > div{
    width: 25vw;
    display: flex;
    flex-flow: column ;
    text-align: center;
    /* align-items: center; */
    font-size: bold; 
    margin-top: 10px;
    margin-bottom: 10px;
}
/* 控制图片大小和居中 */
body > .channel > div > a > img{
width: 50%;
}

4.course

/* 推荐课程模块样式 */
body > .course {
  margin: 20px 10px;
}
/* 设置横排2个a标签图片的样式 */
body > .course >div:nth-of-type(2){  
  margin-top: 10px;
  display: flex;
  flex-flow: row nowrap;
  height: 100px; 
}
body > .course >div:nth-of-type(2)> div:first-child{
 margin-right: 10px;
}
body > .course >div:nth-of-type(2)>div>a >img{
  width: 100%;
}
/* 处理一排一个的样式 */
body > .course > .colTow{
margin-top: 10px;
display: flex;
flex-flow: row nowrap;
height: 105px;
background: #FFF;
}
/* 处理图片位置 */
body > .course > .colTow > div:first-child{
  margin: 10px;
width: 40%;
}
/* 设置图片居中 */
body > .course >.colTow >div >a > img{
  /* max-height:86px; */
/* vertical-align: middle; */
 width: 100%;
}
/* 处理文字位置 */
body > .course > .colTow > div:last-child{
margin-top: 10px; 
font-size: 1.2rem;
}
body > .course > .colTow > div:last-child >p {
font-size: 12px;
margin-top: 15px;
}
body > .course > .colTow > div:last-child >p >span:first-child{
background: #595757;
color: #FFF;
padding: 3px;
border-radius:12px;
}

5.newUpdate

/* 最新更新模块样式 */
body > .newUpdate {
    margin: 10px;
}
  /* 处理一排一个的样式 */
body > .newUpdate > .colTow{
  margin-top: 10px;
  display: flex;
  flex-flow: row nowrap;
  height: 103px;
  background: #FFF;
}
  /* 处理图片位置 */
 body > .newUpdate > .colTow > div:first-child{
  margin: 10px;
  width: 40%;
}
  /* 设置图片居中 */
body > .newUpdate >.colTow >div >a > img{
  max-height:85px;
  /* vertical-align: middle; */
  align-items: center;
  width: 100%;
}  
  /* 处理文字位置 ,文字超长自动截断没实现，找来的属性会影响前面的图片，暂时跳过*/  
body > .newUpdate > .colTow>div:last-child{
  display: flex;
  flex-flow: column nowrap;
}
body > .newUpdate > .colTow>div:last-child >a {
  margin-top: 10px;
  font-size: 1.2rem;
}
body > .newUpdate > .colTow > div:last-child>div>p:first-child{
   margin-top: 10px;
   font-size: 12px;  
}
body > .newUpdate > .colTow > div:last-child>div>p:last-child{
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
/* 加了盒子模型之后，复制过来的正常的“中级初级”背景的居中太难调了，先放着把。。。 */
body > .newUpdate > .colTow > div:last-child>div>p:last-child>.level{
  width: 2rem;
  background: #595757;
  border-radius:15px;
  color: #FFF;
}

6.newArticle

/* 最新文章模块样式 */
body > .newArticle {
    margin: 20px 10px ;
}  
  /* 处理一排一个的样式 */
body > .newArticle > .colTow{   
  margin-top: 10px;
  display: flex;
  flex-flow: row nowrap;
  height: 82px;
  background: #FFF;
  justify-content: space-between;
}
  /* 处理图片位置 */
body > .newArticle > .colTow > div:last-child{
  margin: 10px;
  width: 30%;  
}
  /* 设置图片居中 */
body > .newArticle >.colTow >div >a > img{
  vertical-align: middle;
  height: 62px;
  width: 100%;
}
  /* 处理文字位置 */
body > .newArticle > .colTow > div:first-child{
  margin: 10px; 
  font-size: 1.2rem;
}
body > .newArticle > .colTow > div:first-child >a {
  font-size: 12px;
  font-weight: bold;
  margin-top: 10px;  
}
body > .newArticle > .colTow > div:first-child >p {
    font-size: 12px;
    margin-top: 12px;       
}
/*更多内容*/
body > .newArticle>div:last-child {
    margin-top: 10px  ;
    padding: 5px;
    text-align: center;
    background: #FFF;
}

7.newBlog

body > .newBlog {
    margin: 10px;
  }
  /* 设置横排2个a标签图片的样式 */
  body > .newBlog >.blog{
    background: #FFF;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   height: 50px;
   margin-top:  10px ;
  }
  body > .newBlog >.blog>a{
    margin: 12px 10px 10px;
    font-weight: bold;
    font-size: 14px;    
  }
  body > .newBlog >.blog>p{
    margin: 10px;
}
  body > .newBlog>div:last-child {
    margin-top: 10px  ;
    margin-bottom: 60px  ;
    padding: 5px;
    text-align: center;
    background: #FFF;
}

/* 页脚 */
body > footer {
    color: #666;
    background-color: #efefef;
    border-top: 1px solid #ccc;
    height: 55px;
    position: fixed;
    bottom: 0;
    width: 100vw;
    display: flex;
    justify-content: space-around;
  }
  body > footer > a {
    margin-top: 10px;
    font-size: 0.8rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
  }
  body > footer > a > span:first-of-type {
    font-size: 1.6rem;
  }

总结

敲的多才能记得住，编写过程中，主要是对元素的居中排列和图片链接上面的图片的位置把握不准，实现方式有问题。几个带 align的属性总是混。
文字单行显示，超过截断没实现，总是超出右边范围，后面继续改进。
页面上的内容，在调大分辨率的时候，有的UI会超过自己的范围高度，特别是图片，还不太清楚怎么限制。
重复的样式代码很多，慢慢学会精简。

批改老师：

天蓬老师

批改状态：合格

老师批语：链接打不开的

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML基础知识了解

2020-04-04 16:20:59

原站效果

仿布局效果在线地址

效果图

代码

css样式

1.header

2.banner

3.channel

4.course

5.newUpdate

6.newArticle

7.newBlog

8.footer

总结