CSS学习之模仿百度首页

最新推荐文章于 2021-04-07 13:38:06 发布

playboy-jordan

最新推荐文章于 2021-04-07 13:38:06 发布

阅读量660

点赞数

分类专栏： # CSS教程文章标签： javascript css vue.js html

本文链接：https://blog.csdn.net/weixin_44853669/article/details/106845099

版权

CSS教程专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>百度首页模拟</title>
		<meta charset="UTF-8"/>
		<!--
			模拟百度首页：
				1、首页使用css+div进行页面的布局
					css代码一般使用外联方式进行开发
				2、使用HTML进行每一个块中的内容填充			
		-->
		<!--引入外部声明的css文件-->
		<link rel="stylesheet" type="text/css" href="css/baidu01.css"/>
		<!--引入网页标题图片-->
		<link href="img/title.ico" rel="shortcut icon"/>
	</head>
	<body>
		<!--声明头 部分-->
		<div id="header">
			<!--声明导航栏-->
			<ul id="header_nav">
				<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">
			<!--引入百度logo-->
			<img id="img_logo" src="img/bd_logo.png" width="270px" height="129px"/>
			<br />
			<!--声明搜索框和按钮-->
			<input type="text" name="" id="" value="" />
			<input type="submit" name="" id="" value="百度一下" />
		</div>
		<!--声明底部-->
		<div id="footer">
			<!--声明网站声明内容-->
			<img src="img/footer.png"/>
		</div>
	</body>
</html>

baidu01.css

/*设置页面的基础样式*/
	*{margin: 0px;padding: 0px;}
/*设置header头部分的大小*/
	#header{width: 100%;height: 45px;}
	/*设置导航栏样式*/
		#header_nav{position: absolute;right:92px;top:26px;}
		#header_nav li{float: left;list-style-type: none;margin-left: 24px;}
		#header_nav li a{color:  #333;font-size: 13px;font-weight: 700;line-height: 24px;}
/*设置main主体部分的大小*/
	#main{width:100%;height: 384px;text-align: center;}
		#img_logo{margin-top: 30px;margin-bottom: 21px;}
		/*设置搜索框样式*/
		input[type=text]{height: 34px;width: 539px;border: solid 1px #4992FF;background-image: url(../img/inp.png);background-repeat: no-repeat;background-position-x: 500px;background-position-y: 3px;}
		input[type=submit]{width: 100px;height: 34px;font-size: 15px;color: #fff;background-color: #2d78f4;border: solid #2d78f4;letter-spacing: 1px;position: relative;right: 5px;top:1px;}
/*设置footer底部部分的大小*/
 	#footer{width: 100%;height: 206px;text-align: center;}
/*使用伪类给标签添加样式*/
	#header_nav li a:hover{color: blue;}

bd_logo
在这里插入图片描述
footer

playboy-jordan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习之模仿百度首页

<html> <head> <title>百度首页模拟</title> <meta charset="UTF-8"/>   <link rel="stylesheet"
复制链接

扫一扫