模仿百度首页

最新推荐文章于 2022-07-05 21:23:14 发布
最新推荐文章于 2022-07-05 21:23:14 发布
阅读量1.2k 收藏 2
点赞数 2
分类专栏： 前端 文章标签： html css javascript 百度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51131331/article/details/122400920
版权

1、展示效果：              

2、网页代码：

<html>
<body>
<table width=100%>
 <tr>
  <td>
   <table>
    <tr>
     <td> <a href="http://news.baidu.com/">新闻</td><td></td>
     <td> <a href="https://www.hao123.com/">hao123</td><td></td>
     <td> <a href="https://map.baidu.com/@11868752,3422738,13z">地图</td><td></td>
     <td> <a href="https://live.baidu.com/">直播</td><td></td>
     <td> <a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</td><td></td>
     <td> <a href="https://tieba.baidu.com/index.html">贴吧</td><td></td>
     <td> <a href="https://xueshu.baidu.com/">学术</td><td></td>
     <td> <a href="https://www.baidu.com/more/">更多</td>
    </tr>
   </table>
  </td>
  
  <td>
   <table>
    <tr><td></td>
    <td>设置</td><td></td>
    <td> <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5">登录</td>
    </tr>
   </table>
  </td>
 </tr>
 
 <tr>
 <td align= "center">
  <a href="https://www.baidu.com/swd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs" > 
  <img border="0" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" /width="300" heigth="300">
  </a>
</td>
</tr>
 
<tr>
  <td align ="center">
   <input style="width:600px; height:38px;" ><button style="background-color: blue;height:38px;"><font family="verdana" color="white" font size="4">百度一下</button></style></input>
  </td>
 </tr>
<tr>
  <td align="center">
  <table>
    <tr>
     <td > <a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry">百度热搜</td>
    </tr>
  </table>
  <td>
 </tr>

 <tr>
   <td align="center">
   <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E4%BA%BA%E6%B0%91%E6%97%A5%E6%8A%A5%E8%AF%84%E8%AE%BA+%E4%B8%89%E4%B8%AA%E6%B2%A1%E6%9C%89%E5%8F%98&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">1  人民日报评论明确三个没有变      </a>
   </td> 
  </tr>
 <tr>
   <td align="center">
    <a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E4%B8%AD%E6%96%B9%E5%86%B3%E5%AE%9A%E5%90%91%E9%98%BF%E5%AF%8C%E6%B1%97%E6%8F%90%E4%BE%9B%E4%BB%B7%E5%80%BC2%E4%BA%BF%E6%8F%B4%E5%8A%A9&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">2  中方向阿富汗提供价值2亿援助</a>
    </td> 
  </tr>
  <tr>
    <td align="center">
     <a href="https://www.baidu.com/s?tn=baidutop10&wd=%E4%B8%AD%E5%9B%BD%E6%95%B4%E6%B2%BB%E9%A5%AD%E5%9C%88%E9%92%88%E5%AF%B9%E9%9F%A9%E5%9B%BD%3F%E4%B8%AD%E6%96%B9%E5%9B%9E%E5%BA%94&rsv_idx=2&ie=utf-8&rsv_pq=f978dc7a000cd3c6&oq=%E4%B8%AD%E5%9B%BD%E6%95%B4%E6%B2%BB%E9%A5%AD%E5%9C%88%E9%92%88%E5%AF%B9%E9%9F%A9%E5%9B%BD%3F%E4%B8%AD%E6%96%B9%E5%9B%9E%E5%BA%94&rsv_t=5f36SeLBeqCUsVZ5nSL%2BzRyc41MxEj91b0ihl%2FT59viFBJVHANOe9ZlV7CWy9jLkrQ&rqid=f978dc7a000cd3c6&rsf=06477572337983bc277e2984eeedbd29_1_15_4&rsv_dl=0_right_fyb_pchot_20811&rqid=f978dc7a000cd3c6">3  中国整治饭圈针对韩国?中方回应   </a>
     </td> 
   </tr>
</table>

</body>
</html>

3、设计过程：

      首先观察这张网页，有两个部分组成，一个是头部菜单，另外一个是搜索栏的表单。在设计头部表单时，使用了table嵌套的方法，将头部表单分为了左右两个部分，左边分别有;新闻，hao123，地图，直播，视频，贴吧，学术，更多8个元素；右边是设置和登录。

在设计好头部表单后，下一个是百度的图片，使用img border，再将其居中。然后是搜索栏部分和百度热搜，都是使用的table表格。

4、设计总结：

   主要是需要把各种情况需要使用的方法记住，例如链接：a href ；图片：img border；等等，只要学会了这些使用方法，剩下的就是堆砌过程。

 

竹骄傲
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端新手仿写百度首页静态网页
Elon33的博客
04-01 1607
百度首页初步仿写 HTML 在这里插入代码片 ```<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>百度一下，你就知道</title> <link rel="stylesheet" type="text/css" href="c...
简单模仿百度首页（html）
09-19
使用vscode简单模仿了百度首页，还没有涉及到css和js，适合刚学html的小白
仿写百度首页
weixin_33937499的博客
07-14 175
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> a { color: bla...
HTML+CSS，百度首页仿写——高度还原，不信进去看图。
weixin_48336066的博客
07-05 640
仿百度首页， 直接干货， 图片自己扣。
简单构写百度页面（可以参考一下）
m0_65054943的博客
05-22 962
<!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, initia...
百度首页模仿
407指导员
10-29 304
百度首页模仿 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度首页练习</title> <style> body {/*全局字体样式一致直接设置body属性继承即可*/ font-size: 14px; color: #666;
百度界面代码及效果展示
qq_44967509的博客
06-29 1万+
本文包括百度界面html代码、css代码及其效果展示 注意！！！只能实现页面展示，具体功能不能实现！ 效果展示 HTML详细代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
html/css-仿写百度搜索首页
HadwinLing
01-07 677
html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="baibuA.css"> </head&gt...
hexo史上最全搭建教程
热门推荐
Fangzh的技术博客
09-16 27万+
花了几天搭建了个网站，先上链接，欢迎来访：fangzh的个人博客 现在市面上的博客很多，如CSDN，博客园，简书等平台，可以直接在上面发表，用户交互做的好，写的文章百度也能搜索的到。缺点是比较不自由，会受到平台的各种限制和恶心的广告。 而自己购买域名和服务器，搭建博客的成本实在是太高了，不光是说这些购买成本，单单是花力气去自己搭这么一个网站，还要定期的维护它，对于我们大多数人来说，实在是没...
模仿百度主页效果
02-21
很好的百度主页模仿demo
baidu主页页面仿写
04-02
百度点击搜索的页面html,刚能学习的，亲测有效果
仿百度首页
11-15
仿百度首页的源代码,参考百度首页而写,用于练手,可参考.
基于html和css的模仿百度首页axure源码+页面截图.zip
最新发布
12-29
基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于html和css的模仿百度首页axure源码+页面截图.zip基于...
零基础学前端 - 模仿百度网站首页
09-20
我写了一个零基础学前端的系列博客文章，这个就是模仿百度网站首页的源代码，有兴趣的可以下载看看。适用于零基础的初学者
模仿百度首页简单练习.rar
12-08
适合前端初学者，简单的css布局，可以做练习用
百度首页制作 （仿百度首页）
qq_45830796的博客
03-21 1444
百度首页制作 （仿百度首页） 介绍： 用html+css制作的百度首页 带搜索功能，点击会进行跳转到搜索页面 效果图： 鼠标移入悬浮效果： 代码 <!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
第十四周课程学习
qq_51082388的博客
06-06 6017
今天实现效果 乱七八糟的代码，重新建的文件夹，然后写了改，改了写， <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度一下,你就知道</title> <style type="text/css"> .submit{ background-color:#3385ff; height:38px; font-siz
flask如何去写接口，并且去访问
weixin_39349045的博客
08-07 876
1、返回一段json import flask server=flask.Flask(__name__) @server.route('/index') def index(): return '{"code":0,"msg":"成功"}' server.run() 去访问：http://127.0.0.1:5000/index 2、返回页面 html 超文本 import flask server=flask.Flask(__name__) @server.route('/index')
web前端之百度首页仿写
可可的博客
09-26 4502
&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度一下，你就知道&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table border="0" width="100%" height=&quot
模仿百度页面的html代码
07-30
百度一下，你就知道 body { font-family: Arial, sans-serif; } #logo { margin-top: 100px; text-align: center; } #search { margin-top: 20px; text-align: center; } #search input[type="text"] { padding...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

竹骄傲

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

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

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

打赏作者

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

抵扣说明：

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

余额充值