微信第三次作业（仿作百度页面）

最新推荐文章于 2022-07-14 21:08:47 发布

Nil_cxc

最新推荐文章于 2022-07-14 21:08:47 发布

阅读量270

点赞数 3

本文链接：https://blog.csdn.net/weixin_51923997/article/details/117598812

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>微信第三次作业</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.zbc{
				height: 40px;
				margin: 10px;
				/* background-color: pink; */
				line-height: 40px;
				display: inline-block;
			}
			.nav{
				width: 1020px;
				/* background-color: pink; */
				margin-right: 0px;
				display: inline-block;
				text-align: right;
				font-size: 13px;
			}
			/* 左上角链接 */
			.zbc a{
				color: black;
				padding: 0 13px;
				text-decoration: none;
				font-size: 13px;
			}
			.zbc a:hover{
				color:#52baff;
			}
			
			.shezhi1 {
				display: inline-block;
				padding: 0 10px;
			}
			.shezhi2 {
			        list-style: none;
			        position: absolute;
			        display: none;
			        position: absolute;
			        /* background-color: pink; */
			        min-width: 78px;
			        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
			        padding: 2px 14px;
			        line-height: 30px;
			        z-index: 10px;
					display: block;
					text-align: right;
					}
			.nav a{
				color: black;
				padding: 0 13px;
				text-decoration: none;
				font-size: 13px;
				display: block;
			    text-align: right;
				margin-right: 0px;	
			}
			.nav span{
				font-szie: 13px;
			}
			.nav a:hover{
				color:#52baff;
			}
			
			
			.box{
				width: 800px;
				height: 300px;
				margin:	36px auto;
				text-align: center;
			}
			.box img{
				height: 100px;
			}
			input[type="text"] {
			        outline: none;
			        border: 2px solid #a7aab5;
			        height: 46px;
			        width: 550px;
			        box-sizing: border-box;
			        text-indent: 6px;
			        font-size: 16px;
			        border-radius: 10px 0 0 10px;
					background: #fff 
					url(../baidu/tupian.png)
					no-repeat;
					background-position: right;
					;
			      }
			input[type="submit"]{
					 height: 45px;
					 width: 100px;
					 color: white;
					 font-size: 17px;
					 background-color: #4e6ef2;
					 border-radius:0 10px 10px 0 ;
				 }
			  /* 输入框聚焦 */
			input[type="text"]:focus {
			        color: #000;
			        background-color: #fff;
			        border-color: #4e6ef2 !important;
			        height: 45px;
			        border-radius: 10px 0 10px 10px;
			      }
			.dibu{
					text-align: center;
					/* padding-left: 30px;
					position: fixed;
					margin-bottom: 100px;
					left: 0;
					height: 40px;
					line-height: 40px;
					text-align: center;
					font-size: 10px;
					background-color: #fbfbfb;
                    /* position: relative; */
					margin-top: 280px;
					height: 500px;
			}
			.dibu a{
				text-decoration: none;
				font-size: 12px;
				padding: 0 13px;
			}
			.dibu a:hover{
				color: #000000;
			}
		</style>
	</head>
	<body>
		<div class="zbc">
			<a href="http://news.baidu.com/" target="_blank" class="top-left" >新闻</a>
			<a href="https://www.hao123.com/" target="_blank" class="top-left" >hao123</a>
			<a href="https://map.baidu.com/@13035085.64,4303516.59,12z" target="_blank" class="top-left" >地图</a>
			<a href="https://live.baidu.com/" target="_blank" class="top-left" >直播</a>
			<a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank" class="top-left" >视频</a>
			<a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com" target="_blank" class="top-left" >贴吧</a>
			<a href="https://xueshu.baidu.com/" target="_blank" class="top-left" >学术</a>
			<a href="https://www.baidu.com/more/" target="_blank" class="top-left" >更多</a>
		
		</div>
		<div class="nav">
			
			<span class="top-right">
				<div class="shezhi1"> 
					<span>设置</span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>登录</span>
						<div class="shezhi2">
					        <a href="" target="_blank">搜索设置</a>
							<a href="" target="_blank">高级设置</a>
							<a href="" target="_blank">关闭预测</a>
							<a href="" target="_blank">隐私设置</a>
							<a href="" target="_blank">关闭热榜</a>
						</div>
			    </div>
			</span>	
		</div>
		<div class="box">
			<div>
			<a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=88093251_22_hao_pg&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs
			" target="_blank"><img src="../baidu/baidu.png" alt="" title="点击一下,了解更多"></a>
    	    </div>
		    <form action="">
			  <input type="text"><input type="submit" value="百度一下"></inpt>
		    </form>
		</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://home.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">京公网安备11000002000001号</a>
			<a href="https://beian.miit.gov.cn/#/Integrated/index">京ICP证030173号</a>
		</div>
	</body>
</html>

Nil_cxc

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
微信第三次作业（仿作百度页面）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>微信第三次作业</title> <style> *{ padding: 0; margin: 0; } .zbc{ height: 40px; margin: 10px; /* background-color: pink; */ .
复制链接

扫一扫