收藏
批改狀態(tài)：合格
老師批語：手寫代碼的要求很高的, 是一遍過, 所以比較難
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex-防PHP中文網移動端網站（m.php.cn）</title>
<!-- <link rel="stylesheet" href="css/style1.css">-->
<style>
/*樣式初始化*/
body,footer{
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background: #edeff0;
overflow-y: initial;
position: relative;
color: gray;
overflow-x: hidden;
/*針對蘋果手機高亮透明*/
-webkit-tap-highlight-color: transparent;
}
img{
width: 100%;
}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #555;
}
@import "init.css";
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column nowrap;
}
/*頭部*/
header {
/*固定定位*/
position: fixed;
top: 0;
width: 100%;
height: 42px;
background-color: #444;
color: white;
min-width: 320px;
max-width: 768px;
box-sizing: border-box;
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 10px;
}
header > img {
width: 94px;
}
header > img:first-of-type {
border-radius: 50%;
}
/*輪播圖*/
.banner {
display: flex;
}
/*導航區(qū)*/
nav {
background-color: #fff;
display: flex;
flex-flow: column nowrap;
}
nav img {
width: 45px;
height: 49px;
}
nav > ul {
display: flex;
}
nav ul li {
flex: 1;
}
nav ul li a {
display: flex;
/*垂直換行*/
flex-flow: column wrap;
/*在交叉軸上居中對齊*/
align-items: center;
margin: 10px;
}
nav ul li a span {
padding: 5px 0;
}
/**********************************主體內容區(qū)***********************************/
main {
display: flex;
flex-flow: column nowrap;
}
main > .recommend > h3,
main > .new > h3,
main > .new-artcle > h3 {
margin: 20px 0 5px;
}
/*設置水平排列*/
main > .recommend > section:first-of-type {
/*設置為彈性容器 默認水平排列*/
display: flex;
}
main > .recommend > section:first-of-type > a {
/*讓每個彈性元素平均分配空間*/
flex: 1;
margin: 5px;
}
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 0;
display: flex;
padding: 10px 10px 5px;
}
main > .recommend > section:last-of-type > div img,
main > .new > section > div img {
width: auto;
height: 85px;
}
main > .recommend > section:last-of-type > div > span {
display: flex;
flex-flow: column nowrap;
padding: 0 15px;
flex: 1;
}
main > .recommend > section:last-of-type > div > span > span {
font-size: 0.85rem;
margin-top: 10px;
}
main > .recommend > section:last-of-type > div > span i {
font-style: normal;
background: #333;
color: #fff;
border-radius: 5px;
padding: 0 6px;
margin-right: 5px;
}
/*最新更新*/
main > .new > section {
display: flex;
flex-flow: column nowrap;
}
main > .new > section > div,
main > .new-artcle > div {
background-color: #fff;
margin: 5px 0;
display: flex;
padding: 10px 10px 5px;
}
main > .new > section > div > span {
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
padding: 0 15px;
}
main > .new > section > div > span > p {
height: 20px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
margin: 5px 0 10px;
font-size: 0.75rem;
}
main > .new > section > div > span > span {
display: flex;
font-size: 0.75rem;
justify-content: space-between;
}
main > .new > section > div > span > span i {
font-style: normal;
background: #444;
border-radius: 5px;
padding: 0 5px;
color: #fff;
}
/*更多按鈕*/
main > .new > section > a,
main > .blog > p > a {
background-color: #fff;
display: flex;
justify-content: center;
padding: 5px 0;
margin: 5px 0;
}
/*最新文章*/
main > .new-artcle > div > a img {
width: 220px;
height: 64px;
}
main > .new-artcle > div > span {
display: flex;
flex-flow: column nowrap;
flex: 1;
order: -1;
}
main > .new-artcle > div > span > p {
margin: 5px 0 10px;
font-size: 0.75rem;
}
/*最新播放*/
main > .blog >h3{
margin: 15px 0 10px;
}
main > .blog > ul > li {
background: #fff;
padding: 15px;
margin: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
/*底部*/
footer {
display: flex;
background: #edeff0;
position: fixed;
bottom: 0;
border-top: 1px solid #ccc;
width: 100%;
padding: 10px 0;
min-width: 320px;
max-width: 768px;
box-sizing: border-box;
}
footer > a {
display: flex;
flex: 1;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
footer > a img {
width: 25px;
}
</style>
</head>
<body>
<!--頂部固定定位-->
<header>
<img src="images/login.png" alt="">
<img src="images/logo.png" alt="">
<img src="images/ico.png" alt="">
</header>
<!--banner-->
<section class="banner">
<a href="#"><img src="images/banner.jpg" alt=""></a>
</section>
<!--導航-->
<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/html.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/app.png" alt="">
<span>移動端</span>
</a>
</li>
<li>
<a href="#">
<img src="images/manual.png" alt="">
<span>手冊</span>
</a>
</li>
<li>
<a href="#">
<img src="images/code.png" alt="">
<span>工具</span>
</a>
</li>
<li>
<a href="#">
<img src="images/live.png" alt="">
<span>直播</span>
</a>
</li>
</ul>
</nav>
<!--主體內容區(qū)-->
<main>
<!-- 推薦課程區(qū)-->
<article class="recommend">
<h3>推薦課程</h3>
<section>
<a href="#">
<img src="images/tj1.jpg" alt="">
</a>
<a href="#">
<img src="images/tj1.jpg" alt="">
</a>
</section>
<section>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分鐘極速入門</a>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分鐘極速入門</a>
<span><i>中級</i>52971次播放</span>
</span>
</div>
</section>
</article>
<!-- 最新更新-->
<article class="new">
<h3>最新更新</h3>
<section>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分鐘極速入門</a>
<p>重點介紹了HTML、CSS、web布局前端核心技術，通過視頻講解，了解可以利用HTML+CSS做什么，有相關工具、后端語言，邏輯思維訓練等知識點</p>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分鐘極速入門</a>
<p>好多同學在PHP基礎的時候對PHP文件的操作了解的不夠多，本節(jié)課就帶著大家來學習PHP文件的基礎操作，PHP操作文件主要用到的就是PHP文件相關的函數，那么我們主要講的也就是PHP文件相關的各種函數，相信本節(jié)課程會讓你對PHP更感興趣哦！</p>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分鐘極速入門</a>
<p>重點介紹了HTML、CSS、web布局前端核心技術，通過視頻講解，了解可以利用HTML+CSS做什么，有相關工具、后端語言，邏輯思維訓練等知識點</p>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分鐘極速入門</a>
<p>好多同學在PHP基礎的時候對PHP文件的操作了解的不夠多，本節(jié)課就帶著大家來學習PHP文件的基礎操作，PHP操作文件主要用到的就是PHP文件相關的函數，那么我們主要講的也就是PHP文件相關的各種函數，相信本節(jié)課程會讓你對PHP更感興趣哦！</p>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分鐘極速入門</a>
<p>重點介紹了HTML、CSS、web布局前端核心技術，通過視頻講解，了解可以利用HTML+CSS做什么，有相關工具、后端語言，邏輯思維訓練等知識點</p>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<div>
<a href=""><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="">CI框架30分鐘極速入門</a>
<p>好多同學在PHP基礎的時候對PHP文件的操作了解的不夠多，本節(jié)課就帶著大家來學習PHP文件的基礎操作，PHP操作文件主要用到的就是PHP文件相關的函數，那么我們主要講的也就是PHP文件相關的各種函數，相信本節(jié)課程會讓你對PHP更感興趣哦！</p>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p>重點介紹了HTML、CSS、web布局前端核心技術，通過視頻講解，了解可以利用HTML+CSS做什么，有相關工具、后端語言，邏輯思維訓練等知識點</p>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p>好多同學在PHP基礎的時候對PHP文件的操作了解的不夠多，本節(jié)課就帶著大家來學習PHP文件的基礎操作，PHP操作文件主要用到的就是PHP文件相關的函數，那么我們主要講的也就是PHP文件相關的各種函數，相信本節(jié)課程會讓你對PHP更感興趣哦！</p>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p>重點介紹了HTML、CSS、web布局前端核心技術，通過視頻講解，了解可以利用HTML+CSS做什么，有相關工具、后端語言，邏輯思維訓練等知識點</p>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p>好多同學在PHP基礎的時候對PHP文件的操作了解的不夠多，本節(jié)課就帶著大家來學習PHP文件的基礎操作，PHP操作文件主要用到的就是PHP文件相關的函數，那么我們主要講的也就是PHP文件相關的各種函數，相信本節(jié)課程會讓你對PHP更感興趣哦！</p>
<span><i>中級</i>52971次播放</span>
</span>
</div>
<a href="#">更多內容</a>
</section>
</article>
<!--最新文章-->
<article class="new-artcle">
<h3>最新文章</h3>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p>時間：2019年11月7日</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p>時間：2019年11月7日</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p><i>中級</i>52971次播放</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p>時間：2019年11月7日</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p>時間：2019年11月7日</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p>時間：2019年11月7日</p>
</span>
</div>
<div>
<a href="#"><img src="images/tj1.jpg" alt=""></a>
<span>
<a href="#">CI框架30分鐘極速入門</a>
<p>時間：2019年11月7日</p>
</span>
</div>
</article>
<!-- 最新博文-->
<article class="blog">
<h3>最新博文</h3>
<ul>
<li><a href="#">外交部就習近平訪問希臘舉行中外媒體吹風會</a><span>2019-08-02</span></li>
<li><a href="#">快船逆轉擒開拓者 萊昂納德27+13末節(jié)獨得18分</a><span>2019-08-02</span></li>
<li><a href="#">64歲費玉清正式封麥，含淚告別47年演藝生涯！</a><span>2019-08-02</span></li>
<li><a href="#">車圈 | 歐盟官員稱中國將取代德國汽車領頭地位</a><span>2019-08-02</span></li>
<li><a href="#">魏銳危險了！賽前更換對手 連升兩個級別作戰(zhàn)</a><span>2019-08-02</span></li>
</ul>
<p><a href="#">更多內容</a></p>
</article>
<!-- 最新問答-->
<!-- 最新博文-->
<article class="blog">
<h3>最新問答</h3>
<ul>
<li><a href="#">外交部就習近平訪問希臘舉行中外媒體吹風會</a><span>2019-08-02</span></li>
<li><a href="#">快船逆轉擒開拓者 萊昂納德27+13末節(jié)獨得18分</a><span>2019-08-02</span></li>
<li><a href="#">64歲費玉清正式封麥，含淚告別47年演藝生涯！</a><span>2019-08-02</span></li>
<li><a href="#">車圈 | 歐盟官員稱中國將取代德國汽車領頭地位</a><span>2019-08-02</span></li>
<li><a href="#">魏銳危險了！賽前更換對手 連升兩個級別作戰(zhàn)</a><span>2019-08-02</span></li>
</ul>
<p><a href="#">更多內容</a></p>
</article>
</main>
footer
<footer>
<a href="#">
<img src="images/home.png" alt="">
<span>首頁</span>
</a>
<a href="">
<img src="images/video.png" alt="">
<span>視頻</span>
</a>
<a href="">
<img src="images/code2.png" alt="">
<span>社區(qū)</span>
</a>
<a href="">
<img src="images/user.png" alt="">
<span>用戶</span>
</a>
</footer>
</body>
</html>
總結：
（總結正在更新中..,）
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
