第四章 CSS样式基础章节练习

Q狄龙

于 2024-10-06 20:57:36 发布

阅读量104

点赞数 4

文章标签： css 前端笔记学习方法 html

本文链接：https://blog.csdn.net/2301_78694366/article/details/142731265

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document with Link Style</title>
<style>
    /* 设置整体页面的样式 */
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
    }

    /* 设置顶部div的样式 */
    .header {
        background-color: #FF99CC;
        color: white;
        text-align: center;
        padding: 20px 0;
    }

    /* 设置水平分割线的样式 */
    .hr-custom {
        border: 5px solid #FF99CC;
        width: 80%;
        margin: 20px 0;
    }

    /* 设置超链接的初始样式 */
    a {
        font-family: 'Arial Black', Arial, sans-serif;
        font-size: 60px;
        color: #FFF;
        text-decoration: none; /* 移除下划线 */
        transition: color 0.3s; /* 平滑过渡效果 */
    }

    /* 鼠标悬停时的样式 */
    a:hover {
        color: #FF00FF;
    }

    /* 鼠标按下时的样式 */
    a:active {
        color: #FF0OCC;
    }

    /* 访问过后的样式 */
    a:visited {
        color: #FFFFCC;
    }

    /* 脚部文字的样式 */
    .footer {
        color: #666;
        text-align: center;
        font-size: 16px;
        padding: 20px 0;
    }
</style>
</head>
<body>

<div class="header">
    WEL COME
</div>

<hr class="hr-custom">

WEL COME

<div class="footer">
    © 2023 My Website
</div>

</body>
</html>

html


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    <!-- 链接外部CSS样式表 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>

        <img src="img/b02da5f22b12812faab3b09b531ab5e.jpg" alt="Header Banner" style="width: 100%; max-width: 800px; margin: 0 auto; display: block;">
    </header>
    <main style="margin-right: auto; margin-left: auto; max-width: 800px;">
        <p style="font-weight: bold; font-size: 18px;">

        </p >
        <p>
			<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>
			 
        </p >
    </main>
</body>
</html>

css

main {
    padding: 20px;
    text-align:left; 
}

/* h2 标题样式 */
h2 {
    font-weight: bold;
    font-size: 24px; /
}

/* 加粗、加大特定段落 */
p.bold-and-large {
    font-weight: bold;
    font-size: 18px; 
}
p {
    text-indent: 2em;
}
 .bold-text {
     font-size: 18px;
     font-weight: bold;
     ext-indent: 0;
	 }