网页设计第四章课后作业

2401_87136665

于 2024-09-30 22:04:43 发布

阅读量92

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2401_87136665/article/details/142664483

版权

1.是用HBuilder编写符合以下要求的文档：在浏览器窗口中显示超链接文字“wellcome”其中上边div的背景颜色为#FF99CC 文字居中显示水平分割线为五颜色为#FF99CC；超链接文字的字体为“airial black” 字号为60px 颜色为#FFF 无下划线当鼠标滑过文字变为#FF00FF 当鼠标按下文字变为#FF00CC 访问过后连接文字变为#FFFFCC 脚部文字颜色为#666 CSS样式采用内部样式表

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wellcome Link</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .container {
            text-align: center;
            background-color: #FF99CC;
            width: 100%;
            padding: 20px 0;
        }
        .horizontal-line {
            width: 80%;
            border-top: 5px solid #FF99CC;
            margin: 20px 0;
        }
        a {
            font-family: "Arial Black", sans-serif;
            font-size: 60px;
            color: #FFF;
            text-decoration: none;
        }
        a:hover {
            color: #FF00FF;
        }
        a:active {
            color: #FF00CC;
        }
        a:visited {
            color: #FFFFCC;
        }
        .footer {
            margin-top: 80px;
            color: #666;
        }
		hr{
			height: 5px;
			width: 80%;
			margin: 80px;
			background-color:#0033ff;
			border:none;
		}
    </style>
</head>
<body>
    <div class="container">
        <div class="horizontal-line"></div>
		<a href="http://www.baidu.com" target="_blank">Wellcome</a>
        <div class="horizontal-line"></div>
    </div>
	<hr>
	<div class="footer">
	    网页设计我爱学
	</div>
</body>
</html>

效果图如下:

滑过图片时:

点击图片时

2.用HBuilder编写以下要求文档使用所给素材文件夹中的HuaWei.png。网页采用链接外部样式表的方式内容部分的div宽度设为居中根据网页效果使用h1 h2 设置标题为客户创造价值语句使用内联样式加粗加大

代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司简介</title>
     <link rel="stylesheet" href="../css/work01.css"> <!-- 链接外部样式表 --> 
</head>
<body>
    <div class="content">
        <p><img src="../img/HuaWei.jpg" ></p> 
        <h2>公司简介</h2>
        <p class="special-indent">华为是全球领先的ICT（信息与通信）基础设施和智能终端提供商，致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界。我们在通信网络、IT、智能终端和云服务等领域为客户提供有竞争力、安全可信赖的产品、解决方案与服务，与生态伙伴开放合作，持续为客户创造价值，释放个人潜能，丰富家庭生活，激发组织创新。华为坚持围绕客户需求持续创新，加大基础研究投入，厚积薄发，推动世界进步。华为成立于1987年，是一家由员工持有全部股份的民营企业，目前有18万员工，业务遍及170多个国家和地区。</p>
       <h1> 我们为世界带来了什么？</h1><br />
	<p class="special-indent"><strong style="font-size: 1.2em;">我们为世界带来了什么？为客户创造价值。</strong>华为和运营商一起，在全球建设了1,500多张网络，帮助世界超过三分之一的人口实现联接。华为携手合作伙伴，为政府及公共事业机构，金融、能源、交通、制造等企业客户，提供开放、灵活、安全的端管云协同ICT基础设施平台，推动行业数字化转型；为云服务客户提供稳定可靠、安全可信和可持续演进的云服务。华为智能终端和智能手机，正在帮助人们享受高品质的数字工作、生活和娱乐体验。</p>
	<p class="special-indent"><strong style="font-size: 1.2em;">推动产业良性发展。</strong>华为主张开放、合作、共赢，与客户合作伙伴及友商合作创新、扩大产业价值，形成健康良性的产业生态系统。华为加入360多个标准组织、产业联盟和开源社区，积极参与和支持主流标准的制定、构建共赢的生态圈。我们面向云计算、NFV/SDN、5G等新兴热点领域，与产业伙伴分工协作，推动产业持续良性发展。
</p>		

<p class="special-indent"><strong style="font-size: 1.2em;">促进经济增长。</strong>华为不仅为所在国家带来直接的税收贡献，促进当地就业，形成产业链带动效应，更重要的是通过创新的ICT解决方案打造数字化引擎，推动各行各业数字化转型，促进经济增长，提升人们的生活质量与福祉。
</p>

<p class="special-indent"><strong style="font-size: 1.2em; text-indent: 2em;">推动社会可持续发展。</strong>作为负责任的企业公民，华为致力于消除全球数字鸿沟，在珠峰南坡和北极圈内，在西非埃博拉疫区、日本海啸核泄漏、中国汶川大地震等重大灾难现场，都有华为人的身影；推进绿色、低碳的环保理念，从产品规划、设计、研发、制造、交付以及运维，华为向客户提供领先的节能环保产品和解决方案；华为“未来种子”项目已经覆盖108个国家和地区，帮助培养本地ICT人才，推动知识迁移，提升人们对于ICT行业的了解和兴趣，并鼓励各国家及地区参与到建设数字化社区的工作中。
</p>

<p class="special-indent">
	<strong style="font-size: 1.2em;">为奋斗者提供舞台。</strong>华为坚持“以奋斗者为本”，以责任贡献来评价员工和选拔干部，为员工提供了全球化发展平台、与世界对话的机会，使大量年轻人有机会担当重任，快速成长，也使得十几万员工通过个人的努力，收获了合理的回报与值得回味的人生经历。

</p>
			<h2>我们坚持什么？</h2>
	  <p class="special-indent"> 华为30年坚持聚焦在主航道，抵制一切诱惑；坚持不走捷径，拒绝机会主义，踏踏实实，长期投入，厚积薄发；坚持以客户为中心，以奋斗者为本，长期艰苦奋斗，坚持自我批判。</p>
	<p class="special-indent">我们不会辜负时代慷慨赋予我们的历史性机遇，为构建万物互联的智能世界，一往无前
</p>
	</div>
</body>
</html>

css文件:


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

  .special-indent {
		            text-indent: 2em; /* 首行缩进两个字符 */
		        } 
.content {
    width: 80%;
    margin: 0 auto; /* 使div居中 */
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    color: #333;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 图片居中 */
 }

效果图如下