時間:2023-10-14 14:48:01 | 來源:網(wǎng)站運營
時間:2023-10-14 14:48:01 來源:網(wǎng)站運營
web前端作業(yè)設(shè)計不會做?送你一個【個人日志博客網(wǎng)頁設(shè)計】(HTML+CSS+JavaScript):?臨近期末, 你還在為HTML網(wǎng)頁設(shè)計結(jié)課作業(yè),老師的作業(yè)要求感到頭大?網(wǎng)頁要求的總數(shù)量太多?HTML網(wǎng)頁作業(yè)無從下手?沒有合適的模板?等等一系列問題。你想要解決的問題,在這里常見網(wǎng)頁設(shè)計作業(yè)題材有 個人、 美食、 公司、體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他等網(wǎng)頁設(shè)計題目, A+水平作業(yè), 可滿足大學生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計需求都能滿足你的需求。原始HTML+CSS+JS頁面設(shè)計, web大學生網(wǎng)頁設(shè)計作業(yè)源碼,這是一個不錯的個人日志博客網(wǎng)頁制作,畫面精明,非常適合初學者學習使用。接下來就詳細介紹一下吧。喜歡的話可以送你給你作為學習參考。可以看看視頻演示:??
網(wǎng)頁具體實現(xiàn)截圖:網(wǎng)站首頁
項目組織結(jié)構(gòu):
主要源碼展示:這是index.html主頁的代碼設(shè)計
?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>響應(yīng)式酷炫個人日志博客網(wǎng)頁設(shè)計</title> <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css"> <link rel="stylesheet" type="text/css" href="../res/css/main.css"> <!--加載meta IE兼容文件--> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]--></head><body> </script> </div> <div class="header"> <div class="menu-btn"> <div class="menu"></div> </div> <h1 class="logo"> <a href="index.html"> <span>MYBLOG</span> <img src="../res/img/logo.png"> </a> </h1> <div class="nav"> <a href="index.html" class="active">文章</a> <a href="whisper.html">微語</a> <a href="leacots.html">留言</a> <a href="album.html">相冊</a> <a href="about.html">關(guān)于</a> </div> <ul class="layui-nav header-down-nav"> <li class="layui-nav-item"><a href="index.html" class="active">文章</a></li> <li class="layui-nav-item"><a href="whisper.html">微語</a></li> <li class="layui-nav-item"><a href="leacots.html">留言</a></li> <li class="layui-nav-item"><a href="album.html">相冊</a></li> <li class="layui-nav-item"><a href="about.html">關(guān)于</a></li> </ul> <p class="welcome-text"> 歡迎來到<span class="name">小明</span>的博客~ </p> </div> <div class="banner"> <div class="cont w1000"> <div class="title"> <h3>MY<br />BLOG</h3> <h4>well-balanced heart</h4> </div> <div class="amount"> <p><span class="text">訪問量</span><span class="access">1000</span></p> <p><span class="text">日志</span><span class="daily-record">1000</span></p> </div> </div> </div> <div class="tlinks">Collect from <a href="http://www.cssmoban.com/">網(wǎng)頁模板</a></div> <div class="content"> <div class="cont w1000"> <div class="title"> <span class="layui-breadcrumb" lay-separator="|"> <a href="javascript:;" class="active">設(shè)計文章</a> <a href="javascript:;">前端文章</a> <a href="javascript:;">旅游雜記</a> </span> </div> <div class="list-item"> <div class="item"> <div class="layui-fluid"> <div class="layui-row"> <div class="layui-col-xs12 layui-col-sm4 layui-col-md5"> <div class="img"><img src="../res/img/sy_img1.jpg" alt=""></div> </div> <div class="layui-col-xs12 layui-col-sm8 layui-col-md7"> <div class="item-cont"> <h3>空間立體效果圖,完美呈現(xiàn)最終效果<button class="layui-btn layui-btn-danger new-icon">new</button></h3> <h5>設(shè)計文章</h5> <p>室內(nèi)設(shè)計作為一門新興的學科,盡管還只是近數(shù)十年的事,但是人們有意識地對自己生活、生產(chǎn)活動的室內(nèi)進行安排布置,甚至美化裝飾,賦予室內(nèi)環(huán)境以所祈使的氣氛,卻早巳從人類文明伊始的時期就已存在</p> <a href="details.html" class="go-icon"></a> </div> </div> </div> </div> </div> <div class="item"> <div class="layui-fluid"> <div class="layui-row"> <div class="layui-col-xs12 layui-col-sm4 layui-col-md5"> <div class="img"><img src="../res/img/sy_img2.jpg" alt=""></div> </div> <div class="layui-col-xs12 layui-col-sm8 layui-col-md7"> <div class="item-cont"> <h3>空間立體效果圖,完美呈現(xiàn)最終效果<button class="layui-btn layui-btn-danger new-icon">new</button></h3> <h5>設(shè)計文章</h5> <p>室內(nèi)設(shè)計作為一門新興的學科,盡管還只是近數(shù)十年的事,但是人們有意識地對自己生活、生產(chǎn)活動的室內(nèi)進行安排布置,甚至美化裝飾,賦予室內(nèi)環(huán)境以所祈使的氣氛,卻早巳從人類文明伊始的時期就已存在</p> <a href="details.html" class="go-icon"></a> </div> </div> </div> </div> </div> <div class="item"> <div class="layui-fluid"> <div class="layui-row"> <div class="layui-col-xs12 layui-col-sm4 layui-col-md5"> <div class="img"><img src="../res/img/sy_img3.jpg" alt=""></div> </div> <div class="layui-col-xs12 layui-col-sm8 layui-col-md7"> <div class="item-cont"> <h3>空間立體效果圖,完美呈現(xiàn)最終效果<button class="layui-btn layui-btn-danger new-icon">new</button></h3> <h5>設(shè)計文章</h5> <p>室內(nèi)設(shè)計作為一門新興的學科,盡管還只是近數(shù)十年的事,但是人們有意識地對自己生活、生產(chǎn)活動的室內(nèi)進行安排布置,甚至美化裝飾,賦予室內(nèi)環(huán)境以所祈使的氣氛,卻早巳從人類文明伊始的時期就已存在</p> <a href="details.html" class="go-icon"></a> </div> </div> </div> </div> </div> <script type="text/javascript" src="../res/layui/layui.js"></script> <script type="text/javascript"> layui.config({ base: '../res/js/util/' }).use(['element', 'laypage', 'jquery', 'menu'], function() { element = layui.element, laypage = layui.laypage, $ = layui.$, menu = layui.menu; laypage.render({ elem: 'demo', count: 70 //數(shù)據(jù)總數(shù),從服務(wù)端得到 }); menu.init(); }) </script></body></html>
大約就介紹到這里了、源碼也可以送給大家作為學習參考使用
也希望大家給我一個三連,這個對我真的很重要,感謝大家!
關(guān)鍵詞:設(shè)計,日志,作業(yè)
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。