CSS实战——百度搜索首页

最新推荐文章于 2022-09-23 10:13:06 发布

聪明的王二狗

最新推荐文章于 2022-09-23 10:13:06 发布

阅读量905

点赞数 1

分类专栏： HTML+CSS+JS 文章标签： css html html5

本文链接：https://blog.csdn.net/w_xy999/article/details/104821314

版权

HTML+CSS+JS 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

成果

支持搜索内容。
在这里插入图片描述
步骤
一般来说：

使用css+div进行页面的布局，css一般是用外联进行开发
使用html进行每一个页面的填充

注意事项

id的命名规范：父标签id_自己的id
css一般一个选择器一行，没有换行
设置页面基础样式——设置特定标签样式——使用伪类给标签添加样式。

css文件

/* 设置页面基础设置 */
*{padding: 0px;margin: 0px;}
/* 设置header */
#header{width: 100%;height: 40px;}
 #header_nav {float: left;list-style-type: none;position: absolute;right: 90px;top:26px;}
  #header_nav a{margin-left: 24px;color: #333;font-size: 13px;font-weight: 30px;}
/* 设置main */
#main{width:100%;height: 290px;text-align: center;}
	#img_logo{margin-top: 50px;0px;margin-bottom: 20px;}
	input[type=text]{height: 34px;width: 539px;margin-right: 0px;border:solid 1px #4992FF;background-image: url(img/img.png);background-repeat: no-repeat;background-position-x: 500px;}
	input[type=submit]{height: 37px;px;width: 100px;font-size: 15px;color: #fff;background-color: #2d78f4;border: solid 0px;letter-spacing: 1px;position: relative;right: 5px;top:2px}
/* 设置tailer */
#tailer{width: 100%;height: 300px;}
/* 使用伪类给标签加样式 */
#header_nav a:hover{color:blue;}

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下，你就知道</title>
		<!-- 
			1，使用css+div进行页面的布局
				css一般是用外联进行开发
			2，使用html进行每一个页面的填充
		 -->
		 <link rel="stylesheet" type="text/css" href="baidu.css"/>
		 <link href="./img/logo.ico" rel="shortcut icon"/>
	</head>
	<body>
		<!-- 头部 -->
		<div id="header">
			<!-- 命名规范，父标签id_id -->
			<li id="header_nav">
				<a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1">抗击肺炎</a>
				<a href="http://news.baidu.com/">新闻</a>
				<a href="https://www.hao123.com/">hao123</a>
				<a href="https://map.baidu.com/@13265880.8,4373425.72,12z">地图</a>
				<a href="http://v.baidu.com/">视频</a>
				<a href="https://tieba.baidu.com/index.html">贴吧</a>
				<a href="http://xueshu.baidu.com/">学术</a>
				<a href="">登录</a>
				<a href="">设置</a>
			</li>
		</div>
		<!-- 主体 -->
		<div id="main">
			<form action="https://www.baidu.com/s" method="get">
				<img id="img_logo" src="img/bd_logo1.png" width="270px" height="129px"><br>
				<input type="text" name="wd" id="" value="" />
				<input type="submit" name="" id="" value="百度一下" />
			</form>
		</div>
		<!-- 底部 -->
		<div id="tailer">
			<img src="img/bottom.png" align="center">
		</div>
	</body>
</html>

聪明的王二狗

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
CSS实战——百度搜索首页

成果支持搜索内容。步骤一般来说：使用css+div进行页面的布局，css一般是用外联进行开发使用html进行每一个页面的填充注意事项id的命名规范：父标签id_自己的idcss一般一个选择器一行，没有换行设置页面基础样式——设置特定标签样式——使用伪类给标签添加样式。css文件/* 设置页面基础设置 */*{padding: 0px;margin: 0px;}/...
复制链接

扫一扫