实验二 导航网页

最新推荐文章于 2022-05-09 19:02:26 发布
最新推荐文章于 2022-05-09 19:02:26 发布
阅读量686 收藏
点赞数
分类专栏： Web开发基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sgd_dfr/article/details/79775253
版权
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DH Web</title>
        <style type="text/css">
            .one{
                float: left;
                width: 350px;
                height: 700px;
                margin: 10px;
                background: #FFF5EE;
            }
            .two{
                float: left;
                width: 700px;
                height: 700px;
                margin: 10px;
                background: #FFF5EE;
            }
            .four{
                float: left;
                width: 350px;
                height: 200px;
                margin: 30px;
                
            }
            .box{
                border: 1px solid #CCC;
                background: #CDCDB4;
            }
            .three{clear: both;}
        </style>
    </head>
    <body>
<hr/>
    <div >
        <!--header begin-->
         <div style="height:80px;">
           <!--     <img src="image/p1.png" width="300" alt="" align="left"/>-->
             <form action="text.html" method="post" align="center">
                 <blockquote>
                   <blockquote>
                     <blockquote>
                       <blockquote>
                         <blockquote>
                           <blockquote>
                             <blockquote>
                               <blockquote>
                                 <blockquote>
                                   <blockquote>
                                     <blockquote>
                                       <blockquote>
                                         <blockquote>
                                           <p><strong><em>                             <img src="image/p2-2.jpg" width="150" alt="" align="center"/>
                                                                                               <input type="text" value="请输入需搜索的内容" size="40" maxlength="100"/>
                                                                          <input type="button" value="立即搜索"/>
                                           </em></strong>                                              </p>
                                         </blockquote>
                                      </blockquote>
                                    </blockquote>
                                  </blockquote>
                                </blockquote>
                              </blockquote>
                            </blockquote>
                          </blockquote>
                        </blockquote>
                      </blockquote>
                    </blockquote>
                  </blockquote>
             </blockquote>
             </form>
         </div>
              <hr>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你现在的位置：导航首页>网络购物</p>
              <hr>
             <!--header end-->
             
             <!--ÈÈÂôÉÌÆ· begin-->
             <div>
              <div class="box" >
                  <div class="four">
                      <p align="center">
                          <strong><br><br><br><br><br><br>
                          <br>
                          <br><br>
                          <br>
                          <br><br>
                          <br><br><br>
                          <br>
                          </strong>
                      </p>
                  </div>
                  <div class="one" >
                      <p align="center">
                          <font face="微软雅黑" size="3" color="blue">热卖商品
                          </font>
                      </p>
                      <hr>
                      <br>
                      <p align="left">
                          <font face="微软雅黑" size="3" color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;精品服装
                          </font>
                      </p>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;羽绒服&nbsp;|&nbsp;针织衫&nbsp;|&nbsp;秋装&nbsp;|&nbsp;连衣裙&nbsp;|&nbsp;衬衫</p>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;卫衣&nbsp;|&nbsp;牛仔裤&nbsp;|&nbsp;T恤&nbsp;|&nbsp;外出装&nbsp;|&nbsp;家居服</p>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;韩版&nbsp;|&nbsp;欧美&nbsp;|&nbsp;正装&nbsp;|&nbsp;休闲&nbsp;|&nbsp;毛衣&nbsp;|&nbsp;大衣</p>
                      <br>
                      <p align="left">
                          <font face="微软雅黑" size="3" color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;皇冠网店
                          </font>
                      </p>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;达芙妮&nbsp;|&nbsp;爱婴屋&nbsp;|&nbsp;唐狮旗舰&nbsp;|&nbsp;韩都衣舍</p>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;七匹狼&nbsp;|&nbsp;九牧王&nbsp;|&nbsp;麦包包&nbsp;|&nbsp;特步&nbsp;|&nbsp;李宁</p>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;芳草集&nbsp;|&nbsp;御泥坊&nbsp;|&nbsp;化妆&nbsp;|&nbsp;充值中心</p>
                      <br>
                      <p align="left">
                          <font face="微软雅黑" size="3" color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家用电器
                          </font>
                      </p>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;电视机&nbsp;|&nbsp;洗衣机&nbsp;|&nbsp;空调&nbsp;|&nbsp;微波炉</p>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;电风扇&nbsp;|&nbsp;豆浆机&nbsp;|&nbsp;榨汁机&nbsp;|&nbsp;洗碗机</p>
                  </div>
                  <div class="two" >
                      <p align="center">
                          <font face="微软雅黑" size="3" color="blue">网上银行
                          </font>
                      </p>
                      <hr>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国建设银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      中国银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交能银行</p>
                      <hr>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国邮政储蓄银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      中国光大银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国民生银行</p>
                      <hr>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中信银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      兴业银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国民生银行</p>
                      <hr>
                      <p align="center">
                          <font face="微软雅黑" size="3" color="blue">地方银行
                          </font>
                      </p>
                      <hr>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;平安银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      北京农村商业银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天津银行</p>
                      <hr>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海农村商业银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      南京银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;宁波银行</p>
                      <hr>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;江苏银行银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      深证农村商业银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;重庆银行</p>
                      <hr>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;成都银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      哈尔滨银行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微商银行</p>
                      <hr>
                      <p align="center">
                          <font face="微软雅黑" size="3" color="blue">银行机构
                          </font>
                      </p>
                      <hr>
                      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;银监会&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      中国银联&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;国家开发银行</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人民币存款利率&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      人民币贷款利率&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;国家开发银行</p>
                  </div>
                  <div class="three"></div>
              </div>
             </div>
            <!--ÈÈÂôÉÌÆ· end-->
            
            <!--ÒøÐÐ begin-->
             <div style="height:80px;"></div>
            <!--ÒøÐÐ end-->
            
            <!--footer begin-->
            <hr/>
             <div style="text-align:center;height="200";>
                 <p>
                     <font color="#1d5983" size="2">
                         关于本站&nbsp;&nbsp;|&nbsp;&nbsp;广告招商&nbsp;&nbsp;|&nbsp;&nbsp;申请记录&nbsp;&nbsp;|&nbsp;&nbsp;意见反馈&nbsp;&nbsp;|&nbsp;&nbsp;联系我们&nbsp;&nbsp;|&nbsp;&nbsp;老年导航&nbsp;&nbsp;|&nbsp;&nbsp;源码下载
                     </font>
                <p>
                         <font size="2">
                          Copyright&copy D3D    ALL RIGHTS RESERVED
                         </font>
                </p>
                 </p>
             </div>
            <!--footer end-->
    </div>
    </body>

</html>


咚匀
关注
专栏目录
Bootstrap导航条、分页导航
u011435776的博客
03-29 785
【导航条navbar】在bootstrap中导航与导航条在外观方面差不多，但在实际应用时，导航条却要复杂的多。导航条制作方法：第一步：首先在制作导航的列表(&lt;ul class=”nav”&gt;)基础上添加类名“navbar-nav”第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”1、“.navbar”样式的主要功能就是设置左右padd...
div默认外边距是多少_外边距 html中div的外边距和内边距都是什么意思，怎么设...
weixin_39956612的博客
12-30 2320
外边距 html中div的外边距和内边距都是什么意思，怎么设html中div的外边距和内边距都是什么意思，怎么设置内边距padding的意思是： 边框与内容之间的距离。 外边距margin的意思是：边框与边框之间的距离。 拓展资料外边距margin 左边距 margin-left:数值 | autoauto:即距离这个边最远的距离； 右边距: margin-right:数值 | auto； 上边距...
页面导航条实验
pingguonjb的专栏
06-21 480
mo ni test                item1                                        item1-1                        item1-2                        item1-3                                   it
web作业二
Mr_lax的博客
03-17 267
第七题： 源代码 结果：
用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）...
weixin_30241919的博客
07-03 269
这个导航下拉菜单需要实现的功能是：下拉菜单的宽度与浏览器视口的宽度一样宽；一级导航只有两项，当鼠标移到一级导航上的导航项时，相应的二级导航出现。在本案例中通过改变二级导航的高度来实现二级导航的显示和消失。为了便于理解我画了一个图，如下： 在这个案例主要用到的知识有：设置定时器，清除定时器，mouseout和mouseover事件，另外还有css中position相关知识。本案例分为两部分讲解...
实验二，模仿网页.zip
06-10
在本实验"实验二，模仿网页.zip"中，我们将深入探讨HTML和HTML5的基本概念以及它们在创建网页文档中的应用。HTML（超文本标记语言）是网页内容的基础，而HTML5则是其最新的版本，带来了许多增强功能和改进的元素。...
网页前端高级编程-实验报告-导航菜单的制作.doc
08-21
网页前端高级编程实验报告主要关注的是导航菜单的制作，该实验涵盖了HTML和CSS的基本概念和技术。实验内容包括使用无序列表 `<ul>` 和超链接 `<a>` 创建菜单，并实现鼠标悬停时菜单样式的动态变化。 在实验步骤中，...
这6种实验性的网页导航模式让网站设计吸引眼球 .docx
12-26
实验性的网页导航模式为设计师提供了广阔的创作空间，使得网站能够在众多竞争者中脱颖而出。本文将详细介绍六种独特的网页导航模式，并探讨它们的设计特点以及适用场景。 #### 二、侧边栏导航 侧边栏导航是一种...
这6种实验性的网页导航模式让网站设计吸引眼球.docx
09-29
本文主要探讨了6种实验性的网页导航模式，旨在为设计师提供创新灵感，让网站设计更具吸引力。 1. **侧边栏导航**：这种模式将传统的顶部导航栏移到页面侧边，可以是静态或动态，宽度可调整。侧边栏导航改变了页面的...
导航栏随窗口大小变化而变化
weixin_40199365的博客
11-10 2159
Axure制作后台管理系统系列 导航栏随窗口大小变化而变化
html导航条自动缩放,怎样使导航栏自适应浏览器窗口大小？
weixin_33997566的博客
06-02 3779
css文件#navigation{display:block;list-style-type:circle;height:auto;width:100%;}#navigation li{float:left;overflow:hidden;position:relative;text-align: center;line-height:48px;font-size:20px;font-family...
div 导航自适应浏览器宽度
weixin_34397291的博客
07-10 405
<!DOCTYPE html><html><head> <title>自适应宽度</title> <style> #condition{float:left; text-align:center; } #condition ul{margin-top:0px; display:inline-bloc...
Web前端技术基础实验报告四之列表实现简易网站导航
Lucky的博客
05-09 9163
Web前端技术基础实验报告四之列表实现简易网站导航
着装分割-基于NCNN+YOLOv8-Seg实现行人着装分割算法-附项目源码+流程教程-优质项目实战.zip
10-20
着装分割_基于NCNN+YOLOv8-Seg实现行人着装分割算法_附项目源码+流程教程_优质项目实战
自动打标-基于SAM+SAM2实现的交互式半自动图像标注工具-附项目源码-优质项目实战.zip
10-20
自动打标_基于SAM+SAM2实现的交互式半自动图像标注工具_附项目源码_优质项目实战
Delphi 12 控件之Delphi 12 版本 俄罗斯方块.rar
最新发布
10-20
Delphi 12 版本 俄罗斯方块.rar
yonghu.sql11111
10-20
yonghu.sql11111
设计模式-C#1111
10-20
设计模式-C#1111
基于Blinker的蓝牙控制，使用esp32，8管，自动休眠、氛围灯、休眠和唤醒渐变、音乐闹钟
10-20
【作品名称】：基于Blinker的蓝牙控制，使用esp32，8管，自动休眠、氛围灯、休眠和唤醒渐变、音乐闹钟 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： 各项设置与闹钟时间断电后仍会保留 触摸包含两个控制触摸按键和一个电源触摸按键 短按：设置分钟 长按：设置小时 同时短按：改变时钟模式，四种模式包括时钟显示、时间线时钟显示和时间线随机显示 同时长按：改变灯光模式，包括单色显示、呼吸、渐变、七彩，切换和唤醒都有过渡动画 闹钟只支持mp3文件放在sd卡根目录下，可放置多个音乐，每一次响铃会改变歌曲 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础看懂代码，自行调试代码并解决报错，能自行添加功能修改代码。
《Web技术》实验教程：从网站创建到部署
实验指导书包含了14个实验项目，涵盖了Web开发的关键技术和流程，包括网站创建、数据库建模、CSS设计、母版页、导航、登录系统、用户管理、控件使用、数据操作、类实现以及网站部署等。每个实验都有明确的周次、星期...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值