国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > html+css怎么做網(wǎng)頁(yè)?

html+css怎么做網(wǎng)頁(yè)?

時(shí)間:2024-02-13 23:40:01 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)

時(shí)間:2024-02-13 23:40:01 來(lái)源:網(wǎng)站運(yùn)營(yíng)

html+css怎么做網(wǎng)頁(yè)?:現(xiàn)在是22:06分,花了2小時(shí)寫(xiě)了一套學(xué)生作業(yè)水準(zhǔn)的網(wǎng)站首頁(yè),該網(wǎng)站的主題為《去旅行吧》,整個(gè)首頁(yè)下來(lái)有1800字符的代碼量,你可以直接將首頁(yè)提交作業(yè)使用,也可以根據(jù)首頁(yè)框架去試著做出幾個(gè)超鏈接頁(yè)面【截圖及源碼在下方】。

這個(gè)首頁(yè)代碼運(yùn)用了DIV盒子的使用方法,如盒子的嵌套、浮動(dòng)、margin、border、background等屬性的使用,使用了CSS來(lái)布局框架,CSS的代碼量也很足、很細(xì)致,使用hover來(lái)完成過(guò)渡效果、鼠標(biāo)滑過(guò)效果等,使用表格、表單補(bǔ)充模塊,為方便新手學(xué)習(xí)頁(yè)面中沒(méi)有使用js有需要的可以自行添加。

能看懂或?qū)懗鲞@個(gè)首頁(yè)的,恭喜你已經(jīng)掌握了HTML前端網(wǎng)頁(yè)設(shè)計(jì)的大部分知識(shí)點(diǎn),同時(shí)如LOGO圖的設(shè)計(jì)、漸變的使用、布局上色塊、陰影的使用、js的引入可能就是你下一步需要攻克的點(diǎn)了...

源碼有價(jià),僅供學(xué)習(xí),請(qǐng)勿轉(zhuǎn)售,有用點(diǎn)贊。

源碼保存方法(下方為保存及使用的視頻):

1. 復(fù)制下方所有源碼

2. 電腦右鍵桌面空白處 - 新建 - 文本文檔 雙擊打開(kāi)文本文檔,粘貼源碼到空白文本文檔內(nèi)

3. 點(diǎn)擊 文件 - 另存為,保存類型選擇 所有文件, 文件名填寫(xiě)為 index.html 點(diǎn)擊保存即可在瀏覽器預(yù)覽

也可以直接將源碼復(fù)制進(jìn)Dreamweaver、Hbuilder X、Editplus等網(wǎng)頁(yè)設(shè)計(jì)軟件內(nèi)保存為Html。

源碼共享如下,記得點(diǎn)贊~

<!doctype html><html><head><meta charset="utf-8"><title>去旅行吧-PsdHtml.CN原創(chuàng)作品,僅供個(gè)人學(xué)習(xí)使用,禁止轉(zhuǎn)賣</title><style type="text/css">#father { position: absolute; width: 100%; height: 1418px; z-index: 1; left: 0px; top: 0px;}#father #top { height: 120px; width: 1000px; margin-right: auto; margin-left: auto;}#father #title { height: 42px; width: 1000px; margin-right: auto; margin-left: auto; background-image: url(http://cdn.psdhtml.cn/title-skin.jpg); border: 1px solid #fafafa;}#father #line1 { height: 5px; width: 100%; background-color: #333;}#father #title #daohang { font-family: "微軟雅黑"; font-size: 16px; color: #333; float: left; height: 42px; width: 140px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: #fafafa; border-right-color: #ececec; border-bottom-color: #fafafa; border-left-width: 1px; border-left-style: solid; border-left-color: #ffffff; line-height: 42px; text-align: center;}.d_over{ background-color:#217aff; transition-duration: 1s;}.d_out{ background-color:rgba(0,0,0,0);}a:link { color: #333; text-decoration: none;}a:visited { text-decoration: none; color: #000;}a:hover { text-decoration: none; color: #FFFFFF;}a:active { text-decoration: none; color: #333;}#father #main { height: 600px; width: 1000px; margin-top: 1px; margin-right: auto; margin-left: auto; background-color: #FFF; font-family: "微軟雅黑"; font-size: 12px; line-height: 28px; color: #333;}#father #main #left { float: left; height: 600px; width: 249px;}#father #main #left #left-text #m-249 { height: 272px; margin-top: 15px;}#father #main #left #left-text #m-245 { height: 245px;}#father #main #central { float: left; height: 600px; width: 500px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #f2f2f2; border-left-color: #f2f2f2;}#father #main #left #left-text { height: 520px; width: 195px; margin-top: 30px; margin-left: 28px;}.dabiaoti { font-family: "微軟雅黑"; font-size: 18px; color: #333; font-weight: bold;}.axiaozi { font-family: "微軟雅黑"; font-size: 13px; line-height: 35px; color: #000;}.bxiaozi { font-family: "微軟雅黑"; font-size: 10px; line-height: 27px; color: #000;}a.black:link { color: #000000; text-decoration: none;}a.black:visited { text-decoration: none; color: #000000;}a.black:hover { text-decoration: none; color: #2a7cf5;}a.black:active { text-decoration: none;}a.black1:link { color: #000000; text-decoration: none;}a.black1:visited { text-decoration: none; color: #2a7cf5;}a.black1:hover { text-decoration: underline; color: #217aff;}a.black1:active { text-decoration: none; color: #2199ff;}#father #main #central #text2 { font-family: "微軟雅黑"; font-size: 12px; line-height: 25px; color: #333; height: 290px; width: 500px; margin-top: 0px; background-color: #f5fffa;}#father #footer_all { height: 241px; width: 100%; margin-right: auto; margin-left: auto; font-family: "微軟雅黑"; font-size: 13.4px; color: #696969; margin-top: 0px;}#father #footer_all #f1000-167 { height: 167px; width: 1000px; margin-right: auto; margin-left: auto; padding-top: 67px; background-color: #f6faff; border-top-width: 1px; border-top-style: solid; border-top-color: #CCC;}#father #footer_all #f1000-167 #logo-175-40 { float: left; height: 40px; width: 160px; margin-top: 40px; margin-left: 45px;}#father #footer_all #f1000-167 #login { float: left; height: 40px; width: 70px; margin-top: 40px; margin-left: 40px;}#father #footer_all #f1000-167 #right828-167 { float: left; height: 167px; width: 300px; margin-left: 236px;}#father #footer_all #f1000-167 #right828-167 #l-828-80 { height: 80px; width: 300px; margin-top: 30px; letter-spacing: 2px;}#father #footer_all #f1000-167 #right828-167 #l-828-80 #r-150-42 { float: left; height: 42px; width: 70px; margin-top: 13px; text-align: center; line-height: 42px;}#father #footer_all #f1000-167 #right828-167 #l-828-80 #r-150-42-1 { float: left; height: 42px; width: 70px; margin-top: 13px; margin-left: 32px; text-align: center; line-height: 42px;}#father #footer_all #f1000-167 #right828-167 #l-828-80 #r-erweima { float: left;height: 75px;width: 75px;margin-top: 0px;margin-left: 48px;}#father #footer_all #f1000-167 #right828-167 #link { height: 33px; width: 721px; margin-top: 24px; margin-left: 108px; text-align: right; line-height: 20px; font-family: "微軟雅黑"; font-size: 13px;}#father #tuijian { height: 315px; width: 1000px; margin-right: auto; margin-left: auto; background-color: #FFF; padding-top: 40px; margin-top: 1px;}#father #tuijian #tuijian01 { float: left; height: 270px; width: 290px; margin-left: 35px;}#father #tuijian #tuijian02 { float: left; height: 270px; width: 290px; margin-left: 30px;}#father #tuijian #tuijian01 #tuijiantu { height: 204px;}#father #tuijian #tuijian01 #tuijiantu:hover { height: 204px; border: 2px solid #2376F6;}#father #tuijian #tuijian01 #tuijianwenzi { height: 66px; font-family: "微軟雅黑"; font-size: 14px; color: #999999; width: 290px;}#father #tuijian #tuijian02 #tuijiantu2 { height: 204px;}#father #tuijian #tuijian02 #tuijiantu2:hover { height: 204px; border: 2px solid #2376F6;}#father #tuijian #tuijian02 #tuijianwenzi2 { height: 66px; font-family: "微軟雅黑"; font-size: 14px; color: #999999; width: 290px;}#father #footer_all #down1 { background-color: #f2f2f; height: 1px; width: 1000px; margin-right: auto; margin-left: auto;}#father #main #left #left-text #m-245 #a195 { height: 115px; background-image: url(http://cdn.psdhtml.cn/index1.jpg);}#father #main #left #left-text #m-245 #a195:hover { height: 115px; background-image: url(http://cdn.psdhtml.cn/index2.jpg); transition-duration: 1s;}#father #main #left #left-text #m-245 #a196 { height: 115px; margin-top: 9px; background-image: url(http://cdn.psdhtml.cn/index3.jpg);}#father #main #left #left-text #m-245 #a196:hover { height: 115px; background-image: url(http://cdn.psdhtml.cn/index4.jpg); transition-duration: 1s;}#father #main #central #banner { height: 310px; width: 500px; background-image: url(http://cdn.psdhtml.cn/banner.gif);}#father #main #left #left-text #m-249 table tr td #textfield { height: 36px; width: 170px; font-family: "微軟雅黑"; font-size: 14px; color: #999;}#father #main #left #left-text #m-249 table tr td #textfield2 { height: 36px; width: 170px; font-family: "微軟雅黑"; font-size: 14px; color: #999;}.wenben {font-family: "微軟雅黑"; font-size: 15px; color: #000;}#father #footer_all #banquan { height: 36px; width: 1000px; margin-right: auto; margin-left: auto; border-top-width: 1px; border-top-style: solid; border-top-color: #f2f2f2; background-image: url(http://cdn.psdhtml.cn/lxidw7.svg); background-color: #FFF;}</style><script type="text/javascript">function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0;}function MM_popupMsg(msg) { //v1.0 alert(msg);}function MM_goToURL() { //v3.0 var i, args=MM_goToURL.arguments; document.MM_returnValue = false; for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");}</script></head><body bgcolor="#f2f2f2"><div id="father"><div id="line1"></div><div id="top"><a href="index.html"><img src="http://cdn.psdhtml.cn/title.jpg" width="1000" height="120"></a></div> <div id="title"> <div id="daohang" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="index.html">首 頁(yè)</a></div> <div id="daohang" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">推薦風(fēng)景</a></div> <div id="daohang" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">圖庫(kù)</a></div> <div id="daohang" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">視頻</a></div> <div id="daohang" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">注冊(cè)</a></div> </div> <div id="main"> <div id="left"> <div id="left-text"> <table width="100%" border="0"> <tr> <td height="45" class="dabiaoti">推薦內(nèi)容&nbsp;</td> </tr> <tr> <td class="axiaozi"> <img src="http://cdn.psdhtml.cn/arrow_01.gif" width="5" height="7"> <a href="#" class="black">出游攻略看這里</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">出行日本注意事項(xiàng) </a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">上帝的花園——圖瓦盧</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">世界上最浪漫十大酒店 </a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">聞所未聞10個(gè)世界之最</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">塞班島 / 馬紹爾群島</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">埃及金字塔 </a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">布達(dá)拉宮</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">自助旅游實(shí)用手冊(cè)</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">簽證基本知識(shí) </a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> 杭州 <br> &nbsp; &nbsp;<span class="bxiaozi"><a href="#" class="black">杭州園林</a>&nbsp;</span> &nbsp; <span class="bxiaozi"><a href="#" class="black">寒山寺</a></span>&nbsp; &nbsp; <a href="#" class="black1"><span class="bxiaozi">七里山塘</span></a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">鳳凰古城&nbsp;</a></td> </tr> </table> </div> </div> <div id="central"> <div id="banner"></div> <div id="text2"><table width="100%" border="0"> <tr> <td height="287" align="center"><table width="80%" border="0"> <tr> <td><span class="dabiaoti">&quot;</span> 因?yàn)橛行┦乱迷纾F(xiàn)在不做,也許一輩子都不會(huì)再做了,等有時(shí)間了,可不曾想,其實(shí)我們什么時(shí)候都很忙,也許真到了你覺(jué)得有時(shí)間的時(shí)候,身邊的他(她)已不在,或者是到了樓下走走都困難的年紀(jì)。因?yàn)槁眯械哪_步,永遠(yuǎn)是向前的,“世界那么大,我想去看看”,很贊的一句網(wǎng)絡(luò)語(yǔ),世界那么大,想要在有生之年看完,就只能步步向前,確定計(jì)劃出發(fā),將會(huì)讓你心靈和身體都在向前的路上。&nbsp;</td> </tr> </table></td> </tr> </table></div> </div> <div id="left"> <div id="left-text"> <div id="m-245"> <div id="a195"></div> <div id="a196"></div> </div><div id="m-249"> <table width="100%" border="0"> <tr> <td height="36" class="dabiaoti">歡迎登陸</td> </tr> <tr> <td height="51"><label for="textfield"></label> <input name="textfield" type="text" id="textfield" value="用戶名"></td> </tr> <tr> <td height="53"><input name="textfield2" type="password" id="textfield2" value="......"></td> </tr> <tr> <td height="37" align="left" bgcolor="#f8f8f8"><label for="select"></label> <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)"> <option value="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym"></option> <option value="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym"></option> </select></td> </tr> <tr> <td height="42" align="left"><input type="checkbox" name="checkbox" id="checkbox">同意注冊(cè)協(xié)議 <br></td> </tr> <tr> <td align="center"><input name="button2" type="submit" class="wenben" id="button2" onclick="MM_popupMsg('注冊(cè)成功,點(diǎn)擊確定跳轉(zhuǎn)至首頁(yè)。');MM_goToURL('parent','index.html');return document.MM_returnValue" value="提交注冊(cè)信息" /></td> </tr> </table> </div> </div> </div> </div> <div id="tuijian"> <div id="tuijian01"> <div id="tuijiantu"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/tuijian01.jpg" width="286" height="204" /></a></div> <div id="tuijianwenzi"><table width="100%" border="0"> <tr> <td height="40">美麗的海島度假不想了解一下?</td> </tr> <tr> <td><a href="#" class="black">了解更多</a></td> </tr></table></div> </div> <div id="tuijian02"> <div id="tuijiantu2"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/tuijian02.jpg" width="286" height="204" /></a></div> <div id="tuijianwenzi2"><table width="100%" border="0"> <tr> <td height="40">一個(gè)能夠凈化靈魂的地方</td> </tr> <tr> <td><a href="#" class="black">了解更多</a></td> </tr></table></div> </div> <div id="tuijian02"> <div id="tuijiantu2"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/tuijian03.jpg" width="286" height="204" /></a></div> <div id="tuijianwenzi2"><table width="100%" border="0"> <tr> <td height="40">這個(gè)視頻美哭了,不看后悔...</td> </tr> <tr> <td><a href="#" class="black">了解更多</a></td> </tr></table></div> </div> </div> <div id="footer_all"> <div id="f1000-167"> <div id="logo-175-40"><a href="index.html"><img src="http://cdn.psdhtml.cn/logodibu.png" width="159" height="47"></a></div> <div class="aye" id="login"> <table width="103" border="0"> <tr> <td width="97" height="37" align="left"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" class="black">查看更多</a></td> </tr> </table> </div> <div class="aye" id="login"> <table width="103" border="0"> <tr> <td width="97" height="37" align="left" class="black"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" class="black"><span class="axiaozi"><img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"></span> 免費(fèi)網(wǎng)頁(yè)源碼</a><a href="Login.html"></a></td> </tr> </table> </div> <div id="right828-167"> <div id="l-828-80"> <div id="r-150-42"><a href="#"><img src="http://cdn.psdhtml.cn/fb.png" width="45" height="45"></a></div> <div id="r-150-42-1"><a href="#"><img src="http://cdn.psdhtml.cn/tw.png" alt="" width="45" height="45"></a></div> <div id="r-150-42-1"><a href="#"><img src="http://cdn.psdhtml.cn/ins.png" alt="" width="45" height="45"></a></div> </div> <div id="r-lianjie"><table width="100%" border="0"> <tr> <td align="right">? 去旅行吧&nbsp;&nbsp; &nbsp;</td> </tr></table></div> </div> </div> <div id="down1"></div> <div id="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/lxidw7.svg" width="1000" height="36"></a></div> </div></div></body></html>需要更多網(wǎng)頁(yè)源碼成品可以看下這個(gè)問(wèn)題下我的回答~

關(guān)鍵詞:

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉