CSS学习之模仿百度首页

<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
CSS学习之模仿百度首页_第1张图片
footer
CSS学习之模仿百度首页_第2张图片
在这里插入图片描述
CSS学习之模仿百度首页_第3张图片

你可能感兴趣的:(#,css教程,javascript,css,vue.js,html)