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">原价:¥ 84</span>
<span class="class1">现价: ¥ 73</span></li>
<hr>
</ul>
<ul>
<li><img src="img/book2.jpg"></li><br>
<li><u>情商是什么?</u></font></li><br>
<li><span class="class2">原价:¥ 100</span>
<span class="class1">现价: ¥ 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>