網頁布局框架
阿新 • • 發佈：2018-03-07
spa line image copy 人間 top gpo 兩個 choice
html+css
<!DOCTYPE html> <html> <head> <title>筱白邇</title> <style type="text/css"> *{ margin: 0; padding: 0; font-family: 微軟雅黑; list-style: none; } body{ background-image: url(1.jpg); } /*導航欄部分開始*/ .nav{ width: 1366px; height: 35px; background-color: black; position: relative; } .nav li{ width: 60px; /*border: 1px solid #fff;*/ color: #fff; /*padding-left: 20px;*/ line-height: 35px; float: left; margin-left: 100px; text-align: center; } .nav li:hover{ background-color: #1e53eb; cursor: pointer; } /*導航欄部分結束*/ /*banner部分開始*/ .banner{ width: 820px; height: 375px; background-image: url(2.jpg); margin-left: 100px; margin-top: 10px; box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.8); } .banner p{ padding: 290px 180px; font-size: 30px; font-weight: normal; color: #000; transition: 1s; } .banner p:hover{ transform: scale(1.5); color: #fff; } /*banner部分結束*/ /*右邊欄部分開始*/ .right{ width: 250px; height: 450px; border: 1px solid #000; position: absolute; left: 960px; top: 45px; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.6); } .right ul li{ height: 44px; border-bottom: 1px solid #ccc; line-height: 44px; } .right ul li:hover{ color: #fff; background-color: #1e53eb; cursor: pointer; } .right ul li p{ font-size: 12px; } .right .choice{ background-color: #1e53eb; color: #fff; } /*右邊欄部分結束*/ /*主體部分開始*/ .body{ width: 820px; height: 500px; /*border: 1px solid yellow;*/ margin-left: 100px; margin-top: 30px; } .body ul li{ width: 265px; height: 220px; /*background-color: blue;*/ float: left; margin-left: 8px; margin-top: 3px; } .body ul li p{ font-weight:normal; font-size: 12px; margin-top: 10px; width: 270px; } .body .rect{ width: 95px; height: 20px; border: 1px solid #c3c5cc; border-radius: 3px; margin-top: 5px; } .body .rect p{ font-weight: normal; font-size: 3px; margin-top: 3px; } /*主體部分結束*/ footer p{ position: absolute; bottom: -280px; left: 100px; font-size: 12px; } </style> </head> <body> <!-- 導航欄部分開始 --> <div class="nav"> <ul> <li>魏國</li> <li>蜀國</li> <li>吳國</li> <li>晉國</li> </ul> </div> <!-- 導航欄部分結束 --> <!-- banner部分開始 --> <div class="banner"> <p>若非先主垂三顧   誰識茅廬一臥龍</p> </div> <!-- banner部分結束 --> <!-- 右邊欄部分開始 --> <div class="right"> <ul> <li class="choice"><p>英魂護佑國邦  不愧孫武兒郎（孫堅）</p></li> <li><p>兒女情深緣淺   慈母空悲傷（吳國太）</p></li> <li><p>國色剎那芬芳  琉璃苦仿徨（大喬）</p></li> <li><p>淚濕紅顏損天香  生瑜何生亮（小喬）</p></li> <li><p>我恩怨隨風飄逝  兄弟意難忘（淩統）</p></li> <li><p>設疑城破軍好似鐵壁銅墻（徐盛）</p></li> <li><p>你決斷內務紛紜  竭忠智輔君王（張昭&張紘）</p></li> <li><p>心長恨水長東悲聲吟唱  人間天上（孫尚香）</p></li> <li><p>神亭嶺槍戟顯鋒芒  天義永昭彰（太史慈）</p></li> <li><p>錦帆鼓蕩銅鈴響叮當  百騎馳疆場 （甘寧） </p></li> </ul> </div> <!-- 右邊欄部分結束 --> <!-- 主體部分開始 --> <div class="body"> <ul> <li> <h4>Heading<h4> <p>你說春光正好，韶華正茂，只羨鴛鴦不羨仙，後來春去難留，庭院深鎖，咫尺天涯畫堂前。 你說玉笛飛聲，如慕如訴，費盡思量訴衷腸，後來寶鼎茶閑，茶煙尚綠，斯人蹤跡已渺茫 你說有美一人，婉如清揚，邂逅相遇同結好，後來十裏長亭，望眼欲穿，楊柳岸月殘風曉 你說霞染天光，春色將老，陌上花開緩緩歸，後來臺城柳暗，煙籠長堤，驚鴻照影不復回 </p> <div class="rect"><p>View deatails>></p></div> </li> <li> <h4>Heading<h4> <p>你說霞染天光，春色將老，陌上花開緩緩歸，後來臺城柳暗，煙籠長堤，驚鴻照影不復回 你說彼岸人家，華燈初上，溫馨祥和心所向，後來漁舟獨回，歌盡滄桑，一蓑煙雨自仿徨 你說歲月靜好，並蓮同心，天朗氣清風和暢，後來輕雲蔽月，白露為霜，伊人不知在何方 你說茜紗窗下，棋罷茶閑，意綿靜日玉生香，後來風雨飄零，孤松獨支，山岡無處話淒涼</p> <div class="rect"><p>View deatails>></p></div> </li> <li> <h4>Heading<h4> <p>我還是很喜歡你，就像白馬銀槍，單騎救主，願你槍出如龍，諸事無違本心。 我還是很喜歡你，就像座下赤兔，青龍偃月，願你刀出無悔，傲視八荒六合。 我還是很喜歡你，就像丈八蛇矛，喝斷當陽，願你心有猛虎，笑看烽火狼煙。 我還是很喜歡你，就像雌雄雙股，三顧茅廬，願你一世仁德，來日桃園再會。 我還是很喜歡你，就像赤壁東風，八卦之陣，願你算無遺策，謀得太平人間。 </p> <div class="rect"><p>View deatails>></p></div> </li> <li> <h4>Heading<h4> <p>蓋聶：若今生長劍浣花，生死無涯。便許你來世雪底封刀，結廬為家。 你可願荊釵綰發，為我煮茶，明朝江湖飲馬。 端木蓉：若今生頑疾難化，逃不脫命匣。來世，你可願將韶華折煞， 許我一卦，卦裏我命無雙，一世容華。 衛莊：若今生執罔虛幻，已成落花。便許你來世雪掃眉發，執手天涯。 你可願青絲綰正，笑靨如花，借我一世年華。 </p> <div class="rect"><p>View deatails>></p></div> </li> <li> <h4>Heading<h4> <p>赤煉：若今生輕放年華，化身流沙，只為追尋你浪跡的天涯。 來世，你可願為我折枝白梅花，看一場雪落下。 高漸離：若今生逆旅天涯，四海為家。便許你來世雪舞霓裳，步步蓮華。 你可願化身為枷，度我年華，細數山室茶花。 雪女：若今生碎如煙花，不為他嫁。 來世，你可願等飛雪染白頭發，娶我回家。許我一世年華。</p> <div class="rect"><p>View deatails>></p></div> </li> <li> <h4>Heading<h4> <p>你兩個都想救，結果卻是兩個都沒有救成，選擇生，必有死，選擇勝，必有敗，這個世界上，勝者生而敗者亡，在事實面前，生與死，不過是必然的因果，當今世上7國紛爭，生靈塗炭，無論你如何去選擇，都難免會有犧牲，縱橫者，天地之道，莫說是兩條人命，就算是天下蒼生放在眼前，又有什麽分別呢，這個考驗，並不重生死，而在於決斷。 </p> <div class="rect"><p>View deatails>></p></div> </li> </ul> </div> <!-- 主體部分結束 --> <!-- 尾部開始 --> <footer> <p>©copy@軟件三班筱白邇</p> </footer> <!-- 尾部結束 --> </body> </html>
網頁布局框架