web应用开发实战作业百度实战2

最新推荐文章于 2022-07-28 00:27:31 发布
最新推荐文章于 2022-07-28 00:27:31 发布
阅读量179 收藏
点赞数
分类专栏： web应用开发实战作业 文章标签： web前端 IT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/small_qianzai/article/details/100632500
版权

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .toubu {
            width: 100%;
            height: 110px;
        }


        .tupian{
            width: 127px;
            height: 50px;
            float: left;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .contion{
            width: 642px;
            height: 36px;
            position: absolute;
            top: 18px;
            left: 140px;
        }
        .contion>div{
            float: left;
        }
        .left-box{
            width: 540px;
            height: 34px;

            border: 1px solid #3385ff;

        }
        .right-box{
            height: 36px;
            width: 100px;
            background-color: cornflowerblue;


        }
        .right-box p{
            text-align: center ;
            color: white;
            margin-top: 7px;
            font-size: 15px;
        }
        input{
            outline: none;
            border: 0;
            height: 33.5px;
            width: 540px;

        }
        .daohang{
            width: 344px;
            height: 50px;
            float: left;
            position: absolute;
            top: 18px;
            left: 1200px;
        }
        .daohang ul {
            list-style: none;

        }
        .daohang ul{

            height: 40px;
            list-style: none;
            overflow: hidden;
            float: right;
            padding-top: 10px;

        }
        .daohang ul li {
            float: left;
            margin-right: 20px;
        }
        .daohang ul li a {
            font-size: 15px;
            color: black;
            display: block;

        }
       .toubudaohang{
            width: 1550px;
            height: 50px;
            margin-top: 60px;
            background-color: #f8f8f8;
        }
        .toubudaohang ul {
            list-style: none;

        }
        .toubudaohang ul{

            height: 50px;
            list-style: none;
            overflow: hidden;
            padding-left: 127px;


        }
        .toubudaohang ul li {
            float: left;

            height: 48px;
            width: 65px;



        }
        .toubudaohang ul li a {
            font-size: 15px;
            color: black;
            display: block;
            text-decoration: none;
            margin-top: 15px;
            margin-left: 15px;

        }
        .sousuojieguo{
            margin-top: 10px;
            height: 10px;
            width: 650px;
            padding-left: 127px;
            color: lightgray;
        }
        /*头部*/
        .shenti-left{
            float: left;
            padding-left: 127px;
            width: 650px;
        }
        .baidu{
            width: 650px;
            height: 100px;
        }
        .guanwang{
            text-decoration: none;
            color: white;
            text-align: center;


        }
        .baidu1{
            width: 650px;
            height: 20px;
        }
        .baidu2{
            width: 650px;
            height: 90px;
        }
        .baidu2>img{
            float: left;
            position: absolute;
            top: 200px;
            left: 127px;
        }
        .baidubaike{
            list-style: none;
            overflow: hidden;
        }
        .baidubaike>li{
            float: left;
            margin-right: 10px;
        }
        .baidubaike>li>a{
            color: blue;
        }
        .guanzhudian{
            width: 230px;
            border: 1px solid black;
            border-left:2px solid blue ;
        }
        .baidu3{
            margin-top: 5px;
            width: 650px;
            height: 200px;
            border: 1px solid lightgray;
        }
        .baidu3>img{
            float: left;
            margin: 20px;
        }
        .baidu3>p{
            width:500px;
            float: left;
            margin-top: 10px;
        }
        /*左边身体*/
        .shenti-right{
            float: right;
            padding-right: 127px;
            width: 550px;
            height: 750px;
            border-left: 2px solid black;
        }
        .jieshao{
            width: 550px;
            height: 220px;
        }
        .biaoti{
            width: 510px;
            height: 20px;
        }
        .jiehaorenwu{
            width: 550px;
            height: 220px;

        }
        .zhengti{
            width: 140px;
            height: 220px;
            float: left;
            margin-left: -65px;
        }
        .zhengti1{
            width: 140px;
            height: 220px;
            float: left;
            margin-left: -15px;
            margin-right: -15px;
        }
        .zhengti2{
            width: 140px;
            height:220px;
            float: left;

        }
        .zhengti3{
            width: 140px;
            height: 220px;
            float: left;
            margin-left: -15px;

        }
        /*右边身体*/
    </style>
</head>
<body>
    <div class="toubu">
        <div class="tupian">
            <img src="img/baidu_jgylogo3.gif" height="38" width="117"/>
        </div>
        <div class="contion">
            <div class="left-box">
                <input type="text">
            </div>
            <div class="right-box">
                <p>百度一下</p>
            </div>
        </div>
        <div class="daohang">
            <ul>
                <li><a href="https://www.baidu.com">百度首页</a></li>
                <li><a href="#">设置</a></li>
                <li><a href="#">登录</a></li>
            </ul>
        </div>
        <div class="toubudaohang">
            <ul>
                <li style="border-bottom: solid blue;"><a href="#" style="color: black; font-weight: bold" >网页</a></li>
                <li><a href="#">咨询</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">图片</a></li>
                <li><a href="#">知道</a></li>
                <li><a href="#">文库</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">采购</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">更多》</a></li>
            </ul>
        </div>
        <div class="sousuojieguo">
            <span>百度为您找到相关结果约100,000,000个</span>
            <span style="float: right;"><img src="img/loudou.png" height="10px" width="10px"/>搜索工具</span>
        </div>
    </div>
    <div class="shenti-left">
        <div class="baidu">
            <div class="baidu1">
                <a href="#"><span style="color: red">百度</span>一下,你就知道</a>
                <a href="#" class="guanwang"><span style="background-color: blue">官网</span></a>
            </div>
            <div class="baidu2">
                <a href="#" ><img src="img/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75.jpg.png" height="75" width="121" /></a>
                <span style=" width: 500px;float: left; position: absolute;top: 200px;left: 260px;">全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。<span style="color: red">百度</span>超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</span>
                <span style="position: absolute; top: 240px;"><a href="https://www.baidu.com" style="text-decoration: none; color: green;margin-left: 10px">https://www.baidu.com/</a>
                <img src="img/xiala.png" height="10px" width="10px"/>&nbsp;<img src="img/mygs.png" height="10px" width="15px"/>-<a
                        href="#" style="color: lightgray">百度快照</a>-<a href="#" style="color: lightgray">7616条评价</a></span>
            </div>
        </div>
        <div class="baidu" style="width: 650px;height: 170px;">
            <div class="baidu1">
                <a href="#"><span style="color: red">百度</span>&nbsp;<span style="color: red">百度</span>百科</a>

            </div>
            <div class="baidu2">
                <a href="#" ><img src="img/u=1593486624,3032607273&fm=58&bpow=540&bpoh=540.jpg.png" height="121" width="121"/></a>
                <span style=" width: 500px;float: left; position: absolute;top: 300px;left: 260px;"><span style="color: red">百度</span>（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。<span style="color: red;">百度</span> 愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“<span style="color: red;">百度</span>”二字，来自于八百年前南宋词人...
                    <ul class="baidubaike">
                        <li ><a href="#">发展简史</a></li>
                        <li ><a href="#">公司理念</a></li>
                        <li ><a href="#">财报数据</a></li>
                        <li ><a href="#">产品手册</a></li>
                        <li ><a href="#">多语言化</a></li>
                        <li ><a href="#">更多》</a></li>
                    </ul>
                    <div class="guanzhudian">关注点<span style="color: blue;">：</span><a href="#" style="color: blue;">2019百度AI开发者大会</a></div>
                    <span style="color:green">baike.baidu.com/</span><img src="img/xiala.png" height="10px" width="10px"/>
                </span>
            </div>
        </div>
        <div class="baidu" >
            <div class="baidu1">
                <a href="#"><span style="color: red">百度</span>地图</a>
            </div>
            <div class="baidu2">
                <a href="#" ><img src="img/u=4087042252,3305680367&fm=58&s=73F6A876C8A47E90237D87C502007024.jpg"height="75" width="120"/></a>
                <span style=" width: 500px;float: left; position: absolute;top: 460px;left: 260px;">浏览地图、搜索地点、查询公交驾车线路、查看实时路况,您的出行指南、生活助手。提供地铁线路图浏览,乘车方案查询,以及准确的票价和时间信息。</span>
                <span style="position: absolute; top: 520px;"><a href="https://www.baidu.com" style="text-decoration: none; color: green;margin-left: 10px">https://map.baidu.com/</a>
                <img src="img/xiala.png" height="10px" width="10px"/>&nbsp;<img src="img/mygs.png" height="10px" width="15px"/>-<a
                            href="#" style="color: lightgray">百度快照</a>-<a href="#" style="color: lightgray">3417条评价</a></span>
            </div>
        </div>
        <div class="baidu" >
            <div class="baidu1">
                <a href="#">Android <span style="color: red">百度</span>下载_<span style="color:red">百度</span>移动应用</a>
            </div>
            <div class="baidu3">

                <img src="img/e4dde71190ef76c6c930c0199216fdfaaf516725.png" height="68" width="68"/>
                <p>版本：11.13.0.10</p>
                <p>大小：82.4MB</p>
                <p>更新：2019-08-29</p>
                <p>系统：Android4.4或更高b版本</p>
                <p style="font-weight: bold;font-size:20px;color:lawngreen;margin-left: 108px"><img src="img/anquan.png" height="20px" width="20px"/>已通过百度安全认证，请放心使用</p>
                <p ><input type="button" value="下载到电脑" style="width: 100px; margin-left: 107px; background-color: blue ;color: white; float: left"><img src="img/erweima.png" height="20px" width="20px" style="float: left; margin: 0; position: absolute; top: 740px;left:350px"/>
                    <span style="margin-left: 50px"> 扫描玩二维码可直接下载到手机</span></p>
            </div>
        </div>
    </div>
    <div class="shenti-right">
        <div class="jieshao">
            <div class="biaoti">
                <span style="font-weight: bold;margin-left: 10px;float: left;">百度高管</span>
                <span style="float: right;"><a href="#" style="color: blue;">展开</a><a href="#" style="color: blue; text-decoration: none">&or;</a></span>
            </div>
            <div class="jiehaorenwu">
                <div class="zhengti">
                    <img src="img/u=2274909088,1858101302&fm=58&bpow=800&bpoh=933.jpg" height="121" width="121"/>
                    <a href="#" style="margin-left: 40px" >李彦宏</a></span>
                    <p style="text-align: center">百度创始人<br>董事长CEO</p>
                </div>

                <div class="zhengti1">
                    <img src="img/2u=150676725,3314356719&fm=58&bpow=854&bpoh=1280.jpg" height="121" width="121"/>
                    <a href="#" style="margin-left: 40px" >余正钧</a></span>
                    <p style="text-align: center">百度集团首<br>席财务官</p>
                </div>

                <div class="zhengti2">
                    <img src="img/3u=1524638461,1039713376&fm=179&app=42&f=JPEG.jpg" height="121" width="121"/>
                    <a href="#" style="margin-left: 40px" >张亚勤</a></span>
                    <p style="text-align: center">百度总裁</p>
                </div>

                <div class="zhengti3">
                    <img src="img/5=3914165086,579907443&fm=58&bpow=2560&bpoh=3840.jpg" height="121" width="121"/>
                    <a href="#" style="margin-left: 40px" >王海峰</a></span>
                    <p style="text-align: center">百度集团首<br>席技术官</p>
                </div>
            </div>
            <div class="jieshao">
                <div class="biaoti">
                    <span style="font-weight: bold;margin-left: 10px;float: left;">百度旗下产品</span>
                    <span style="float: right;"><a href="#" style="color: blue;">展开</a><a href="#" style="color: blue; text-decoration: none">&or;</a></span>
                </div>
                <div class="jiehaorenwu">
                    <div class="zhengti" style="margin-left: -94px;">

                        <img src="img/6=1032703106,269672967&fm=26&gp=0.jpg.png" height="121" width="121"/>
                        <a href="#" style="margin-left: 40px" >百度搜索</a></span>
                        <p style="text-align: center">全球最大的中<br>文搜索引擎</p>
                    </div>

                    <div class="zhengti1">
                        <img src="img/e4dde71190ef76c6c930c0199216fdfaaf516725.png" height="121" width="121"/>
                        <a href="#" style="margin-left: 40px" >百度APP</a></span>
                        <p style="text-align: center">有事搜一搜<br>没事看一看</p>
                    </div>

                    <div class="zhengti2">
                        <img src="img/nuomi2.jpg" height="121" width="121"/>
                        <a href="#" style="margin-left: 40px" >百度糯米</a></span>
                        <p style="text-align: center">本地生<br>活精品指南</p>
                    </div>

                    <div class="zhengti3">
                        <img src="img/地图.jpg" height="121" width="121"/>
                        <a href="#" style="margin-left: 40px" >百度地图</a></span>
                        <p style="text-align: center">亿万人在用<br>的专业地图</p>
                    </div>
                </div>
                <div class="jieshao">
                    <div class="biaoti">
                        <span style="font-weight: bold;margin-left: 10px;float: left;">互联网巨头财报</span>
                        <span style="float: right;"><a href="#" style="color: blue;">展开</a><a href="#" style="color: blue; text-decoration: none">&or;</a></span>
                    </div>
                    <div class="jiehaorenwu">
                        <div class="zhengti" style="margin-left: -94px;">

                            <img src="img/6=1032703106,269672967&fm=26&gp=0.jpg.png" height="121" width="121"/>
                            <a href="#" style="margin-left: 40px" >百度搜索</a></span>
                            <p style="text-align: center">全球最大的中<br>文搜索引擎</p>
                        </div>

                        <div class="zhengti1">
                            <img src="img/e4dde71190ef76c6c930c0199216fdfaaf516725.png" height="121" width="121"/>
                            <a href="#" style="margin-left: 40px" >百度APP</a></span>
                            <p style="text-align: center">有事搜一搜<br>没事看一看</p>
                        </div>

                        <div class="zhengti2">
                            <img src="img/nuomi2.jpg" height="121" width="121"/>
                            <a href="#" style="margin-left: 40px" >百度糯米</a></span>
                            <p style="text-align: center">本地生<br>活精品指南</p>
                        </div>

                        <div class="zhengti3">
                            <img src="img/地图.jpg" height="121" width="121"/>
                            <a href="#" style="margin-left: 40px" >百度地图</a></span>
                            <p style="text-align: center">亿万人在用<br>的专业地图</p>
                        </div>
                    </div>
        </div>
</body>
</html>
孤星谦仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web开发技术 期末大作业
zhouzhanbang的博客
10-27 1460
求答案
Web前端开发技术课程大作业：简单的网页制作期末作业——狐妖小红娘(6页)
QQ____2709137139的博客
08-13 1237
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
web开发技术作业2（北邮）
02-17
实现了作业2要求； 界面简单； 文档详细； sql.txt为数据库建表及插入测试数据； 工程说明.txt为开发环境； Web：Tomcat_5.5 + Struts_1.2.9 + Hibernate_3.2 Database：MySQL_Server_5.1.30 Java：jdk_1.6.0 集成开发环境 MyEclipse_8.5
Web前端技术开发期末大作业（旅游网站）
热门推荐
weixin_46218415的博客
06-19 1万+
本项目是WEB前端课程的期末课程设计，采用了HTML和CSS编程，加了少量的JAVAscript代码，网站一共包含了10个页面，网站的类型是旅游网站，颜色主题是蓝色 可分享源码示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 代码如下（示例）： 首页代码（HTML） CSS样式代码 总结 可分享源码...
Web开发大作业（图书管理系统）
vimpirespider的博客
11-02 3473
1.工作内容 此次web课程设计由本人独立完成图书管理系统，此系统后端采用python以及flask框架，数据库使用Mysql。 课程设计期间所做的工作内容如下： 需求分析与数据库设计 学习python基础语法以及与mysql数据库的连接 Web前端设计与开发 轻量级 Web 应用框架Flask的学习与运用 前后端交互与连接mysql数据库实现数据互通 实现对数据库中数据的增删改查 1.2具体已实现功能 由于组内只有一个人，能力和精力有限，尚未完成题目所要求的所有功能，但已完成的功能里
FlaskWeb开发：基于Python的Web应用开发实战
04-08
FlaskWeb开发：基于Python的Web应用开发实战
Flask+Web开发实战,flaskweb开发实战pdf,Python
09-10
Flask+Web开发实战的PDF版本。Flask是目前最流行的Python Web框架之一。自2010年开源以来，Flask受到了越来越多的Python开发者的喜欢，其受欢迎程度不输于Django。
基于实战电子书 Flask Web 开发的学习源码
最新发布
03-25
项目概述：基于实战电子书《Flask Web开发：基于Python的Web应用开发实战》的学习源码，主要采用Python语言进行开发，同时融合了JavaScript、HTML、CSS和PHP等多种技术。该项目包含476个文件，其中JavaScript文件215...
Cordova-使用Cordova开发iOS应用实战2
03-01
前文介绍了通过Safari的Web检查器，可以看到控制台输出的信息。但有时这样调试代码不太方便，如果在Xcode中的命令控制台也能同步打印出调试信息就好了。这个借助Cordova的cordova-plugin-console插件即可实现。（1）...
Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页，含有table表格，js表单验证还有首页视频。以及列表页。浮动布局。div+css+js
HTML网页设计
07-28 6400
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。......
web应用 网页设计作业
12-17
支持Dreamweaver，html，应用div+css+js，web网页应用与开发
web网站开发 JAVA作业
08-30
这个是很简单的JAVA程序 在校的一些大学生可以看看 希望有帮助
Web网页作业5个简单网页
11-02
五个简单的网页
web网页大作业.zip
12-01
web网页大作业.zip
JAVA web大作业
06-20
基于JAVA WEb 写的大作业，纯属个人的文档，和个人的代码
webapp期末作业-oneapp
qq_44850712的博客
04-03 2575
webapp期末作业-oneapp one-App 模仿one App进行web app设计 （期末作业 源代码：https://github.com/chuyia/one-App One App项目开发 一、网站介绍 「ONE」是一款文艺生活App。秉承“复杂世界里，一个就够了”的理念，「ONE」每日精挑细选，为用户带来优质的图片、文章、音乐和影视内容。作为一款流行的新媒体阅读产品，「ONE」APP致力于为热爱文艺生活的人群带来丰富且优质的作品，将阅读变成一种生活方式。 「ONE」APP一共有四个主要页面
java Web 小作业
05-29
java web技术对数据库的增删查改操作；Java Web小作业；java base连接数据库实现用户登录,用户注册，验证码，MD5加密，写日记，分页查看日记，删除，修改，编辑日记等功能... 界面美化：css3+jQ+Bootstrap
Web技术大作业
qq_45759389的博客
05-06 4643
一、 大作业任务概述 采用 SSM 框架来实现一个基于 Web 的用户管理系统，要求具有以下功能: (1)提供用户注册，修改个人资料，修改密码，以及登陆，注销等功能， 要实现响应式布局， 当屏幕的分辨 率小于 800px 时，左侧的 left 菜单自动隐藏。 (2)实现用户的信息管理，包括所有用户的信息列表展示，查询，编辑和删除。 (3)实现文章的信息管理，一个用户可以发表多篇文章。文章管理的首页展示一个 统计信息， 既有列表统计，也有图表显示。点击 进入文章管理进去，可以对所 选用户的文章进行管理， 包括
Web应用与开发作业
11-28
1、Filter的理解和应用 实现一个禁止缓存的过滤器。 要求和提示： （1）禁止浏览器缓存所有动态页面； （2）有3个http响应头字段可以禁止浏览器缓存当前页面，它们在Servlet中的示例代码如下。 response.setDateHeader("Expires",-1); response.setHeader("Cache-Control","no-cache"); response.setHeader("Pragma","no-cache"); （3）并不是所有的浏览器都能完全支持上面的3个响应头，因此最好是同时使用上面的3个响应头。 2、Filter的理解和应用 设计一个简单的IP地址过滤器，根据用户的IP地址进行网站的访问控制。例如：禁止IP地址处在192.168.2网段的用户对网站的访问。 3、Listener的理解和应用 通过监听器记录在线用户的姓名，在页面进行用户姓名的显示，同时实现对某个用户的强制下线功能。
django 3 web应用开发实战
06-28
《Django 3 Web应用开发实战》是一本介绍如何使用Django框架开发Web应用的书籍。本书从基础知识开始，逐步介绍了Django框架的各个方面，包括模型、视图、模板、表单、用户认证、管理后台等。通过实际案例的演示，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值