HTML+CSS製作部落格園主頁
阿新 • • 發佈：2022-03-15
這學期學習了PHP這門課程，老師在前兩週教我們CSS和HTML致死，這次製作部落格園主頁便是對前兩週的學習作為總結吧，個人審美天賦不高，製作的還是稍微有點亂以後慢慢改進。下面是我的效果圖以及實驗程式碼：
這是整體架構：
Four(1).html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #main-top{ width: 100%; height: 150px; } #main-left{ width:15%; height: 950px; float: left; /* background-color: yellow; */ } #main-right{ width: 25%; height: 950px; float: left; text-align: center; /* background-color: aquamarine; */ } #main-middle { float:left; width: 60%; height: 950px; /* background-color: antiquewhite; */ } #main-footer { width: 100%; clear:both;/*清除左右浮動*/ margin-top:20px; position:relative;/*避免底部留白*/ height: auto; } body { background-image: url(back.png); } #topnav{ width: 100%; overflow: hidden; background-color: white; border: 1px solid black; border-radius: 10px; opacity: 0.4; text-align: center; } #footer{ width: 100%; overflow: hidden; border-radius: 10px; text-align: center; } a{ font-size: 40px; color: black; text-decoration: none; } .afooter { font-size: 30px; color:teal ; font-weight: bold; text-decoration: none; } h1{ font-size: 60px; text-align: center; } ul{ background-color: white; padding-left: 70px; opacity: 0.4; text-align: left; font-size:40px ; text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5); list-style-type: none; border: 1px solid white; border-radius: 10px; } .a-left{ font-size: 35px ; } #photo{ height: 50px; width: 50px; } #photo1{ height: 300px; width: 300px; opacity: 0.9; border-radius: 20px; } .li-k{ font-size: 30px; text-align: center; } .left-ul { background-color: white; padding-left: 70px; opacity: 0.4; font-size:40px ; width: auto; text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5); list-style-type: none; border: 1px solid white; border-radius: 10px; } .left-ul1 { background-color: white; padding-left: 70px; opacity: 0.4; font-size:30px ; width: auto; text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5); list-style-type: none; border: 1px solid white; border-radius: 10px; } textarea{ opacity: 0.4; } </style> </head> <body> <div id="main-top"> <h1>歡迎你，O_O似曾相識</h1> <div id="topnav"> <a href="Four(1).html"> 部落格園 </a> <a href="https://www.cnblogs.com/jyt604743080/p/15468200.html"> 首頁 </a> <a href="https://www.cnblogs.com/jyt604743080/p/15536266.html"> 新隨筆 </a> <a href=""> 聯絡 </a> <a href="Four(3).html" target="mainframe"> 介紹 </a> <a href="https://www.cnblogs.com/jyt604743080/p/15536266.html"> 管理 </a> </div> </div> <div id="main-left"> <ul> <li> </li> <li> </li> <li><img id="photo" src="assets\images\php\image\皮卡丘.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15969981.html">快閃記憶體</a><img id="photo" src="assets\images\php\image\皮卡丘.png"></li> <li> </li> <li><img id="photo" src="assets\images\php\image\皮卡丘1.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15969981.html">部落格</a><img id="photo" src="assets\images\php\image\皮卡丘1.png"></li> <li> </li> <li><img id="photo" src="assets\images\php\image\皮卡丘2.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15969981.html">小組</a><img id="photo" src="assets\images\php\image\皮卡丘2.png"></li> <li> </li> <li><img id="photo" src="assets\images\php\image\皮卡丘3.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15969981.html">新聞</a><img id="photo" src="assets\images\php\image\皮卡丘3.png"></li> <li> </li> <li><img id="photo" src="assets\images\php\image\皮卡丘1.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15969981.html">博問</a><img id="photo" src="assets\images\php\image\皮卡丘1.png"></li> <li> </li> <li><img id="photo" src="assets\images\php\image\皮卡丘4.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15970013.html">收藏</a><img id="photo" src="assets\images\php\image\皮卡丘4.png"></li> <li> </li> <li><img id="photo" src="assets\images\php\image\皮卡丘.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15970013.html">文庫</a><img id="photo" src="assets\images\php\image\皮卡丘.png"></li> <li> </li> <li> </li> </ul> </div> <div id="main-middle"> <iframe name="mainframe" src="Four(2).html" frameborder="0"width="1500"height="920" ></iframe> </div> <div id="main-right"> <br> <br> <br> <div class="left-ul"> <li class="li-k">公告</li> <li class="li-k"> <a href="https://www.cnblogs.com/jyt604743080/">暱稱： O_O似曾相識</a></li> <li class="li-k"> <a href="https://www.cnblogs.com/jyt604743080/p/15969981.html"></a>園齡： 8個月</li> <li class="li-k"><a href="https://www.cnblogs.com/jyt604743080/p/15969981.html"></a>粉絲： 5</li> <li class="li-k"> <a href="https://www.cnblogs.com/jyt604743080/p/15969981.html"></a>關注： 6</li> </div> <br> <div> <div class="left-ul1"> <li class="li-k">閱讀排行榜</li> <li > <a class="li-k" href="https://www.cnblogs.com/jyt604743080/p/15468200.html">1. 資料庫的增刪改查(122)</a></li> <li > <a class="li-k" href="https://www.cnblogs.com/jyt604743080/p/15969981.html"> 2. 河北省重大技術需求徵集系統原型(106)</a></li> <li ><a class="li-k" href="https://www.cnblogs.com/jyt604743080/p/15531228.html"> 3. 阿里程式設計規範(94)</a></li> <li> <a class="li-k"href="https://www.cnblogs.com/jyt604743080/p/15536266.html"> 4. 圖書管理系統（關於資料庫的增刪改查）(81)</a></li> <li > <a class="li-k"href="https://www.cnblogs.com/jyt604743080/p/15768920.html"> 5. IDEA 配置安卓(Android)開發環境(70)</a></li> </div> </div> <br> <br> <h1 style="color: aliceblue; opacity: 0.5;"> 記得留言那: </h1> <div> <textarea name="" id="" cols="70" rows="10"></textarea> </div> </div> </div> <div id="main-footer"> <div id="footer"> <a href="https://www.cnblogs.com/jyt604743080/p/15468200.html" class="afooter"> 關於我們 </a> <a href="https://www.cnblogs.com/jyt604743080/p/15966422.html" class="afooter"> 聯絡我們 </a> <a href="https://www.cnblogs.com/jyt604743080/p/15966422.html" class="afooter"> 使用條款 </a> <a href="https://www.cnblogs.com/jyt604743080/p/15966422.html" class="afooter"> 意見反饋 </a> </div> </div> </body> </html>
Four(2).html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .item{ border-bottom:dashed 1px #ccc; padding-bottom:10px; margin-top:14px; } .item_content{ padding-left:10px; margin:0; } .item_content h1{ font-size:25px; color:teal; margin:0; } .item_descri{ font-size:25px; color:gray; margin:0; margin-top:20px; border-left:solid 1px #ccc; padding-left:10px; } .item_info{ font-size:25px; color:#999; font-style:italic; margin:0; } </style> </head> <body> <div class="item"> </div> <div class="item"> <div class="item_content"> <h1>標題一</h1> <p class="item_descri">標題下面的內容</p> <p class="item_info">post 2020-05-08 江銀濤～閱讀(999999)評論(1)編輯</p> </div> </div> <div class="item"> <div class="item_content"> <h1>標題二</h1> <p class="item_descri">標題下面的內容</p> <p class="item_info">post 2020-05-08 江銀濤～閱讀(2000)評論(2)編輯</p> </div> </div> <div class="item"> <div class="item_content"> <h1>標題三</h1> <p class="item_descri">標題下面的內容</p> <p class="item_info">post 2020-05-08 江銀濤～閱讀(3)評論(3)編輯</p> </div> </div> <div class="item"> <div class="item_content"> <h1>標題四</h1> <p class="item_descri">標題下面的內容</p> <p class="item_info">post 2020-05-08 江銀濤～閱讀(4)評論(4)編輯</p> </div> </div> <div class="item"> <div class="item_content"> <h1>標題五</h1> <p class="item_descri">標題下面的內容</p> <p class="item_info">post 2020-05-08 江銀濤～閱讀(5)評論(5)編輯</p> </div> </div> <div class="item"> <div class="item_content"> <h1>標題六</h1> <p class="item_descri">標題下面的內容</p> <p class="item_info">post 2020-05-08 江銀濤～閱讀(6)評論(6)編輯</p> </div> </div> </body> </html>
Four(3).html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <SCRIPT LANGUAGE="JavaScript"> var strTime, strDate; function webClock() { var dNow = new Date(); var dHours = dNow.getHours(); var dMinutes = dNow.getMinutes(); var dSeconds = dNow.getSeconds(); strTime = dHours; strTime += ((dMinutes<10) ? ":0" : ":") + dMinutes; strTime += ((dSeconds<10) ? ":0" : ":") + dSeconds; clock.time.value = strTime; var dDate = dNow.getDate(); var dMonth = dNow.getMonth() + 1; var dYear = dNow.getYear(); strDate = dMonth; strDate += ((dDate<10) ? "/0" : "/") + dDate; strDate += "/" + dYear; clock.date.value = strDate; setTimeout("webClock()",1000); } </SCRIPT> <style type="text/css"> body{ width:"1500px"; height: "920px"; } th { font-size: 30px; } h1{ font-size:40px ; } </style> </head> </HTML> <body ONLOAD="webClock()"> <h1 class="callout" align="center">博客遊覽訪問記錄</h1> <form action="zhengji1" method="post" align="center" style="width:1400px;height: 820px;"> <table class="wzc-table" border="1" cellspacing="0"style="width: 1400px;height: 780px; background-color:white;opacity: 0.5;" > <tr> <th>訪問人員:</th> <td><input type="text" name="mingcheng" size="20" style="width:700px;height: 40px;"></td> </tr> <tr> <th>直接闡述：</th> <td colspan="3"> <textarea cols="100" rows="5"name="gaishu"></textarea> </td> </tr> <tr> <th>喜歡風格：</th> <td> <input type="checkbox" name="leixing" value="基礎研究 ">1 <input type="checkbox" name="leixing" value="應用研究">2 <input type="checkbox" name="leixing" value="試驗發展">3 <input type="checkbox" name="leixing" value="研究發展與成果應用">4 <input type="checkbox" name="leixing" value="技術推廣與科技服務 ">5務 </td> </tr> <tr > <td></td> <td ><input type="submit" value="提交" class="wzc-btn" style="width: 200px; height: 50px;"></td> </tr> </table> </form> </body> </html>
CSS程式碼也可以單另放在其他檔案中。