作业

本文档记录了2019年01月07日的作业内容,涉及开发图书列表页面的实践。通过使用HTML的ul, li, img, a等标签,结合CSS进行样式修饰,实现了预期的运行效果。此外,还涵盖了制作诗歌《光》、《原谅》及新闻条目的练习,以及利用后代选择器和标签嵌套创建玫瑰小镇和东软睿道学习平台的页面元素。" 129275006,10923002,Tableau 2019.2安装步骤详解,"['数据可视化', '大数据工具', 'Tableau软件']

2019.01.07作业
开发一个图书列表页面
实现思路:在ul,li标签中嵌套图片标签、a标签和文本,再利用CSS修饰
运行效果如右图:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.class1{
				color: red;
			}
			u{
				color: #7849A3;
			}
			.class2{
				color: gray;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><img src="img/book1.jpg"></li><br>
			<li><u>失乐园</u></font></li><br>
			<li><span class="class2">原价:&yen; 84</span>
				<span class="class1">现价: &yen; 73</span></li>
			<hr>
		</ul>
		<ul>
			<li><img src="img/book2.jpg"></li><br>
			<li><u>情商是什么?</u></font></li><br>
			<li><span class="class2">原价:&yen; 100</span>
				<span class="class1">现价: &yen; 50</span></li>
			<hr>
		</ul>
	</body>
</html>

1.制作一首诗《光》(标签选择器,文本颜色)
2.制作一首诗《原谅》( 类选择器,id选择器,文本样式)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p {
				color: green;
			}
			#biaoti{
				color: blue;
			}
		</style>
	</head>
	<body>
		<h2>光</h2>
		<p>晚上</p>
		<p>我打着手电筒散步</p>
		<p>累了就拿它当拐杖</p>
		<p>我拄着一束光</p>
		<h2>原谅</h2>
		<hr />
		<p>春天来了<br>
		我去小溪边砸冰<br>
		把春天砸得头破血流<br>
		直淌眼泪<br>
		到了花开的时候<br>
		他就把那些事儿忘了<br>
		真正原谅了我</p><br>
		<p id=biaoti>出自:《孩子们的诗》</p>
		<p>《孩子们的诗》诗集精选七十多首3-13岁小朋友的诗,配以二十多位知名插画家<br>
		的精美插图,于今年8月编缀成册进行销售,短短几个月内,好评如潮,同时发<br>人深省</p>
	</body>
</html>

3.制作一条新闻(选择器,文本样式)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.class1{
				color: blue;
			}
			p{
				color: #870F87;
			}
		</style>
	</head>
	<body>
		<h3 class="class1">这位会“魔法”的爸爸走红 他爸女儿装进画框</h3>
		<hr />
		<h4 class="class1">原标题:火了!又是别人家的爸爸!他把两个女儿装进一片鸟语花香</h4>
		<p>32岁的万里,在27岁时当了爸爸,这个爸爸不一般,它会一种魔法,能将爱嬉戏玩耍的女<br>
			儿装进画框,山水花鸟、草木花草环绕在身边,一片宁静自然...</p>
	</body>
</html>

1.制作玫瑰小镇(后代选择器,图片标签,p标签)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a strong{
				color: #870F87;
			}
		</style>
	</head>
	<body>
		<img src="img/game1.jpg">
		<h2>游戏背景</h2>
		<p>略</p>
		<h2>游戏特色</h2>
		<p>略</p>
		<a href="#"><strong>我要提产品建议>></strong></a>
	</body>
</html>

2.制作东软睿道学习平台(标签嵌套,后代选择器)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul li{
				color: blue;
			}
			.class1{
				color: red;
			}
			ol li{
				color: green;
			}
		</style>
	</head>
	<body>
		<h1>东软睿道学习平台</h1>
		<p>欢迎来到东软睿道学习平台,这里讲为您提供丰富的学习内容。</p>
		<ul>
		<li>网页制作</li>	
		<ul>
		<li>制作网页</li>
		<li>使用CSS布局和美化环境</li>
		<ul type="square" id=a1>
			<li class="class1">CSS初级</li>
			<li class="class1">CSS中级</li>
			<li class="class1">CSS高级</li>
		</ul>
		<li>制作网页特效</li></ul>
		<li>平面设计</li>
		<ol>
			<li>美术基础</li>
			<li>处理图形图像</li>
			<li>设计图形</li>
			<li>制作Flash动画</li>
		</ol>
		</ul>
		<p>如果您有任何问题,欢迎给我们留言。</p>
	</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值