CSS样式基础（第四次作业）

榴莲千丞

已于 2024-09-29 19:26:47 修改

阅读量567

点赞数 19

文章标签： css 前端 javascript html 大数据交互

于 2024-09-28 22:43:05 首次发布

本文链接：https://blog.csdn.net/H2629896520/article/details/142622555

版权

1.使用HBuilder 编写符合以下要求的文档：在浏览器窗口中显示超链接文字“WEL COME”。完成效果如图4-10所示。其中上边 div 的背景颜色为#FF99CC，文字居中显示；水平分割线粗细为5，颜色为#FF99CC；超链接文字的字体为“arial black”，字号为60px，颜色为#FFF，无下划线；当鼠标滑过文字变为#FFOOFF；当鼠标按下文字变为#FF00CC；访问过后连接文字变为#FFFFCC。脚部文字颜色为#666。CSS样式采用内部样式表。

效果图如下：

鼠标未在网址上时：

鼠标在网址上时：

当鼠标按下超链接文字：

代码如下：(html)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>WELCOME</title>
		<link type="text/css" rel="stylesheet" href="../js/work8.css"/>
	</head>
	<body>
		  <div class="header">
		<a href="">WELCOME</a>
		    </div>
			<br />
			<br />
			<br />
			<br />
			<hr/>
			<br />
			<br />
					<footer>网页制作教程Copyright&copy;广东职业学院</footer>
	</body>
</html>

代码如下：(CSS)

 body {
			            font-family: arial black;
						
			        }
			       .header {
					   position: relative;
			            background-color: #FF99CC;
			            text-align: center;
						height: 200px;
						 
			        }
			        .header a {
						position: absolute; 
						bottom: 0;       
			            left: 50%; 
			            transform: translateX(-50%); 
						font-family: "Arial Black";
			            font-size: 60px;
			            color: #FFF;
			            text-decoration: none;
						padding: 10px;
						
			        }
			        .header a:visited {
			            color: #FFFFCC;
			        }
					.header a:hover {
					    color: #FF00FF;
					}
					.header a:active {
					    color: #FF00CC;
					}
					
			        hr {
			            size: 5;
						color: #FF99CC;
			        }
					#jiaobu{
									color: #666;
								}
			        footer{
			        				text-align: center;
			        				padding: 20px;
			        				font-size: 20px;
			        				color: #666;
			        			}

2.使用HBuilder 编写符合以下要求的文档：使用所给素材文件夹中的hwbanner.png和文字，完成效果如图4-11所示。网页采用链接外部样式表的方式。内容部分的div宽度设置为居中（margin-right：auto；margin-left：auto；)。根据网页效果，使用h1，h2，设置标题。“为客户创造价值”等语句，使用内联样式，加粗，加大。

效果图如下：

代码如下：(html)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="work7.css"/>
		<style>
			div{
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<img src="../img/work7.png"/>
		<div class="content">
		<h1>公司简介</h1>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;华为是全球领先的ICT（信息与通信）基础设施和智能终端提供商，致力于把数字世界带入每个人、
			每个家庭、每个组织，构建万物互联的智能世界。我们在通信网络、IT、智能终端和云服务等领域
			为客户提供有竞争力、安全可信赖的产品、解决方案与服务，与生态伙伴开放合作，持续为客户创
			造价值，释放个人潜能，丰富家庭生活，激发组织创新。华为坚持围绕客户需求持续创新，加大基
			础研究投入，厚积薄发，推动世界进步。华为成立于1987年，是一家由员工持有全部股份的民营企
			业，目前有18万员工，业务遍及170多个国家和地区。<br/>
			
			<h2>我们为世界带来了什么？</h2>
			<p>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>为客户创造价值。</strong>华为和运营商一起，在全球建设了1,500多张网络，
				帮助世界超过三分之一的人口实现联接。华为携手合作伙伴，为政府及公共事业机构，金融、能源、交通、制造等企业客户，提供
				开放、灵活、安全的端管云协同ICT基础设施平台，推动行业数字化转型；为云服务客户提供稳定可靠、安全可信和可持续演进的
				云服务。华为智能终端和智能手机，正在帮助人们享受高品质的数字工作、生活和娱乐体验。
			</p>
			<p>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>推动产业良性发展。</strong>华为主张开放、合作、共赢，与客户合作伙伴及友商
				合作创新、扩大产业价值，形成健康良性的产业生态系统。华为加入360多个标准组织、产业联盟和开源社区，积极参与和支持主流标
				准的制定、构建共赢的生态圈。我们面向云计算、NFV/SDN、5G等新兴热点领域，与产业伙伴分工协作，推动产业持续良性发展。
			</p>
			<p>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>促进经济增长。</strong>华为不仅为所在国家带来直接的
				税收贡献，促进当地就业，形成产业链带动效应，更重要的是通过创新的ICT解决方案打造数字化引擎，推动各行各业数字化转型，
				促进经济增长，提升人们的生活质量与福祉。
			</p>
			<p>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>推动社会可持续发展。</strong>作为负责任的企业公民，华为致力于消除全球数字鸿沟，在珠峰南坡和北极圈内，
			在西非埃博拉疫区、日本海啸核泄漏、中国汶川大地震等重大灾难现场，都有华为人的身影；推进绿色、
			低碳的环保理念，从产品规划、设计、研发、制造、交付以及运维，华为向客户提供领先的节能环保产品
			和解决方案；华为“未来种子”项目已经覆盖108个国家和地区，帮助培养本地ICT人才，推动知识迁移，提
			升人们对于ICT行业的了解和兴趣，并鼓励各国家及地区参与到建设数字化社区的工作中。</p>
			<p>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>为奋斗者提供舞台。</strong>华为坚持“以奋斗者为本”，以责任贡献来评价员
			工和选拔干部，为员工提供了全球化发展平台、与世界对话的机会，使大量年轻人有机会担当重任，快速成长，也使得十几万员工
			通过个人的努力，收获了合理的回报与值得回味的人生经历。
			</p>
			<h2>我们坚持什么？</h2>
			<p>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;华为30年坚持聚焦在主航道，抵制一切诱惑；坚持不走捷径，拒绝机会主义，
			踏踏实实，长期投入，厚积薄发；坚持以客户为中心，以奋斗者为本，长期艰苦奋斗，坚持自我批判。</p>
			<p>我们不会辜负时代慷慨赋予我们的历史性机遇，为构建万物互联的智能世界，一往无前。</p>
			</div>
	</body>
</html>

代码如下：(CSS)

h1{
	padding-left: 20px;
}
.content{
	margin: 0 auto;/* 居中对齐 */
	padding: 5px;/* 上下内边距 */
	padding-left: 45px;/* 左侧内边距 */
	padding-right: 45px;/* 右侧内边距 */
	 background-color: #f5f5f5; /* 背景颜色 */
}