CSS学习

最新推荐文章于 2022-10-13 11:08:50 发布

代替太阳

最新推荐文章于 2022-10-13 11:08:50 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/qq_44906556/article/details/104207996

版权

新手模拟百度网页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模拟百度首页</title>
<link rel="stylesheet" type="text/css" href="css/baidu01.css" />
<link href="img/1.1.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">
   <img id="img_logo" src="img/3.1.gif" width="270px" height="129px">
   <br>
   
   <input type="text" name="" id="" value=""/> 
   <input type="submit" name="" id="" value="百度一下"/>
 </div>
 <div id="footer">
 <img src="img/2.1.jpg">
 
 </div>
 

</body>
</html>

baidu01.css

@charset "UTF-8";
*{margin:0px;padding:0px;}
#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:500px;
	line-height:24px; 
	}
#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/2.1.jpg);
	background-repeat:no-repeat;
	background-position-x:500px;
	background-position-y:3px;
	 }
input[type=submit]{
	width:100px;
	height:36px;
	font-size:15px;
	color:#fff;
	background-color:#2d78f4;
	border:solid #2d78f4;
	letter-spacing:1px;
	position:relative;
	right:5px;
	top:1px;
	}
#footer{
	width:100%;
	height:206px;
	text-align:center;
	}
#header_nav li a:hover{color:blue;}

！！！图片需要添加。

代替太阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习

新手模拟百度网页<!DOCTYPE html><html><head><meta charset="UTF-8"><title>模拟百度首页</title><link rel="stylesheet" type="text/css" href="css/baidu01.css" /><lin...
复制链接

扫一扫