Web第四周周二课堂
文本控制排版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本控制排版</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>任务04使用单表制作页面</h1>
<h2>4.1任务概述</h2>
<p>“新时代、新技能、新梦想”,当前我国大力弘扬劳模精神、劳动精神、工匠精神，旨在激励更多劳动者，特别是青年一代走技能成才、技能报国之路。“新云课堂”项目就是为广大学习者打造的学习知识和技能的平台。</p>
<p>本任务将介绍如何用表单制作“新云课堂”信息登记页面、用户登录页面和用户注册页面。表单对于用户而言是数据录入和提交的界面；表单对于网站而言是获取用户信息的途径。通过在网页中添加表单元素，可以实现如会员注册、登录，问卷调查，在线考试，论坛分享、评论等功能。
表单涉及信息的交互，自然离不开数据验证，数据的验证通常使用HTML表单元素与页面中的JavaScript脚本配合实现。但HTML5规范新增了对表单内容的简单验证功能，这一功能大大提升了用户的体验，我们应对其有一个初步的了解。</p>
<p>“新云课堂”项目的用户登录页面、用户注册页面及信息登记页面就需要使用本任务的表单与表单验证来实现。</p>
<h2>4.2任务目标</h2>
<p>素质目标</p>
<!--有序列表-->
<ol>
<li>培养学生的劳动精神和工匠精神。</li>
<li>培养学生适应时代要求、主动获取新知识和新技能的意识。</li>
</ol>
<p>知识目标</p>
<ol>
<li>了解表单元素的定义。</li>
<li>掌握语义化表单的制作。</li>
<li>了解HTML5属性初步验证表单的功能。</li>
</ol>
</body>
</html>
有序无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有序无序列表</title>
<style type="text/css">
.two{
list-style-type: circle;
}
.three{
list-style-type: square;
}
</style>
</head>
<body>
<!--无序列表-->
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<ul class="two">
<li>苹果</li>
<li>香蕉</li>
</ul>
<ul class="three">
<li>苹果</li>
<li>香蕉</li>
</ul>
<!--有序列表-->
<ol>
<li>穿衣服</li>
<li>吃饭</li>
</ol>
<br />
<img src="img/icecream.png"/>
</body>
</html>
circle：空心圆
square：实心方块
：图片
把无需列表的修饰符改成任意的样子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>把无需列表的修饰符改成任意的样子</title>
<style type="text/css">
ul,li{
list-style-image: url(img/taiyang.png);
}
</style>
</head>
<body>
<ul>
<li>晴</li>
<li>多云</li>
<li>少云</li>
<li>小雨</li>
</ul>
</body>
</html>
*下载图标
1.以阿里图库下载图标icon为例，打开。
2.找到自己想要下载的图标单击下载，在弹出的对话框中选择自己想要的颜色和大小(一般大小为16px)，格式为png下载。
3.打开下载的图标文件位置，将其保存到项目文件的img文件中并重命名为英文格式。
把有序列表换成带括号的样子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>把有序列表换成带括号的样子</title>
<style type="text/css">
.custom-list {
list-style: none;
/* 移除默认的列表样式 */
counter-reset: my-counter;
/* 初始化计数器 */
}
.custom-list li {
counter-increment: my-counter;
/* 每次出现li时增加计数器 */
}
.custom-list li:before {
content: "(" counter(my-counter) ")";
/* 设置内容为计数器，并加上括号 */
margin-right: 5px;
/* 可选：在编号和文本之间添加一些空间 */
}
</style>
</head>
<body>
<ol class="custom-list">
<li>了解表单元素的定义。</li>
<li>了解表单元素的定义。</li>
<li>了解表单元素的定义。</li>
</ol>
</body>
</html>
浙公网安备 33010602011771号