仿百度搜索首页完整代码

仿百度首页未登陆状态页面

初学HTML 做个小记录

看看就好，也可以共同学习一下

做的时候也有很多问题，现在也有点懵，还请各位看完指出问题

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="X-UA-Compatible" content="IE=edge" /><meta name="description" content="芜湖!" /><meta name="author" content="Email=987064101@qq.com" /><meta name="generator" content="TXT" /><title>index html</title><link href="index.css" rel="stylesheet" /><style>i,em,b,strong {font-style: normal;}</style>
</head><body><div class="bd"><!-- nav --><div class="bd-nav"><div class="left-wrapper left"><ul class="left-list"><li><a href="javascript:;">新闻</a></li><li><a href="javascript:;">hao123</a></li><li><a href="javascript:;">地图</a></li><li><a href="javascript:;">视频</a></li><li><a href="javascript:;">贴吧</a></li><li><a href="javascript:;">学术</a></li><li class="show"><a href="javascript:;" class="show-bottom">更多</a><div class="more"><ul class="more-list clearfix"><li><a href="javascript:;"><img src="img/wp.png" alt=""><p class="title">网盘</p></a></li><li><a href="javascript:;"><img src="img/zhidao.png" alt=""><p class="title">知道</p></a></li><li><a href="javascript:;"><img src="img/baike.png" alt=""><p class="title">百科</p></a></li><li><a href="javascript:;"><img src="img/图片.png" alt=""><p class="title">图片</p></a></li></ul><ul class="more-list clearfix"><li><a href="javascript:;"><img src="img/zhidao.png" alt=""><p class="title">宝宝知道</p></a></li><li><a href="javascript:;"><img src="img/wenku.png" alt=""><p class="title">文库</p></a></li><li><a href="javascript:;"><img src="img/jingyan.png" alt=""><p class="title">经验</p></a></li><li><a href="javascript:;"><img src="img/yinyue.png" alt=""><p class="title">音乐</p></a></li><li class="m-li"><a href="javascript:;" class="m-next">查看百度全部产品></a></li></ul></div></li></ul></div><div class="right-wrapper right"><ul class="right-list"><li class="w-icon"><a href="javascript:;">哈尔滨<i class="weather-icon"></i></a></li><li class="d-icon">-<a href="javascript:;">22&deg;<i class="deg-icon"></i></a></li><li class="show"><a href="javascript:;">设置</a><div class="set-menu"><dl class="menu-list"><dt><a href="javascript:;">搜索设置</a></dt><dt><a href="javascript:;">高级搜索</a></dt><dt><a href="javascript:;">关闭预测</a></dt><dt><a href="javascript:;">隐私设置</a></dt><dt><a href="javascript:;">关闭热榜</a></dt></dl></div></li><li class="login"><a href=" javascript:;" class="btn-login">登录</a></li></ul></div></div><!-- main --><div class="main clearfix"><div class="w"><div class="form-wrapper"><div class="top-logo"><a href="javascript:;"><img src="img/PCtm.png" title="logo" alt="logo" /></a></div><div class="serach clearfix"><input type="text" name="" value="" placeholder="" class="s-inp" /><button class="s-btn">百度一下</button></div></div></div></div><!-- hots --><div class="hots clearfix"><div class="title"><h4 class="left"><a href="JavaScript:;">百度热榜</a></h4><span class="reload right"><a href="JavaScript:;">换一换</a></span></div><div class="news"><ul class="news-list1"><li><a href="javascript:;" class="links"><span class="index red">1</span><p class="content">外交部回应职责中国隐瞒疫情谬论</p><i class="xin">新</i></a></li><li><a href="javascript:;" class="links"><span class="index orange">2</span><p class="content">黑龙江黑河发现1例本土确诊病例</p></a></li><li><a href="javascript:;" class="links"><span class="index yellow">3</span><p class="content">橙色预警！寒潮天气继续影响中国</p></a></li></ul><ul class="news-list2"><li><a href="javascript:;" class="links"><span class="index">4</span><p class="content">女商人抽脂成植物人10年后死亡</p></a></li><li><a href="javascript:;" class="links"><span class="index">5</span><p class="content">2021年结婚可以不给彩礼？</p></a></li><li><a href="javascript:;" class="links"><span class="index">6</span><p class="content">著名时装设计师皮尔·卡丹去世</p></a></li></ul></div></div><!-- footer --><div class="footer"><div class="about-left left"><ul class="about-list"><li><a href="javascript:;">设为首页</a></li><li><a href="javascript:;">关于百度</a></li><li><a href="javascript:;">About Baidu</a></li><li><a href="javascript:;">百度营销</a></li><li><a href="javascript:;">使用百度前必读</a></li><li><a href="javascript:;">意见反馈</a></li><li><a href="javascript:;">帮助中心</a></li></ul></div><div class="record-right right"><ul class="record-list"><li><a href="javascript:;">&copy;2020Baidu</a></li><li><a href="javascript:;">(京)-2017-0020</a></li><li><a href="javascript:;">京公网安备11000002000001号</a></li><li><a href="javascript:;">京ICP证030173号</a></li></ul></div></div></div>
</body>
<script type="text-javascript"></script></html>

/* 清除所有标签内外边距 */
* {margin: 0;padding: 0;
}body {font-size: 12px;font-family: "PingFeng SC", Arial, "Microsoft YaHei", sans-serif;min-width: 1226px;background: #202131;
}ul li {float: left;list-style: none;
}a {outline: 0;text-decoration: none;color: white;opacity: .8;
}a:hover {opacity: 1;
}/* 清除浮动 */
.clearfix::after {content: "";height: 0;line-height: 0;visibility: hidden;overflow: hidden;display: block;clear: both;
}.clearfix {*zoom: 1;
}/* nav栏 */
.bd-nav {height: 60px;font: 13px/23px Arial, sans-serif;background: #202131;color: white;
}.left {float: left;
}.right {float: right;
}.left-list {margin-left: 24px;
}.left-list li {margin-right: 31px;margin-top: 19px;
}.right-list {margin-right: 24px;
}.right-list li {margin-left: 32px;margin-top: 19px;
}.right-list .login {margin-top: 18px;
}.btn-login {display: block;width: 45px;height: 25px;line-height: 25px;text-align: center;background: #4e71f2;border-radius: 3px;
}.left-list .show,
.right-list .show {position: relative;padding: 0 0 19px;
}.left-list .show .more,
.right-list .set-menu {display: none;position: absolute;top: 38px;right: -12px;width: 304px;height: 223px;background: #202131;border-radius: 10px;box-shadow: 2px -1px 4px 3px rgba(0, 0, 0, .2),-1px 3px 7px 3px rgba(0, 0, 0, .2);z-index: 1;
}.left-list .more .more-list {padding-top: 16px;
}.left-list .more .more-list li {margin: 0;
}.left-list .more .more-list img {display: block;margin: auto;width: 42px;height: 42px;/* border: 1px solid rgba(0, 0, 0, .03); */border: 1px solid rgba(0, 0, 0, .5);border-radius: 12px;
}.left-list .more .more-list .title {width: 76px;margin-top: 3px;text-align: center;
}.left-list .more .more-list .m-li {display: block;width: 100%;padding: 10px 0;text-align: center;
}.left-list .more .more-list .m-next {font-size: 14px;color: #9195a3;
}.left-list .show:hover .more,
.right-list .show:hover .set-menu {display: block;
}.right-list .show .set-menu {top: 35px;right: -30px;width: 84px;height: 162px;text-align: center;
}.right-list .set-menu .menu-list {padding: 7px 0;
}.right-list .set-menu .menu-list dt {padding-bottom: 8px;
}/* main */
.main {position: relative;/* top: -60px; */height: 40%;margin: 0 auto;
}.w {width: 654px;height: 100%;margin: -13px auto 0;
}.form-wrapper {position: relative;height: 100%;
}.w .top-logo {position: relative;height: 188.4px;text-align: center;
}.w .top-logo a {position: absolute;top: 44px;left: 50%;margin-left: -135px;height: 129px;
}.w .top-logo img {width: 270px;height: 129px;
}.serach .s-inp {float: left;width: 514px;height: 42px;border-radius: 10px 0 0 10px;padding: 12px 16px;height: 16px;font-size: 16px;vertical-align: middle;border: 2px solid #c4c7ce;transition: all .3s;
}.serach .s-inp:hover {border: 2px solid #a7aab5;
}.serach .s-inp:focus {border: 2px solid #4e71f2;
}.serach .s-btn {float: right;width: 108px;height: 44px;margin-top: -44px;color: white;font-size: 17px;background: #4e6ef2;border-radius: 0 10px 10px 0;border: 0;cursor: pointer;transition: all .3s;
}.serach .s-btn:hover {background: #4662d9;
}/* word hots */
.hots {position: relative;width: 654px;margin: 45px auto 0;font-size: 14px;
}.hots .title {height: 24px;margin-bottom: 4px;font-size: 14px;
}.title h4 {font-size: 14px;font-weight: 200;
}.hots .news-list1,
.hots .news-list2 {float: left;
}.news-list1 li,
.news-list2 li {float: none;width: 268px;margin-right: 59px;
}.news-list2 li {margin: 0 0 0 59px;
}.news-list1 .links .red {color: #fe2d46;
}.news-list1 .links .orange {color: #f60;
}.news-list1 .links .yellow {color: #faa90e;
}.news-list1 .links .xin {width: 16px;height: 16px;background-color: #fe2d46;padding: 0 2px;font-size: 12px;border-radius: 4px;margin: -2px 0 0 5px;
}.news-list1 .links .index,
.news-list2 .links .index {display: inline-block;width: 18px;margin-right: 2px;font-size: 15px;letter-spacing: -1px;
}.news-list1 .links,
.news-list2 .links {height: 32px;line-height: 32px;
}.news-list1 .links .content,
.news-list2 .links .content {display: inline-block;
}/* footer */
.footer {position: fixed;bottom: 0;width: 100%;height: 40px;/* background-color: #fbfbfb; */background-color: #202131;box-shadow: 2px 3px 10px 2px rgba(110, 106, 106, 0.3);
}.record-list {margin-right: 20px;
}.about-list li,
.record-list li {line-height: 40px;margin-left: 20px;
}.about-list li a:hover,
.record-list li a:hover {color: #315efb;
}

仿百度搜索首页完整代码相关推荐

php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery
先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...
ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
php+ajax 仿百度搜索效果
php+ajax 仿百度搜索效果(代码csdn下载地址:http://download.csdn.net/detail/aa1049372051/7338675) 一共有四个文件 1.前台页面 in ...
仿百度搜索框–jQuery版本
仿百度搜索框–jQuery版本时维九月,序属三秋.此吾工作三个月之日,亦是吾重拾博客之时.一路坎坷走来,经历良多,收获甚多. 正题百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是 ...
html+js仿百度搜索框，点击和回车跳转百度搜索
html+js仿百度搜索框,点击和回车跳转百度搜索代码 <!DOCTYPE html> <html lang="en"> <head>< ...
vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法 2.this.$http.post()方法 3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==&g ...
技术揭秘！百度搜索中台低代码的探索与实践
导读:据Gartner调研,应用开发需求的市场增长至少超过IT交付能力的5倍,预计到2025年,70%的新应用开发将使用低代码技术.我们需要在需求迭代越来越高频.创新能力要求越来越高的背景下,探索如何 ...
html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果（上）
最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果. 1.html 以及 css 部分首先你得要有个输入框,这里我用了控件,其次当用户 ...
用jq实现仿百度搜索框
百度搜索框看似简单,但是涉及到了数据交互,如果能用vue来实现的话会简单很多,现在用jq模仿了一下,写的代码不是一般的多啊! 当然头部要引入jq了 html部分 <input type=&quo ...

仿百度搜索首页完整代码

仿百度首页未登陆状态页面

初学HTML 做个小记录

看看就好，也可以共同学习一下

做的时候也有很多问题，现在也有点懵，还请各位看完指出问题

仿百度搜索首页完整代码相关推荐

最新文章

热门文章