
批改狀態(tài):合格
老師批語(yǔ):關(guān)于配色就是因人而異了, 這個(gè)真沒(méi)法教了, 憑感覺(jué)吧
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1227作業(yè)——仿php中文網(wǎng)手機(jī)端首頁(yè)</title>
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/font/iconfont.css">
</head>
<body>
<!--頂部LOGO區(qū)-->
<div class="header">
<img src="static/images/user/user1.gif" alt="">
<img src="static/images/logo.png" alt="">
<i class="iconfont icon-youceyingyongheji"></i>
</div>
<!--banner 區(qū)域-->
<main>
<div class="banner">
<a href=""><img src="static/images/banner/6.png" alt=""></a>
</div>
<!-- 導(dǎo)航區(qū)-->
<div class="nav">
<a href="">
<img src="static/images/icon/html.png" alt="">
<span>HTML/CSS</span>
</a>
<a href="">
<img src="static/images/icon/JavaScript.png" alt="">
<span>JavaScript</span>
</a>
<a href="">
<img src="static/images/icon/code.png" alt="">
<span>服務(wù)端</span>
</a>
<a href="">
<img src="static/images/icon/sql.png" alt="">
<span>數(shù)據(jù)庫(kù)</span>
</a>
<a href="">
<img src="static/images/icon/app.png" alt="">
<span>移動(dòng)端</span>
</a>
<a href="">
<img src="static/images/icon/manual.png" alt="">
<span>手冊(cè)</span>
</a>
<a href="">
<img src="static/images/icon/tool2.png" alt="">
<span>工具</span>
</a>
<a href="">
<img src="static/images/icon/live.png" alt="">
<span>直播</span>
</a>
</div>
<!-- 推薦課程-->
<article class="recommend">
<h3>推薦課程</h3>
<section>
<a href=""><img src="static/images/reco/reco_1.jpg" alt=""></a>
<a href=""><img src="static/images/reco/reco_2.jpg" alt=""></a>
</section>
<section>
<ul>
<li>
<a href=""><img src="static/images/reco/reco_3.jpg" alt=""></a>
<div>
<a href="">CI框架30分鐘極速入門</a>
<span><i>中級(jí)</i>55667播放</span>
</div>
</li>
<li>
<a href=""><img src="static/images/reco/reco_4.jpg" alt=""></a>
<div>
<a href="">2018前端入門_HTML5</a>
<span><i>初級(jí)</i>975667播放</span>
</div>
</li>
</ul>
</section>
</article>
<article class="la-up">
<h3>最新更新</h3>
<ul>
<li>
<a href=""><img src="static/images/laup/laup_1.jpg" alt=""></a>
<div>
<a href="">2019python自學(xué)視頻</a>
<span>本課程適合想從零開(kāi)始學(xué)習(xí) Python 編程語(yǔ)言的開(kāi)發(fā)人員。由淺入深的帶你進(jìn)入python世界,自學(xué)python的一份好課程,兄弟連課程</span>
<span><i>初級(jí)</i>5667播放</span>
</div>
</li>
<li>
<a href=""><img src="static/images/laup/laup_2.png" alt=""></a>
<div>
<a href="">PHP開(kāi)發(fā)免費(fèi)公益直播課</a>
<span>主講:php中文網(wǎng)-朱老師( Peter Zhu)時(shí)間:2019.10.17 晚 20:00-22:00主題:如何高效的學(xué)習(xí)一門新技術(shù)?具體內(nèi)容:1. 2020了, 還有哪些值得學(xué)習(xí)的新技術(shù)? 2.如何高效的學(xué)習(xí)前端開(kāi)發(fā)? 3.如果高效的學(xué)習(xí)PHP開(kāi)發(fā)?4.phpStudy V8 新功能介紹與演示 5.小皮面板功能介紹</span>
<span><i>初級(jí)</i>55667播放</span>
</div>
</li>
<li>
<a href=""><img src="static/images/laup/laup_3.jpg" alt=""></a>
<div>
<a href="">從零開(kāi)始到WEB響應(yīng)式布局</a>
<span>重點(diǎn)介紹了HTML、CSS、web布局前端核心技術(shù),通過(guò)視頻講解,了解可以利用HTML+CSS做什么,有相關(guān)工具、后端語(yǔ)言,邏輯思維訓(xùn)練等知識(shí)點(diǎn)</span>
<span><i>初級(jí)</i>55667播放</span>
</div>
</li>
<li>
<a href=""><img src="static/images/laup/laup_4.png" alt=""></a>
<div>
<a href="">PHP文件基礎(chǔ)操作</a>
<span>好多同學(xué)在PHP基礎(chǔ)的時(shí)候?qū)HP文件的操作了解的不夠多,本節(jié)課就帶著大家來(lái)學(xué)習(xí)PHP文件的基礎(chǔ)操作,PHP操作文件主要用到的就是PHP文件相關(guān)的函數(shù),那么我們主要講的也就是PHP文件相關(guān)的各種函數(shù),相信本節(jié)課程會(huì)讓你對(duì)PHP更感興趣哦!</span>
<span><i>中級(jí)</i>55667播放</span>
</div>
</li>
<li>
<a href=""><img src="static/images/laup/laup_5.jpg" alt=""></a>
<div>
<a href=""><span>memcache基礎(chǔ)課程</span></a>
<span>本課程帶你從零認(rèn)識(shí)memcache,讓你在一小時(shí)左右輕松掌握memcache在windows和linux上的安裝,基本命令的使用以及與php集成、thinkphp5中使用memcache做為緩存系統(tǒng)等技術(shù)。</span>
<span><i>初級(jí)</i>55667播放</span>
</div>
</li>
<li>
<a href=""><img src="static/images/laup/laup_6.png" alt=""></a>
<div>
<a href=""><span>微信小程序--企業(yè)微網(wǎng)站</span></a>
<span>1,介紹小程序、開(kāi)發(fā)者工具2,介紹小程序文檔3,微官網(wǎng)項(xiàng)目4,首頁(yè)、產(chǎn)品、產(chǎn)品詳情、新聞、新聞詳情、關(guān)于我們</span>
<span><i>初級(jí)</i>55667播放</span>
</div>
</li>
</ul>
</article>
<article class="new-page">
<h3>最新文章</h3>
<ul>
<li>
<div>
<a href="">java程序怎么生成exe</a>
<span>發(fā)布時(shí)間:2019-12-28</span>
</div>
<a href=""><img src="static/images/newpage/np_1.jpg" alt=""></a>
</li>
<li>
<div>
<a href="">java程序怎么生成exe</a>
<span>發(fā)布時(shí)間:2019-12-28</span>
</div>
<a><img src="static/images/newpage/np_2.jpg" alt=""></a>
</li>
<li>
<div>
<a href="">WordPress分類與標(biāo)簽等存檔頁(yè)怎么實(shí)現(xiàn)置頂</a>
<span>發(fā)布時(shí)間:2019-12-28</span>
</div>
<a href=""><img src="static/images/newpage/np_3.jpg" alt=""></a>
</li>
<li>
<div>
<a href="">golang的hashmap怎么擴(kuò)容</a>
<span>發(fā)布時(shí)間:2019-12-28</span>
</div>
<a href=""><img src="static/images/newpage/np_4.jpg" alt=""></a>
</li>
<li>
<div>
<a href="">Wordpress如何切換和管理網(wǎng)站外觀</a>
<span>發(fā)布時(shí)間:2019-12-28</span>
</div>
<a href=""><img src="static/images/newpage/np_5.jpg" alt=""></a>
</li>
<li>
<div>
<a href="">wordpress怎么調(diào)用特定文章列表</a>
<span>發(fā)布時(shí)間:2019-12-28</span>
</div>
<a href=""><img src="static/images/newpage/np_1.jpg" alt=""></a>
</li>
</ul>
<a href="">更多內(nèi)容</a>
</article>
<article class="new-blog">
<h3>最新文章</h3>
<ul>
<li>
<a href=""><span>composer安裝laravel,nginx服務(wù)器路配置解決404問(wèn)題,創(chuàng)建簡(jiǎn)單的控制器</span></a>
<span>2019-12-28</span>
</li>
<li>
<a href=""><span>2019-12-23 flex容器的6個(gè)屬性練習(xí)總結(jié)-PHP培訓(xùn)十期線上班</span></a>
<span>2019-12-28</span>
</li>
<li>
<a href=""><span>轉(zhuǎn)載《PHP安全之道》學(xué)習(xí)筆記1:PHP項(xiàng)目安全設(shè)置</span></a>
<span>2019-12-28</span>
</li>
<li>
<a href=""><span>關(guān)于雙列排版自適應(yīng)問(wèn)題:(左側(cè)固定,右側(cè)自適應(yīng))成功,(右側(cè)固定,左側(cè)自適應(yīng))</span></a>
<span>2019-12-28</span>
</li>
</ul>
<a href="">更多內(nèi)容</a>
</article>
<article class="new-qa">
<h3>最新文章</h3>
<ul>
<li>
<a href=""><span>怎么沒(méi)提示添加成功還是添加失敗呀</span></a>
<span>2019-12-28</span>
</li>
<li>
<a href=""> <span>我寫的代碼跟您的一樣 在瀏覽器打開(kāi)的時(shí)候?yàn)槭裁词莵y碼呢</span></a>
<span>2019-12-28</span>
</li>
<li>
<a href=""> <span>thinkphp3.2.3路徑問(wèn)題</span></a>
<span>2019-12-28</span>
</li>
<li>
<a href=""> <span>什么是開(kāi)發(fā)工具</span></a>
<span>2019-12-28</span>
</li>
<li>
<a href=""> <span>怎么能學(xué)好PHP</span></a>
<span>2019-12-28</span>
</li>
</ul>
<a href="">更多內(nèi)容</a>
</article>
</main>
<footer>
<a href=""><i class="iconfont icon-shouye"></i>首頁(yè)</a>
<a href=""><i class="iconfont icon-shipin"></i>視頻</a>
<a href=""><i class="iconfont icon-kaifazhezhongxingonggongAPI"></i>社區(qū)</a>
<a href=""><i class="iconfont icon-wode"></i>我的</a>
</footer>
</body>
</html>
style.css
/*頁(yè)面元素初始化*/
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
color: #888888;
background-color: #EDEFF0;
display: flex;
flex-direction: column;
min-width: 360px;
max-width: 768px;
margin: 0 auto;
overflow-x: hidden;
-webkit-column-rule-color: transparent;
}
a{
text-decoration: none;
color: #404040;
font-size: 13px;
}
li{
list-style: none;
}
/*header區(qū)*/
.header {
width: 100%;
max-width: 768px;
min-width: 360px;
height: 45px;
background-color: #2d353c;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
.header > img:first-of-type{
height: 24px;
width: 24px;
border-radius: 12px;
margin-left: 5px;
box-sizing: border-box;
}
.header > img:last-of-type{
height:40px;
}
.header > i{
width:24px;
height: 24px;
color: white;
}
/*導(dǎo)航區(qū)*/
body > main {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
margin-top: 45px;
}
main > .banner {
width:100%;
}
main > .banner > a img {
width:100%;
height: auto;
}
main > .nav {
display: flex;
flex-flow: row wrap;
padding: 20px;
box-sizing: border-box;
background-color: white;
}
main > .nav > a{
width: 25%;
height: 75px;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5px;
}
main > .nav > a img {
width: 45px;
height: 45px;
margin-bottom: 5px;
}
/*推薦課程*/
main > .recommend {
margin-top: 30px;
padding: 0 10px;
display: flex;
flex-direction: column;
}
main > .recommend > h3 {
font-size: 18px;
font-weight: bold;
padding-bottom: 10px;
}
main > .recommend > div {
background-color: white;
padding: 10px;
box-sizing: border-box;
}
main > .recommend > section:first-of-type{
background: none;
width: 100%;
display: flex;
padding: 0;
justify-content: space-between;
}
main > .recommend > section:first-of-type a {
margin: 5px;
height: 100px;
}
main > .recommend > section:first-of-type a > img{
width: 100%;
height: 100px;
}
main > .recommend > section:last-of-type > ul {
display: flex;
flex-direction: column;
}
main > .recommend > section:last-of-type > ul > li {
display: flex;
margin: 5px;
background-color: white;
}
main > .recommend > section:last-of-type > ul > li > a {
width: 40%;
}
main > .recommend > section:last-of-type > ul > li > a img {
width: 100%;
height: 90px;
margin: 5px;
box-sizing: border-box;
}
main > .recommend > section:last-of-type > ul > li > div {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
flex: 1;
}
main > .recommend > section:last-of-type > ul > li > div > a {
font-size: 16px;
font-weight: bold;
}
main > .recommend > section:last-of-type > ul > li > div > span {
display: flex;
justify-content: space-between;
}
main > .recommend > section:last-of-type > ul > li > div > span i {
background-color: #333333;
color: white;
font-style: normal;
border-radius: 10px;
padding: 0 5px;
box-sizing: border-box;
font-size: smaller;
}
/*最新更新*/
main > .la-up {
display: flex;
flex-direction: column;
padding: 10px;
}
main > .la-up h3 {
font-size: 18px;
font-weight: bold;
padding: 10px 0;
}
main > .la-up > ul {
display: flex;
flex-direction: column;
}
main > .la-up > ul > li {
display: flex;
margin: 5px;
background-color: white;
}
main > .la-up > ul > li > a {
width: 40%;
}
main > .la-up > ul > li > a > img {
width: 100%;
height: 90px;
padding: 5px;
box-sizing: border-box;
}
main > .la-up > ul > li > div {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
flex: 1;
width: 0;
}
main > .la-up > ul > li > div > a {
font-size: 16px;
font-weight: bold;
}
main > .la-up > ul > li > div > span:first-of-type {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
main > .la-up > ul > li > div > span:last-of-type {
display: flex;
justify-content: space-between;
}
main > .la-up > ul > li > div > span:last-of-type i{
background-color: #333333;
color: white;
font-style: normal;
border-radius: 10px;
padding: 0 5px;
box-sizing: border-box;
font-size: smaller;
}
/*最新文章*/
main > .new-page {
display: flex;
flex-direction: column;
padding: 10px;
}
main > .new-page h3 {
font-size: 18px;
font-weight: bold;
padding: 10px 0;
}
main > .new-page > ul {
display: flex;
flex-direction: column;
}
main > .new-page > ul > li {
display: flex;
justify-content: space-between;
margin: 5px;
background-color: white;
border: 1px solid #eeeeee;
box-shadow: 0 2px 4px 0 #999999;
}
main > .new-page > ul > li > div {
display: flex;
padding: 10px;
flex-direction: column;
justify-content: space-between;
}
main > .new-page > ul > li > div > a{
font-size: 16px;
}
main > .new-page > ul > li > a {
width: 40%;
padding: 5px;
}
main > .new-page > ul > li > a img {
width: 100%;
height: 60px;
}
main > .new-page > a {
background-color: white;
line-height: 30px;
text-align: center;
margin: 10px 5px;
}
/*最新博文*/
main > .new-blog {
display: flex;
flex-direction: column;
padding: 10px;
}
main > .new-blog h3 {
font-size: 18px;
font-weight: bold;
padding: 10px 0;
}
main > .new-blog > ul {
display: flex;
flex-direction: column;
}
main > .new-blog > ul > li {
display: flex;
justify-content: space-between;
margin: 5px;
background-color: white;
padding: 10px;
border: 1px solid #eeeeee;
box-shadow: 0 2px 4px 0 #999999;
}
main > .new-blog > ul > li a {
width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
main > .new-blog > a {
background-color: white;
line-height: 30px;
text-align: center;
margin: 10px 5px;
}
/*最新問(wèn)答*/
main > .new-qa {
display: flex;
flex-direction: column;
padding: 10px;
margin-bottom: 50px;
}
main > .new-qa h3 {
font-size: 18px;
font-weight: bold;
padding: 10px 0;
}
main > .new-qa > ul {
display: flex;
flex-direction: column;
}
main > .new-qa > ul > li {
display: flex;
justify-content: space-between;
margin: 5px;
background-color: white;
padding: 10px;
border: 1px solid #eeeeee;
box-shadow: 0 2px 4px 0 #999999;
}
main > .new-qa > ul > li a {
width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
main > .new-qa > a {
background-color: white;
line-height: 30px;
text-align: center;
margin: 10px 5px;
}
/*頁(yè)底導(dǎo)航*/
footer {
width: 100%;
height: 40px;
max-width: 768px;
min-width: 360px;
position: fixed;
bottom: 0;
border-top: 1px solid #cccccc;
display: flex;
justify-content: space-evenly;
padding: 5px 0;
background-color: #EDEFF0;
}
footer > a {
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
}
div
,都把ul
、li
給忘記了;微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)