html第一次尝试（百度页面）

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

原创最新推荐文章于 2024-09-23 14:19:06 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

html 专栏收录该内容

0 篇文章

订阅专栏

最近学了html和css，于是就找了个百度页面案例来练练手

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百度一下，你就知道</title>
<style type="text/css" media="screen">
.top{
width:100%;
height:64px;
margin-top:17px;
}
.top>.title{
height:64px;
float:right;
}
.top>.title>a{
font-size:13.5px;
font-family:"宋体";
color:black;
text-decoration:underline;
}
.top>.title>.bold{
font-weight:bold;
}
.top>.title>.list{
border:0;
height:25px;
width:60px;
background:#06F;
color:#fff;
}
.pic{
text-align:center;
margin-top:25px;
}
.search{
text-align:center;
margin-top:20px;
}
.input{
width:540px;
height:30px;
}
.btn{
border:0;
width:100px;
height:36px;
background:#06F;
font-size:15px;
color:#fff;
}
.bottom-one{
text-align:center;
margin-top:220px;
}
.page1{
font-size:12px;
font-family:"微软雅黑";
font-weight:bold;
color:#666;
margin-top:0px;
}
.bottom-two{
text-align:center;
margin-top:17px;
}
.page2{
font-size:12px;
font-family:"微软雅黑";
color:#999;
text-decoration:underline;
}
.page3{
font-size:12px;
font-family:"微软雅黑";
color:#999;
}
</style>
</head>
<body>
<div class="top">
<div class="title">
<a class="bold" href="#">新闻</a>   
<a class="bold" href="#">hao123</a>   
<a class="bold" href="#">地图</a>   
<a class="bold" href="#">视频</a>   
<a class="bold" href="#">贴吧</a>   
<a class="bold" href="#">学术</a>   
<a href="#">登录</a>   
<a href="#">设置</a>   
<input class="list" type="submit" value="更多产品" name="submit" /> 
</div>
</div>
<div class="body">
<div class="pic">
<img src="log.png" width="233px" height="83">
</div>
</div>
<div class="search">
<from>
<label for="search"></label>
<input class="input" type="text" name="search" id="search"><input class="btn" type="submit" name="submit" value="百度一下" name="submit">
</from>
</div>
<div class="bottom-one">
<img src="2.png" width="62" height="62">
<br />
<p class="page1">手机百度</p>
</div>
<div class="bottom-two">
<a class="page2" href="#">把百度设为主页</a>    
<a class="page2" href="#">关于百度</a>    
<a class="page2" href="#">About BaiDu</a>    
<a class="page2" href="#">百度推广</a>    
<br />
<span class="page3">©2017 Baidu</span>
<a class="page2" href="#">使用百度前必读</a>
<span class="page3">京ICP证030173号 </span>   
<a class="page2" href="#">京公网安备11000002000001号</a>
</div>
</body>
</html>