時(shí)間：2023-08-18 17:42:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-08-18 17:42:02 來源：網(wǎng)站運(yùn)營
轉(zhuǎn)載|【個(gè)人網(wǎng)站】零基礎(chǔ)個(gè)人網(wǎng)站搭建完整教程（附免費(fèi)源碼）：提示：目前網(wǎng)站在管局審核中，內(nèi)容后續(xù)將繼續(xù)更新：
搭建網(wǎng)站第一步要自己先完善第一個(gè)網(wǎng)頁
內(nèi)容參考鏈接: CSS 語法.
在第一個(gè)網(wǎng)頁的基礎(chǔ)上不斷加入更多的CSS和JS元素進(jìn)行網(wǎng)站修飾，就像樹根一樣不斷向上衍生，到每一處枝葉。簡單的一個(gè)網(wǎng)站我做了近80個(gè)HTML頁面，然后進(jìn)入下一階段：連接數(shù)據(jù)庫。這一塊對(duì)于初學(xué)者有些難度，建議有能力的去嘗試一下（我搭建的網(wǎng)站目前是靜態(tài)網(wǎng)頁，后續(xù)如果有時(shí)間會(huì)連接數(shù)據(jù)庫）。最后就是購買服務(wù)器、域名、網(wǎng)站備案、連服務(wù)器、打包程序、上傳、發(fā)布，后面逐個(gè)講到。
在線咨詢
<!DOCTYPE html><html> <head> <style> h2{ text-indent: 50px; text-align: justify; letter-spacing: 3px; } </style> </head> <body> <div> <center><h1>百度百科</h1></center> <h2>百度百科是一部內(nèi)容開放、自由的網(wǎng)絡(luò)百科全書,旨在創(chuàng)造一個(gè)涵蓋<所有領(lǐng)域知識(shí),服務(wù)所有互聯(lián)網(wǎng)用戶的中文知識(shí)性百科全書。在這里你可以參與詞條編輯,分享貢獻(xiàn)你的知識(shí)。</h2> </div> </body></html><!DOCTYPE html><html> <head> <style> h2{ text-indent: 50px; text-align: justify; letter-spacing: 3px; } </style> </head> <body> <div> <center><h1>百度百科</h1></center> <h2>百度百科是一部內(nèi)容開放、自由的網(wǎng)絡(luò)百科全書,旨在創(chuàng)造一個(gè)涵蓋所有領(lǐng)域知識(shí),服務(wù)所有互聯(lián)網(wǎng)用戶的中文知識(shí)性百科全書。在這里你可以參與詞條編輯,分享貢獻(xiàn)你的知識(shí)。</h2> <center><img src="photo.jpg"></center> </div> </body></html><!DOCTYPE html><html> <head> <meta charset="gb2312" /> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/> <script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script> <script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script lang="javascript" type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);} </script> <style> h1{ color:#000000; } h2{ text-indent: 50px; text-align: justify; letter-spacing: 3px; color:#000000; } h3{ color:#ffffff; } </style> </head> <body> <div class="header"> <div class="nav"> <div class="container"> <ul class="clearfix"> <li><a href="#">導(dǎo)航1</a> </li> <li> <a href="#">導(dǎo)航2</a> <dl> <dd><a href="#">分頁1</a></dd> <dd><a href="#">分頁2</a></dd> <dd><a href="#">分頁3</a></dd> </dl> </li> <li><a href="#">導(dǎo)航3</a> <dl> <dd><a href="#">分頁1</a></dd> <dd><a href="#">分頁2</a></dd> <dd><a href="#">分頁3</a></dd> </dl> </li> <li><a href="#">導(dǎo)航4</a> <dl> <dd><a href="#">分頁1</a></dd> <dd><a href="#">分頁2</a></dd> <dd><a href="#">分頁3</a></dd> </dl> </li> <li><a href="#">導(dǎo)航5</a> <dl> <dd><a href="#">分頁1</a></dd> <dd><a href="#">分頁2</a></dd> <dd><a href="#">分頁3</a></dd> </dl> </li> </ul> </div> </div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide slide1"></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div> <center><h1>百度百科</h1></center> <h2>百度百科是一部內(nèi)容開放、自由的網(wǎng)絡(luò)百科全書,旨在創(chuàng)造一個(gè)涵蓋所有領(lǐng)域知識(shí),服務(wù)所有互聯(lián)網(wǎng)用戶的中文知識(shí)性百科全書。在這里你可以參與詞條編輯,分享貢獻(xiàn)你的知識(shí)。</h2> <center><img src="photo.jpg" width="700" height="400"></center> </div> </div> </body></html><!doctype html><html> <head> <meta charset="gb2312"> <title>搭建屬于自己的網(wǎng)站</title> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/> <script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script> <script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script lang="javascript" type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> <link rel="stylesheet" href="css/index.css" type="text/css" media="all"/> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);} </script> </head> <body> <div id="hearder2" class="clearfix"> <div class="logo-name">######</div> </div> <div id="menu-box" class="clearfix"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">導(dǎo)航1</a></li> <li><a href="#">導(dǎo)航2</a></li> <li><a href="#">導(dǎo)航3</a></li> <li><a href="#">導(dǎo)航4</a></li> <li><a href="#">導(dǎo)航5</a></li> </ul> </div> <div id="slider-box" style="background:url(img/banner01.jpg) center center;"></div> <!-- div1 --> <div id="div1" class="clearfix"> <div class="left260"> <div class="title-box">登錄</div> <form id="form1" name="form1" method="post" action="login.html"> <input type="text" name="textfield2" id="textfield2" placeholder="用戶名" class="uname"> <input type="password" name="password" id="password" placeholder="密碼" class="upass"> <div class="t-link"> <input type="checkbox" name="checkbox" id="checkbox" class="chek">記住密碼 <a href="#" target="_blank">忘記密碼？</a> </div> <input type="submit" name="submit" id="submit" value="登錄" class="input-login"> <input type="button" name="button" id="button" value="注冊(cè)" class="input-but" onClick="window.open('#')"> </form> </div> <div class="center450"> <div class="title-box">中心簡介</div> <p><img src="img/logo.png" align="left" width="50" height="50">此處省略一千字##################################################################################################################...<a href="#">查看更多...</a></p> </div> <div class="right260"> <div class="title-box">新聞資訊<a href="#" class="title-more">更多...</a></div> <div class="video-box"> <embed src='img/news.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always' ></embed> </div> <ul> <li><a href="#">##########</a></li> <li><a href="#">##########</a></li> <li><a href="#">##########</a></li> </ul> </div> </div> </body></html> <!doctype html><html> <head> <meta charset="gb2312"> <title>搭建屬于自己的網(wǎng)站</title> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/> <script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script> <script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script lang="javascript" type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> <link rel="stylesheet" href="css/index.css" type="text/css" media="all"/> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);} </script> </head> <body> <div id="hearder2" class="clearfix"> <div class="logo-name">######</div> </div> <div id="menu-box" class="clearfix"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">導(dǎo)航1</a></li> <li><a href="#">導(dǎo)航2</a></li> <li><a href="#">導(dǎo)航3</a></li> <li><a href="#">導(dǎo)航4</a></li> <li><a href="#">導(dǎo)航5</a></li> </ul> </div> <div id="slider-box" style="background:url(img/banner01.jpg) center center;"></div> <!-- div1 --> <div id="div1" class="clearfix"> <div class="left260"> <div class="title-box">登錄</div> <form id="form1" name="form1" method="post" action="#"> <input type="text" name="textfield2" id="textfield2" placeholder="用戶名" class="uname"> <input type="password" name="password" id="password" placeholder="密碼" class="upass"> <div class="t-link"> <input type="checkbox" name="checkbox" id="checkbox" class="chek">記住密碼 <a href="###" target="_blank">忘記密碼？</a> </div> <input type="submit" name="submit" id="submit" value="登錄" class="input-login"> <input type="button" name="button" id="button" value="注冊(cè)" class="input-but" onClick="window.open('#')"> </form> </div> <div class="center450"> <div class="title-box">中心簡介</div> <p><img src="img/logo.png" align="left" width="50" height="50">此處省略一千字##################################################################################################################...<a href="#">查看更多...</a></p> </div> <div class="right260"> <div class="title-box">新聞資訊<a href="#" class="title-more">更多...</a></div> <div class="video-box"> <embed src='img/news.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always' ></embed> </div> <ul> <li><a href="#">##########</a></li> <li><a href="#">##########</a></li> <li><a href="#">##########</a></li> </ul> </div> </div> <div id="div2" class="clearfix"> <div class="left260"> <div class="title-box">通知公告<a href="#" class="title-more">更多...</a></div> <ul> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告 </a></li> </ul> </div> <div class="center450"> <div class="tabbox"> <div class="tab"> <a href="#" class="on">政務(wù)中心</a> <a href="#">文化論壇</a> <a href="#">時(shí)尚前沿</a> </div> <div class="content"> <div style="display:block;" class="tb"> <ul> <li><a href="#">###</a><span>2021-09-08</span></li> <li><a href="#">###</a><span>2021-06-21</span></li> <li><a href="#">###</a><span>2021-06-17</span></li> <li><a href="#">###</a><span>2021-05-07</span></li> <li><a href="#">###</a><span>2021-05-06</span></li> <li><a href="#">###</a><span>2021-04-25</span></li> </ul> </div> <div class="tb"> <ul> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> </ul> </div> <div class="tb"> <ul> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> </ul> </div> </div> </div> </div> <div class="right260"> <div class="title-box">就業(yè)熱點(diǎn)<a href="#" class="title-more">更多...</a></div> <div class="video-box"> <embed src='img/news-1.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always'></embed> </div> <ul> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> </ul> </div> </div> </body></html><!doctype html><html> <head> <meta charset="gb2312"> <title>搭建屬于自己的網(wǎng)站</title> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/> <script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script> <script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script lang="javascript" type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> <link rel="stylesheet" href="css/index.css" type="text/css" media="all"/> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);} </script> <script type="text/javascript"> $.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir: "left" }; o = $.extend(defaults, o); return this.each(function(){ var _li = $("li", this); _li.parent().parent().css({overflow: "hidden", position: "relative"}); //div _li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul _li.css({position: "relative", overflow: "hidden"}); //li if(o.dir == "left") _li.css({float: "left"}); var _li_size = 0; for(var i=0; i<_li.size(); i++) _li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true); if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"}); _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone()); _li = $("li", this); var _li_scroll = 0; function goto(){ _li_scroll += o.width; if(_li_scroll > _li_size) { _li_scroll = 0; _li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }); _li_scroll += o.width; } _li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount); } var move = setInterval(function(){ goto(); }, o.speed); _li.parent().hover(function(){ clearInterval(move); },function(){ clearInterval(move); move = setInterval(function(){ goto(); }, o.speed); }); }); }; function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);} </script> </head> <body> <div id="hearder2" class="clearfix"> <div class="logo-name">######</div> </div> <div id="menu-box" class="clearfix"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">導(dǎo)航1</a></li> <li><a href="#">導(dǎo)航2</a></li> <li><a href="#">導(dǎo)航3</a></li> <li><a href="#">導(dǎo)航4</a></li> <li><a href="#">導(dǎo)航5</a></li> </ul> </div> <div id="slider-box" style="background:url(img/banner01.jpg) center center;"></div> <div id="div1" class="clearfix"> <div class="left260"> <div class="title-box">登錄</div> <form id="form1" name="form1" method="post" action="#"> <input type="text" name="textfield2" id="textfield2" placeholder="用戶名" class="uname"> <input type="password" name="password" id="password" placeholder="密碼" class="upass"> <div class="t-link"> <input type="checkbox" name="checkbox" id="checkbox" class="chek">記住密碼 <a href="###" target="_blank">忘記密碼？</a> </div> <input type="submit" name="submit" id="submit" value="登錄" class="input-login"> <input type="button" name="button" id="button" value="注冊(cè)" class="input-but" onClick="window.open('#')"> </form> </div> <div class="center450"> <div class="title-box">中心簡介</div> <p><img src="img/logo.png" align="left" width="50" height="50">此處省略一千字##################################################################################################################...<a href="#">查看更多...</a></p> </div> <div class="right260"> <div class="title-box">新聞資訊<a href="#" class="title-more">更多...</a></div> <div class="video-box"> <embed src='img/news.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always' ></embed> </div> <ul> <li><a href="#">##########</a></li> <li><a href="#">##########</a></li> <li><a href="#">##########</a></li> </ul> </div> </div> <div id="div2" class="clearfix"> <div class="left260"> <div class="title-box">通知公告<a href="#" class="title-more">更多...</a></div> <ul> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告 </a></li> </ul> </div> <div class="center450"> <div class="tabbox"> <div class="tab"> <a href="#" class="on">政務(wù)中心</a> <a href="#">文化論壇</a> <a href="#">時(shí)尚前沿</a> </div> <div class="content"> <div style="display:block;" class="tb"> <ul> <li><a href="#">###</a><span>2021-09-08</span></li> <li><a href="#">###</a><span>2021-06-21</span></li> <li><a href="#">###</a><span>2021-06-17</span></li> <li><a href="#">###</a><span>2021-05-07</span></li> <li><a href="#">###</a><span>2021-05-06</span></li> <li><a href="#">###</a><span>2021-04-25</span></li> </ul> </div> <div class="tb"> <ul> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> </ul> </div> <div class="tb"> <ul> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> </ul> </div> </div> </div> </div> <div class="right260"> <div class="title-box">就業(yè)熱點(diǎn)<a href="#" class="title-more">更多...</a></div> <div class="video-box"> <embed src='img/news-1.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always'></embed> </div> <ul> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> </ul> </div> </div> <script> $(function(){ $(".tabbox .tab a").mouseover(function(){ $(this).addClass('on').siblings().removeClass('on'); var index = $(this).index(); number = index; $('.tabbox .content .tb').hide(); $('.tabbox .content .tb:eq('+index+')').show(); }); var auto = 1; if(auto ==1){ var number = 0; var maxNumber = $('.tabbox .tab a').length; function autotab(){ number++; number == maxNumber? number = 0 : number; $('.tabbox .tab a:eq('+number+')').addClass('on').siblings().removeClass('on'); $('.tabbox .content .tb:eq('+number+')').show().siblings().hide(); } var tabChange = setInterval(autotab,3000); $('.tabbox').mouseover(function(){ clearInterval(tabChange); }); $('.tabbox').mouseout(function(){ tabChange = setInterval(autotab,3000); }); } }); </script> <div id="div3"><img src="img/banner01.jpg"></div> <div id="div4"> <div class="title-box">照片展示</div> </div> <div class="scrollleft clearfix"> <ul> <li> <a href="img/employment-02.jpg"><img src="img/employment-02.jpg"/></a> <span></span> </li> <li> <a href="img/news-photo1.jpg"><img src="img/news-photo1.jpg"/></a> </li> <li> <a href="img/news-photo2.jpg"><img src="img/news-photo2.jpg"/></a> <span></span> </li> <li> <a href="img/news-photo3-1.jpg"><img src="img/news-photo3-1.jpg"/></a> </li> <li> <a href="img/news-photo4-1.jpg"><img src="img/news-photo4-1.jpg"/></a> <span></span> </li> </ul> </div> <script type="text/javascript"> $(document).ready(function(){ $(".scrollleft").imgscroll({ speed: 10, amount: 0, width: 1, dir: "left" }); }); </script> </body></html><!doctype html><html> <head> <meta charset="gb2312"> <title>搭建屬于自己的網(wǎng)站</title> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/> <script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script> <script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script lang="javascript" type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> <link rel="stylesheet" href="css/index.css" type="text/css" media="all"/> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);} </script> <script type="text/javascript"> $.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir: "left" }; o = $.extend(defaults, o); return this.each(function(){ var _li = $("li", this); _li.parent().parent().css({overflow: "hidden", position: "relative"}); //div _li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul _li.css({position: "relative", overflow: "hidden"}); //li if(o.dir == "left") _li.css({float: "left"}); var _li_size = 0; for(var i=0; i<_li.size(); i++) _li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true); if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"}); _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone()); _li = $("li", this); var _li_scroll = 0; function goto(){ _li_scroll += o.width; if(_li_scroll > _li_size) { _li_scroll = 0; _li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }); _li_scroll += o.width; } _li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount); } var move = setInterval(function(){ goto(); }, o.speed); _li.parent().hover(function(){ clearInterval(move); },function(){ clearInterval(move); move = setInterval(function(){ goto(); }, o.speed); }); }); }; function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);} </script> </head> <body> <div id="hearder2" class="clearfix"> <div class="logo-name">######</div> </div> <div id="menu-box" class="clearfix"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">導(dǎo)航1</a></li> <li><a href="#">導(dǎo)航2</a></li> <li><a href="#">導(dǎo)航3</a></li> <li><a href="#">導(dǎo)航4</a></li> <li><a href="#">導(dǎo)航5</a></li> </ul> </div> <div id="slider-box" style="background:url(img/banner01.jpg) center center;"></div> <div id="div1" class="clearfix"> <div class="left260"> <div class="title-box">登錄</div> <form id="form1" name="form1" method="post" action="#"> <input type="text" name="textfield2" id="textfield2" placeholder="用戶名" class="uname"> <input type="password" name="password" id="password" placeholder="密碼" class="upass"> <div class="t-link"> <input type="checkbox" name="checkbox" id="checkbox" class="chek">記住密碼 <a href="###" target="_blank">忘記密碼？</a> </div> <input type="submit" name="submit" id="submit" value="登錄" class="input-login"> <input type="button" name="button" id="button" value="注冊(cè)" class="input-but" onClick="window.open('#')"> </form> </div> <div class="center450"> <div class="title-box">中心簡介</div> <p><img src="img/logo.png" align="left" width="50" height="50">此處省略一千字##################################################################################################################...<a href="#">查看更多...</a></p> </div> <div class="right260"> <div class="title-box">新聞資訊<a href="#" class="title-more">更多...</a></div> <div class="video-box"> <embed src='img/news.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always' ></embed> </div> <ul> <li><a href="#">##########</a></li> <li><a href="#">##########</a></li> <li><a href="#">##########</a></li> </ul> </div> </div> <div id="div2" class="clearfix"> <div class="left260"> <div class="title-box">通知公告<a href="#" class="title-more">更多...</a></div> <ul> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告</a></li> <li><a href="#">關(guān)于2022年###有關(guān)事項(xiàng)的通告 </a></li> </ul> </div> <div class="center450"> <div class="tabbox"> <div class="tab"> <a href="#" class="on">政務(wù)中心</a> <a href="#">文化論壇</a> <a href="#">時(shí)尚前沿</a> </div> <div class="content"> <div style="display:block;" class="tb"> <ul> <li><a href="#">###</a><span>2021-09-08</span></li> <li><a href="#">###</a><span>2021-06-21</span></li> <li><a href="#">###</a><span>2021-06-17</span></li> <li><a href="#">###</a><span>2021-05-07</span></li> <li><a href="#">###</a><span>2021-05-06</span></li> <li><a href="#">###</a><span>2021-04-25</span></li> </ul> </div> <div class="tb"> <ul> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> </ul> </div> <div class="tb"> <ul> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> </ul> </div> </div> </div> </div> <div class="right260"> <div class="title-box">就業(yè)熱點(diǎn)<a href="#" class="title-more">更多...</a></div> <div class="video-box"> <embed src='img/news-1.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always'></embed> </div> <ul> <li><a href="#">###</a></li> <li><a href="#">###</a></li> <li><a href="#">###</a></li> </ul> </div> </div> <script> $(function(){ $(".tabbox .tab a").mouseover(function(){ $(this).addClass('on').siblings().removeClass('on'); var index = $(this).index(); number = index; $('.tabbox .content .tb').hide(); $('.tabbox .content .tb:eq('+index+')').show(); }); var auto = 1; if(auto ==1){ var number = 0; var maxNumber = $('.tabbox .tab a').length; function autotab(){ number++; number == maxNumber? number = 0 : number; $('.tabbox .tab a:eq('+number+')').addClass('on').siblings().removeClass('on'); $('.tabbox .content .tb:eq('+number+')').show().siblings().hide(); } var tabChange = setInterval(autotab,3000); $('.tabbox').mouseover(function(){ clearInterval(tabChange); }); $('.tabbox').mouseout(function(){ tabChange = setInterval(autotab,3000); }); } }); </script> <div id="div3"><img src="img/banner01.jpg"></div> <div id="div4"> <div class="title-box">照片展示</div> </div> <div class="scrollleft clearfix"> <ul> <li> <a href="img/employment-02.jpg"><img src="img/employment-02.jpg"/></a> <span></span> </li> <li> <a href="img/news-photo1.jpg"><img src="img/news-photo1.jpg"/></a> </li> <li> <a href="img/news-photo2.jpg"><img src="img/news-photo2.jpg"/></a> <span></span> </li> <li> <a href="img/news-photo3-1.jpg"><img src="img/news-photo3-1.jpg"/></a> </li> <li> <a href="img/news-photo4-1.jpg"><img src="img/news-photo4-1.jpg"/></a> <span></span> </li> </ul> </div> <script type="text/javascript"> $(document).ready(function(){ $(".scrollleft").imgscroll({ speed: 10, amount: 0, width: 1, dir: "left" }); }); </script> <div class="footer"> <div class="container clearfix"> <div class="rgt"> <p>Developers：###</p> <p>ADD：###</p> <p>Copyright @### 版權(quán)所有</p> </div> </div> </div> </body></html>body { background-image: url("../img/bg.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;}至此，前端頁面搭建完畢，具體CSS和JS代碼后續(xù)講到，由于目前建立的只是一個(gè)框架，各模塊內(nèi)容需要另增十多個(gè)頁面進(jìn)行完善，在此不做過多解釋。
關(guān)鍵詞：免費(fèi),教程,基礎(chǔ),轉(zhuǎn)載,完整
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
