第二次html作业
第二次前端作业(前台部分)，难的一批，花了我大概5天的时间，其中各种引用样式、添加表格，总是出错。后来反过来想，先把页面中的文字、图片等单独提出来做，再加进主文件中，发现许多困难迎刃而解，下面是源代码
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<!-- <meta charset="UTF-8"> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>漫步时尚广场-餐饮栏目</title>
<link rel="stylesheet" type="text/css" href="css/detail.css">
<!-- <link rel="stylesheet" type="text/css" href="css/show.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="css/show_frame.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style1.css">
<style>
#left {
float: left;
}
#right {
float: right;
}
#pic_list {
/* font-family: SinSum; */
font-size: 14px;
float: left;
border: 1px solid #ccc;
padding: 5px;
width: 290px;
margin-bottom: 10px
}
#notice_title {
font-size: 16px;
/* text-indent: 20px; */
/* text-align-last: left; */
float: left;
}
#font {
font-size: 14px;
}
#center {
float: center;
text-align: center;
}
</style>
</head>
<body>
<!-- 顶部区域 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="top_line">
<tr>
<td bgcolor="#f7f7f7">
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="padding-top"><img src="images/star.jpg">收藏 | HI，欢迎来订购 ！<a href="#"
class="orange">[请登录]</a> <a href="#" class="orange"> [免费注册]</a></td>
<td align="right"> 客户服务<img src="images/arrow.gif"> 网站导航<img
src="images/arrow.gif"> <span class="droparrow"><span
class="shopcart"></span>我的购物车<span class="orange">0</span>件<img
src="images/arrow.gif" /></span></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- logo和banner -->
<table width="1200" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td height="95"><a href="#"><img src="images/logo.jpg"></a></td>
<td align="right"><img src="images/banner.jpg"></td>
</tr>
</table>
<!-- 菜单导航 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ce2626">
<tr>
<td>
<table width="1200" border="0" cellpadding="0" cellspacing="0" align="center" class="nav_font16">
<tr>
<td width="200"> </td>
<td width="80" align="center" class="nav_active"><a href="#" class="white">首页</a></td>
<td width="100" align="center"><a href="#" class="white">美食</a></td>
<td width="100" align="center">今日新单</td>
<td width="80" align="center">团购</td>
<td width="100" align="center">身边外卖</td>
<td width="100" align="center">休闲娱乐</td>
<td width="100" align="center">生活服务</td>
<td width="200" align="center"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 中间部分 -->
<!-- 左侧上方 -->
<table width="1200" border="0" align="center" cellpadding="0" cellspacing="0" class="padding-top">
<tr>
<td width="220" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="1" class="table1" bgcolor="#e5e4e1">
<tr>
<th>按分类</th>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">火锅</a><img src="images/arrow_r.jpg" align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">日韩料理</a><img src="images/arrow_r.jpg"
align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">西餐</a><img src="images/arrow_r.jpg" align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">小吃快餐</a><img src="images/arrow_r.jpg"
align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">自助餐</a><img src="images/arrow_r.jpg" align="right">
</td>
</tr>
<tr>
<th>按地区</th>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">市北区</a><img src="images/arrow_r.jpg" align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">市南区</a><img src="images/arrow_r.jpg" align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">李沧区</a><img src="images/arrow_r.jpg" align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">崂山区</a><img src="images/arrow_r.jpg" align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">黄岛区</a><img src="images/arrow_r.jpg" align="right">
</td>
</tr>
<tr>
<th>按人数</th>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">单人餐</a><img src="images/arrow_r.jpg" align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">双人餐</a><img src="images/arrow_r.jpg" align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">3-4人</a><img src="images/arrow_r.jpg"
align="right">
</td>
</tr>
<tr>
<td>
<span class="red_dot"></span><a href="#">5-6人</a><img src="images/arrow_r.jpg"
align="right">
</td>
</tr>
</table>
<!-- 左侧下方 -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<dt>
<span id="notice_title"> 猜你喜欢</span>
<span id="right">更多>></span>
</dt>
</td>
</tr>
<tr>
<td>
<hr size="3px" width="210px">
</td>
</tr>
<tr>
<td>
<a href="#"><img src="images/food_index/love1.jpg"></a>
</td>
</tr>
<tr>
<td id="font">
<span id="left">阳平肥肠</span>
<span id="right">￥79起</span>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="images/food_index/love2.jpg"></a>
</td>
</tr>
<tr>
<td id="font">
<span id="left">xxx火锅(绵阳店)</span>
<span id="right">￥138起</span>
</td>
</tr>
</table>
</td>
<!-- 购物分类 -->
<td width="716" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td valign="top" align="left">
<!-- 焦点图 -->
<img src="images/food_index/food_ad.jpg" width="550" height="350">
</td>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td><img src="images/food_index/food1.jpg">
<dt>
<span><strong>阿尔卑斯牛排披萨自助</strong></span>
<span id="right">￥66</span>
</dt>
</td>
<td><img src="images/food_index/food2.jpg">
<dt>
<span><strong>鼎尚九宫格火锅</strong></span>
<span id="right">￥78</span>
</dt>
</td>
</tr>
<tr>
<td><img src="images/food_index/food3.jpg">
<dt>
<span><strong>雀舞云南菜</strong></span>
<span id="right">￥85</span>
</dt>
</td>
<td><img src="images/food_index/food4.jpg">
<dt>
<span><strong>爵士牛排馆</strong></span>
<span id="right">￥45</span>
</dt>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<dt>
<!-- <dd id="notice_title"><span id="left">今日新单</span></dd>
<dd id="right">更多>></dd> -->
<span id="notice_title"> 今日新单</span>
<span id="right">更多>></span>
</dt>
</td>
</tr>
<tr>
<td>
<hr width="980px" size="3px">
</td>
</tr>
<table width="290px" border="0" align="left" cellpadding="3" cellspacing="1">
<tr>
<td>
<a href="#"><img src="images/food_index/cd1.jpg"></a>
</td>
</tr>
<tr>
<td id="pic_list">
<span id="left">大渔铁板烧(心海广场店)</span><br>
<span id="left">￥180起</span>
<span id="right">人均60元</span>
</td>
</table>
<!-- try -->
<table width="290px" border="0" align="left" cellpadding="3" cellspacing="1">
<tr>
<td>
<a href="#"><img src="images/food_index/cd2.jpg" width="300px"></a>
</td>
</tr>
<tr>
<td id="pic_list">
<span id="left">西里牛排欢乐自助餐厅</span><br>
<span id="left">￥45起</span>
<span id="right">人均66元</span>
</td>
</tr>
</table>
<table width="290px" border="0" align="left" cellpadding="3" cellspacing="1">
<tr>
<td>
<a href="#"><img src="images/food_index/cd3.jpg"></a>
</td>
</tr>
<tr>
<td id="pic_list">
<span id="left">全食客自助餐厅</span><br>
<span id="left">￥55起</span>
<span id="right">人均57元</span>
</td>
</tr>
</table>
<table width="290" border="0" align="left" cellpadding="3" cellspacing="1">
<tr>
<td>
<a href="#"><img src="images/food_index/cd4.jpg"></a>
</td>
</tr>
<tr>
<td id="pic_list">
<span id="left">川香麻辣香锅</span><br>
<span id="left">￥38起</span>
<span id="right">人均34元</span>
</td>
</tr>
</table>
<table width="290" border="0" align="left" cellpadding="3" cellspacing="1">
<tr>
<td>
<a href="#"><img src="images/food_index/cd5.jpg"></a>
</td>
</tr>
<tr>
<td id="pic_list">
<span id="left">好圣溢自助烤肉火锅</span><br>
<span id="left">￥39.9起</span>
<span id="right">人均45元</span>
</td>
</tr>
</table>
<table width="290" border="0" align="left" cellpadding="3" cellspacing="1">
<tr>
<td>
<a href="#"><img src="images/food_index/cd6.jpg"></a>
</td>
</tr>
<tr>
<td id="pic_list">
<span id="left">海都大酒店</span><br>
<span id="left">￥89起</span>
<span id="right">人均80元</span>
</td>
</tr>
</table>
<!-- -->
</td>
</tr>
<tr>
<td>
<dt>
<span style="font-size: 16px;">精选推荐</span>
</dt>
</td>
</tr>
<!-- 这里是下面的横排部分，具体细节就先不实现了[doge] -->
<tr>
<table border="1" width="1200px" height="180px" align="center" cellpadding="3px" cellspacing="10px">
<tr>
<td width="20px">
<img src="images/food_index/arrow_left.jpg">
</td>
<td width="180px">
<img src="images/food_index/tj1.jpg">
<dt>
<span id="left">尚品小土豆素毛肚</span>
<span id="right">￥76起</span>
</dt>
</td>
<td width="180px">
<img src="images/food_index/tj2.jpg">
<dt>
<span id="left">陈记xx牛杂汤</span>
<span id="right">￥8.9起</span>
</dt>
</dt>
</td>
<td width="180px">
<img src="images/food_index/tj3.jpg">
<dt>
<span id="left">三只xx自助餐厅</span>
<span id="right">￥76起</span>
</dt>
</td>
<td width="180px">
<img src="images/food_index/tj4.jpg">
<dt>
<span id="left">腾飞xx大酒店</span>
<span id="right">￥86起</span>
</dt>
</td>
<td width="180px">
<img src="images/food_index/tj5.jpg">
<dt>
<span id="left">xxxx一锅鲜</span>
<span id="right">￥86起</span>
</dt>
</td>
<td width="20px">
<img src="images/food_index/arrow_right.jpg">
</td>
</tr>
</table>
</tr>
<!-- 页脚部分 -->
<br>
<div id="center" style="background-color: #efefef;">
<span>
Copyright 2015-2020 Q- Walking Fashion E&S 漫步时尚广场（QST教育）版权所有<Br />
</span>
<span>
中国青岛 高新区河东路8888号 青软教育集团 咨询热线：400-658-0166 400-658-1022<br />
</span>
<img src="images/foot_pic.jpg">
</div>
</table>
</body>
</html>这里是页面的效果图
