html5页面左右框架布局代码,网页布局框架(示例代码)

筱白迩

*{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;

}

• 魏国
• 蜀国
• 吴国
• 晋国