第二周主要学习了无序表和有序表,简单学习了CSS布局方式。(由于之前做的被我不小心删掉了,这次做的比较简陋请见谅)
知识点
列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表使用 < ul > 标签。
有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 < ol > 标签。每个列表项始于 < li > 标签。列表项使用数字来标记。
页面布局
HTML 区块< div > 元素是块级元素,它可用于组合其他 HTML 元素的容器。
网页展示
项目成员使用的无序表,指导教师用的有序表。
CSS布局
这个版本比较简陋,下面的div那部分着重用了CSS调整整个页面风格
(新加入)div布局
这个是最近写的,准备放到微信小程序的wxml文件里面,但用的html写的
body部分基本上都是用div写的(补作业)
代码
表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {background-color:burlywood}
p {color: aliceblue;}
</style>
</head>
<body>
<h1>项目成员</h1>
<ul>
<li>虎jy</li>
<li>hy</li>
<li>LSQ</li>
</ul>
<h1>指导教师</h1>
<ol>
<li>ssy</li>
</ol>
<a href="index.html">返回主页</a>
</body>
</html>
CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<p>哦</p>
<a href="index.html">略略略</a>
<p>哈哈哈</p>
</body>
</html>
div布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.one,.two{
width: 50%;
height: auto;
float: left;
box-sizing: border-box;
}
.link1{
width: 80%;
height: 200px;
}
</style>
</head>
<body>
<div align="center">
<img src="image/introudction0.jpg" style="width: 80%; height: 500px;" />
<hr>
<div>
<h1 class="one">售价:</h1>
<h1 class="two" style="color: #DC143C;">29元</h1>
</div>
</div>
<div>
<p>简介:(在这写简介)</p>
</div>
<div align="center">
<h2>相关书籍:</h2>
<img src="image/header01.jpg" class="link1"/>
<img src="image/product02.jpg" class="link1"/>
</div>
</body>
</html>