利用HTML5仿制百度首页

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

Watermelon_devil

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

阅读量794

点赞数

分类专栏： html 文章标签： html5 前端 html

本文链接：https://blog.csdn.net/Watermelon_devil/article/details/125399155

版权

本文介绍了如何利用HTML5来仿制百度首页。通过设置div的尺寸、margin属性以及运用float-left实现元素的左对齐布局，成功复刻了百度首页的布局。最终展示出了仿制的成果。

摘要由CSDN通过智能技术生成

制作百度首页，要用到div进行分块，需要对快的位置进行控制，一般有

对div进行规范大小width，height分别对应宽度高度

margin：有对div进行定位有margin-top,margin-left,margin-right,margin-buttom

float-left:吧div元素进行从左到右排列，了解这些事后就能仿制一个百度首页了

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>百度一下，你就晓得</title>
		<style>
			a {
				color:#999;
			}
			.div_title{
				width:100%;
				height:40px;
			}
			.div_head{
				width:100%;
				height:125px;
				margin-top:85px;
			}
			.div_search{
				width:650px;
				height:30px;
				margin-top:15px;
				margin:0 auto;
			}
			.div_erWeiMa{
				width:100%;
				height:90px;
				margin-top:27%;
			}
			.div_foot{
				width:40%;
				height:30px;
				margin-top:20px;
				margin-left:30%;
				color:#999;
				text-decoration:none;
				text-align: center;
				line-height: 22px;