前端学习——模拟百度首页

最新推荐文章于 2024-04-30 23:00:09 发布

野生小米椒

最新推荐文章于 2024-04-30 23:00:09 发布

阅读量3.9k

点赞数 25

分类专栏：三大基础语言

本文链接：https://blog.csdn.net/x1037490413/article/details/88318949

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

注意：1：模拟百度首页时，有些数据可以看看百度首页的设置，打开百度首页，按f12键，然后点这个小箭头再右键点击你需要查看的地方。

2：将百度首页分为三个div，头部，中部和底部，为了区分开来，可以先分别设置不同的背景色，完成后再删除。

HTML代码：

<html>
	<head>
		<title>百度一下，你就知道</title>
		<meta charset="UTF-8"/>
		<!--引入外部声明的css文件-->
		<link rel="stylesheet" type="text/css" href="css/baidu.css"/>
		<!--引入网页标题，就是左上角的那个小图片-->
		<link href="img/title.ico" rel="shortcut icon"/>
	</head>
	<body>
		
		<div id="header">
			<ul id="header-nav"><!--命名规则：父-自己的id-->
				<li><a href="新闻"></a></li>
				<li><a href="">hao123</a></li>
				<li><a href="">地图</a></li>
				<li><a href="">视频</a></li>
				<li><a href="">贴吧</a></li>
				<li><a href="">学术</a></li>
				<li><a href="">登录</a></li>
				<li><a href="">设置</a></li>
			</ul>
		</div>
		<div id="main">
		<img id="img-logo"src="img/5f8dcf06d74b796a51269303a0d2e07b_bd_logo1.jpg"width="270px" height="129px"/>	
		<form action="https://www.baidu.com/s" method="get"><br />
		<input type="text" name="wd" id="" value="" />
		<input type="submit" name="" id="" value="百度一下" />
		</div>
		<div id="footer">
			<img src="img/10.jpg"/>
		</div>
	</body>
</html>

(1)margin:0px auto :作用于块级元素，对块级元素进行居中

(2)text-align:center:作用于内联元素，必须放在要居中的内联元素所在的块级元素。

css代码：

/*margin：层的边框以外留的空白*/
/*padding：层的边框到层的内容之间的空白*/ 
/*设置页面的基础样式（全部）*/
*{margin: 0px;padding: 0px;}
/*设置头部样式*/
#header{height:100px;width:100%;}
/*设置导航栏样式*/
#header-nav li{float:left;list-style-type:none;margin-left: 21px;}
#header-nav li a{color: #333;font-weight: 700;line-height: 24px;font-size: 13px;}
#header-nav{position: absolute;right: 92px;top: 26px;}
/*设置中间样式*/
#main{height: 300px;width:100%;text-align: center;}/*margin 是指当前元素到相邻元素间的距离。text-align 指当前元素中内容的对其方式。*/
#img-logo{margin-top: 30px;margin-bottom: 21px;}
/*属性选择器,搜索框样式*/
input[type=text]{height: 34px;width: 539px;border: solid 1px #4992FF;background-image: url(../img/9.jpg);background-repeat: no-repeat;background-position-x: 490px;background-position-y:1px;}
/*浏览器中，右是x轴，下是y轴*/
input[type=submit]{width: 100px;height:33px;font-size: 15px;color: #fff;background-color:#2d78f4;border: solid #2d78f4;letter-spacing: 1px;position: right:5px;top: 1px;}
/*设置底部样式*/
#footer{height: 405px;width: 100%;text-align: center;}
/*用伪类给标签添加样式*/
#header-nav li a:hover{color:blue;}

效果：