课程作业:
制作一个用户注册表单,将课堂上提到的表单控件全部用到;
理解css模块的思想,并试写一个案例(选做)
实例演示基本选择器与上下文选择器
预习伪类选择器与常用元素的css样式设置,盒模型知识等
课程内容:
1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到;
1.1 作业效果:
1.2 实操代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>用户注册表</title>
</head>
<style>
div {
padding: 10px;
}
</style>
<body>
<h1>新用户注册登记表</h1>
<form action="" method="post">
<fieldset>
<legend>1.用户账号信息(必填):</legend>
<!-- 单行文本框 -->
<div>
<label for="username">注册账号:</label>
<input
type="text"
id="username"
autofocus
required
placeholder="必须是6-8位数"
maxlength="8"
/>
</div>
<!-- 密码框 -->
<div>
<label for="password">用户密码:</label>
<input
type="password"
id="password"
required
placeholder="必须是字母+数字的组合"
/>
</div>
</fieldset>
<fieldset>
<legend>2.其他个人信息</legend>
<!-- 单选框 -->
<div>
<label for="">性别:</label>
<input type="radio" name="gender" value="male" id="male" />
<label>男</label>
<input type="radio" name="gender" value="female" id="female" />
<label>女</label>
<input
type="radio"
name="gender"
value="secret"
id="secret"
checked
/>
<label>保密</label>
</div>
<!-- 多选框 -->
<div>
<label for="">爱好:</label>
<!-- 因为允许同时提交多个值,所以name属性要写成数组格式 -->
<input type="checkbox" name="hobby[]" id="meishi" /><label
for="meishi"
>美食</label
>
<input type="checkbox" name="hobby[]" id="lvyou" /><label for="lvyou"
>旅游</label
>
<input type="checkbox" name="hobby[]" id="shuma" /><label for="shuma"
>数码</label
>
<input type="checkbox" name="hobby[]" id="biancheng" checked /><label
for="biancheng"
>编程</label
>
</div>
<!-- 下拉列表 -->
<div>
<label for="">目前的会员身份</label>
<select name="level" id="">
<option value="1" selected>不是会员</option>
<option value="2">初级会员</option>
<option value="3">中级会员</option>
<option value="4">高级会员</option>
</select>
</div>
<!-- 多行文本框 - 文本域 -->
<div>
<label for="jieshao">自我介绍:</label>
<textarea
name="jieshao"
id="jieshao"
cols="22"
rows="5"
placeholder="介绍一下你自己的经历"
></textarea>
</div>
</fieldset>
<fieldset>
<legend>3.附件上传</legend>
<!-- 文件上传 -->
<div>
<label for="">照片上传:</label>
<input type="file" name="userimg" />
<input type="submit" value="点击上传图片" />
</div>
</fieldset>
<fieldset>
<legend>4.其他补充信息</legend>
<!-- 日期选择控件 -->
<div>
<label for="">生日日期:</label>
<input type="date" name="depart" />
</div>
<!-- 电子邮箱 -->
<div>
<label for="email">邮箱地址:</label>
<input
type="email"
name="email"
id="email"
placeholder="demo@xxx.com"
/>
</div>
<!-- datalist 搜索框 自定义输入+预选 -->
<div>
<label for="">邀请人:</label>
<input type="search" name="search" list="my-key" />
<datalist id="my-key">
<option value="张三"></option>
<option value="李四"></option>
<option value="王五"></option>
</datalist>
</div>
</fieldset>
<div>
<input type="submit" name="touxiang" value="点击提交表单" />
</div>
</form>
</body>
</html>
2. 理解css模块的思想,并试写一个案例(选做)
CSS模块化是为了使开发者更好的维护代码,同时根据实际的需求按需加载,减少负荷、提高效率,可以实现分区独立控制;
作业内容:
作业代码:
- HTML页面代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width= , initial-scale=1.0" />
<title>CSS模块化开发</title>
<link rel="stylesheet" href="css/style.css" />
<!-- 另外一种引入方式 -->
<!-- <style>
@import url(css/style.css);
</style> -->
</head>
<body>
<!-- 页头 -->
<header>
<!-- 导航栏 -->
<nav>
<ul>
<li>首页</li>
<li>博客</li>
<li>快讯</li>
<li>友链</li>
<li>关于</li>
</ul>
</nav>
</header>
<!-- 内容 -->
<main>
<p>
php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!
</p>
</main>
<!-- 页脚 -->
<footer>
<ul>
<li>友情链接</li>
<li>关于我们</li>
<li>最新资讯</li>
</ul>
</footer>
</body>
</html>
CSS文件代码4个
- style.css 代码
@import url(header.css);
@import url(main.css);
@import url(footer.css);
- header.css \ main.css \ footer.css 代码
footer {
background: green;
}
3. 实例演示基本选择器与上下文选择器
3.1 基本·选择器:
【标签】样式选择 - “ tag “
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>标签选择器</p>
</div>
</body>
</html>
【属性】样式选择 - attribute
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>基本选择器作业实例</title>
<style>
/* 标签选择 */
p {
background: green;
}
/* 属性选择 */
li[id="1"] {
background: yellow;
}
</style>
</head>
<body>
<div>
<p class="content">标签选择器</p>
<ul>
<li id="1">属性选择器</li>
<li>class选择器</li>
<li>id选择器</li>
</ul>
</div>
</body>
</html>
【类】样式选择 - “ class “
【id】样式选择 - “ id “
3.2 上下文·选择器:
【后代】选择器 - “空格Space”
【子】选择器 - “ > “
【同级相邻】选择器 - “ + “
【同级所有】选择器 - “ ~ “
4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等
已预习