六、元素应用CSS的习题

题目一:

使用CSS样式对页面元素加以修饰,制作" 旅游攻略 "网站。如下图所示

运行效果:

代码:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>旅游攻略</title>
		<style type="text/css">
			.whole {
		       width: 780px; 
		       height: 600px;     
		       margin: 0 auto;
			}
			.first{
				width: 700px;
			}
			.second{
				margin-top: 10px;
				width:780px;
				height: 30px;
				background-color: black;
			}
			a{
				color: white;
				text-decoration: none;
			}
			a:focus{
		         outline: 2px solid #00f; /* 蓝色边框,可根据设计调整颜色和宽度 */
	       }
			.left{
				float: left;
				width: 350px;
				height: 500px;
				background-color: antiquewhite;
				margin-top: 10px;
				border: 1px solid;
			}
			.left1{
							height: 260px;
							background-color: #886666;
				}
			.left2{
				border-bottom: 2px dashed white;
				color: #ccc;
			}
			.new{
				font-size: 20px;
				color: #666;
			}
			.right{
				margin-top: 10px;
				float: right;
				height: 250px;
				width: 390px;
			}
			
			.right2{
				width: 390px;
				height: 300px;
				float: right;
			}
			.right3,.right4{
				margin-top: 0%;
				color: #333;
				background-color: #886666;
				font-size: 12px;
			}
			body{
				background-image: url(img/bg.JPG);
			}
		</style>
	</head>
	<body>
		<div class="whole">	
			<div class="first">
				<img src="img/logo.JPG" width="780" height="100px" alt="网站logo"/>
			</div>	
			<nav class="second">
				<a href="#">首页 | </a>
				<a href="#">酒店 | </a>
				<a href="#">旅游 | </a>
				<a href="#">跟团游 | </a>
				<a href="#">自由行 | </a>
				<a href="#">机票 | </a>
				<a href="#">火车 | </a>
				<a href="#">汽车票 | </a>
				<a href="#">机票 | </a>
				<a href="#">门票 | </a>
				<a href="#">攻略 | </a>
				<a href="#">商旅 | </a>
				<a href="#">更多</a>
			</nav>
			<div class="left">
				<a class="new">最新活动</a>
				<div class="left1">
					<p class="left2">上海龙支付酒店 + 景点满500减100</p>
					<p class="left2">包车游世界,畅游当地行,还有出行补贴400元/人</p>
					<p class="left2">新年红包,你写就有。请拿起手机,编辑你的信息。</p>
					<p class="left2">女神节,特别好礼,送给漂亮的你。</p>
					<p class="left2">寒假出去玩。温泉滑血HIGH起来,酒店8折起!</p>
				</div>
				<div>
					<img src="img/guanggao.jpg" width="350px" height="190px"/>
				</div>
			</div>
			<div class="right">
				<img src="img/lijiang.jpg" width="390px" height="200px"/>
				<p class="right3">2019的第一天,我遇见了下雪的丽江。<br />喜欢丽江这边的蓝天白云,一年中总会来上好几次···</p>
			</div>
			<div class="right2">
				<img src="img/feilvbin.jpg" width="390px" height="200px"/>
				<p class="right4">面面旅拍一宿务渔村麦克坦、墨宝鲸盐甘米银;<br />三入菲律宾之与反向锦鲤携手的囧途纪行</p>
			</div>
		</div>
	</body>
</html>

代码讲解

  • 这个网页由导航栏(first、second)、左侧的浮动盒子(left)和右侧的浮动盒子(right)组成。
  • margin: 0 auto; 有居中的效果
html 复制代码
<img src="img/logo.JPG" width="780" height="100px" alt="网站logo"/>

其中 alt="网站logo" ,当这图片加载不出来是会用 "网站logo" 的文字来替代图片

题目二:

使用CSS对页面网页元素加以修饰,制作"青年志愿者"网站。

运行效果 :

代码:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>青年志愿者</title>
		<style type="text/css">
		.whole{
			width: 100%;
			height: 850px;
			border: 0px solid;
			margin: 0 auto;
		}
		
		.logo{
			width: 100%;
			height: 100px;
		}
		.logo img{
			width: 100%;
			height: 100px;
		}
		
		
		a{
			text-decoration: none;
			
		}
		.NavBar{
			width: 100%;
			height: 30px;
			margin-top: 5px;
			background-color:#686868;
		}
		.NavBar a{
			
			padding: 10px 20px;
		}
		 
		 
		.NavBar2{
			width: 900px;
			height: 30px;
			background-color: white;
		}
		.NavBar2 a{
			color:black;
		}
		
		
		.left{
			width: 350px;
			height: 600px;
			float: left;
			margin-left: 20%;
			margin-right: 10px;
			border: solid #686868;
		}
		.right{
			width: 350px;
			height: 600px;
			float: right;
			margin-right: 20%;
			margin-left: 10px;
			border: solid #686868;
		}
		.right1{
			font-family:fangsong;
			font-size: 20px;
			font-weight:bolder;
		}
		.right2{
			border-bottom: 3px solid;
		}
		
		li{
			list-style: none;
			text-indent: 4em;
		}
			
		.footer{
				width: 100%;
				height: 20px;
				margin-top: 670px;
				text-align: center;
				background-color: #686868;
		}
		</style>
	</head>
	<body>
		<div class="whole">
			<div class="logo">
				<img src="img/logo2.JPG" width="100%" height="100px"/>
			</div>
			   <div class="NavBar">		
				   <span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
			       <span>&nbsp;&nbsp;&nbsp;<a href="#">志愿组织</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
			       <span>&nbsp;&nbsp;&nbsp;<a href="#">志愿项目</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
			       <span>&nbsp;&nbsp;&nbsp;<a href="#">志愿文化</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				   <span>&nbsp;&nbsp;&nbsp;<a href="#">志愿人才</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				   <span>&nbsp;&nbsp;&nbsp;<a href="#">发布</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				   <span>&nbsp;&nbsp;&nbsp;<a href="#">志愿服务交流会</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				   <span>&nbsp;&nbsp;&nbsp;<a href="#">志愿社区</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				   <span>&nbsp;&nbsp;&nbsp;<a href="#">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>	
			   </div>
			<div class=".NavBar2">
				<span><a href="#">中国青年诚信活动</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span><a href="#">志愿中国</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span><a href="#">青年之声</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span><a href="#">中国青年公益行动专栏</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span><a href="#">2015年公益服务交流会官网</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span><a href="#">XXXX上线</a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
			</div>
			<div class="left">
				<img src="img/left.JPG" width="350px" height="220px"/>
					<img src="img/left2.JPG" width="350px" height="375px"/>
			</div>
			<div class="right">
				<p class="right1">"我和我的祖国"视频征集活动启动</p>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<p class="right2">公益快报</p>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<p class="right2">公益观察</p>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
				<li> X X X X X X X X X X </li>
			</div>
			<div class="footer">
				<p>版权所有&copy;中国青年志愿者</p>
			</div>
		</div>
	</body>
</html>

代码讲解:

(1) .whole
  • 整个网页的内容被包裹在<div class="whole">中,这是一个主要的容器
  • width: 100%; 使whole容器将随着浏览器窗口的大小变化而自动调整宽度
  • margin: 0 auto; 使<div class="whole">这个元素居中。
(2).NavBar .NavBar2
  • 是用来设置导航栏的的样式

(3)

  • 此网页设置了两个左右浮动的盒子,从而将内容分成两块
相关推荐
DC妙妙屋30 分钟前
10.24.2024刷华为OD C题型(四) -- 对象list按照多个属性排序
1024程序员节
bitenum1 小时前
qsort函数的学习与使用
c语言·开发语言·学习·算法·visualstudio·1024程序员节
EmotionFlying2 小时前
(11)(2.1.6) Hobbywing DroneCAN ESC(一)
copter·ardupilot·1024程序员节·电调和电机
idealzouhu2 小时前
Spring Boot 实现文件上传下载功能
java·spring boot·1024程序员节
sudo_Ene3 小时前
Isaac Sim Docker 部署并使用过程记录
笔记·学习·docker·1024程序员节·isaacsim
天使的同类4 小时前
uniapp使用easyinput文本框显示输入的字数和限制的字数
1024程序员节
Elastic 中国社区官方博客4 小时前
GraphQL 与 Elasticsearch 相遇:使用 Hasura DDN 构建可扩展、支持 AI 的应用程序
大数据·后端·elasticsearch·搜索引擎·全文检索·graphql·1024程序员节
·云扬·4 小时前
WeakHashMap详解
java·开发语言·学习·1024程序员节
Dennis_nafla5 小时前
《MYSQL实战45讲》表数据删一半,为什么表文件大小不变?
mysql·1024程序员节