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

搜索
博主信息
博文 9
粉絲 3
評(píng)論 0
訪問(wèn)量 16268
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
12-27作業(yè):仿PHP中文網(wǎng)手機(jī)端
十年一夢(mèng)
原創(chuàng)
866人瀏覽過(guò)

12-27作業(yè):仿PHP中文網(wǎng)手機(jī)端

首頁(yè)index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>1227作業(yè)——仿php中文網(wǎng)手機(jī)端首頁(yè)</title>
  6. <link rel="stylesheet" href="static/css/style.css">
  7. <link rel="stylesheet" href="static/font/iconfont.css">
  8. </head>
  9. <body>
  10. <!--頂部LOGO區(qū)-->
  11. <div class="header">
  12. <img src="static/images/user/user1.gif" alt="">
  13. <img src="static/images/logo.png" alt="">
  14. <i class="iconfont icon-youceyingyongheji"></i>
  15. </div>
  16. <!--banner 區(qū)域-->
  17. <main>
  18. <div class="banner">
  19. <a href=""><img src="static/images/banner/6.png" alt=""></a>
  20. </div>
  21. <!-- 導(dǎo)航區(qū)-->
  22. <div class="nav">
  23. <a href="">
  24. <img src="static/images/icon/html.png" alt="">
  25. <span>HTML/CSS</span>
  26. </a>
  27. <a href="">
  28. <img src="static/images/icon/JavaScript.png" alt="">
  29. <span>JavaScript</span>
  30. </a>
  31. <a href="">
  32. <img src="static/images/icon/code.png" alt="">
  33. <span>服務(wù)端</span>
  34. </a>
  35. <a href="">
  36. <img src="static/images/icon/sql.png" alt="">
  37. <span>數(shù)據(jù)庫(kù)</span>
  38. </a>
  39. <a href="">
  40. <img src="static/images/icon/app.png" alt="">
  41. <span>移動(dòng)端</span>
  42. </a>
  43. <a href="">
  44. <img src="static/images/icon/manual.png" alt="">
  45. <span>手冊(cè)</span>
  46. </a>
  47. <a href="">
  48. <img src="static/images/icon/tool2.png" alt="">
  49. <span>工具</span>
  50. </a>
  51. <a href="">
  52. <img src="static/images/icon/live.png" alt="">
  53. <span>直播</span>
  54. </a>
  55. </div>
  56. <!-- 推薦課程-->
  57. <article class="recommend">
  58. <h3>推薦課程</h3>
  59. <section>
  60. <a href=""><img src="static/images/reco/reco_1.jpg" alt=""></a>
  61. <a href=""><img src="static/images/reco/reco_2.jpg" alt=""></a>
  62. </section>
  63. <section>
  64. <ul>
  65. <li>
  66. <a href=""><img src="static/images/reco/reco_3.jpg" alt=""></a>
  67. <div>
  68. <a href="">CI框架30分鐘極速入門</a>
  69. <span><i>中級(jí)</i>55667播放</span>
  70. </div>
  71. </li>
  72. <li>
  73. <a href=""><img src="static/images/reco/reco_4.jpg" alt=""></a>
  74. <div>
  75. <a href="">2018前端入門_HTML5</a>
  76. <span><i>初級(jí)</i>975667播放</span>
  77. </div>
  78. </li>
  79. </ul>
  80. </section>
  81. </article>
  82. <article class="la-up">
  83. <h3>最新更新</h3>
  84. <ul>
  85. <li>
  86. <a href=""><img src="static/images/laup/laup_1.jpg" alt=""></a>
  87. <div>
  88. <a href="">2019python自學(xué)視頻</a>
  89. <span>本課程適合想從零開(kāi)始學(xué)習(xí) Python 編程語(yǔ)言的開(kāi)發(fā)人員。由淺入深的帶你進(jìn)入python世界,自學(xué)python的一份好課程,兄弟連課程</span>
  90. <span><i>初級(jí)</i>5667播放</span>
  91. </div>
  92. </li>
  93. <li>
  94. <a href=""><img src="static/images/laup/laup_2.png" alt=""></a>
  95. <div>
  96. <a href="">PHP開(kāi)發(fā)免費(fèi)公益直播課</a>
  97. <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>
  98. <span><i>初級(jí)</i>55667播放</span>
  99. </div>
  100. </li>
  101. <li>
  102. <a href=""><img src="static/images/laup/laup_3.jpg" alt=""></a>
  103. <div>
  104. <a href="">從零開(kāi)始到WEB響應(yīng)式布局</a>
  105. <span>重點(diǎn)介紹了HTML、CSS、web布局前端核心技術(shù),通過(guò)視頻講解,了解可以利用HTML+CSS做什么,有相關(guān)工具、后端語(yǔ)言,邏輯思維訓(xùn)練等知識(shí)點(diǎn)</span>
  106. <span><i>初級(jí)</i>55667播放</span>
  107. </div>
  108. </li>
  109. <li>
  110. <a href=""><img src="static/images/laup/laup_4.png" alt=""></a>
  111. <div>
  112. <a href="">PHP文件基礎(chǔ)操作</a>
  113. <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>
  114. <span><i>中級(jí)</i>55667播放</span>
  115. </div>
  116. </li>
  117. <li>
  118. <a href=""><img src="static/images/laup/laup_5.jpg" alt=""></a>
  119. <div>
  120. <a href=""><span>memcache基礎(chǔ)課程</span></a>
  121. <span>本課程帶你從零認(rèn)識(shí)memcache,讓你在一小時(shí)左右輕松掌握memcache在windows和linux上的安裝,基本命令的使用以及與php集成、thinkphp5中使用memcache做為緩存系統(tǒng)等技術(shù)。</span>
  122. <span><i>初級(jí)</i>55667播放</span>
  123. </div>
  124. </li>
  125. <li>
  126. <a href=""><img src="static/images/laup/laup_6.png" alt=""></a>
  127. <div>
  128. <a href=""><span>微信小程序--企業(yè)微網(wǎng)站</span></a>
  129. <span>1,介紹小程序、開(kāi)發(fā)者工具2,介紹小程序文檔3,微官網(wǎng)項(xiàng)目4,首頁(yè)、產(chǎn)品、產(chǎn)品詳情、新聞、新聞詳情、關(guān)于我們</span>
  130. <span><i>初級(jí)</i>55667播放</span>
  131. </div>
  132. </li>
  133. </ul>
  134. </article>
  135. <article class="new-page">
  136. <h3>最新文章</h3>
  137. <ul>
  138. <li>
  139. <div>
  140. <a href="">java程序怎么生成exe</a>
  141. <span>發(fā)布時(shí)間:2019-12-28</span>
  142. </div>
  143. <a href=""><img src="static/images/newpage/np_1.jpg" alt=""></a>
  144. </li>
  145. <li>
  146. <div>
  147. <a href="">java程序怎么生成exe</a>
  148. <span>發(fā)布時(shí)間:2019-12-28</span>
  149. </div>
  150. <a><img src="static/images/newpage/np_2.jpg" alt=""></a>
  151. </li>
  152. <li>
  153. <div>
  154. <a href="">WordPress分類與標(biāo)簽等存檔頁(yè)怎么實(shí)現(xiàn)置頂</a>
  155. <span>發(fā)布時(shí)間:2019-12-28</span>
  156. </div>
  157. <a href=""><img src="static/images/newpage/np_3.jpg" alt=""></a>
  158. </li>
  159. <li>
  160. <div>
  161. <a href="">golang的hashmap怎么擴(kuò)容</a>
  162. <span>發(fā)布時(shí)間:2019-12-28</span>
  163. </div>
  164. <a href=""><img src="static/images/newpage/np_4.jpg" alt=""></a>
  165. </li>
  166. <li>
  167. <div>
  168. <a href="">Wordpress如何切換和管理網(wǎng)站外觀</a>
  169. <span>發(fā)布時(shí)間:2019-12-28</span>
  170. </div>
  171. <a href=""><img src="static/images/newpage/np_5.jpg" alt=""></a>
  172. </li>
  173. <li>
  174. <div>
  175. <a href="">wordpress怎么調(diào)用特定文章列表</a>
  176. <span>發(fā)布時(shí)間:2019-12-28</span>
  177. </div>
  178. <a href=""><img src="static/images/newpage/np_1.jpg" alt=""></a>
  179. </li>
  180. </ul>
  181. <a href="">更多內(nèi)容</a>
  182. </article>
  183. <article class="new-blog">
  184. <h3>最新文章</h3>
  185. <ul>
  186. <li>
  187. <a href=""><span>composer安裝laravel,nginx服務(wù)器路配置解決404問(wèn)題,創(chuàng)建簡(jiǎn)單的控制器</span></a>
  188. <span>2019-12-28</span>
  189. </li>
  190. <li>
  191. <a href=""><span>2019-12-23 flex容器的6個(gè)屬性練習(xí)總結(jié)-PHP培訓(xùn)十期線上班</span></a>
  192. <span>2019-12-28</span>
  193. </li>
  194. <li>
  195. <a href=""><span>轉(zhuǎn)載《PHP安全之道》學(xué)習(xí)筆記1:PHP項(xiàng)目安全設(shè)置</span></a>
  196. <span>2019-12-28</span>
  197. </li>
  198. <li>
  199. <a href=""><span>關(guān)于雙列排版自適應(yīng)問(wèn)題:(左側(cè)固定,右側(cè)自適應(yīng))成功,(右側(cè)固定,左側(cè)自適應(yīng))</span></a>
  200. <span>2019-12-28</span>
  201. </li>
  202. </ul>
  203. <a href="">更多內(nèi)容</a>
  204. </article>
  205. <article class="new-qa">
  206. <h3>最新文章</h3>
  207. <ul>
  208. <li>
  209. <a href=""><span>怎么沒(méi)提示添加成功還是添加失敗呀</span></a>
  210. <span>2019-12-28</span>
  211. </li>
  212. <li>
  213. <a href=""> <span>我寫的代碼跟您的一樣 在瀏覽器打開(kāi)的時(shí)候?yàn)槭裁词莵y碼呢</span></a>
  214. <span>2019-12-28</span>
  215. </li>
  216. <li>
  217. <a href=""> <span>thinkphp3.2.3路徑問(wèn)題</span></a>
  218. <span>2019-12-28</span>
  219. </li>
  220. <li>
  221. <a href=""> <span>什么是開(kāi)發(fā)工具</span></a>
  222. <span>2019-12-28</span>
  223. </li>
  224. <li>
  225. <a href=""> <span>怎么能學(xué)好PHP</span></a>
  226. <span>2019-12-28</span>
  227. </li>
  228. </ul>
  229. <a href="">更多內(nèi)容</a>
  230. </article>
  231. </main>
  232. <footer>
  233. <a href=""><i class="iconfont icon-shouye"></i>首頁(yè)</a>
  234. <a href=""><i class="iconfont icon-shipin"></i>視頻</a>
  235. <a href=""><i class="iconfont icon-kaifazhezhongxingonggongAPI"></i>社區(qū)</a>
  236. <a href=""><i class="iconfont icon-wode"></i>我的</a>
  237. </footer>
  238. </body>
  239. </html>

首頁(yè)style.css

  1. /*頁(yè)面元素初始化*/
  2. *{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. body{
  7. font-size: 13px;
  8. color: #888888;
  9. background-color: #EDEFF0;
  10. display: flex;
  11. flex-direction: column;
  12. min-width: 360px;
  13. max-width: 768px;
  14. margin: 0 auto;
  15. overflow-x: hidden;
  16. -webkit-column-rule-color: transparent;
  17. }
  18. a{
  19. text-decoration: none;
  20. color: #404040;
  21. font-size: 13px;
  22. }
  23. li{
  24. list-style: none;
  25. }
  26. /*header區(qū)*/
  27. .header {
  28. width: 100%;
  29. max-width: 768px;
  30. min-width: 360px;
  31. height: 45px;
  32. background-color: #2d353c;
  33. display: flex;
  34. justify-content: space-between;
  35. align-items: center;
  36. position: fixed;
  37. top: 0;
  38. }
  39. .header > img:first-of-type{
  40. height: 24px;
  41. width: 24px;
  42. border-radius: 12px;
  43. margin-left: 5px;
  44. box-sizing: border-box;
  45. }
  46. .header > img:last-of-type{
  47. height:40px;
  48. }
  49. .header > i{
  50. width:24px;
  51. height: 24px;
  52. color: white;
  53. }
  54. /*導(dǎo)航區(qū)*/
  55. body > main {
  56. flex-grow: 1;
  57. display: flex;
  58. flex-direction: column;
  59. overflow: hidden;
  60. margin-top: 45px;
  61. }
  62. main > .banner {
  63. width:100%;
  64. }
  65. main > .banner > a img {
  66. width:100%;
  67. height: auto;
  68. }
  69. main > .nav {
  70. display: flex;
  71. flex-flow: row wrap;
  72. padding: 20px;
  73. box-sizing: border-box;
  74. background-color: white;
  75. }
  76. main > .nav > a{
  77. width: 25%;
  78. height: 75px;
  79. display: flex;
  80. flex-direction: column;
  81. align-items: center;
  82. margin-top: 5px;
  83. }
  84. main > .nav > a img {
  85. width: 45px;
  86. height: 45px;
  87. margin-bottom: 5px;
  88. }
  89. /*推薦課程*/
  90. main > .recommend {
  91. margin-top: 30px;
  92. padding: 0 10px;
  93. display: flex;
  94. flex-direction: column;
  95. }
  96. main > .recommend > h3 {
  97. font-size: 18px;
  98. font-weight: bold;
  99. padding-bottom: 10px;
  100. }
  101. main > .recommend > div {
  102. background-color: white;
  103. padding: 10px;
  104. box-sizing: border-box;
  105. }
  106. main > .recommend > section:first-of-type{
  107. background: none;
  108. width: 100%;
  109. display: flex;
  110. padding: 0;
  111. justify-content: space-between;
  112. }
  113. main > .recommend > section:first-of-type a {
  114. margin: 5px;
  115. height: 100px;
  116. }
  117. main > .recommend > section:first-of-type a > img{
  118. width: 100%;
  119. height: 100px;
  120. }
  121. main > .recommend > section:last-of-type > ul {
  122. display: flex;
  123. flex-direction: column;
  124. }
  125. main > .recommend > section:last-of-type > ul > li {
  126. display: flex;
  127. margin: 5px;
  128. background-color: white;
  129. }
  130. main > .recommend > section:last-of-type > ul > li > a {
  131. width: 40%;
  132. }
  133. main > .recommend > section:last-of-type > ul > li > a img {
  134. width: 100%;
  135. height: 90px;
  136. margin: 5px;
  137. box-sizing: border-box;
  138. }
  139. main > .recommend > section:last-of-type > ul > li > div {
  140. display: flex;
  141. flex-direction: column;
  142. justify-content: space-between;
  143. padding: 10px;
  144. box-sizing: border-box;
  145. flex: 1;
  146. }
  147. main > .recommend > section:last-of-type > ul > li > div > a {
  148. font-size: 16px;
  149. font-weight: bold;
  150. }
  151. main > .recommend > section:last-of-type > ul > li > div > span {
  152. display: flex;
  153. justify-content: space-between;
  154. }
  155. main > .recommend > section:last-of-type > ul > li > div > span i {
  156. background-color: #333333;
  157. color: white;
  158. font-style: normal;
  159. border-radius: 10px;
  160. padding: 0 5px;
  161. box-sizing: border-box;
  162. font-size: smaller;
  163. }
  164. /*最新更新*/
  165. main > .la-up {
  166. display: flex;
  167. flex-direction: column;
  168. padding: 10px;
  169. }
  170. main > .la-up h3 {
  171. font-size: 18px;
  172. font-weight: bold;
  173. padding: 10px 0;
  174. }
  175. main > .la-up > ul {
  176. display: flex;
  177. flex-direction: column;
  178. }
  179. main > .la-up > ul > li {
  180. display: flex;
  181. margin: 5px;
  182. background-color: white;
  183. }
  184. main > .la-up > ul > li > a {
  185. width: 40%;
  186. }
  187. main > .la-up > ul > li > a > img {
  188. width: 100%;
  189. height: 90px;
  190. padding: 5px;
  191. box-sizing: border-box;
  192. }
  193. main > .la-up > ul > li > div {
  194. display: flex;
  195. flex-direction: column;
  196. justify-content: space-between;
  197. padding: 10px;
  198. flex: 1;
  199. width: 0;
  200. }
  201. main > .la-up > ul > li > div > a {
  202. font-size: 16px;
  203. font-weight: bold;
  204. }
  205. main > .la-up > ul > li > div > span:first-of-type {
  206. width: 100%;
  207. white-space: nowrap;
  208. overflow: hidden;
  209. text-overflow: ellipsis;
  210. }
  211. main > .la-up > ul > li > div > span:last-of-type {
  212. display: flex;
  213. justify-content: space-between;
  214. }
  215. main > .la-up > ul > li > div > span:last-of-type i{
  216. background-color: #333333;
  217. color: white;
  218. font-style: normal;
  219. border-radius: 10px;
  220. padding: 0 5px;
  221. box-sizing: border-box;
  222. font-size: smaller;
  223. }
  224. /*最新文章*/
  225. main > .new-page {
  226. display: flex;
  227. flex-direction: column;
  228. padding: 10px;
  229. }
  230. main > .new-page h3 {
  231. font-size: 18px;
  232. font-weight: bold;
  233. padding: 10px 0;
  234. }
  235. main > .new-page > ul {
  236. display: flex;
  237. flex-direction: column;
  238. }
  239. main > .new-page > ul > li {
  240. display: flex;
  241. justify-content: space-between;
  242. margin: 5px;
  243. background-color: white;
  244. border: 1px solid #eeeeee;
  245. box-shadow: 0 2px 4px 0 #999999;
  246. }
  247. main > .new-page > ul > li > div {
  248. display: flex;
  249. padding: 10px;
  250. flex-direction: column;
  251. justify-content: space-between;
  252. }
  253. main > .new-page > ul > li > div > a{
  254. font-size: 16px;
  255. }
  256. main > .new-page > ul > li > a {
  257. width: 40%;
  258. padding: 5px;
  259. }
  260. main > .new-page > ul > li > a img {
  261. width: 100%;
  262. height: 60px;
  263. }
  264. main > .new-page > a {
  265. background-color: white;
  266. line-height: 30px;
  267. text-align: center;
  268. margin: 10px 5px;
  269. }
  270. /*最新博文*/
  271. main > .new-blog {
  272. display: flex;
  273. flex-direction: column;
  274. padding: 10px;
  275. }
  276. main > .new-blog h3 {
  277. font-size: 18px;
  278. font-weight: bold;
  279. padding: 10px 0;
  280. }
  281. main > .new-blog > ul {
  282. display: flex;
  283. flex-direction: column;
  284. }
  285. main > .new-blog > ul > li {
  286. display: flex;
  287. justify-content: space-between;
  288. margin: 5px;
  289. background-color: white;
  290. padding: 10px;
  291. border: 1px solid #eeeeee;
  292. box-shadow: 0 2px 4px 0 #999999;
  293. }
  294. main > .new-blog > ul > li a {
  295. width: 70%;
  296. white-space: nowrap;
  297. overflow: hidden;
  298. text-overflow: ellipsis;
  299. }
  300. main > .new-blog > a {
  301. background-color: white;
  302. line-height: 30px;
  303. text-align: center;
  304. margin: 10px 5px;
  305. }
  306. /*最新問(wèn)答*/
  307. main > .new-qa {
  308. display: flex;
  309. flex-direction: column;
  310. padding: 10px;
  311. margin-bottom: 50px;
  312. }
  313. main > .new-qa h3 {
  314. font-size: 18px;
  315. font-weight: bold;
  316. padding: 10px 0;
  317. }
  318. main > .new-qa > ul {
  319. display: flex;
  320. flex-direction: column;
  321. }
  322. main > .new-qa > ul > li {
  323. display: flex;
  324. justify-content: space-between;
  325. margin: 5px;
  326. background-color: white;
  327. padding: 10px;
  328. border: 1px solid #eeeeee;
  329. box-shadow: 0 2px 4px 0 #999999;
  330. }
  331. main > .new-qa > ul > li a {
  332. width: 70%;
  333. white-space: nowrap;
  334. overflow: hidden;
  335. text-overflow: ellipsis;
  336. }
  337. main > .new-qa > a {
  338. background-color: white;
  339. line-height: 30px;
  340. text-align: center;
  341. margin: 10px 5px;
  342. }
  343. /*頁(yè)底導(dǎo)航*/
  344. footer {
  345. width: 100%;
  346. height: 40px;
  347. max-width: 768px;
  348. min-width: 360px;
  349. position: fixed;
  350. bottom: 0;
  351. border-top: 1px solid #cccccc;
  352. display: flex;
  353. justify-content: space-evenly;
  354. padding: 5px 0;
  355. background-color: #EDEFF0;
  356. }
  357. footer > a {
  358. display: flex;
  359. text-align: center;
  360. flex-direction: column;
  361. justify-content: center;
  362. }

最后完成圖:

總結(jié):

  • 1、還是有眼高手低的毛病,單詞不好記,要多寫幾遍;
  • 2、腦子思想有點(diǎn)僵硬,不能靈活運(yùn)用學(xué)過(guò)的東西,比如全程div,都把ul、li 給忘記了;
  • 3、經(jīng)驗(yàn)太少,不知道哪個(gè)地方用什么顏色好看,希望老師能分享一些常用的配色表!
批改老師:天蓬老師天蓬老師

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

老師批語(yǔ):關(guān)于配色就是因人而異了, 這個(gè)真沒(méi)法教了, 憑感覺(jué)吧
本博文版權(quán)歸博主所有,轉(zhuǎn)載請(qǐng)注明地址!如有侵權(quán)、違法,請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理!
全部評(píng)論 文明上網(wǎng)理性發(fā)言,請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長(zhǎng)!
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

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

  • 登錄PHP中文網(wǎng),和優(yōu)秀的人一起學(xué)習(xí)!
    全站2000+教程免費(fèi)學(xué)