HTML5期末大作业：上海介绍网站设计——代码质量好-上海介绍(5页) HTML+CSS+JavaScript（含源码）

最新推荐文章于 2025-08-23 15:32:34 发布

原创最新推荐文章于 2025-08-23 15:32:34 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

HTML5大学生静态网页专栏收录该内容

36 篇文章

订阅专栏

这是一个关于上海旅游介绍的网页设计示例，包含了头部导航、主内容区域，展示了美食推荐，如小笼包、生煎包等，采用HTML和CSS进行布局和样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、作品展示>

二、文件目录>

三、代码实现>


<!DOCTYPE html><head>    <meta charset="utf-8" />    <title>上海旅游介绍</title>    <link href="css/css.css" rel="stylesheet" /></head><body><div class="head">    <div class="logo"><img src="images/logo.png"/></div>    <div class="nav">        <ul>            <li><a href="index.html" rel="external nofollow" rel="external nofollow" >首页</a></li>  

           <li><a href="jingdian.html" rel="external nofollow"  rel="external nofollow" >景点介绍</a></li>            <li><a href="fengjing.html" rel="external nofollow"  rel="external nofollow" >风景欣赏</a></li>            <li><a href="meishi.html" rel="external nofollow" rel="external nofollow" >美食推荐</a></li>            <li><a href="liuyan.html" rel="external nofollow"  rel="external nofollow" >在线留言</a></li>        </ul>    </div></div><div class="main">    <div class="main_left">        <div class="pic">                <img src="images/pic1.jpg">        </div>        <div class="search">                <input type="button" class="btn">         <input type="text"  class="text"/>        </div>        <div class="left_nav">            <ul>                <li><a href="index.html" rel="external nofollow"  rel="external nofollow" >首页</a></li>  

               <li><a href="jingdian.html" rel="external nofollow"  rel="external nofollow" >景点介绍</a></li>                <li><a href="fengjing.html" rel="external nofollow"  rel="external nofollow" >风景欣赏</a></li>                <li><a href="meishi.html" rel="external nofollow"  rel="external nofollow" >美食推荐</a></li>                <li><a href="liuyan.html" rel="external nofollow" rel="external nofollow" >在线留言</a></li>            </ul>        </div>  

   </div>    <div class="main_right">     <div class="meishi">                <h2>美食推荐</h2><ul>              <li>                      <img src="images/meishi1.jpg" />                    <p>小笼包</p>                </li>                  <li>                      <img src="images/meishi2.jpg" />                    <p>生煎包</p>                </li>

                <li>                      <img src="images/meishi3.jpg" />                    <p>葱油饼</p>                </li>    

                <li>                      <img src="images/meishi4.jpg" />                    <p>锅贴</p>                </li>                    <li>                      <img src="images/meishi5.jpg" />                    <p>白斩鸡</p>                </li>

                <li>                      <img src="images/meishi6.jpg" />                    <p>酱鸭</p>                </li>