html仿百度首页

最新推荐文章于 2024-03-16 09:51:29 发布
最新推荐文章于 2024-03-16 09:51:29 发布
阅读量217 收藏
点赞数
分类专栏： Flask Html 文章标签： html 百度 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41967600/article/details/119583618
版权 
<!DOCTYPE html>
<html>
    <head>
        <title>百度页面</title>
        <style>
            .searchBox{
                background-image:url("3.png");
                background-repeat:no-reapeat;
                padding-left:20px;
                }
        </style>
    </head>
    <body>
        <!-- 顶部设置 -->
        <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
        <p align="right">
            <a href="www.baidu.com"><font color="#000000" face="隶书" size="3"><b>新闻</b></font></a>&nbsp&nbsp
            <a href="www.baidu.com"><font color="#000000" face="隶书" size="3"><b>hao123</b></font></a>&nbsp&nbsp
            <a href="www.baidu.com"><font color="#000000" face="隶书" size="3"><b>地图</b></font></a>&nbsp&nbsp
            <a href="www.baidu.com"><font color="#000000" face="隶书" size="3"><b>视频</b></font></a>&nbsp&nbsp
            <a href="www.baidu.com"><font color="#000000" face="隶书" size="3"><b>贴吧</b></font></a>&nbsp&nbsp
            <a href="www.baidu.com"><font color="#000000" face="隶书" size="3"><b>学术</b></font></a>&nbsp&nbsp
            <a href="www.baidu.com"><font color="#000000" face="隶书" size="3">登录</font></a>&nbsp&nbsp
            <a href="www.baidu.com"><font color="#000000" face="隶书" size="3">设置</font></a>&nbsp&nbsp
            <a href="www.baidu.com" style="background:#1E90FF;color:white;text-decoration:none"><font  face="隶书" size="3" >更多产品</font></a>
        </p><br><br><br><br>
        <!-- 顶部设置 -->
        <!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->


        <center>


        <!-- 百度主页图片 -->
        <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
            <p><img src="E:\RuiDeJY\8.28HTML入门\HTML入门第一节\网页案例\1.png" name="baidu" width="270px" title="点击一下,了解更多" alt="百度"/></p>
        <!-- 百度主页图片 -->
        <!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->

        <!-- 搜索部分 -->
        <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
            <p>
                <input type="text" style="width:650px; height:38px; vertical-align:middle; bordercolor:#1E90FF; "/>
                <input type="button" value="百度一下" style="background:#1E90FF;face:宋体;font-size:15; color:#FFFFFF; border:none; width:100px; height:40px; margin-left:-5px; vertical-align:middle;">
            </p><br><br><br><br><br><br><br><br><br><br>
        <!-- 搜索部分 -->
        <!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->

        <!-- 二维码 -->
        <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
            <p>
                <img src="E:\RuiDeJY\8.28HTML入门\HTML入门第一节\网页案例\2.png" name="erweima" width="60px"/><br/>
                <font size="2    "  color="#696969"><b>手机百度</b></font>
            </p>
        <!-- 二维码 -->
        <!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->

        <!-- 底部设置 -->
        <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
            <p>
                <a href="www.baidu.com" ><font size="2" face="隶书" color="#808080">把百度设为主页</font></a>&nbsp
                <a href="www.baidu.com" ><font size="2" face="隶书" color="#808080">关于百度</font></a>&nbsp
                <a href="www.baidu.com" ><font size="2" face="隶书" color="#808080">About Baidu</font></a>&nbsp
                <a href="www.baidu.com" ><font size="2" face="隶书" color="#808080">百度推广</font></a>
            <p>

            <p>

                <font size="2" face="隶书" color="#808080">@copy2017 Baidu</font>
                <a href="www.baidu.com" ><font size="2" face="隶书" color="#808080">使用百度前必读</font></a>&nbsp
                <a href="www.baidu.com" ><font size="2" face="隶书" color="#808080">意见反馈</font></a>&nbsp
                <font size="2" face="隶书" color="#808080">京ICP证030173号</font>
                <img src="E:\RuiDeJY\8.28HTML入门\HTML入门第一节\网页案例\3.png"/ width="16px" height="20px">
                <a href="www.baidu.com" ><font size="2" face="隶书" color="#808080">京公网安备1100000200001号</font></a>&nbsp
                <img src="E:\RuiDeJY\8.28HTML入门\HTML入门第一节\网页案例\4.png"/ width="17px" height="20px">
            <p>
        <!-- 底部设置 -->
        <!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
        </center>
    </body>
</html>
AIOT魔法师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html,模仿制作百度首页
qq_39696269的博客
08-30 1万+
模仿百度首页，试着学习一个javaweb，第一个试着模仿 百度首页   !!!那些图片只能自己来找了!!! &lt;html&gt;     &lt;head&gt;         &lt;title&gt;百度页面&lt;/title&gt;         &lt;style&gt;             .searchBox{                 background-...
模仿百度首页页面（附带源码）html+css
yingshuangtu的博客
06-21 3万+
文章目录前言一、实现界面二、代码1.百度页面.html2.baidu.css三、图片总结 前言 实现页面:百度首页（点击跳转） 一、实现界面 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、代码 1.百度页面.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度</ti.
前端：HTML百度页面制作（快速简单）
m0_59401963的博客
03-16 1376
本文开发出来的网页只是静态版本的，可以在搜索框里查询你想了解的东西，搜索出来的数据均是百度处理，并且只制作html，不涉及到css等，学会之后就可以制作任何一个搜索页面
前端----HTML 百度首页制作
nO0b
09-24 1万+
效果图: 用百度首页的制作对布局进行了简单的练习,存在一些缺陷,比如 底部的小图标懒得搞上去 这个小警徽和小图标 右上角的标题颜色没有细致修改 登陆和设置的浅色没有设置   但是设置了form表单,点击百度一下button时会直接打开真实的百度搜索内容 分析百度搜索url设置相应表单项 https://www.baidu.com/s?wd=搜索内容&amp;ok=提交 ...
实训作业二
hyonyg的博客
12-03 87
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
HTML仿百度首页登录后的静态界面代码
10-24
HTML仿百度首页登录后的静态界面代码是一个学习和实践项目，旨在帮助开发者理解并掌握HTML、CSS以及可能涉及的JavaScript技术，以创建一个与百度首页登录后界面类似的静态页面。在这个项目中，我们可以深入探讨以下...
仿百度首页搜索html模板
10-11
**仿百度首页搜索HTML模板详解** 在Web开发中，创建用户友好的界面是至关重要的，尤其是对于搜索引擎来说，简洁明了、高效的搜索功能是用户体验的关键。本教程将深入讲解一个仿百度首页搜索的HTML模板，它包括HTML...
HTML仿百度首页未登录静态界面代码
10-24
HTML仿百度首页未登录静态界面代码是一个项目，旨在模仿百度搜索首页的布局和功能，但不涉及用户登录状态的处理。这个项目对于学习HTML、CSS和JavaScript基础，以及提升前端网页设计技能非常有帮助。下面将详细介绍...
仿百度纯静态HTML页面
03-24
【标题】"仿百度纯静态HTML页面"是一个项目，旨在模仿百度搜索引擎的用户界面，创建一个完全由HTML构建的静态网页。这样的项目通常用于教学目的，帮助学生掌握HTML的基础知识，以及网页布局和设计的基本技巧。 ...
html 仿百度百科导航下拉菜单功能
12-14
html 仿百度百科导航下拉菜单功能，具体代码如下所示： 演示图1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ...
仿新版百度首页html模板
08-22
高仿新版百度首页html模板 DIV+CSS的 详细不多说，自己下来看就知道
Android 仿百度新闻（手机端和服务器端源代码）
08-11
Android 仿百度新闻（手机端和服务器端源代码） 来源：http://www.apkbus.com 运行条件： Eclipse(JEE) + Tomcat + ADT + MySQL-Server 代码我已调试，可以在Eclipse运行 是学习新闻发布的发例子
网页制作，百度首页
04-19
应用简单的html+css+js制作的模拟百度首页的网页，难度较易
百度首页制作
06-07
使用HTML制作百度，并实现其各项功能
高仿百度搜索主页源码
01-07
高仿百度搜索主页,采用html+js实现。 百度一下，你就知道
用html+css制作百度首页
azsx582的博客
12-21 6430
刚入门，做个百度首页来巩固一下刚学的html和css知识。 这是原网页： 这是我做的效果图： 实力有限，只能做成这样，有兴趣的可以参考一下，代码如下： 百度一下，你就知道 新闻 hao123 地图 视频 贴吧 学术 更多
html+css 实现百度首页
qq_35003667的博客
10-17 1万+
百度一下，你就知道 .head{ color:#fff;position:absolute;right:0;top:0;margin:19px 0 5px;padding:0 96px 0 0;} .mav{float: left;color: #333;font-weight: 700;line-height: 24px;margin-left: 20px;font-s
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
css仿百度首页
想不到名字
02-07 1620
前两天刚开始看了HTML和css，仿了下百度首页，还没弄完就感冒了，躺了两三条，也就搁置了。。
仿百度贴吧html代码
最新发布
05-20
仿百度贴吧的HTML代码主要包括以下几个部分： 1. 页面结构部分： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿百度贴吧</title> </head> <body> <!-- 页面内容 --> </body> </html> ``` 2. 页面头部部分，包括CSS和JavaScript文件的引用： ``` <head> <meta charset="UTF-8"> <title>仿百度贴吧</title> <link rel="stylesheet" href="style.css"> <script src="jquery.min.js"></script> <script src="main.js"></script> </head> ``` 3. 页面内容部分，包括帖子列表、发帖区域等： ``` <div class="post-list"> <!-- 帖子列表 --> </div> <div class="post-form"> <!-- 发帖区域 --> </div> ``` 4. CSS样式代码： ``` /* 页面布局 */ .post-list { width: 80%; margin: 0 auto; } .post-form { width: 80%; margin: 0 auto; } /* 按钮样式 */ .button { background-color: #f44336; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } /* 文本框样式 */ .input-box { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } ``` 5. JavaScript代码，实现一些交互功能，比如发帖、回帖等： ``` $(document).ready(function(){ // 点击发帖按钮，显示发帖框 $("#post-btn").click(function(){ $(".post-form").show(); }); // 点击发帖提交按钮，提交发帖内容 $("#submit-post-btn").click(function(){ var postContent = $("#post-content").val(); // 提交帖子内容的代码 $(".post-form").hide(); // 刷新帖子列表 // ... }); }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AIOT魔法师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值