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>