1. 程式人生 > >網頁布局框架

網頁布局框架

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>若非先主垂三顧&nbsp &nbsp誰識茅廬一臥龍</p> </div> <!-- banner部分結束 --> <!-- 右邊欄部分開始 --> <div class="right"> <ul> <li class="choice"><p>英魂護佑國邦 &nbsp不愧孫武兒郎(孫堅)</p></li> <li><p>兒女情深緣淺 &nbsp 慈母空悲傷(吳國太)</p></li> <li><p>國色剎那芬芳&nbsp 琉璃苦仿徨(大喬)</p></li> <li><p>淚濕紅顏損天香&nbsp 生瑜何生亮(小喬)</p></li> <li><p>我恩怨隨風飄逝&nbsp 兄弟意難忘(淩統)</p></li> <li><p>設疑城破軍好似鐵壁銅墻(徐盛)</p></li> <li><p>你決斷內務紛紜&nbsp 竭忠智輔君王(張昭&張紘)</p></li> <li><p>心長恨水長東悲聲吟唱&nbsp 人間天上(孫尚香)</p></li> <li><p>神亭嶺槍戟顯鋒芒&nbsp 天義永昭彰(太史慈)</p></li> <li><p>錦帆鼓蕩銅鈴響叮當&nbsp 百騎馳疆場 (甘寧) </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>&copycopy@軟件三班筱白邇</p> </footer> <!-- 尾部結束 --> </body> </html>

網頁布局框架