html+css模仿百度首页，新手小练习，代码比较繁琐，还望各位指教。

最新推荐文章于 2024-09-23 14:19:06 发布

weixin_41788565

最新推荐文章于 2024-09-23 14:19:06 发布

阅读量2.3k

点赞数

分类专栏：练手小页面文章标签： html css

本文链接：https://blog.csdn.net/weixin_41788565/article/details/83790745

版权

练手小页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百度首页</title>
<style type="text/css">
    .head-big{background-color: #FEFEFE;width: 1366px;height: 
    	24px;border-bottom:1px solid #EAEAEA;}
    .head-small1{margin-left: 0px;width: 262px;height: 100%;float: left;margin-top: -3px;}
    .head-small2{width: 540px;height: 100%;float: right;margin-top: -3px;}
    .light-font-option{width: 86px;height: auto;margin-left: 19px;background-color: #398bfb;
    	height: 100%;font-size: 13px;text-align: center;text-decoration: none;color: white; }
    .light-font{display: inline-block;color:#555;text-decoration: underline;margin-left:19px;
    	line-height:15px;font-size: 13px;	}
    .heavy-font{display: inline-block;font-weight: bold;color: #555;text-decoration: underline;
    	margin-left: 19px;line-height: 15px;font-size: 13px; }
    .body-middle{width: 643px;height: 260px;margin-left: 355px;margin-right: 355px;
    	margin-top: 0px;margin-bottom: 80px;}
    .log{width:100%;height:135px;margin:30px auto 25px;text-align: center;}
    .search{position: relative;bottom: 20px;padding: 0;width:100%;height:40px; }
    .input{float: left;padding: 0px;width: 534px;height: 37px;border: 1px solid #3688FD;
    	display: inline-block; }
    .sub{padding: 0px;width: 102px;height: 39px;padding: 0;border: 0;background-color: #38f;
    	font-size: 16px;color: white;font-weight: normal;display: inline-block;}
    .bottom{width: 895px;height: 405px;border: 1px solid #E8E8E8;position: relative; bottom: 89px;
        left: 225px; }

    .bottom-firstline{width: 100%;height: 40px;border-bottom: 1px solid #E8E8E8;
    	display: inline-block;}

    .bottom-firstline-1{width: 124px;height: 100%;background-color: #999CA1;font-size: 13px;
    	color: #FEFEEF;text-align: center;line-height: 40px;font-weight: bold;
    	display: inline-block;float: left;}
    .bottom-firstline-body{display: inline-block;width: 160px;height: 40px;
    	background-color: #FEFEFE;float: left;}
    .bottom-firstline-font{width: 80px;height: 100%;background-color: #FEFEFE;color: #323232;
    	font-size: 13px;display: inline-block;line-height: 40px;float: left;text-align: center; }
    .bottom-firstline-font:hover{background-color: #B2B5BA;color: #FEFEFE;}
    .bottom-secondline{width: 844px;height: 30px;background-color: white;
    	border-bottom: 1px #EFEFEF solid;font-size: 13px;font-weight: bold;color: #000000;
    	position: relative;top: 12px;left: 24px;line-height: 30px;}

    .bottom-thirdline{margin-top: 28px;width: 893px;height: 30px;}

    .bottom-thirdline-font{display: inline-block;font-size: 13px;margin-left: 25px;
    	line-height: 30px;}

    .bottom-fourthline{position: relative;bottom: 70px;width: auto;height: 17.78px;
    	text-align: center;}

    .bottom-fifthline{margin-top: -70px;width: auto;height: 21.98px;text-align: center; }

    .setfont-big{font-size: 12px;color: #989898;text-decoration: underline;}

    .setfont-small{font-size: 12px;color: #989898;}

</style>
</head>
<body>
	<div class="head-big">
	<div class="head-small1">
		<a href="#" class="light-font" title="天气" >杭州天气</a>
		<a href="#" class="light-font" title="换肤">换肤</a>
		<a href="#" class="light-font" title="消息">消息</a>
    </div>
    <div class="head-small2">
		<a href="#" class="heavy-font">新闻</a>
		<a href="#" class="heavy-font">hao123</a>
		<a href="#" class="heavy-font">地图</a>
		<a href="#" class="heavy-font">视频</a>
		<a href="#" class="heavy-font">贴吧</a>
		<a href="#" class="heavy-font">学术</a>
		<a href="#" class="light-font">登录</a>
		<a href="#" class="light-font">设置</a>
		<select class="light-font-option">
			<option>更多产品</option>
			<option>糯米</option>
			<option>音乐</option>
			<option>图片</option>
			<option>知道</option>
			<option>文库</option>
			<option>风云榜</option>
			<option>百度推广</option>
		</select>
		</div>
		</div>
	<div class="body-middle">
		<div class="log">
		<img src="C:\Users\jeck\Desktop\百度首页模拟\baidulog.png" title="百度一下，你就知道" width="270px" height="129px" >
		</div>
		<div class="search">
		<input class="input" type="text" name="ser"><input class="sub" type="submit" value="百度一下">
		</div>
	</div>
	<div class="bottom">
		<div class="bottom-firstline">
			<div class="bottom-firstline-1">我的关注</div>
			<div class="bottom-firstline-body">
				<span class="bottom-firstline-font">推荐</span>
				<span class="bottom-firstline-font">导航</span>
			</div>
		</div>
		<div class="bottom-secondline">▶ 我的导航（0）</div>
		<div>
			<div class="bottom-thirdline">
				<span class="bottom-thirdline-font">✚ 自定义</span>
			</div>
		</div>
	</div >
	<div class="bottom-fourthline">
		<span><a href="#" class="setfont-big">设为首页</a></span>&nbsp;
		<span class="setfont-small">@2018 Baidu </span>
		<span><a href="#" class="setfont-big">使用百度前必读</a></span>&nbsp;
		<span><a href="#" class="setfont-big">意见反馈</a></span>&nbsp;
		<span class="setfont-small">京ICP证030173号</span>
	</div>
	<div class="bottom-fifthline">
		<span class="setfont-small">京公网安备11000002000001号</span>
	</div>
</body>
</html>