亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 13
粉絲 0
評論 0
訪問量 12487
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
php中文網后續(xù)頁面完成2019年9月10日20時
加勒比強強的博客
原創(chuàng)
692人瀏覽過


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>

<!--導航區(qū)-->
<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>

<!--課程區(qū)-->
<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;">發(fā)布時間: 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;">發(fā)布時間: 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;">發(fā)布時間: 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="">數據庫調優(yōu)-記在數據庫設計..</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>社區(qū)</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;
}

/*導航區(qū)*/
.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;
}

/*推薦課程區(qū)*/
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;
}

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例


接著老師的代碼寫的，基本都是復制粘貼，后續(xù)應該優(yōu)化一下頁面，最近工作忙，耽誤課程了，往前追吧






批改狀態(tài)：合格

老師批語：現在還在寫前端的作業(yè), 辛苦.... 建議先以當下的課程為主, 這些可以抽空完成
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網訂閱號
每天精選資源文章推送
PHP中文網APP
隨時隨地碎片化學習
PHP中文網抖音號
發(fā)現有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網，和優(yōu)秀的人一起學習！
    全站2000+教程免費學