【Web】CSS（No.24）Css页面布局经典案例（一）《模仿百度首页》

最新推荐文章于 2024-04-03 16:27:13 发布

Sherry Lupus

最新推荐文章于 2024-04-03 16:27:13 发布

阅读量455

点赞数 2

分类专栏： Web-Css 文章标签： Web Css

本文链接：https://blog.csdn.net/qq_43251850/article/details/91490536

版权

Web-Css 专栏收录该内容

25 篇文章 5 订阅

订阅专栏

需要素材点击图片联系我或私信、评论

效果图：

在这里插入图片描述

html源码：

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/百度首页.css">
  </head>
  <body>
	<div class="background">
	  <div class="navigationbar clearfix" >
	    <ul>
	      <li><a href=""><b>更多产品</b></a></li>
	      <!-- 父子关系 -->
	      <li class="menu">
	      		<a href="" class="set">
		      		<b>设置</b>
	      		</a>
	      		<!-- 二级菜单的列表 -->
	      		<ul class="display">
				      <li><a href="">搜索设置</a></li>
				      <li><a href="" >高级搜索</a></li>
				      <li><a href="">关闭预测</a></li>
				      <li><a href="">隐私设置</a></li>
			    </ul>
	      </li>
	      <li><a href=""><b>登录</b></a></li>
	      <li><a href=""><b>学术</b></a></li>
	      <li><a href=""><b>贴吧</b></a></li>
	      <li><a href=""><b>视频</b></a></li>
	      <li><a href=""><b>地图</b></a></li>
	      <li><a href=""><b>ao123</b>h</a></li>
	      <li><a href=""><b>新闻</b></a></li>
	    </ul>
	  </div>
	  
	  <div class="baidutu">
	    <img src="img/bdlogo.gif" alt="" align="center" >
	  </div>
	  <div class="shuru">
	  	<span class="icon"></span>
        <input type="text" class="kuang"><input class="anniu" type="button" value="百度一下" >
	  </div>
	  <div class="erweima"><img src="img/erweima.png" alt=""></div>
	  <div class="baidu"><a href="">百度</a></div>
	  <div class="bottom1">
	    <ul>
	      <li><a href="">把百度设为主页</a></li>
	      <li><a href="">关于百度</a></li>
	      <li><a href="">About Baidu</a></li>
	      <li><a href="">百度推广</a></li>
	    </ul>
	    
	  </div>
	  <div class="bottom2">
	    <ul >
	      <li>@2019&nbsp;Baidu&nbsp;</li>
	      <li><a href="">使用百度前必读</a></li>
	      <li><a href="">意见反馈&nbsp;</a></li>
	      <li>京ICP证030173号</li>
	      <li><img src="img/xiabiao.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;</li>
	      <li><a href="">京公网安备11000002000001号</a></li>
	      <li><img src="img/xunzhang.png" alt=""></li>
	  </ul>
	  </div>
	</div>
  </body>
</html>

css源码

*{
	margin:0;
	padding: 0;
}

.background,.navigationbar,.baidutu,.shuru,.erweima,.baidu,.bottom1,.bottom2{
  width: 100%;
  text-align: center;
  margin: 0 auto;

}
.clearfix:after { 
          content: "."; 
          display: block;
          height: 0; 
          clear: both; 
          visibility: hidden;  
      } 
.baidutu img{
	margin: 43px 0 43px;
	width: 234px;
	height: 74px;
}
.navigationbar>ul>li>a{
	color: black;
    font-size:12px;
    font-size: 15px;
}
.navigationbar>ul>li>a:hover{
	color: blue;
}
.navigationbar>ul>li {
	float: right;
	list-style: none;
	padding:30px 10px 0;
	position: relative;
}
.navigationbar>ul>li.menu:hover .display{
	display: block;
}
.display{
	display: none;
}

.display li{
	list-style: none;
	width: 80px;
	height: 20px;
	margin: 5px 0 5px;
	font-size: 14px;
}

.display li:hover{
	background-color: blue;
}
.display{
	position: absolute;
	left: -20px;
	top: 50px;
}

.display li a{
	text-decoration: none;
	color: black;
}
.shuru{
	width: 709px;
	height: 40px;
	position: relative;
}

.icon{
	width: 18px;
	height: 16px;
	position: absolute;
	right: 130px;
	top: 10px;
	background: url(../img/xj.png) no-repeat 0px 0px;
}
.icon:hover{
	background-position: 0px -20px;
}



.kuang{
	width:595px; 
	height: 38px;
	border: 1px solid #317EF3;
	float: left;
}

.anniu{
	width:112px; 
	height: 40px;
	background-color: #3385FF;
	border: 0;
	float: left;
}
.erweima{
	padding-top: 150px;
}
.baidu{
	padding-top: 1px;
}

.bottom1 {
	width: 358px;
	height: 14px;
	font-size: 13px;

}
.bottom2 {
	width: 572px;
	height: 16px;
	color: #999999;
	font-size: 13px;
}
.bottom1 ul {
	overflow: hidden;
}
.bottom2 ul {
	overflow: hidden;
}
.bottom1 ul li{
	float: left;
    list-style: none;
    margin: 15px 10px 10px;
}
.bottom2 ul li{
	float: left;
	list-style: none;
	margin: 20px 0px 0px;
}
.bottom1 ul li a{
	color: #999999;
}
.bottom2 ul li a{
	color: #999999;
}

Sherry Lupus

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【Web】CSS（No.24）Css页面布局经典案例（一）《模仿百度首页》

需要素材点击图片联系我或私信、评论效果图：html源码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>百度</title> <link rel="stylesheet" href="css/index.css"...
复制链接

扫一扫

专栏目录