2020计算机应用技能抽查

最新推荐文章于 2022-09-27 15:18:22 发布

hanni_xie

最新推荐文章于 2022-09-27 15:18:22 发布

阅读量1.7k

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/hanni_xie/article/details/107059066

版权

第一题

**样式图**

题目要求

任务1：请按要求完成页面布局设计
1)页面设计包括文档头，文档体和文档底部，布局合理。
任务2：请利用图片素材，按要求完成文档头内容设计
1)文档头位于页面上部，包括公司名称图片和导航条，图片在左侧显示，导航条在右侧显示。
2)当左上角图像无法显示时，则显示替代文本：“热门图片”。
3)导航条背景颜色为#000000，文字项在文档头右端显示，包括“首页”、“旅游资讯”、“机票订购”、“风景欣赏”、“公司简介”、“百度一下”共6个，均为超链接。
4)当点击“百度一下”，链接百度站点，网址：“https://www.baidu.com/”。
5)文字大小为15px，文字对齐方式：居中对齐，文字颜色为#FFFFFF，字体为黑体，没有下划线。
6)当鼠标悬停于列表项的文字上时，文字背景色变为#C0C0C0。
任务3：请按要求完成文档体内容设计
1)文档体包括文本输入框和搜索按钮，输入框内有提示文字“请输入”，两者均在页面右侧且同行显示。
2）搜索按钮宽40px，距离右侧10px；文本输入框的宽为140px。
任务4：请按要求完成文档底部内容显示
1)底部内容水平居中，分2行显示，行高为2em，字体大小为14px。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{padding:0px;
			margin:0px;
			}
			.header{
				width:100%;
				height:70px;
				background:#000000;
			}
			.midder{
				width:100%;
				height:800px;
			}
			.footer{
				width:100%;
				height:100px;
				text-align: center;
				font-size: 14px;
				line-height: 2em;
			}
			.imgStr{
				float: left;
			}
			.ulStr ul{
				list-style-type:none;
				float: right;
				margin-right: 100px;
			}
			.ulStr ul li{
				margin-top: 20px;
				float: left;
				margin-left: 50px;
				text-align: center;
			}
			.mid_nav{
				float: right;
			}
			a{
				text-decoration: none;
				color:#FFFFFF;
				font-size: 15px;
				font-family:"黑体";
			}
			a:hover{
				background-color: #C0C0C0;
			}
			.inpStr{
				width: 140px;
			}
			.butStr{
				width:40px;
			    margin-right:10px;
			}     
			form{
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<div class="header">
		<div class="imgStr"><img src="../img/1-1logo.png" alt="热门图片"></div>
		<div class="ulStr">
			<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="https://www.baidu.com/">百度一下</a></li>
			</ul>
		</div>
		</div>
		<div class="midder">
			<div class="mid_nav">
				<form>
					<input class="inpStr" value="请输入" />
					<input class="butStr" value="搜索" />
				</form>
			</div>
		</div>
		<div class="footer">
			<p>关于我们|法律声明|帮助中心|网站地图|门市地图|投诉建议</p>
			<p>Copytight2020旅游社有限公司  版权所有  版权所有  电话：010-4388434 京ICP 140000号</p>
		</div>
	</body>
</html>