第二章习题

少年维持着烦恼.

已于 2024-09-19 10:19:12 修改

阅读量289

点赞数 5

文章标签：前端 javascript 服务器 html5 css

于 2024-09-15 10:39:45 首次发布

本文链接：https://blog.csdn.net/2301_81876587/article/details/142281183

版权

习题一：

用嵌套的列表制作“心语花店”导航栏

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心语花店的列表导航</title>
	</head>
	<body>
		<h2>全部商品导航</h2>
		<ul type="disc">
		<li>鲜花用途</li>
		<ul type="circle">
			<li>爱情鲜花</li>
			<li>生日鲜花</li>
			<li>友情鲜花</li>
			<li>婚庆鲜花</li>
			<li>祝贺鲜花</li>
			<ul type="square">
				<li>送恋人</li>
				<li>送朋友</li>
				<li>送客户</li>
				</ul>
			</ul>		
		</ul>		
				
			
		<ul type="disc">
		<li>鲜花花材</li>
		<ul type="circle">
			<li>玫瑰花</li>
			<li>康乃馨</li>
			<li>百合花</li>
			<li>向日葵</li>
			<li>紫罗兰</li>
			<li>满天星</li>
			</ul>
		</ul>
		
		<ul type="disc">
		<li>鲜花类别</li>
		<ul type="circle">
			<li>日常花束</li>
			<li>创意化盒</li>
			<li>韩式花束</li>
			<li>手提花篮</li>
			</ul>
		</ul>
		
		
	</body>
</html>

运行图片：

习题二：

使用图文并排方式制作“公司名片”

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图文混排</title>
    <style>
        .container {
            position: relative;
            width: 100%;
        }
        .image-absolute {
            position: absolute;
            right: 10px; /* 距离容器右侧的距离 */
            top: 50px; /* 距离容器顶部的距离 */
            width: 300px; /* 设置图片宽度 */
            height: auto; /* 高度自动，保持图片宽高比 */
        }
        .text-content {
            margin-right: 300px; /* 根据图片大小和位置调整 */
            padding: 10px; /* 增加一些内边距 */
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="img/OIP-C.jpg" class="image-absolute" />
        <div class="text-content">
            公司名片
			<hr />
            <p>华为是一家成立于1987年的中国科技企业，主要从事电信设备和消费电子产品的研发和制造。华为在创始人任正非的领导下，从电话交换网络的供应商转型为全球最大的电信设备供应商，并在智能手机、5G、云计算、AI等领域取得了重要的成就。华为也在面对美国的技术封锁和全球政治环境的变化，继续寻求创新和发展。</p>
            <h3>我们为世界带来了什么</h3>
            <p>华为是全球领先的信息与通信技术(ICT) 解决方案供应商,专注于ICT领域,坚持稳健经营、持续创新、开放合作,在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势,为运营商客户、企业客户和消费者提供有竞争力的ICT解决方案、产品和服务,并致力于使能未来信息社会、 构建更美好的全联接世界。目前,华为有17万多名员工,业务遍及全球170多个国家和地区,服务全世界三分之一以上的人口。我们为世界带来了什么? 为客户创造价值。华为和运营商一起,在全球建设了1,500多张网络,帮助世界超过三分之一的人口实现联接。华为和企业客户一起,以开放的云计算和敏捷的企业网络,助力平安城市、金融、交通、能源等领域实现高效运营和敏捷创新。</p>
        </div>
    </div>
    <hr />
    <h3>关注领域</h3>
    <ol type="1">
        <li>消除数字鸿沟</li>
        <li>保护网络安全稳定运行</li>
        <li>推进绿色环保</li>
        <li>构建和谐绿色生态</li>
    </ol>
</body>
</html>

运行图片：