第四章习题

2401_87145887

于 2024-09-30 11:43:38 发布

阅读量111

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_87145887/article/details/142652895

版权

1.使用HBuilder编写符合以下要求的文档：在浏览器窗口中显示超链接文字“WEL-COME”。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome Hyperlink Example</title>
    <style>
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
 
        .container {
            background-color: #FF99CC; /* 背景颜色 */
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 水平居中 */
            align-items: flex-end; /* 垂直底部对齐 */
            padding: 20px;
            position: relative;
            width: 100%;
            height: 50%; /* 占据一半的高度 */
        }
        .container a {
            color: #FFF; /* 链接的默认文字颜色 */
            font-family: 'Arial Black', sans-serif; /* 字体 */
            font-size: 60px; /* 字体大小 */
            text-decoration: none; /* 移除下划线 */
        }
        .container a:hover {
            color: #FF00FF; /* 悬停时的文字颜色 */
        }
        .container a:active {
            color: #FF00CC; /* 鼠标按下时的文字颜色 */
        }
        hr {
            border: 0;
            height: 1px;
            background-color: #666; /* 分割线颜色 */
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        WELCOME <!-- WELCOME超链接 -->
    </div>
    <hr size="5" color="#FF99CC" width="100%" />
    <p align="center">网页制作教程 Copyright &copy; 广州南方职业学院</p >
</body>
</html>

2.使用HBuilder编写符合一下要求的文档：使用所给素材文件夹中的hwbanner.png和

文字

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司简介</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.8;
            margin: 20px;
            background-color: #f5f5f5; /* 设置背景为浅灰色以突出白色导航栏 */
        }
        /* 顶部导航栏和Logo的样式 */
        .header {
            background-color: white; /* 背景白色 */
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        /* Logo样式 */
        .logo {
            display: flex;
            align-items: center;
        }
        .logo img {
            height: 50px; /* Logo的高度 */
            margin-right: 15px; /* Logo和文本之间的间距 */
        }
        
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 20px; 
        }
        nav ul li {
            position: relative;
        }
        nav ul li a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
            padding: 10px 15px;
        }
        nav ul li a:hover {
            color: #0033ff; 
        }
        
        nav ul li ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
        }
        nav ul li ul li {
            white-space: nowrap; 
        }
        nav ul li:hover ul {
            display: block; 
        }
        nav ul li ul li a {
            padding: 10px 20px;
        }
       
        .secondary-nav {
            background-color: #f9f9f9; 
            padding: 10px;
            margin-top: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
        }
        .secondary-nav ul {
            list-style: none;
            display: flex;
            gap: 15px;
            justify-content: center;
            padding: 0;
        }
        .secondary-nav ul li a {
            text-decoration: none;
            color: #333;
            padding: 10px 15px;
            font-weight: bold;
        }
        .secondary-nav ul li a:hover {
            color: #0033ff; 
        }
        h2 {
            font-size: 20px;
            margin-top: 20px;
        }
        hr {
            border: none;
            height: 2px;
            background-color: #0033ff;
            margin: 10px 0;
        }
        p {
            text-indent: 2em;
        }
        ol {
            padding-left: 20px;
            margin-top: 10px;
        }
        li {
            margin-bottom: 10px;
        }
        .bold-text {
            font-size: 18px;
            font-weight: bold;
            text-indent: 0;
        }
	
    </style>
</head>
 
<body>
 
    <img src="img/58a606fdc9ea449e04b27130c5e008d.jpg" >
  
    <h2>公司简介</h2>
    <p>华为是全球领先的ICT（信息与通信）基础设施和智能终端供应商，致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界。我们在通信网络、IT、智能终端和云服务等领域为客户提供竞争力、安全可信赖的产品、解决方案和服务。与生态伙伴开放合作，持续为客户创造价值，释放个人潜力，丰富家庭生活，激发组织创新。华为坚持围绕客户需求持续创新，加大基础研究投入，厚积薄发，推动世界进步。华为成立于1987年，是一家由员工持有全部股份的民营企业，目前有18万员工，业务遍及170多个国家和地区。</p >
 
    <h2>我们为世界带来了什么？</h2>
    <p class="bold-text">为客户创造价值</p >
    <p>华为和运营商一起，在全球创建了1,500多张网络，帮助世界超过三分之一的人口实现联接。华为携手合作伙伴，为政府及公共事业机构、金融、能源、交通、制造等企业客户，提供开放、灵活、安全的端管云协同ICT基础设施平台，推动行业数字化转型；为云服务客户提供稳定可靠、安全可信赖和可持续发展的云服务。华为智能终端和智能手机，正在帮助人们享受高品质的数字工作、生活和娱乐体验。</p >
 
    <p class="bold-text">推进产业良性发展</p >
    <p>华为主张开放、合作、共赢，与客户、合作伙伴及友商合作创新，扩大产业价值，形成良性的产业生态系统。华为加入了360多个标准组织、产业联盟和开源社区，积极参与和支持主流标准的制定。合作共赢的生态圈，我们面向云计算、NFV/SDN、5G等新兴热点领域，与产业伙伴分工协作，推动产业持续良性发展。</p >
 
    <p class="bold-text">促进经济增长</p >
    <p>华为不仅为所在国家带来直接的税收贡献，促进当地就业，形成产业链带动效应。更重要的是通过创新的ICT解决方案打造数字化引擎，推动各行各业的数字化转型，促进经济增长，提升人们的生活质量和福祉，推动社会的可持续发展。</p >
 
    <p class="bold-text">支持公平和教育</p >
    <p>作为负责任的企业公民，华为致力于消除全球数字鸿沟。在珠峰南坡和北极圈内，在西非埃博拉疫区、日本海啸核泄漏、中国汶川大地震等重大灾难现场，都有华为人的身影。推进绿色、低碳的环保理念，从产业规划、设计、研发、生产、交付以及运维，华为向客户提供领先的节能环保产品和解决方案。</p >
 
    <p class="bold-text">培养本地人才</p >
    <p>华为的“未来种子”项目已经覆盖108个国家和地区，帮助培养本地ICT人才，推动知识迁移，提高人们对于ICT行业的了解和兴趣，并鼓励各国及地区参与到建设数字化社区的工作中。</p >
 
    <p class="bold-text">为奋斗者提供舞台</p >
    <p>华为坚持“以奋斗者为本”，以责任贡献来评价员工和选拔干部。为员工提供了全球化发展平台，与世界对话的机会。使大量年轻人有机会担当重任，快速成长，也使得十几万员工通过个人的能力，收获了合理的回报与值得回味的人生经历。</p >
 
    <h2>我们坚持什么？</h2>
    <p>华为始终坚持开放、合作、创新的理念，与全球客户和合作伙伴共同构建安全、稳定、可靠的数字生态系统。我们将持续以技术创新驱动社会进步，为未来的数字世界构建高效的ICT基础设施。</p >
 
</body>
</html>