每天一页:002.欢乐餐厅【难度系数:★】_欢乐餐厅html代码-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_37580383/article/details/107173553

1.整体效果

2.整体框架

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>欢乐餐厅</title>
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
	</head>
	<body>
		<div class="divBig">

			<div class="divTop">
				<div class="divLeft"> <a href="#"><img src="./img/logo.jpg" border="0" /></a> </div>
				<div class="divRight">
					<ul class="ulMenuBar">
						<li><a href="#"><img src="./img/dh01.jpg" border="0" /></a></li>
						<li><a href="#"><img src="./img/dh02.jpg" border="0" /></a></li>
						<li><a href="#"><img src="./img/dh03.jpg" border="0" /></a></li>
						<li><a href="#"><img src="./img/dh04.jpg" border="0" /></a></li>
						<li><a href="#"><img src="./img/dh05.jpg" border="0" /></a></li>
					</ul>
				</div>
			</div>


			<div class="divMiddle">
				<div class="MiddleLeft">
					<ul>
						<li><a href="#"><img src="./img/nav01.jpg" border="0" /></a></li>
						<li><a href="#"><img src="./img/nav02.jpg" border="0" /></a></li>
						<li><a href="#"><img src="./img/nav03.jpg" border="0" /></a></li>
						<li><a href="#"><img src="./img/nav04.jpg" border="0" /></a></li>
						<li><a href="#"><img src="./img/nav05.jpg" border="0" /></a></li>
					</ul>
				</div>
				<div class="MiddleRight">
					<div> <img src="./img/down-right.jpg" border="0" /> </div>
					<div class="RightDown">
						<div class="RightDownLeft">
							<ul>
								<li style="margin-bottom:7px;"><a href="#">摇出一个属于你的清凉世界</a> </li>
								<li style="margin-bottom:8px; _margin-bottom:7px;"> <a href="#">咖啡香自国贸来</a> </li>
								<li style="margin-bottom:8px; _margin-bottom:7px;"> <a href="#">夏日心意卡北京、天津冰爽上市!</a> </li>
								<li> <a href="#">我的星情故事</a> </li>
							</ul>
						</div>
						<div class="RightDownRight">
							<div class="RDR_left">
								<a href="#"><img src="./img/down-right02_03.jpg" border="0" /></a>
								<a href="#"><img src="./img/down-right02_04.jpg" border="0" /></a>
							</div>
							<div class="RDR_right">
								<p><a href="#"><img src="./img/down-right02_06.jpg" border="0" /></a></p>
								<p><a href="#"><img src="./img/down-right02_08.jpg" border="0" /></a></p>
								<p><a href="#"><img src="./img/down-right02_09.jpg" border="0" /></a></p>
							</div>
						</div>
					</div>
				</div>
			</div>


			<div class="divFoot">
				<p>
					<a href="#">餐厅门店</a> | <a href="#">网站地图</a> | <a href="#">常见问题</a> | <a href="#">联系我们</a> |
					<a href="#">使用条款</a> | <a href="#">隐私保护</a>
				</p>
				<p>版权所有©2020 欢乐餐厅中国 粤ICP备090200089号</p>
			</div>
		</div>
	</body>
</html>

CSS部分

@charset "utf-8";

/* ------------------------------------------------------------------写在前面的样式 */
* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: "宋体";
	font-size: 12px;
	cursor: auto;
}

ul,
ol,
li {
	list-style-type: none;
}

a {
	color: #000000;
	text-decoration: none;
	divTop
}

a:hover {
	color: #66CCCC;
	text-decoration: underline;
}

.divBig {
	width: 1000px;
	margin: 0 auto 0 auto;
}

/* ------------------------------------------------------------------写在前面的样式 */


/* ------------------------------------------------------------------顶部开始 */
.divTop {
	width: 1000px;
}

.divLeft {
	width: 202px;
	height: 100px;
	float: left;
}

.divRight {
	width: 798px;
	height: 100px;
	float: left;
	background-image: url(../img/up01.jpg);
	background-repeat: no-repeat;
}

.ulMenuBar {
	margin: 20px 0 0 50px;
}

.ulMenuBar li {
	float: left;
}

/* ------------------------------------------------------------------顶部结束 */

/* ------------------------------------------------------------------中间结束 */
.divMiddle {
	width: 1000px;
}

.MiddleLeft {
	width: 160px;
	height: 612px;
	float: left;
	background-image: url(../img/down-left.jpg);
	background-repeat: no-repeat;
}

.MiddleLeft ul {
	margin-top: 10px;
}

.MiddleRight {
	width: 840px;
	float: left;
}

.RightDown {
	width: 840px;
	margin-top: -4px;
}

.RightDownLeft {
	width: 363px;
	height: 194px;
	float: left;
	background-image: url(../img/down-right01.jpg);
	background-repeat: no-repeat;
}

.RightDownLeft ul {
	margin: 65px 0 0 100px;
}

.RightDownRight {
	width: 477px;
	height: 194px;
	float: left;
	background-image: url(../img/down-right02.jpg);
	background-repeat: no-repeat;
}

.RDR_left {
	width: 245px;
	float: left;
	margin: 30px 0 0 5px;
}

.RDR_right {
	width: 171px;
	float: left;
	margin: 30px 0 0 25px;
}

/* ------------------------------------------------------------------中间结束 */

.divFoot {
	width: 1000px;
	height: 88px;
	clear: both;
	background-image: url(../img/foot-bg.jpg); 
	text-align: center;
	color: white;
}

.divFoot p {
	padding-top: 15px;
}

.divFoot p a {
	color: white;
}