信息管理实践第二周周记

最新推荐文章于 2024-09-12 18:22:06 发布

梦瑾い

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量103

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/bili_meng_jin/article/details/115212792

版权

第二周周记

第二周主要学习了无序表和有序表，简单学习了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>