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

最新推荐文章于 2024-04-25 20:22:26 发布

Lxingmo

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量1.4k

点赞数

分类专栏： html 文章标签： html css

本文链接：https://blog.csdn.net/Lxingmo/article/details/70159688

版权

html 专栏收录该内容

0 篇文章 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>

效果并不是很好，还有百度页面在笔记本和台式机的显示不一样，哎真是学的太浅什么都不懂，以后有时间再改吧

推荐学习基础网站：http://www.imooc.com/learn/9

w3school 可以查基本语法

Lxingmo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html第一次尝试（百度页面）

最近学了html和css，于是就找了个百度页面案例来练练手百度一下，你就知道.top{ width:100%; height:64px; margin-top:17px;}.top>.title{ height:64px; float:right;}.top>.title>a{ font-siz
复制链接

扫一扫