博主信息
加勒比强强的博客
博文
13
粉丝
0
评论
0
访问量
4952
积分:0
P豆:26

php中文网后续页面完成2019年9月10日20时

2019年09月23日 15:48:57阅读数:240博客 / 加勒比强强的博客/ php中文网学习


php中文网剩余的部分完成截图,勉强做完,写的不太好,还需要多多练习,时间的原因只是简单的搭建了一下


php中文网.JPG


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/init.css">
    <link rel="stylesheet" href="static/css/style.css">
    <title>php中文网手机端-首页</title>
</head>
<body>
<!--布局原则: 宽宽自适应, 高度是固定-->
<!--固定定位: 顶部-->
<div class="top">
    <img src="static/images/user-pic.jpeg" alt="">
    <div class="logo">
        <img src="static/images/logo.png" alt="">
    </div>
    <img src="static/images/user-nav.jpg" alt="">
</div>

<!--banner轮播图,这里用图片暂时代替-->
<div class="banner">
    <img src="static/images/banner.jpg" alt="">
</div>

<!--导航区-->
<div class="nav">
    <ul>
        <li><a href=""><img src="static/images/html.png" alt=""><br>HTML/CSS</a></li>
        <li><a href=""><img src="static/images/JavaScript.png" alt=""><br>JavaScript</a></li>
        <li><a href=""><img src="static/images/code.png" alt=""><br>服务端</a></li>
        <li><a href=""><img src="static/images/sql.png" alt=""><br>数据库</a></li>
    </ul>
    <ul>
        <li><a href=""><img src="static/images/app.png" alt=""><br>移动端</a></li>
        <li><a href=""><img src="static/images/manual.png" alt=""><br>手册</a></li>
        <li><a href=""><img src="static/images/tool2.png" alt=""><br>工具</a></li>
        <li><a href=""><img src="static/images/live.png" alt=""><br>直播</a></li>
    </ul>
</div>

<!--课程区-->
<h3>推荐课程</h3>
<div class="courses">
    <ul>
        <li>
            <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
        </li>
        <li>
            <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
        </li>
    </ul>

    <div>
        <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
        <p>
            <a href="">CI框架30分钟极速入门</a>
            <br>
            <span>中级</span><span>49748次播放</span>
        </p>
    </div>
    <div>
        <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
        <p>
            <a href="">2018前端入门_HTML5</a>
            <br>
            <span>初级</span><span>210066次播放</span>
        </p>
    </div>
</div>
<br>
<h3>最新更新</h3>
<div class="courses">

    <div>
        <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
        <p>
            <a href="">Vue.js基础教程</a>

            <br>
            <span>初级</span><span style="font-size: 0.7rem">49748次播放</span>
            <br>
            <span>欢迎同学们加入Vue.js基础学习</span>
        </p>
    </div>
    <div>
        <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
        <p>
            <a href="">Laravel 5.8中文文本</a>

            <br>
            <span>中级</span><span style="font-size: 0.7rem">210066次播放</span>
            <br>
            <span>《Laravel 5.1/5.8速查表》</span>
        </p>
    </div>

    <div>
        <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
        <p>
            <a href="">JavaScript急速入门</a>

            <br>
            <span>中级</span><span style="font-size: 0.7rem">210066次播放</span>
            <br>
            <span>本套课程将帮助大家迅速掌握JavaScript的基础知识</span>
        </p>
    </div>

    <div>
        <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
        <p>
            <a href="">第七期_直播体验课</a>

            <br>
            <span>初级级</span><span style="font-size: 0.7rem">210066次播放</span>
            <br>
            <span>PHP中文网线上第七期***</span>
        </p>
    </div>

    <div>
        <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
        <p>
            <a href="">CSS3急速入门</a>

            <br>
            <span>初级</span><span style="font-size: 0.7rem">210066次播放</span>
            <br>
            <span>html和css是组成WEB前端的基础部分</span>
        </p>
    </div>

    <div>
        <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
        <p>
            <a href="">HTML5极速入门</a>

            <br>
            <span>初级</span><span style="font-size: 0.7rem">210066次播放</span>
            <br>
            <span>再本套课程中,你将学习如何搭建网站</span>
        </p>
    </div>

    <h3>最新文章</h3>
    <div class="newtext">

            <p>
                <a href="">phpStudy官方:各版本php</a>
                <br>
                <span style="background-color: white;color: black;border-radius: none;">发布时间: 2019-09-23</span>
            </p>
        <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
    </div>

    <div class="newtext">

        <p>
            <a href="">composer 服务器安装扩展</a>
            <br>
            <span style="background-color: white;color: black;border-radius: none;">发布时间: 2019-09-23</span>
        </p>
        <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
    </div>
    <div class="newtext">

        <p>
            <a href="">主板vdg接口是什么</a>
            <br>
            <span style="background-color: white;color: black;border-radius: none;">发布时间: 2019-09-23</span>
        </p>
        <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
    </div>


    <div id="neirong">
        <div style="background-color:lightgray;text-align: center;height: 10px;line-height: 10px;margin-top: 0px; vertical-align:middle;margin: 0 auto">更多内容</div>
    </div>

    <h3>最新文章</h3>
    <div id="wenzang">
        <p><a href="">数据库调优-记在数据库设计..</a></p>
        <br>
        2019-09-20
    </div>
    <div id="wenzang">
        <p><a href="">tp5 查询自定义排序</a></p>
        <br>
        2019-09-20
    </div>
    <div id="wenzang">
      <p><a href="">小程序自定义选择时间范围</a></p>
        <br>
        2019-09-20
    </div>


</div>





<!--底部-->
<div class="footer">
    <ul>
        <li><a href=""><img src="static/font-icon/zhuye.png" alt=""><br><span>主页</span></a></li>
        <li><a href=""><img src="static/font-icon/video.png" alt=""><br><span>视频</span></a></li>
        <li><a href=""><img src="static/font-icon/luntan.png" alt=""><br><span>社区</span></a></li>
        <li><a href=""><img src="static/font-icon/geren.png" alt=""><br><span>我的</span></a></li>
    </ul>
</div>
</body>
</html>

运行实例 »

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


以下是CSS的代码内容:

实例

.top {
    position: fixed;
    top: 0;

    width: 100%;
    height: 42px;
    background-color: #444444;

    min-width: 320px;
    max-width: 768px;

    left: 50%;

    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.top {
    display: flex;
}

.top img:first-of-type,
.top img:last-of-type {
    width: 25px;
    height: 25px;
    margin-top: 8px;
}

.top img:first-of-type {
    border-radius: 50%;
    margin-left: 5px;
}

.top .logo {
    text-align: center;
    flex: 1;
}

.top .logo img {
    width: 94px;
    height: 45px;
}

/*轮播图*/
.banner {
    display: flex;
}

.banner img {
    width: 100%;
    height: 160px;
}

/*导航区*/
.nav {
    height: 170px;
    background-color: white;
    box-sizing: border-box;
}
.nav ul {
    margin: 0;
    padding: 6px;
}

.nav ul li {
    list-style-type: none;
    text-align: center;
    height: 75px;
}

.nav ul li img {
    width: 45px;
    height: 45px;
}
.nav ul li a {
    text-align: center;
    color: gray;
    text-decoration: none;
}
.nav ul {
    display: flex;
}

.nav ul li {
    flex: 1;
}

/*推荐课程区*/
h3 {
    color:gray;
}

.courses {
    height: 326px;
    color: gray;
}

.courses ul {
    margin: 0;
    padding: 0;

    list-style: none;

    /*flex布局*/
    display: flex;
}

.courses ul li {
    padding: 5px;
}

.courses ul img {
    width: 100%;
    height: 90px;
}

.courses div {
    background-color: white;
    padding: 10px;

    margin-top: 10px;
    height: 90px;

    /*flex布局*/
    display: flex;
    justify-content: flex-start;
}

.courses div img {
    width: 100%;
    height: 90px;
}

.courses div a {
    text-decoration: none;
    color: gray;
    flex: 0.45;
}

.courses div p {
    flex: .55;
    margin-left: 15px;
}

.courses div p span:first-of-type {
    font-size: 0.8rem;
    background-color: black;
    color: white;
    border-radius: 30%;
    padding: 0 2px;
}
.courses div p span:last-of-type {
    font-size: 0.7rem;
}

/* 最新文章 */

.newtext {
	height: 326px;
    color: gray;
}

.newtext ul {
    margin: 0;
    padding: 0;

    list-style: none;

    /*flex布局*/
    display: flex;
}
.newtext a {
    font-size: 1rem;
    
    color: white;
    
    padding: 0 2px;
}
.newtext p a {
	font-size: :0.8rem;
	background-color: white;
	color: black;
	border-radius: none;
	padding: 0 2px;
}

#neirong {
	color: grey;
	width: 97.3%;
	height: 20px;
	background-color: lightgray;
}

#wenzang {
	color: grey;
	width: 97.3%;
	height: 35px;
	background-color: lightgray;
}





/*底部样式*/
body {
    height: 2300px;
}
.footer {
    position: fixed;
    bottom: 0;
	background-color: lightgray;
    width: 100%;
    height: 42px;

    min-width: 320px;
    max-width: 768px;

    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.footer ul {
    display: flex;

    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

.footer ul li img {
    width:20px;
    height: 20px;
}

.footer ul li a {
    color: gray;
    text-decoration: none;
}

.footer ul li {
    flex: 1;
}

运行实例 »

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


接着老师的代码写的,基本都是复制粘贴,后续应该优化一下页面,最近工作忙,耽误课程了,往前追吧






批改状态:合格

老师批语:现在还在写前端的作业, 辛苦.... 建议先以当下的课程为主, 这些可以抽空完成

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

全部评论

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

条评论