百度页面

最新推荐文章于 2022-07-01 10:47:40 发布

lhusailiu

最新推荐文章于 2022-07-01 10:47:40 发布

阅读量460

点赞数

分类专栏：前端练习

本文链接：https://blog.csdn.net/lhusailiu/article/details/70808342

版权

前端练习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>百度</title>
	<style type="text/css">
	/* 设置主体的宽度，高度，文本居中，自定义对齐 */
		body{width:1000px;height:1200px;text-align:center;margin:0px auto;}
		/* 设置ul的宽度，自定义对齐，点样式剔除  内边距为0*/
		.ul1 ul{width:600px;height:50px;margin:0px auto;list-style:none inside;
				padding:0px;}
		/* .ul1 ul li设置li标签内容向左浮动，行高50px */
		.ul1 ul li{float:left;width:75px;line-height:50px;}
		/* 分别设置输入框和提交按钮的宽度和高度 */
		.int1{height:38px;width:500px;}
		.int2{height:45px;width:120px;}
		/* 设置ul1类中a标签链接样式黑色（鼠标指针放在显示颜色） */
		.ul1 a:hover{color:black;}
		.ul2 ul{width:280px;margin:0px auto;padding:0px;list-style:none inside;
				height:40px;}
		.ul2 ul li{float:left;width:56px;line-height:40px;}
		/* 清除所有浮动，向左清除浮动（clear:left）,向右清除浮动（clear:right） */
		.zhuye{clear:both;margin-top:150px;}
		.ul3 ul{width:400px;height:50px;margin:0px auto;list-style:none inside;
				padding:0px;}
		.ul3 ul li{width:98px;float:left;}
		/* 剔除所有的a标签的链接下划线样式 */
		a{text-decoration: none;}
		
	</style>
</head>
<body>
	<!-- 设置logo -->
	<p class="logo"><img src="bdlogo.gif" height="129px" width="270px" alt="" /></p>
	<!-- 设置导航菜单 -->
	<div class="nov">
		<ul> 
			<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>
	<!-- 创建文本框 并设置类选择器-->
	<p class="serach">
	<form action="" method="post" name="" >
		<input type="text" value=""  class="int1" / >
		<input type="submit" value="百度一下" class="int2" />
	</form>
	</p>
	<div class="ul2">
	<ul>
		<li><a href="#">百科</a></li>
		<li><a href="#">文度</a></li>
		<li><a href="#">hao123</a></li>
		<li>|</li>
		<li><a href="#">更多>></a></li>
		
	</ul>
	</div>
	<p class="zhuye"><a href="">把百度设为主页安装百度浏览器</a></p>
	<div class="ul3">
	
		<a href="#">加入百度推广</a>  |  
		<a href="#">搜索风云榜</a>  |  
		<a href="#">关于百度</a>  |  
		<a href="#">About Baidu</a>
	
	</div>
	<p class="dibu">2013 Baidu 使用百度前必读 京ICP证030173号</p>

</body>
</html>

总结：认识导航菜单用浮动属性实现，输入文本框的宽度可以设置类标签来实现

lhusailiu

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
百度页面

百度 /* 设置主体的宽度，高度，文本居中，自定义对齐 */ body{width:1000px;height:1200px;text-align:center;margin:0px auto;} /* 设置ul的宽度，自定义对齐，点样式剔除内边距为0*/ .ul1 ul{width:600px;height:50px;margin:0px auto;list-style:n
复制链接

扫一扫