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

注意: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;}


 

效果:

 

评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值