百度首页HTML(简单代码)

新手小白在练习阶段，如果有什么好的建议可以给我留言哦

html代码

<body><div class="nav"><div class="navleft"><a href="#">新闻</a><a href="#">hao123</a><a href="#">地图</a><a href="#">贴吧</a><a href="#">视频</a><a href="#">图片</a><a href="#">网盘</a><div class="dropdown"> <a href="#" class="dropbtn">更多</a><div class="dropdown-content"><ul><li class="dropdown_img"><img src="data:images/wangpan.png" alt=""><div>网盘</div></li><li class="dropdown_img"><img src="data:images/zhidao.png" alt=""><div>知到</div></li><li class="dropdown_img"><img src="data:images/baike.png" alt=""><div>百科</div></li><li class="dropdown_img"><img src="data:images/tu.png" alt=""><div>图</div></li><li class="dropdown_img"><img src="data:images/yinyue.png" alt=""><div>音乐</div></li><li class="dropdown_img"><img src="data:images/jingyan.png" alt=""><div>经验</div></li><li class="dropdown_img"><img src="data:images/baobaozhidao.png" alt=""><div class="tag">宝宝知道</div></li><li class="dropdown_img"><img src="data:images/wenku.png" alt=""><div class="tag">文库</div></li></ul></div></div></div><div class="navright"><a href="">设置</a><div class="but"> <a href="#">登录</a></div></div><div class="clear"></div></div><div class="main"><ahref="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pc"><img src="data:images/baidu.webp" alt=""></a></div><div class="search"><input type="text" class="input"><a href="">百度一下</a></div><div class="active"><div class="activeleft"><span class="tuijian">推荐</span><a href=""> <img src="data:images/shenteng.jpg" alt="">重刷《向往6》第4、5期，比起沈腾的搞笑，他的绅士手更圈粉<br><br><span style="color:rgb(116, 115, 112) ;font-size: 13px;">综艺舞蹈秀&nbsp;&nbsp;&nbsp;06-16&nbsp;&nbsp;16:36</span></a><a href=""><img src="data:images/shenteng2.jpg" alt="">真的不知道，沈腾马丽离开之后，后面谁还能拯救《向往6》的笑点<br><br><spanstyle="color:rgb(116, 115, 112) ;font-size: 13px;">综艺舞蹈秀 &nbsp;&nbsp;&nbsp;06-15&nbsp;&nbsp;10:25</span></a><div class="activeleft_1"> <a href="">林徽因的皮草大衣，件件高级！真是贫穷限制了我的想象！<img src="data:images/linhuiyin1.jpg" alt=""><img src="data:images/linhuiyin2.jpg" alt=""> <img src="data:images/linhuiyin3.jpg" alt=""></a></div></div><!-- <div class="clear"></div> --><div class="activeright"><span class="resou"> 百度热搜></span> <span class="right"> <img src="data:images/huanyihuan.png" alt=""> 换一换</span><br><br><span class="span_1">1</span><a href="">5月份国民经济运行呈现恢复势头播</a><br><br><span class="span_2">2</span><a href="">唐山：群众反映的问题要清仓见底</a><span class="re">热</span><br><br><span class="span_3">3</span><a href="">连夜抢收小麦的画面好震撼</a><span class="re">热</span><br><br><span class="span_4">4</span><a href="">河南热成了可南</a> <span class="xin">新</span><br><br><span class="span_4">5</span> <a href="">落地河南后 被赋“红码”的数小时</a><br><br><span class="span_4">6</span> <a href="">唐山又出恶性大事件”系谣言</a><span class="xin">新</span><br><br><span class="span_4">6</span><a href="">微信支付回应今早异常：已确认恢复</a></div></div>
</body>

css代码

.nav {margin-top: 10px;}.navleft {float: left;margin-left: 20px;margin-top: 5px;font-size: 14px;font-family: "微软雅黑";text-decoration: none;}.nav a {color: rgb(100, 98, 98);margin-right: 20px;text-decoration: none;}.nav a:hover {color: blue;}.navright {float: right;margin-right: 20px;margin-top: 5px;font-size: 14px;font-family: "微软雅黑";text-decoration: none;}.main {margin-top: 40px;/* height: 300px; */text-align: center;}img {width: 300px;}.clear {clear: both;}.search {width: 100%;text-align: center;display: inline-block;}.input {height: 36px;width: 500px;border-radius: 10px 0 0 10px;border-width: 1px;border-color: CEC7C4;border-right: 0px;}input:focus {border-color: #4E6EF2;outline: none;border-width: 2px;}.search a {text-decoration: none;display: inline-block;width: 100px;height: 40px;line-height: 38px;text-align: center;border-radius: 0px 5px 5px 0px;font-family: "微软雅黑";cursor: pointer;background-color: #4E6EF2;color: white;}.but {text-align: center;background-color: #4E6EF2;float: right;border-radius: 5px 5px 5px 5px;width: 50px;}.but a {color: white;display: inline-block;margin: 0 auto;}.more-wrap {float: right;position: relative;}.more_box {width: 300px;height: 200px;/* border: 1px solid black; */position: absolute;margin-left: -275px;border-radius: 10px 10px 10px 10px;box-shadow: 0px 0px 10px 5px #ccc;margin-top: 10px;/* display: inline-block; */}.more_box li {list-style: none;}/* 下拉按钮样式 */.dropbtn {color: rgb(100, 98, 98);/* padding: 16px; */font-size: 14px;border: none;/* cursor: pointer; */margin-right: 10px;margin-top: 5px;font-family: "微软雅黑";}/* 容器 <div> - 需要定位下拉内容 */.dropdown {position: relative;display: inline-block;}/* 下拉内容 (默认隐藏) */.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;width: 300px;height: 200px;margin-left: -275px;text-align: center;padding: auto;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}.dropdown-content li {list-style: none;}/* 在鼠标移上去后显示下拉菜单 */.dropdown:hover .dropdown-content {display: block;}/* 当下拉内容显示后修改下拉按钮的背景颜色 */.dropdown:hover .dropbtn {color: #4E6EF2;}.dropdown_img img {width: 50px;height: 50px;}.dropdown_img {float: left;line-height: 20px;margin-left: 5px;margin-right: 7px;margin-top: 10px;}.active {margin: 80px;width: 1200px;margin-left: 200px;display: flex;}.activeleft {margin-top: 20px;float: left;width: 550px;overflow: hidden;}.activeleft img {width: 200px;border-radius: 10px 10px 10px 10px;float: left;margin-right: 20px;}.activeleft a {text-decoration: none;color: #000;font-size: 20px;font-weight: 500;float: left;margin-right: 20px;margin-top: 30px;}.activeleft a:hover {color: #4E6EF2;}.activeright {float: right;margin-top: 20px;width: 400px;margin-left: 150px;}.activeleft_1 {color: #000;font-size: 20px;font-weight: 500;margin-top: 30px;}.activeleft_1 img {width: 150px;height: 130px;}.clear {clear: both;}.tuijian {color: rgb(94, 92, 92);}.resou {color: #000;font-family: Arial, Helvetica, sans-serif;font-weight: 600;font-size: 20px;}.right {margin-left: 225px;color: rgb(94, 92, 92);}.right img {width: 18px;height: 18px;}.span_1 {margin-right: 15px;font-size: 20px;color: red;font-family: Arial, Helvetica, sans-serif;}.span_2 {margin-right: 15px;font-size: 20px;color: rgb(255, 111, 0);font-family: Arial, Helvetica, sans-serif;}.span_3 {margin-right: 15px;font-size: 20px;color: rgb(255, 183, 0);font-family: Arial, Helvetica, sans-serif;}.span_4 {margin-right: 15px;font-size: 20px;color: rgb(116, 115, 112);font-family: Arial, Helvetica, sans-serif;}.re {display: inline-block;background-color: rgb(255, 111, 0);color: #fff;margin-left: 15px;border-radius: 5px 5px 5px 5px;font-size: 15px;width: 20px;height: 20px;text-align: center;line-height: 20px;}.xin {display: inline-block;background-color: red;color: #fff;margin-left: 15px;border-radius: 5px 5px 5px 5px;font-size: 15px;width: 20px;height: 20px;text-align: center;line-height: 20px;}.activeright a {text-decoration: none;color: #000;font-size: 17px;}.activeright a:hover {color: #4E6EF2;}

百度首页HTML(简单代码)相关推荐

百度首页html简单代码_百度站长平台为什么要验证网站及验证方法
首先和网站推广培训老师一起来了解百度站长为什么要验证网站站长平台推荐站长添加主站(您网站的链接也许会使用www 和非 www 两种网址,建议添加用户能够真实访问到的网址),添加并验证后,可证明您是该 ...
百度新闻html css代码,仿百度首页XHTML+CSS代码
百度一下,就就知道了 /* *{margin:0px;padding:0px;font-size:14px;} 不要使用*,会影响整体的速度,只对需要重置的标签进行定义就可以了,还有当一个属性的数值为 ...
python 使用免费爬取百度首页网页简单案例
#coding:utf8 import urllib2url="http://www.baidu.com/"# 代理开关,表示是否启用代理 # 西刺代理网址 http://www. ...
仿新版百度首页，99%还原真实百度首页。
老规矩,首先上效果图效果还可以吧, 接下来我们要做的第一步就是编写百度首页的HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
仿写百度首页的float布局
介绍之前已经写过很多遍百度首页了,但是今天的记录的重点是不同以往,才用的布局方式是float,浮动的方式来布局. 查看百度首页的源码是采用绝对定位的方式进行布局的今天来记录另一种布局方式,只不过是 ...
防仿百度图片背景色php,基于jQuery实现仿百度首页换肤背景图片切换代码_jquery...
不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- html代码: css代码: *{margin:0;padding:0} a{color:#fff; ma ...
HTML如何制作百度首页？代码是什么
本篇文章给大家带来的内容是关于HTML如何制作百度首页?代码是什么,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固, ...
html5一键导航代码,站长有福了-让网址一键添加百度首页导航
自从受到了领导的熏陶之后,就想做一个针对企业运维IT人员的网站,收集一些对企业运维有价值的网站,也推荐一些安全信息给运维人员,在工作中发现中国It运维人员缺少对安全的认知,目前网站已经上线,可以到sh ...
用我对HTML的点点理解来做个简单的百度首页
为什么80%的码农都做不了架构师?>>> 在我心里,HTML一直以来都是一个新鲜而神秘的东西,好多次想静下心来研究研究,最终因为各种原因搁置下来.终于,最近终于有时间看看其中的 ...
html+css 百度首页练习
这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...

百度首页HTML(简单代码)

百度首页HTML(简单代码)

html代码

css代码

百度首页HTML(简单代码)相关推荐

最新文章

热门文章