网页制作的排版方法的习题

伏飞而行

已于 2024-09-20 15:47:15 修改

阅读量995

点赞数 20

分类专栏：网页设计文章标签：前端 html

于 2024-09-20 13:12:10 首次发布

本文链接：https://blog.csdn.net/2303_81737387/article/details/142372349

版权

网页设计专栏收录该内容

13 篇文章 0 订阅

订阅专栏

题一：

用嵌套的列表制作“心语花店”导航栏，如图所示

代码

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

题二：

参考下图设计该网页

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图文混排</title>
	</head>
	<body>
		<hr />
		<h4>公司名片</h4>
		<hr />
		<img src="img/company.png"  align="right" width="300px" height="200px" alt="公司名片">
		<p>&nbsp;&nbsp;&nbsp;&nbsp;华为是全种领先的ICT(信息与通信)基础设施和智能终情提供商，致力于把数字世界带入每个人、每个家庭，每个组织，构建万物互联的智能世界，我们在通信网络IT 智能终德和云服务等领域为客户提供有竞争力、安全可信赖的产品、解决方家与服务,与生态伙伴开放合作，持续为客户创造价值，释放个人潜能，丰富家庭生活，激发组织创新。华头坚持国编客户需求持续创新，如大工础研实投入，厚积薄发，推动世界进步。华为成立于1987年，是一家由员工持有全部股份的民营企业，目前有18万员工，业务遍及170多个国家和地区</p>
		<h5>我们为世界带来了什么?</h5>
		<blockquote>为家户融造价值，华为和运营度一起，在全球建设了1500多张网络，帮助世界超过三分之一的人口实现肤境，华为携手会作伙伴，为政府及公共事业机构，金融、能源、交通、制造等企业赛户
提供开故，吴活、安全的端管云协同10T豪日平台，推动行业数字化转型;为云服务客户提供稳定可靠、安全可信和可持续演进的云服务。华为智能终端和智能手机，正在帮助人们享受高品雨的，华为主张开放，会作、共赢，与客户合作伙伴及友商合作朗新、扩大产业价值，形成健康良性的产业生态系统，华为加入360多个标准组织、产业联数字工作，生活很联乐体验，推计产山良件发屏博软开源社区，积极和与和变持主消标准的制定、构建共商的生态国，我们面向云计算、NFVSDN、5G等新兴热点领域，与产业仪伴分工协作，推动产业持续良性发展，促进经济增长，华为不仅为更重要的是通过创新的ICT解决方案打造数字化引辈，推动各行各业数字化转型，促进经济增长，提升人们的生活质量与福批。推动社会可持续发展，作为负基任的企业公民，华为力于消除全球数字鸿湖 ，在实缝南校和北积盟内，在西非滨拉疫区日本海啸校泄漏、中国汶川大地震等重大灾准现场，都有华为人的身影;推进绿色，低碳的环保理念，从产品规划、设计、研发、造、交付以及运，华为向客户提供领先的节能保产品经派类方案;华为“未子”项自已经量量108个国家有地区，景助塔养本地C人才，推的过称，提升人们对于了了行业的了标和兴趣，并鼓团各国家及地区参与到建设数主化社区的工作中、为南斗者提供舞合、华为坚持以查斗省为以豪任员繁来洋价员工的造续干部，为员工提供了全球化发展平台，与世界对话的机会，使大量年经人有机会担当重任，快速成长，也使得十几万员工通过个人的努力，收获了合理的国报与值得回味的人生经历</blockquote>
		<hr />
		<h5>关注领域</h5>
		<ol >
					<li>消除数字鸿沟</li>
					<li>保障网络安全稳定运行</li>
					<li>推进绿色环保</li>
					<li>构建和谐健康生态</li>
		</ol>
	</body>
</html>

素材

公司名片

华为是全种领先的ICT(信息与通信)基础设施和智能终情提供商，致力于把数字世界带入每个人、每个家庭，每个组织，构建万物互联的智能世界，我们在通信网络IT 智能终德和云服务等领域为客户提供有竞争力、安全可信赖的产品、解决方家与服务,与生态伙伴开放合作，持续为客户创造价值，释放个人潜能，丰富家庭生活，激发组织创新。华头坚持国编客户需求持续创新，如大工础研实投入，厚积薄发，推动世界进步。华为成立于1987年，是一家由员工持有全部股份的民营企业，目前有18万员工，业务遍及170多个国家和地区

我们为世界带来了什么?

为家户融造价值，华为和运营度一起，在全球建设了1500多张网络，帮助世界超过三分之一的人口实现肤境，华为携手会作伙伴，为政府及公共事业机构，金融、能源、交通、制造等企业赛户提供开故，吴活、安全的端管云协同10T豪日平台，推动行业数字化转型;为云服务客户提供稳定可靠、安全可信和可持续演进的云服务。华为智能终端和智能手机，正在帮助人们享受高品雨的，华为主张开放，会作、共赢，与客户合作伙伴及友商合作朗新、扩大产业价值，形成健康良性的产业生态系统，华为加入360多个标准组织、产业联数字工作，生活很联乐体验，推计产山良件发屏博软开源社区，积极和与和变持主消标准的制定、构建共商的生态国，我们面向云计算、NFVSDN、5G等新兴热点领域，与产业仪伴分工协作，推动产业持续良性发展，促进经济增长，华为不仅为更重要的是通过创新的ICT解决方案打造数字化引辈，推动各行各业数字化转型，促进经济增长，提升人们的生活质量与福批。推动社会可持续发展，作为负基任的企业公民，华为力于消除全球数字鸿湖，在实缝南校和北积盟内，在西非滨拉疫区日本海啸校泄漏、中国汶川大地震等重大灾准现场，都有华为人的身影;推进绿色，低碳的环保理念，从产品规划、设计、研发、造、交付以及运，华为向客户提供领先的节能保产品经派类方案;华为“未子”项自已经量量108个国家有地区，景助塔养本地C人才，推的过称，提升人们对于了了行业的了标和兴趣，并鼓团各国家及地区参与到建设数主化社区的工作中、为南斗者提供舞合、华为坚持以查斗省为以豪任员繁来洋价员工的造续干部，为员工提供了全球化发展平台，与世界对话的机会，使大量年经人有机会担当重任，快速成长，也使得十几万员工通过个人的努力，收获了合理的国报与值得回味的人生经历

关注领域

消除数字鸿沟
保障网络安全稳定运行
推进绿色环保
构建和谐健康生

图片：

代码讲解：

<hr/>是水平分割线
src="img/company.png"：图片放在img文件夹下
alt是当图片无法显示时用文字来替代图片
<blockquote></blockquote> （缩排标签）：用于定义块引用

<ol >
                    <li>消除数字鸿沟</li>
                    <li>保障网络安全稳定运行</li>
                    <li>推进绿色环保</li>
                    <li>构建和谐健康生态</li>
   </ol>