html和css制作百度界面
2024-09-05 10:04:19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度</title>
<link rel="stylesheet" href="baidu.css">
</head>
<body>
<header>
<div class="header">
成都: 28℃ 良 53 | <u>换肤</u> <u>消息</u> <u>显示频道</u> <u><b>新闻</b></u> <u><b>hao123</b></u> <u><b>地图</b></u> <u><b>视频</b></u> <u><b>贴吧</b></u> <u><b>学术</b></u> <u>设置</u>
</div>
<div class="gd"><b> 更多产品</b></div>
</header>
<section>
<div class="tp">
<img class="tutu" src="baidu.png">
</div>
<div class="section">
<div class="srk">
<div class="baidu">百度一下</div>
<div class="png">
<img src="camera.png">
</div>
</div>
</div>
</section>
<footer>
<div class="footer">
<div class="sy"><u>设为首页</u> ©2019 Baidu <u>使用百度前必读</u> <u>意见反馈</u> 京ICP证030173号
<br>京公网安备11000002000001号</div>
</div>
</footer>
</body>
</html>
.header{
background-color: #ffffff;
color: #435862;
font-size: 10px;
border-bottom: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
line-height: 20px;
}
.tutu{
margin: auto;
display: block;
padding-top: 151px;
width: 170px;
height: 55px;
}
.tp{
width: 100%;
}
.section{
width: 100%;
}
.srk{
margin: auto;
display: block;
margin-top: 30px;
border: 1px solid #b7b7b7;
line-height: 35px;
width: 530px;
height: 29px;
}
.baidu{
color: white;
background-color: #3389ff;
width: 100px;
height: 31px;
text-align: center;
float: right;
margin-top: -1px;
margin-right: -1px;
margin-bottom: 2px;
}
.png{
float: right;
padding-right: 10px;
padding-top: 1px;
}
.footer{
width: 100%;
}
.sy{
margin: auto;
display: block;
margin-top: 300px;
position: absolute;
left: 620px;
font-size: 10px;
color: #b7b7b7;
text-align: center;
line-height: 20px;
}
.gd{
line-height: 20px;
font-size: 11px;
color: white;
background-color: #3389ff;
width: 60px;
height: 24px;
position: absolute;
right: 5px;
top: 0;
padding-top: 5px;
padding-left: 5px;
}
最新文章
- C++代码重构——从C global到C++ template
- 关于java 定时器的使用总结
- java 事件监听 - 键盘
- 第五天 loadmore
- C# 调用百度地图Web服务API
- linux下安装openssh-server
- (一)解决Sublime Text 2中文显示乱码问题
- ContextLoaderListener作用详解(转)
- python 验证码
- lufylegend库 LGraphics扭曲图片
- docker(1)应用场景以及安装
- Android开发—— Tablayout的使用
- .NetCore 下开发独立的(RPL)含有界面的组件包 (二)扩展中间件及服务
- [剑指Offer]11-旋转数组的最小数字(二分查找)
- Android Dagger 2
- 【Oracle】Oracle自定义的函数与过程
- Spark1.6 Idea下远程调试
- 葡萄城报表介绍:B/S 报表软件
- Linux服务器同步时间
- opencv:基于颜色空间的肤色检测方法