改进后的龙族百度部分页面

最新推荐文章于 2024-10-14 13:29:43 发布

asnone0

最新推荐文章于 2024-10-14 13:29:43 发布

阅读量159

点赞数

分类专栏：书本文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_53912756/article/details/127894944

版权

书本专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这是一个关于龙族百度页面的HTML源代码示例，包含导航栏、搜索栏、小黄条和蓝色导航条等元素。页面设计注重用户体验，使用了CSS进行样式布局，如清除浮动、定位及颜色、字体等样式设置。此代码适用于前端开发学习和实践。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>龙族页面</title>
	<link rel="stylesheet" href="G:/代码练习/龙族百度页面/css/reset.css">
	<link rel="stylesheet" href="G:/代码练习/龙族百度页面/css/idex.css">
</head>
<body>
	<!-- 导航栏 -->
	<div class="header">
 		<ul class="header2">
 			<li><a href="#">百度首页</a></li>
 			<li><a href="#">登录</a></li>
 			<li><a href="#">注册</a></li>
 		</ul>
 		<div class="suxian">|</div>
 		<div class="baidu">百度</div>
 		<ul class="header1">
			<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>
			<li><a href="#">视频</a></li>
			<li><a href="#">地图</a></li>
			<li><a href="#">文库</a></li>
		</ul>
	</div>
	

	<!-- 搜索栏 -->
	<div class="search">
		<div class="logo">
			<img src="G:/代码练习/龙族百度页面/img/百度贴吧-01.png" alt="">
		</div>
		<div class="input">
			<input type="text">
			<button><a href="#">进入词条</a></button>
			<button class="whole"><a href="#">全站搜索</a></button>
		</div>
		<a href="#" class="search1">帮助</a>
	</div>

	<!-- 小黄条 -->
	<div class="yellow1">
	<div class="yellow w">
		<p>近期有不法分子冒充百度百科官方人员，以删除词条为由威胁并敲诈相关企业。在此严正声明：百度百科是免费编辑平台，绝不存在收费代编服务，请勿上当受骗！</p>
		<a href="#" class="detailed">详细＞＞</a>
		<a href="#" class="false">×</a>
	</div>
    </div>
	<!-- 蓝色导航条 -->
	<div class="blue">
		<div class="core w">
			<ul class="ago">
				<li class="ago1"><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>
			<ul class="after">
				<li><a href="#">下载百科APP</a></li>
				<span>|</span>
				<li class="after1"><a href="#">个人中心</a></li>
			</ul>
		</div>
	</div>


	<!-- 灰色条 -->
	<div class="gray ">
		<div class="gary w">
			 <p class="gray1">龙族</p>
		<span class="gray2">是一个</span>
		<a href="#" class="gray3">多义词</a>
		<span class="gray2">，请在下列</span>
		<a href="#" class="gray3">义项</a>
		<span class="gray2">上选择浏览</span>
		<a href="#" class="gray3">（共24个义项）</a>
		<span class="suxian">|</span>
		<ul>
			<li><a href="#">展开↓</a></li>
			<li><a href="#">添加义项+</a></li>
		</ul>
		</div>
		
	</div>
	

	<!-- 中心页面 -->
	<div class="center ">
		<div class="center1 w">
			<div class="firstline">
				<h1>龙族</h1>
				<ul>
					<li><a href="#">播报</a></li>
					<li><a href="#">编剧</a></li>
					<li><a href="#">讨论</a></li>
					<li class="last"><a href="#">上传视频</a></li>
				</ul>
			</div>
 			<div class="secondline">
 				江南著魔幻小说
 			</div>
 			<div class="thirdline">
 				<div>
 					<img src="G:/代码练习/龙族百度页面/img/龙族.jpg" alt="">
 				</div>
 				<div>
 					<img src="G:/代码练习/龙族百度页面/img/龙族.jpg" alt="">
 				</div>
 				<div>
 					<img src="G:/代码练习/龙族百度页面/img/龙族.jpg" alt="">
 				</div>
 			</div>
		</div>
	</div>

</body>
</html>

/*
* @Author: Asn
* @Date:   2022-10-29 23:46:13
* @Last Modified by:   Asn
* @Last Modified time: 2022-11-16 22:28:16
*/
/* 清除浮动 */
.clearfix:after{
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.clearfix{
			/* IE6、7专用 */
			*zoom: 1;
		}
.w{
	width: 1420px;
	margin: 0 auto;
}
*{
	padding: 0;
	margin: 0;
}
body{
	background-color: #fff;
}

/* 导航栏 */
.header{
	width: 1536px;
	margin-top: 1px;
	height: 39px;
	line-height: 39px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}
.header .header1{
	float: right;
}
.header .header1 li{
	float: right;
	margin-right: 29px;
	
}
.header .header1 li a{
	font-size: 14px;
	color: #080808;
}
.header .suxian{
	margin: 0 33px;
	float: right;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.5);
}
.header .baidu{
	float: right;
	font-size: 14px;
	color: #666666;
}
.header .header2{
	float:right;
	margin-right: 10px;
}
.header .header2 li{
	margin-right: 25px;
	float: left;
}
.header .header2 li a{
	color: #333333;
	text-decoration: none;
	font-size: 14px;
}
.header .header2 li a:hover{
	border-bottom:  1px solid #333333;
}

/* 搜索栏 */
.search{
	height: 110px;
	width: 1177px;
	margin: -2px auto;
	line-height: 110px;
	/* background-color: pink; */
}
.search .logo{
	float: left;
	height: 110px;
}
.search .logo img{
	height: 110px;
	width: 170px;

}
.search .input{
	line-height: 110px;
	float: left;
}
.search .input input{
	margin-left: 24px;
	margin-top: 40px;
	float: left;
	width: 668px;
	height: 40px;
	border-right: none;
	border: 1px solid #3388ff;
}
.search .input button{
	margin-top: 40px;
	float: left;
	height: 42px;
	width: 128px;
	background-color: #3388ff;
	border: none;
}
.search .input button a{
	color: #fff;
	font-size: 18px;	
}
.search .input .whole{
	background-color: #fff;
	border: 1px solid #3388ff;
	margin-left: 4px;
}
.search .input .whole a{
	color: #3388ff;
	font-size: 18px;
}

.search .input button a{
	text-decoration: none;
}
.search .search1{
	height: 23px;
	color: #333333;
	float: left;
	margin-left: 14px;
	/* margin-top: 12px; */
	padding-top: 14px;
	font-size: 12px;
}


/* 小黄条 */
.yellow1{
	/* width: 1536px; */
	margin-top: 4px;
	height: 48px;
	background-color: #fff;
}
.yellow{
	height: 48px;
	background-color: #f9f4d9;
	line-height: 48px;
}
.yellow p{
	margin-left: 20px;
	float: left;
	font-size: 12px;
	color: #96a2b1;

}
.yellow .detailed{
	margin-left: 17px;
	float: left;
	text-decoration: none;
	font-size: 12px;
	color: #6d8de4;
}
.yellow .false{
	margin-right: 20px;
	float: right;
	text-decoration: none;
	color: #96a2b1;
	font-size: 20px;
}


/* 蓝色导航条 */
.blue{
	margin-top: 6px;
	height: 56px;
	width: 1536px;
	line-height: 56px;
	background-color: #459df5;
}
.blue .core .ago{
	float: left;

}
.blue .core .ago li{
	float: left;
	padding:0 40px;
}
.blue .core .ago li:hover{
	background-color: #3982c8;
}
/* .blue .core .ago .ago1{
	padding-left: 20px;
}
 */
.blue .core .ago li a{
	text-decoration: none;
	color: #fff;
}
.blue .core .after{
	float: right;
}
.blue .core .after li{
	float: left;
}
.blue .core .after span{
	float: left;
	margin: 0 21px;
	color: #3982c8;
}
.blue .core .after .after1{
	padding-right: 16px;
}
.blue .core .after li a{
	text-decoration: none;
	color: #fff;
}

/* 灰色条 */
.gray{
    width: 1536px;
	height: 42px;
	line-height: 42px;
	background-color: #f5f5f5;
}
.gray .gray1{
	margin-left: 38px;
	float: left;
	font-weight: 700;
	font-size: 12px;
}
.gray .gray2{
	float: left;
	font-size: 12px;
	color: #666666;
}
.gray .gray3{
	float: left;
	text-decoration: none;
	font-size: 12px;
	color: #459df5;
}
.gray .suxian{
	float: left;
	font-size: 12px;
	margin: 0 19px 0 16px;
	color: #e0e0e0;
}
.gray ul li{
	margin-right: 32px;
	float: left;
	font-size: 12px;
}
.gray ul li a{
	text-decoration: none;
	color: #333333;
}


/* 中心页面 */
.center{
	width: 1536px;
	height: 376px;
	background-color: #d8eaff;
}
.center1{
	padding-top: 15px;
	height: 361px;
	/* background-color: pink; */
}
.center .firstline{
	/* margin-top: 37px; */
	line-height: 47px;
	height: 47px;

}
.center .firstline h1{
	float: left;
	font-size: 35px;
}
.center .firstline ul li{
	margin-top: 10px;
	margin-left: 10px;
	float: left;
	border-radius: 5px;
	height: 33px;
	width: 55px;
	line-height: 33px;
	text-align: center;
	background-color: #fff;
}
.center .firstline ul .last{
	width: 65px;
}
.center .firstline ul li:hover{
	background-color: #459DF5;
}
.center .firstline ul li a{
	text-decoration: none;
	font-size: 12px;
	color: #1B1E13;
}
.center .firstline ul li a:hover{
	color: #fff;
}
.center .secondline{
	margin-top: 15px;
	height: 25px;
	line-height: 25px;
	color: #626675;
	
}
.center .thirdline{
	margin-top: 36px;
	height: 195px;
	
}
.center .thirdline img{
	margin-right: 15px;
	float: left;
	height: 195px;
	width: 340px;
	border-radius: 10px;

}