百度模仿页面修改(2)
本次百度页面模仿我完善了搜索框中的照相机基本实现了百度首页静态页面（没有找到置顶符号的代码，使用的向上箭头的代码）实现了部分动态页面百度html源代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" cont
·
本次百度页面模仿我完善了搜索框中的照相机
基本实现了百度首页静态页面（没有找到置顶符号的代码，使用的向上箭头的代码）
实现了部分动态页面
百度html源代码
<!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>百度</title>
<link rel="stylesheet" href="baidu.css">
<style>
</style>
</head>
<body>
<div id="head">
<div id="head-left">
<a href="http://news.baidu.com" target="_blank">新闻</a>
<a href="https://www.hao123.com?src=from_pc" target="_blank">hao123</a>
<a href="http://map.baidu.com" target="_blank">地图</a>
<a href="http://tieba.baidu.com/" target="_blank">贴吧</a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a>
<a href="http://image.baidu.com/" target="_blank">图片</a>
<a href="https://pan.baidu.com?from=1026962h" target="_blank">网盘</a>
<div id="head-left-more">
<a href="http://www.baidu.com/more/" target="_blank">更多</a>
<div id="hide-div">
<img src="屏幕截图 2022-05-19 211724.png" alt=""/>
</div>
</div>
</div>
<div id="head-right">
<span class="shezhi-text">设置</span>
<a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5" target="_blank" class="denglu-btn denglu-btn-text color-btn">登录</a>
</div>
</div>
<div id="body">
<!--logo-->
<img src="屏幕截图 2022-05-19 215620.png" alt="">
<from action="">
<div id="search">
<div id="search-input">
<input type="text">
</div>
<img src="照相机.png" style="height: 30px;width: 40px;margin-top: 10px;margin-right: 40px;">
<div id="search-btn">
<input type="submit" value="百度一下">
</div>
</div>
</from>
<div id="hot">
<div id="hot-left">
<a href="">百度热搜></a>
</div>
<div id="hot-right">
<a href="">⟳换一换</a>
</div>
</div>
<ul id="hot-ul">
<li class="left-li" >
<span class="num" style="color: #f63051;">↑</span>
<span class="font">中国消费韧性强潜力足特点没改变</span>
</li>
<li class="right-li">
<span class="num" style="color: #faa96f;">3</span>
<span class="font">中国队正式递补东京奥运会接力铜牌</span>
<span class="c-text c-text-hot">热</span>
</li>
<li class="left-li">
<span class="num" style="color: #fe2d46;">1</span>
<span class="font">四川雅安4.8级地震 成都震感强烈</span>
<span class=" c-text c-text-hot">热</span>
</li>
<li class="right-li">
<span class="num">4</span>
<span class="font">520</span>
<span class=" c-text c-text-hot">热</span>
</li>
<li class="left-li">
<span class="num" style="color: #f60;" >2</span>
<span class="font">上海新增88+770 无死亡病例</span>
<span class=" c-text c-text-hot">热</span>
</li>
<li class="right-li">
<span class="num">5</span>
<span class="font">男子凌晨12点排队只为第一个领证</span>
<span class="c-text c-text-new">新</span>
</li>
</ul>
</div>
<div id="foot">
<div id="foot-div">
<p class="lh">
<a class="text-color" href="//home.baidu.com" target="_blank">关于百度</a>
</p>
<p class="lh">
<a class="text-color" href="http://ir.baidu.com" target="_blank">About Baidu</a>
</p>
<p class="lh">
<a class="text-color" href="//www.baidu.com/duty" target="_blank">使用百度前必读</a>
</p>
<p class="lh">
<a class="text-color" href="//help.baidu.com" target="_blank">帮助中心</a>
</p>
<p class="lh">
<a class="text-color" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
</p>
<p class="lh">
<a class="text-color" href="https://beian.miit.gov.cn" target="_blank">京ICP证030173号</a>
</p>
<p class="lh">
<span class="text-color">©2022 Baidu </span>
</p>
<p class="lh">
<span class="text-color">互联网药品信息服务资格证书 (京)-经营性-2017-0020</span>
</p>
<p class="lh"><a class="text-color" href="//www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证 0110516</a>
</p>
</div>
</div>
</body>
</html>插入的css源代码
html,body{
height:100%;
margin:0;
}
#head{
height:10%;
min-height:60px;
min-width:1250px;
}
#head-right{
height: 60px;
padding-right: 24px;
padding-left: 200px;
float:right;
}
.shezhi-text{
margin-left: 24px;
margin-top: 19px;
display: inline-block;
position: relative;
vertical-align: top;
cursor: pointer;
color: #222;
font: 13px/23px Arial,sans-serif;
}
#head-right span:hover{
color:#4e6ef2;
}
.denglu-btn{
height: 24px;
width: 48px;
line-height: 24px;
}
.denglu-btn-text{
display: inline-block;
margin-top: 18px;
margin-left: 32px;
font-size: 13px;
font-family: inherit;
font-weight: 400;
text-align: center;
vertical-align: middle;
border-radius: 6px;
cursor: pointer;
text-decoration: none;
color: #fff!important;
}
.color-btn{
background-color: #4e6ef2;
}
#head-left{
height:60px;
width:500px;
float:left;
padding-left: 24px;
}
#head-left>a{
margin-top:19px;
margin-right:24px;
display: inline-block;
font:13px/23px Arial,sans-serif;
color:#222;
text-decoration: none;
float:left;
}
#head-left a:hover{
color:#4e6ef2;
}
#head-left-more{
margin: 19px 31px 0px 0px;
display:inline-block;
position: relative;
}
#head-left-more a{
display: inline-block;
font:13px/23px Arial,sans-serif;
color:#222;
text-decoration: none;
float: left;
padding-bottom: 19px;
}
#hide-div{
position: absolute;
top: 29px;
right: -12px;
width: 228px;
height: 298px;
background: #fff;
box-shadow: 0 2px 10px 0 rag(0 0 0 / 15%);
border-radius: 12px;
text-align: center;
display: none;
}
#hide-div img{
width:200px;
height: 280px;
margin-top: 8px;
padding-left: 8px;
}
/*为父标签设置伪类*/
#head-left-more:hover #hide-div{
display: block;
}
#foot{
height: 20%;
min-height:60px;
min-width:1250px;
}
#foot-div{
width: 100%;
position:fixed;
bottom: 0;
left:0;
height: 39px;
padding-top: 1px;
margin:0;
line-height: 39px;
background-color: #fff;
text-align: center;
}
.lh{
display: inline;
margin-right: 17px;
}
.text-color{
font-size: 12px;
text-decoration: none;
color: #bbb;
}
#foot-div a:hover{
color: #222;
}
#shezhizhi span:hover{
color:#3154fb;
}
#search{
height: 44px;
width: 654px;
background-color:aliceblue;
margin: 0 auto;
}
#search-input{
height:44px;
width:443px;
float: left;
}
#search-input input{
height:16px;
width:443px;
border:2px solid #c4c7ce;
padding:12px 87px 12px 16px;
border-radius:10px 0 0 10px;
background-color:#fff;
font-size:16px;
border-right: 0px;
}
#search-input input:hover
{
border: color #a7aab5;
border-right-color:#4e6ef2;
}
#search-input input:focus
{
border-color:#4e6ef2;
outline:none;
}
#search-btn{
height:44px;
width:108px;
margin-top: -59px;
margin-left: 548px;
}
#search-btn input{
height:44px;
width:108px;
border:0;
border-radius:0 10px 10px 0;
background-color:#4e6ef2;
font-size:17px;
color:#fff;
}
#search-btn input:hover{
background-color:#4662b9;
}
#body{
height:80%;
min-height:462px;
width:658px;
margin: 0 auto;
text-align: center;
}
#body img{
height: 78px;
width: 235px;
margin-top:18px ;
margin-bottom:15px ;
}
#hot{
height: 24px;
width: 654px;
margin-top:45px;
}
#hot-left{
height: 24px;
width: 173px;
float:left;
text-align: left;
}
#hot-left a{
text-decoration: none;
font-size: 15px;
font-family: cIconfont;
font-style: normal;
color: #222;
font-weight: bold;
}
#hot-right{
height: 16px;
width: 100px;
float: right;
text-align: right;
}
#hot-right a{
font-size: 14px;
color: #626675;
font-family:Arial, sans-serif ;
text-decoration: none;
}
#hot-ul{
list-style: none;
text-align: left;
margin: 0;
padding: 0;
margin-top: 5px;
}
#hot-ul li{
float: left;
height: 36px;
width: 306px;
}
.left-li{
margin-right: 20px;
}
.right-li{
margin-left: 20px;
}
.font{
font-family: Arial, sans-serif;
font-size: 16px;
color: rgb(34,34,34);
margin-left: 10px;
}
.font:hover{
color: #4E6EF2;
text-decoration: underline;
}
.num{
font-family: Arial, sans-serif;
font-size: 18px;
color: #9195a3;
}
.c-text-hot {
background-color: #f60;
}
.c-text {
display: inline-block;
padding: 0 2px;
text-align: center;
vertical-align: middle;
font-style: normal;
color: #fff;
overflow: hidden;
line-height: 16px;
height: 16px;
font-size: 12px;
border-radius: 4px;
font-weight: 200;
}
.c-text-new {
background-color: #ff455b;
}
.c-text {
display: inline-block;
padding: 0 2px;
text-align: center;
vertical-align: middle;
font-style: normal;
color: #fff;
overflow: hidden;
line-height: 16px;
height: 16px;
font-size: 12px;
border-radius: 4px;
font-weight: 200;
}
瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)