信息管理创新实践学习周记2

最新推荐文章于 2024-10-11 23:02:16 发布

小六不是路痴

最新推荐文章于 2024-10-11 23:02:16 发布

阅读量102

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/LCCCCCCHEN/article/details/114994764

版权

第二周学习周记

学习内容

学习内容

1.无序列表和有序列表

知识点：
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 < ul > 标签。
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 < ol > 标签。每个列表项始于 < li > 标签。列表项使用数字来标记。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>菜单</h2>
		<ul>
		<li>多肉葡萄</li>
		<li>芝芝莓莓</li>
		<li>满杯红柚</li>
		<li>豆波波茶</li>
		</ul>
		<h2>点单攻略</h2>
		<ol>
		<li>多肉葡萄+芋圆啵啵+玫瑰青+少冰+少少糖</li>
		<li>芝芝莓莓+芦荟粒+芝士换酸奶+少冰</li>
		<li>满杯红柚+绿妍茶底+冰沙</li>
		<li>豆波波茶+奥利奥+少糖+去冰</li>
		</ol>
	</body>
</html>

展示：
在这里插入图片描述

2.HTML页面布局

知识点1：
HTML 区块< div > 元素是块级元素，它可用于组合其他 HTML 元素的容器。
代码：

		<div id="container" style="width:500px">
		 
		<div id="header" style="background-color:#ffaa7f;">
		<h1 style="margin-bottom:0;">点单方案</h1></div>
		 
		<div id="menu" style="background-color:#ffff7f;height:200px;width:400px;float:left;">
		<b>套餐</b><br>
		芝麻汤圆豆豆茶+多肉葡萄+豆波波茶<br>
		阿华田波波冰+雪山香草拿铁+芋泥波波鲜奶<br>
		流心奶黄波波冰+多肉芒芒甘露+多肉车厘</div>
		 
		<div id="content" style="background-color:#EEEEEE;height:200px;width:100px;float:left;">
		<b>价格</b><br>	
		87<br>
		84<br>
		90<br></div>
		
		<div id="footer" style="background-color:#ffaa7f;clear:both;text-align:center;">
		亲测好喝！</div>
		</div>

展示：
在这里插入图片描述
知识点2：
HTML表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td > 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

代码：

	<table border="1">
		    <tr>
		        <td>方案一</td>
		        <td>芝麻汤圆豆豆茶</td>
				<td>多肉葡萄</td>
				<td>豆波波茶</td>
		    </tr>
		    <tr>
		        <td>方案二</td>
		        <td>阿华田波波冰</td>
				<td>雪山香草拿铁</td>
				<td>芋泥波波鲜奶</td>
		    </tr>
			<tr>
				<td>方案三</td>
				<td>流心奶黄波波冰</td>
				<td>多肉芒芒甘露</td>
				<td>多肉车厘</td>
			</tr>
		</table>

展示：
在这里插入图片描述

3. CSS

知识点：
插入样式表的方法有三种：外部样式表、内部样式表、内联样式

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body
		{
			background-color:#d0e4fe;
		}
		h1
		{
			color:darkred;
			text-align:center;
		}
		p
		{
			color:orangered;
			text-align:center;
		}
		{
			font-family:"Times New Roman";
			font-size:20px;
		}
		</style>
		</head>
		
		<body>
		
		<h1>CSS 实例!</h1>
		<p>加油！</p>
		
		</body>
		</html>