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>网页布局框架
原文地址：https://www.cnblogs.com/a252336799/p/8524975.html