css第一天练习题

demo02ex1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#p1{
				color: red;
				font-size: 18px;
			}
			#p2{
				color: red;
				font-size: 12px;
			}
			#p3{
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<p id="p1">破阵子·为陈同甫赋壮词以寄之</p>
		<hr />
		<p id="p2">
			醉里挑灯看剑,梦回吹角连营。<br />
			八百里分麾下炙,五十弦翻塞外声。<br />
			沙场秋点兵。
		</p>
		<p id="p3">
			马作的卢飞快,弓如霹雳弦惊。<br />
			了却君王天下事,赢得生前身后名。<br />
			可怜白发生!
		</p>
	</body>
</html>

在这里插入图片描述
demo02ex2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#p1{
				font-size: 30px;
			}
			#p1 font{
				color: red;
			}
			#f1{
				color:red;
			}
			#p4{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p id="p1">
			<font>花千骨</font>大结局
		</p>
		<p>
			xxxxxxxxxxxxxxxxxxxxx
			xxxxxxxxxxxxxxxxxxxxxxx
		</p>
		<p>
			gggggggggggggggggggggggg
			ggggggggggg<font id="f1">gghhh</font>gggggg
			gggggggggggg
		</p>
		<p id="p4">dddddddddddd</p>
	</body>
</html>

在这里插入图片描述demo02ex3.html

<!DOCTYPE html>
<html><!--类选择器,id选择器,文本样式-->

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.p1 {
				color: green;
				font-size: 2;
			}
			
			#p2 {
				color: blue;
				font-size: 2;
			}
		</style>
	</head>

	<body>
		<h2>原谅</h2>
		<p class="p1">
			春天来了<br /> 我去小溪边砸冰
			<br /> 把春天砸的头破血流
			<br /> 直淌眼泪
			<br /> 到了花开的时候
			<br /> 它就把那些事儿忘了
			<br /> 真正原谅了我
		</p>
		<p id="p2">出自:
			<孩子们的诗>
		</p>
		<!--id选择器-->
		<p class="p1">
			<!--类选择器-->
			<孩子们的诗>qqqqqqqqqqqqqqqq
		</p>
	</body>

</html>

在这里插入图片描述demo02ex4.html

<!DOCTYPE html>
<html><!--后代选择器,图片标签,p标签-->

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		.title1 {
			font-size: 30px;
			<li class="li3">美术基础</li>
		}
		
		.title2 {
			font-size: 30px;
		}
		
		.contant1 {
			text-indent: 2em;
		}
		
		.contant2 {
			text-indent: 2em;
		}
	</style>

	<body>
		<img src="img/01.jpg" alt="" width="50px" height="50px" />
		<p class="title1">游戏背景</p>
		<p class="contant1">是一款什么什么样的游戏购物迪欧委员会把我hi越第五课打咯婉菡的不赖都会变</p>
		<p class="title2">游戏特色</p>
		<p class="contant2">叮叮叮叮叮叮叮叮叮购物迪欧委员会把我hi越第五课打咯婉菡的不赖都会变为上QUI我巴哈可惜我卡机 不看声卡和ID卡还贷款IE的可能吃不死
		</p>
		<a href="">我要提产品建议</a>

	</body>

</html>

在这里插入图片描述demo02ex5.html

<!DOCTYPE html>
<html>
	<!--标签嵌套,后代选择器-->

	<head>
		<meta charset="UTF-8">
		<title>东软睿道学习平台</title>
		<style>
			#u1 .li {
				color: #0000FF;
			}
			
			#u2 .li2 {
				color: #FF0000;
			}
			
			#ol .li3 {
				color: #008000;
			}
		</style>
	</head>

	<body>
		<h2>小婉菡学习平台</h2>

		<font>欢迎来到小婉菡学习平台,这里将为您提供丰富的学习内容</font>
		<ul id="u1">
			<li class="li">网页制作
				<ul>
					<li class="li">使用Dreameaver制作网页</li>
					<li class="li">使用css布局和美化页面
						<ul id="u2">
							<li class="li2">css初级</li>
							<li class="li2">css中级</li>
							<li class="li2">css高级</li>
						</ul>
					</li>
					<li>使用JavaScript制作网页特效</li>
				</ul>
			</li>
			<li class="li">平面设计
				<ol id="ol">
					<li class="li3">美术基础</li>
					<li class="li3">使用Photoshop处理图形技术</li>
					<li class="li3">使用illustor设计图形</li>
					<li class="li3">制作flash动画</li>
				</ol>
			</li>
		</ul>
		<font>如果您有任何问题,欢迎给我们留言</font>
	</body>

</html>

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页