第二章课后作业

最新推荐文章于 2024-09-23 16:36:59 发布

业余绳匠

最新推荐文章于 2024-09-23 16:36:59 发布

阅读量162

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/woyinyuebofangqi/article/details/142371953

版权

1用嵌套的列表制作"心语花店"导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>心语花店</title>
</head>
<body>
    <header>
        <h1>心语花店</h1>
        <!-- 包含其他头部元素 -->
    </header>
 
    <nav>
        <ul>
            <li>鲜花用途</li>
            <li>鲜花花材</li>
            <li>鲜花类别</li>
        </ul>
    </nav>
 
    <main>
        <section id="flower-purpose">
            <h2>鲜花用途</h2>
            <ul>
                <li>爱情鲜花</li>
                <li>生日鲜花</li>
                <li>友情鲜花</li>
                <li>婚庆鲜花</li>
                <li>祝贺鲜花</li>
                <li>送恋人</li>
                <li>送朋友</li>
                <li>送客户</li>
            </ul>
        </section>
 
        <section id="flower-species">
            <h2>鲜花花材</h2>
            <ul>
                <li>玫瑰花</li>
                <li>康乃馨</li>
                <li>百合花</li>
                <li>向日葵</li>
                <li>紫罗兰</li>
                <li>满天星</li>
            </ul>
        </section>
 
        <section id="flower-type">
            <h2>鲜花类别</h2>
            <ul>
                <li>日常花束</li>
                <li>创意花盒</li>
                <li>韩式花束</li>
                <li>手提花篮</li>
            </ul>
        </section>
    </main>
 
    <footer>
        <!-- 包含其他底部元素 -->
    </footer>
</body>
</html>

2用图文并排方式制作“公司名片"。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>公司名片</title>
    <style>
        .company-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .logo, .info {
            width: 50%;
        }
 
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="company-card">
        <div class="logo">
            <!-- 这里插入公司的Logo图片 -->
            <img src="1.jpg" alt="Company Logo">
        </div>
        <div class="info">
            <h1>公司名称</h1>
            <blockquote>华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商。我们的20.7万员工遍及170多个国家和地区，为全球30多亿人口提供服务。
华为致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界：让无处不在的联接，成为人人平等的权利，成为智能世界的前提和基础；为世界提供多样性算力，让云无处不在，让智能无所不及；所有的行业和组织，因强大的数字平台而变得敏捷、高效、生机勃勃；通过AI重新定义体验，让消费者在家居、出行、办公、影音娱乐、运动健康等全场景获得极致的个性化智慧体验。</blockquote>
        </div>
    </div>
</body>
</html>