前端---HTML制作百度首页

这次给大家讲解一个百度首页制作,我们先将图片和代码展示给大家

<html>
</head><title>百度一下，我就知道</title><link href="images/baidu.ico" rel="shortcut icon" type="image/x-icon"/><style>.div_top{width:484.578px;height:24px;float:right;margin-top:10px;}.div_middle{width:995px;height:132px;float:right;margin-top:200px;}.div_body{width:100%;height:59px;float:left;}.div_bodyin{width:640px;height:36px;float:right;margin-top:23px;margin-right:650px;}.div_tail{width:100%;height:120px;float:right;margin-top:300px;}.div_tail2{width:100%;height:22px;float:right;margin-top:10px;}.div_menu{width:26.5156px;height:24px;float:left;font-size: 13px;font-weight: 700;line-height: 24px;color:#333;margin-left:20;}.div_icon1{margin-right:300px;              }</style><script>function fun1()
{document.getElementById("submit").submit();
} </script>
</head></body style="background-color:#ffffff"><div class="div_top"><div class="div_menu " ><b><ins>新闻</ins></b></div><div class="div_menu " ><b><ins>hao123</ins></b></div><div class="div_menu " ><b><ins>地图</ins></b></div><div class="div_menu "  ><b><ins>视频</ins></b></div><div class="div_menu "  ><b><ins>贴吧</ins></b></div><div class="div_menu "  ><b><ins>学术</ins></b></div><div class="div_menu " style="" ><ins>登录</ins></div><div class="div_menu " style="" ><ins>设置</ins></div><div class="div_menu " style="width:60px;background-color:#38f;color:#fff;" >更多产品</div>           </div><div class="div_middle"><center><img src="https://img-blog.csdnimg.cn/2022010711010235601.png" /></center></div><div class="div_body"><center><div class="div_bodyin"><form action="https://www.baidu.com/s" method="get" id="submit"><input id="username" name="wd" type="text" style="height:36px;width:500px;float:left;margin-left:0px;"/> <div><img src="https://img-blog.csdnimg.cn/2022010711010392622.png" style="float:left;height:36px;width:40px;margin-top=0px;"></div><div onclick="fun1()"   style="width:100px;height:36px;font-size:15px;color:#fff;background:#3385ff;float:right;line-height:36px;"><span>百度一下</span></div></form>
</div></center></div><div class="div_tail"><img src="https://img-blog.csdnimg.cn/2022010711010348840.png"   style="margin-left:850px"/></div><div class="div_tail2"><div style="width:536.109px;height:22px;font-size: 12px;color:#999;text-align:center;margin-left:625px;"><ins>把百度设为主页</ins>&nbsp&nbsp&nbsp<ins>关于百度</ins>&nbsp&nbsp&nbsp<ins>Aboubt&nbspBaidu</ins>&nbsp&nbsp&nbsp</ins><ins>百度推广</ins></div></div><div class="div_tail2"><div style="width:536.109px;height:22px;font-size: 12px;color:#999;text-align:center;margin-left:625px;">@2018Baidu<ins>使用百度前必读</ins>&nbsp<ins>意见反馈</ins>&nbsp京ICP证030173号&nbsp&nbsp&nbsp<ins>京公网安备11000002000001号</div></div>
</body>
</html>

简单网页布局的要点:

为了防止各个块之间互相造成影响，我们几乎整个网页都用div模块组合而成.

为了在不同分辨率的屏幕和缩放的网页上保持原网页各元素相对位置不产生改变，居中的要么选择居中，要么使用margin属性，不过要使用百分比.

小图标都是用的截图抓取，使用div包含其，然后调整布局就可以.

具体字体大小，字体颜色登录到百度页面用F12开发者模式抓取就可以确定.

采用form表单模拟搜索请求:

form表单提交的action为https://www.baidu.com/s，为什么要加s呢，因为我们搜索是模拟提交百度搜索请求。

使用form表单提交请求/?后附加的参数name为input的name，value为input中输入的值，name=value。而我们观察上方图片，可以发现?后加的是wd=CSDN,所以我们使input得name为wd即可。

前端---HTML制作百度首页相关推荐

HTML如何制作百度首页？代码是什么
本篇文章给大家带来的内容是关于HTML如何制作百度首页?代码是什么,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固, ...
html制作百度首页的图片不显示,html实现像百度的首页效果一样的背景图（代码）...
本篇文章给大家带来的内容是关于html实现像百度的首页效果一样的背景图(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前在百度知道我提问过这一个问题,后来解决了.不过好多人 ...
使用html制作百度首页
代码如下: <html><head><title>百度一下,你就知道</title></head><body><p ali ...
HTML制作百度首页
先给出我的网页成品图: 先说我的网页布局的几个要点: 为了防止各个块之间互相造成影响,我们几乎整个网页都用div模块组合而成. 为了在不同分辨率的屏幕和缩放的网页上保持原网页各元素相对位置不产生改变, ...
html中列表导航怎么和图片对齐_HTML实战篇：html仿百度首页
本篇文章主要给大家介绍一下如何使用html+css来制作百度首页页面. 1)制作页面所用的知识点我们首先来分析一下百度首页的页面效果图百度首页由头部的一个文字导航,中间的一个按钮和一个输入框以及下 ...
仿百度html页面,HTML实战篇：html仿百度首页
原标题:HTML实战篇:html仿百度首页本篇文章主要给大家介绍一下如何使用html+css来制作百度首页页面. 1)制作页面所用的知识点我们首先来分析一下百度首页的页面效果图百度首页由头部的一 ...
利用HTML5仿制百度首页
制作百度首页,要用到div进行分块,需要对快的位置进行控制,一般有对div进行规范大小width,height分别对应宽度高度 margin:有对div进行定位有margin-top,margin- ...
html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
本周总结前端第二次作业模仿制作百度界面
前端第二次作业: 制作百度界面: https://www.baidu.com/ 要求: 模仿制作,相似度达99%. 仿照https://www.runoob.com/css/css-tutorial. ...
前端：用html写百度首页
0 准备工作初学html,要求用html写一个百度首页老师推荐了html的学习网站(菜鸟教程里html的教程也很棒): https://www.w3school.com.cn/html/index ...

前端---HTML制作百度首页

前端---HTML制作百度首页相关推荐

最新文章

热门文章