百度首页元素详解：前端与交互设计要点-优快云博客

本文链接：https://blog.youkuaiyun.com/tubulvxing1/article/details/118634721

百度首页。小练习嘛，写的是比较简单的那种，（其中类名的命名方式不建议跟我这样，我这样写是为了省事，大家在命名的时候一定要见名知意，不能只图方便）仅供参考！

<!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>
        <style>
            body{
                text-align: center;
            }
            .one1{
                font-weight: bold;
            }
            .one2{
                height: 50px;
            }
            .one3{
                padding-bottom: 20px;
            }
            .two{
                width: 16px;
                height: 16px;
            }
            .three{
                font-size: 12px;
            }
            .aa{
                color: #5D64BE;
            }
            .four1{
                width: 520px;
                height: 33px;
            }
            .four2{
                width: 105px;
                height: 36px;
            }
        </style>
    </head>
<body>
    <div>
		<div class="one3">
		<img src="img/bd_logo1.png" class="one"><br>
		</div>
	<p>
	<a href="#">新 闻</a>
	<span class="one1">网 页</span> 
	<a href="#">贴 吧</a> 
	<a href="#">知 道</a> 
	<a href="#">音 乐</a> 
	<a href="#">图 片</a> 
	<a href="#">视 频</a> 
	<a href="#">地 图
	</a>
	</p>　
	<div class="one2">
		<input type="text" class="four1">&nbsp;&nbsp;&nbsp;
		<input type="submit" value="百度一下" class="four2">
	</div>
	<p>
		<a href="#">百科</a>　
		<a href="#">文库</a>　
		<a href="#">hao123</a> 
		<span class="aa">|</span> 
		<a href="#">更多>></a></p>
	<p><img src="img/ditu.jpg" class="two"><a href="#" class="three">百度地图带你吃喝玩乐，全心全意为人民服务</a></p>
	<p><a href="#" class="three">把百度设为主页 安装百度卫士</a><br>
	<a href="#" class="three">加入百度推广</a> <span class="aa">|</span> 
	<a href="#" class="three">搜索风云榜</a> <span class="aa">|</span> 
	<a href="#" class="three">关于百度</a> <span class="aa">|</span> 
	<a href="#" class="three">About Baidu</a><br>
	<span class="three">&copy;2013 Baidu 使用百度前必读 京ICP证030173号</span></p>
	</div>
</body>
</html>