第4章 css样式基础作业

第二题

代码展示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/* 设置div */
			div{
				/* 设置背景颜色和文字居中 */
				background-color: #FF99CC;
				text-align: center;
			}
			/* 设置水平分割线 */
			hr{
				/* 设置粗细和颜色 */
				size: 5;
				color: #FF99CC;
			}
			/* 设置超链接字体 */
			a:link{
				font-family: 'arial black';
				font-size: 60px;
				color: #FFF;
				text-decoration: none;
			}
			/* 设置划过文字的颜色 */
			a:hover{
				color: #FF00FF;
			}
			/* 设置按下文字的颜色 */
			a:active{
				color: #FF00CC;
			}
			/* 设置已经访问后的效果 */
			a:visited{
				color: #FFFFCC;
			}
			/* 设置页脚的样式 */
			.footer{
				color: #666;
			}
		</style>
	</head>
	<body>
		<!-- 设置字体 -->
		<div>
			<a href="#">WELCOME</a>
		</div>
		<!-- 设置分割线 -->
		<hr />
		<!-- 设置脚部文字 -->
		<div class="footer">
			<p>脚部文字</p>
		</div>
	</body>
</html>

图片展示:

第三题

代码展示:

html文件

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

css文件

div{
	margin-right: auto;
	margin-left: auto;
}
p{
	/* 设置粗体和不自动换行 */
	font-weight: bold;
	display: inline;
}

图片展示:

1. 什么是响应式设计?为什么它很重要? 响应式设计指的是能够自适应不同设备和屏幕尺寸的网站设计。它很重要,因为现在人们使用各种设备来浏览网站,包括电脑、平板电脑、智能手机等等,如果网站不能自适应屏幕尺寸,就会影响用户体验和网站的可用性。 2. 什么是流式布局?它与固定布局有什么不同? 流式布局指的是根据浏览器窗口大小自动调整网页布局的方式。与固定布局相比,流式布局能够更好地适应不同尺寸的屏幕,但是可能会导致一些元素的尺寸和位置不稳定,需要进行适当的调整。 3. 什么是媒体查询?它在响应式设计中起什么作用? 媒体查询是一种CSS技术,可以根据不同设备和屏幕尺寸应用不同的样式。在响应式设计中,媒体查询可以检测屏幕宽度、高度、方向等属性,从而应用不同的样式,实现自适应布局和美观的设计。 4. 什么是断点?在响应式设计中如何使用断点? 断点指的是设定的屏幕尺寸值,根据这些尺寸值来应用不同的样式。在响应式设计中,断点通常用于设置不同的布局、字体大小、图像尺寸等样式,根据不同的屏幕尺寸进行调整,以保持网站的可用性和美观。 5. 什么是流体图像?它在响应式设计中的作用是什么? 流体图像指的是可以自适应不同屏幕尺寸的图像。在响应式设计中,流体图像可以根据屏幕宽度和高度自动调整大小,以保持图像的清晰度和美观度。这可以提高网站的用户体验,并减少加载时间和带宽的消耗。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值