前端作业6.2

2024-03-23 16:01:34

这次轻敌了，没想到一个百度界面竟然这么复杂（可能是在下很弱），几乎涵盖了html和css的所有知识，到现在也还是有很多地方没有掌握，有很多处制作的不够完善，等到进一步掌握之后再回来翻新，先弄上现阶段的代码。

效果图：

HTMl代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>百度一下，你就知道</title>
	<link rel="stylesheet" href="../css/baidu.css">
</head>
<body>

		<div class="header">
		<div class="nav">
			<ul>
				<li><a href="http://news.baidu.com/" target="_blank">新闻</a></li>
				<li><a href="https://www.hao123.com/" target="_blank">hao123</a></li>
				<li><a href="https://map.baidu.com/@13035085.64,4303516.59,12z" target="_blank">地图</a></li>
				<li><a href="https://live.baidu.com/" target="_blank">直播</a></li>
				<li><a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a></li>
				<li><a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a></li>
				<li><a href="https://xueshu.baidu.com/" target="_blank">学术</a></li>
				<li><a href="https://www.baidu.com/more/" target="_blank">更多</a></li>
			</ul>
		</div>
		<div class="nav1">
			<ul>
				<li><span class="shez">设置</span></li>
				<li class="dl"><a href="#" class="dengl">登录</a></li>
			</ul>
		</div>
	</div>
	<div class="zhongj">
		<div class="baidu">
			<a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" target="_blank"><img src="../images/baidu.png" class="tup"></a>
		</div>
		<div class="search">
			<span><input type="text" /></span>
		    <span class="btn"></span>
			<button>百度一下</button>
		</div>
	</div>
	<div class="resou">
		<div class="reh">
			<a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" target="_blank" class="bdrs">
				百度热搜
			</a>
			<a href="#" class="huan">换一换</a>
			<a href="#" class="huanyihu"><img src="../images/huanyih.png" class="huanyih"></a>
			
		</div>
	<ol class="biaoge">
		<li class="odd1">1.<a href="#">第一条<img src="../images/re.png" class="hot"></a></li>
		<li class="odd2">2.<a href="#">第二条<img src="../images/xin.png" class="xin"></a></li>
		<li class="odd3">3.<a href="#">第三条</a></li>
		</ol>
	<ul class="biaoge2">	
		<li class="even1">4.<a href="#">第四条</a></li>
		<li class="even2">5.<a href="#">第五条</a></li>
		<li class="even3">6.<a href="#">第六条</a></li>
	</ul>
	</div>
	<div class="dibu">
		<a href="https://www.baidu.com/cache/setindex/index.html" target="_blank">设为首页</a>
		<a href="https://home.baidu.com/" target="_blank">关于百度</a>
		<a href="https://ir.baidu.com/" target="_blank">About Baidu</a>
		<a href="https://www.baidu.com/duty/" target="_blank">使用百度前必读</a>
		<a href="https://passport.baidu.com/v2/?login&tpl=service_feedback&u=http%3A%2F%2Fhelp.baidu.com%2Fnewadd%3Fprod_id%3D1%26category%3D4" target="_blank">意见反馈</a>
		<a href="https://help.baidu.com/" target="_blank">帮助中心</a>
		<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
		<a href="https://beian.miit.gov.cn/" target="_blank">京ICP证030173号</a>
		<a href="">©2021 Baidu</a>
		<a href="">(京)-经营性-2017-0020</a>
		<a href="">信息网络传播视听节目许可证 0110516</a>
	</div>
	<!-- <div class="zhongj"></div> -->

</body>
</html>

css代码

*{
	margin: 0;
	padding: 0;
}
.w{
	width: 550px;
	margin: auto;
}
li{
	list-style: none;
}
.header{
	width: auto;
	height: 60px;
	/* margin: auto; */
	/* background-color: aqua; */
}
.nav{
	float: left;
	width: 497.39px;
	height: 60px;
	padding-left: 24px;
	/* background-color: antiquewhite; */
}
.nav ul li{
	float: left;
}
.nav ul li a{
	margin-top: 19px;
	margin-right: 31px;
	display: block;
	/* height: 24px; */
	/* padding-right: 40px; */
	line-height: 42px;
	color: #222;
	font: 13px/23px Arial,sans-serif;
	text-decoration: none;
	
}
.nav ul li a:hover{
	color: rgb(49,94,251);
}
.nav1{
	float: right;
	width: 138px;
	height: 60px;
	padding-right: 24px;
	color: #222222;
}
.nav1 ul li{
	float: left;
}

.shez{
	margin-top: 19px;
	margin-left: 32px;
	display: inline-block;
	color: #222;
	font: 13px/23px Arial,sans-serif;
	text-decoration: none;
}
.nav1 ul li a{
	float: right;
	width: 48px;
	height: 24px;
	border-radius: 6px;
	display: block;
	margin-top: 18px;
	margin-left: 32px;
	font-size: 13px;
	line-height: 23px;
	background-color: rgb(78,110,242);
	color: rgb(255,255,255);
	text-decoration: none;
	line-height: 24px;
	text-align: center;
}
.nav1 ul li a:hover{
	background-color: rgb(49,94,251);
}
.zhongj{
	
	width: 1519.2px;
	height: auto;
 
	
}
.baidu{
	width: 270px;
	height: 129px;
	margin: auto;
    margin-top: -14.5px;
 	/* background-color: aquamarine; */
}
.baidu a{
	display: block;

}
.tup{
	width: 100%;
	height: 100%;
	margin: auto auto;
}
.search{
	width: 654px;
	height: 44px;
	/* background-color: bisque; */
	margin: auto;
	margin-top: 15px;
}
.search input{
	float: left;
	width: 544px;
	height: 40px;
	border-radius: 10px 0 0 10px;
	border: 2px solid #c4c7ce;
	border-right: 0;
	outline: 0;

	background: url(../images/xiangji.png) no-repeat 502.5px 5.4px;
	background-size: 28px 25.5px;
	
}

.xiangji{
	float: left;
	width: 24px;
	height: 20px;
}
.search button{
	float: left;
	width: 108px;
	height: 44px;
	border-radius: 0 10px 10px 0;
	border: 0;
	outline: 0;
	font-size: 17px;
	font-weight: 400;
	color: white;
	background-color: rgb(78,110,242);
}
.btn:hover{
	background-color: rgb(49,94,251);
}
.resou{
	
	width: 670px;
	height: auto;
	/* background-color: #abcc76; */
	margin: 45px auto 0;
}
.reh{
	float: left;
	height: 24px;
	width: 100%;
	margin-bottom: 4px;
	
}
.bdrs{
	
	color: #000000;
	font: 14px/24px Arial,sans-serif;
	text-decoration: none;
}
.huan{ 
	color: #9195a3;
		font: 13px/23px Arial,sans-serif;
        float: right;
		padding-right: 2px;
		margin-right: 10px;
}
.huanyih{
	float: right;
	display: block;
    padding-top: 2px;
    margin-right: 2px;
	width: 17px;
	height: 17px;
}
.huan:hover{
	color: rgb(49,94,251);
}
.ul{
	width: 670px;
	height: auto;
}
.biaoge{
	float: left;
}
.biaoge2{
	float: right;
}
.biaoge2 li{
	list-style: none;
}
.biaoge a{
	font: 14px/24px Arial,sans-serif;
	color: #000000;
	text-decoration: none;
}
.biaoge2 a{
	font: 14px/24px Arial,sans-serif;
	color: #000000;
	text-decoration: none;
}
.biaoge a:hover{
	color: rgb(49,94,251);
}
.biaoge2 a:hover{
	color: rgb(49,94,251);
}
.odd1{
	margin-right: 59px;
	color: rgb(254,45,70);
}
.odd2{
	margin-right: 59px;
	color: rgb(255,107,82);
}
.odd3{
	margin-right: 59px;
	color: rgb(250,169,68);
}
.even1{
	margin-left: 59px;
	color: rgb(145,151,163);
}
.even2{
	margin-left: 59px;
	color: rgb(145,151,163);
}
.even3{
	margin-left: 59px;
	color: rgb(145,151,163);
}
.hot{
	float: right;
	display: block;
	padding-top: 2px;
	/* margin-right: -3px; */
	width: 17px;
	height: 17px;
}
.xin{
	float: right;
	display: block;
	padding-top: 2px;
	margin-left: 8px;
	width: 17px;
	height: 17px;
}
.dibu{
	width: 1519.2px;
	height: 40px;
	/* background-color: #0EBE90; */
	position: fixed;
	bottom: 0;
	padding-top: 25px;
	padding-left: 140px;
	margin-bottom: -4px;
}
.dibu a{
	margin-right: 25px;
	display: inline;
	font-size: 12px;
	font-family: "PingFang SC",Arial,"Microsoft YaHei",sans-serif;
	color: rgb(193,193,211);
	text-decoration: none;
	
}
.dibu a:hover{
	color: black;
}

码农公寓

相关文章