今日目标
使用css完成网站首页的优化
使用css完成网站注册页面的优化
使用js完成简单的数据校验
使用js完成图片轮播效果
教学目标：
–了解css的概念
–了解css的引入方式
–了解css的基本用法和常用的选择器
–了解css的盒子模型，悬浮和定位
–了解js的概念
–掌握js的基本语法，数据类型，能够使用js完成简单的页面交互
去年的内容简单回顾
什么html : 超文本标记语言
p标签: 段落标签
br标签: 简单换行
h1-h6: 标题标签
hr标签: 水平分割线, 华丽的分割线
font标签: color属性改变颜色 , size
b标签: 加粗
i标签: 斜体
strong标签: 带语义的加粗
em标签: 斜体标签,带语义
img标签: 图片标签 显示图片
src: 指定图片路径(相对路径)
width: 宽度
height: 高度
alt: 图片加载失败时的提示
相对路径:
./代表当前路径
../ 代表的是上一级路径
../../代表的是上上一级路径
ul标签: 无序列表
ol标签: 有序列表
li标签: 列表项
a标签: 超链接标签:
target: 打开方式
href:指定要跳转的链接地址
table标签:table > tr > td
tr标签: 行
ring过去式 td标签: 列
合并行: rowspan
合并列: colspan
网站注册案例:
form 标签: 表单标签,主要是用来向服务器提交数据
method: 提交方式 getpost
action : 提交的路径
input 标签:
type:
password: 密码框
text : 文本
submit:提交
button:普通的按钮
ret:重置按钮
radio: 单选按钮 设置name属性让它们是一组
checkbox: 复选按钮
email:
date:
tel:
framet : 框架标签
rows:
cols:
frame:
使用css完成网站首页的优化
需求分析:
由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用div+css来对页面进行优化
表格布局的缺陷:
1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果
2.采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变
技术分析
html的块标签:
div标签: 默认占一行,自动换行
span标签:内容显示在同一行
css概述:
cascading style sheets : 层叠样式表
红砖, 抹了一层水泥, 白灰
主要用作用:
用来美化我们的html页面的
html 决定网页的骨架,css化妆
将页面的html和美化进行分离
css的简单语法:
在一个style标签中,去编写css内容,最好将style标签写在这个head标签中
“`html
<style>
选择器{
属性名称:属性的值;
属性名称2: 属性的值2;
}
</style>
“`
css选择器: 帮助我们找到我们要修饰的标签或者元素
元素选择:
“`html
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
“`
id选择器:
“`html
以#号开头id在整个页面中必须是唯一的s
#id的名称{
属性名称:属性的值;
属性名称:属性的值;
}
“`
类选择器:
“`html
以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
“`
css的引入方式:
外部样式: 通过link标签引入一个外部的css文件
内部样式: 直接在style标签内编写css代码
行内样式: 直接在标签中添加一个style属性, 编写css样式
流连忘返的意思是什么css浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
float属性:
left
right
clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
流式布局
步骤分析:
1. 创一个最外层div
2. 第一部份: logo部分: 嵌套三个div
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分:
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接
代码实现:
“`html
<!doctype html>
<html>
<head>
<meta chart=”utf-8″>
<title></title>
<style>
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/*border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
</style>
</head>
<body>
<!–
1. 创一个最外层div
2. 第一部份: logo部分: 嵌套三个div
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分:
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接
–>
<div>
<!–2. 第一部份: logo部分: 嵌套三个div–>
<div>
<div class=”logo”>
<img src学会计好吗=”../img/logo2.png”/>
</div>
<div class=”logo”>
<img src=”../img/header.png”/>
</div>
<div class=”logo”>
<a href=”#”>登录</a>
<a href=”#”>注册</a>
<a href=”#”>购物车</a>
</div>
</div>
<!–清除浮动–>
<div style=”clear: both;”></div>
<!–3. 第二部分: 导航栏部分 : 放置5个超链接–>
<div style=” height: 50px;”>
<a href=”#” class=”amenu”>首页</a>
<a href=”#” class=”amenu”>手机数码</a>
<a href=”#” class=”amenu”>电脑办公</a>
<a href=”#” class=”amenu”>鞋靴箱包</a>
<a href=”#” class=”amenu”>香烟酒水</a>
</div>
<!–4. 第三部分: 轮播图–>
<div>
<img src=”../img/1.jpg” width=”100%”/>
</div>
<!–5. 第四部分:–>
<div>
<div><h2>最新商品<img src=”../img/title2.jpg”/></h2></div>
<!–左侧广告图–>
<div style=”width: 15%; height: 480px;float: left;”>
<img src=”../products/hao/big01.jpg” width=”100%” height=”100%”/>
</div>
<!–
右侧商品
–>
<div style=”width: 84%; height: 480px;float: left;”>
<div style=”height: 240px; width: 50%; float: left;”>
<img src=”../products/hao/middle01.jpg” height=”100%” width=”100%” />
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
</div>
</div>
<!–6. 第五部分: 直接放一张图片–>
<div>
<img src=”../products/hao/ad.jpg” width=”100%”/>
</div>
<!–7. 第六部分: 抄第四部分的–>
<div>
<div><h2>最新商品<img src=”../img/title2.jpg”/></h2></div>
<!–左侧广告图–>
<div style=”width: 15%; height: 480px;float: left;”>
<img src=”../products/hao/big01.jpg” width=”100%” height=”100%”/>
</div>
<!–
右侧商品
–>
<div style=”width: 84%; height: 480px;float: left;”>
<div style=”height: 240px; width: 50%; float: left;”>
<img src=”../products/hao/middle01.jpg” height=”100%” width=”100%” />
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
<div class=”product”>
<img src=”../products/hao/small08.jpg” />
<p>高压锅</p>
<p style=”color: red;”>$998</p>
</div>
</div>
</div>
<!–8. 第七部分: 放置一张图片–>
<div>
<img src=”../img/footer.jpg” width=”100%”/>
</div>
<!–9. 第八部分: 放一堆超链接–>
<div style=”text-align: center;”>
<a href=”#”>关于我们</a>
<a href=”#”>联系我们</a>
<a href=”#”>招贤纳士</a>
<a href=”#”>法律声明</a>
<a href=”#”>友情链接</a>
<a href=”#”>支付方式</a>
<a href=”#”>配送方式</a>
<a href=”#”>服务声明</a>
<a href=”#”>广告声明</a>
<br />
copyright © 2005-2016 传智商城 版权所有
</div>
</div>
</body>
</html>
“`
扩展:
–css的优先级
按照选择器搜索精确度来编写:行内样式 > id选择器 > 类选择器> 元素选择器
就近原则: 哪个离得近,就选用哪个的样式
css: 层叠样式表
主要作用:
1. 美化页面
2. 将页面美化和html代码进行分离,提高代码的服用型
–选择器:
–元素选择器: 标签的名称{}
–类选择器:以. 开头.类的名称
–id选择器:以#开头 ,#id的名称(id必须是页面上面唯一)
–css浮动:
–float : left, right不再占有正常文档流中的空间 , 流式布局
–clear : bothleft right
–css中的其它选择器
–选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
–属性选择器:
“`html
a[title]
a[titile=’aaa’]
a[href][title]
a[href][title=’aaa’]
“`
–后代选择器: 爷爷选择器孙子选择器找出所有的后代
–子元素选择器:父选择器> 儿子选择器
–伪类选择器: 通常都是用在a标签上
使用div+css完成注册页面的优化
需求分析
由于我们的注册页面也是用table布局的,存在与首页同样的问题,所以我们需要使用div+css对我们的注册页面进行美化
总共是5部分内容
技术分析
css的盒子模型: 万物皆盒子
内边距:
padding-top:
padding-right:
padding-bottom:
padding-left:
“`html
padding:10px;上下左右都是10px
padding:10px 20px;上下是10px 左右是20px
padding: 10px 20px 30px;上 10px 右20px下30px左20px
padding: 10px 20px 30px 40px;上右下左, 顺时针的方向
“`
外边距:
margin-top:
margin-right:
margin-bottom:
margin-left:
css绝对定位:
position: absolute
top: 控制距离顶部的位置
left: 控制距离左边的位置
步骤分析:
1. 总共是5部分
2. 第一部分是logo部分
3. 第二部分是导航菜单
4. 第三部分是注册部分
5. 第四部分是footer图片
6. 第五部分是一堆超链接
代码实现:
“`html
<!doctype html>
<html>
<head>
<meta chart=”utf-8″>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”../css/main.css”/>
</head>
<body>
<!–
1. 总共是5部分
2. 第一部分是logo部分
3. 第二部分是导航菜单
4. 第三部分是注册部分
5. 第四部分是footer图片
6. 第五部分是一堆超链接
–>
<div>
<!–2. 第一部分是logo部分–>
<div>
<div class=”logo”>
<img src=”../img/logo2.png” />
</div>
<div class=”logo”>
<img sr小饭店管理c=”../img/header.png” />
</div>
<div class=”logo”>
<a href=”#”>登录</a>
<a href=”#”>注册</a>
<a href=”#”>购物车</a>
</div>
</div>
<!–清除浮动–>
<div style=”clear: both;”></div>
<!–3. 第二部分是导航菜单–>
<div style=” height: 50px;”>
<a href=”#” class=”amenu”>首页</a>
<a href=”#” class=”amenu”>手机数码</a>
<a href=”#” class=”amenu”>电脑办公</a>
<a href=”#” class=”amenu”>鞋靴箱包</a>
<a href=”#” class=”amenu”>香烟酒水</a>
</div>
<!–4. 第三部分是注册部分–>
<div style=”background: url(../image/regist_bg.jpg);height: 500px;”>
<div style=”position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;”>
<table width=”60%” align=”center”>
<tr>
<td colspan=”2″><font color=”blue” size=”6″>会员注册</font>ur register</td>
</tr>
<tr>
<td>用户名:</td>
<td><input type=”text”/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type=”password”/></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type=”password”/></td>
</tr>
<tr>
<td>email:</td>
<td><input type=”email”/></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type=”text”/></td>
</tr>
<tr>
<td>性别:</td>
<td><input type=”radio” name=”x”/> 男
<input type=”radio” name=”x”/> 女
<input type=”radio” name=”x”/> 妖
</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type=”date”/></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type=”text”/></td>
</tr>
<tr>
<td></td>
<td><input type=”submit” value=”注册”/></td>
</tr>
</table>
</div>
</div>
<!–5. 第四部分是footer图片–>
<div>
<img src=”../img/footer.jpg” width=”100%”/>
</div>
<!–9. 第四部分: 放一堆超链接–>
<div style=”text-align: center;”>
<a href=”#”>关于我们</a>
<a href=”#”>联系我们</a>
<a href=”#”>招贤纳士</a>
<a href=”#”>法律声明</a>
<a href=”#”>友情链接</a>
<a href=”#”>支付方式</a>
<a href=”#”>配送方式</a>
<a href=”#”>服务声明</a>
认清形势坚定信心 <a href=”#”>广告声明</a>
<br />
copyright © 2005-2016 传智商城 版权所有
</div>
</div>
</body>
</html>
“`
css部分的回顾:
css: 层叠样式表.
css作用: 美化页面,提高代码的复用性
选择器:
需要掌握的:
元素选择器: 标签的名称
类选择器:以 . 开头
id选择器: 以#开头,#id的名称id必须是唯一的
优先级: 按照选择精确度: 行内样式> id选择器 > 类选择器 > 元素选择器
就近原则
扩展选择器:
选择器分组:选择器1,选择器2以逗号隔开
后代选择器:爷爷 孙子中间以空格隔开
子元素选择器:爸爸 > 儿子
属性选择器:选择器[属性的名称=”]
伪类选择器:超链接标签上使用
浮动: float属性left right
清除浮动: clear: both left right
盒子模型:顺时针 : 上右下左
padding : 内边距 ,控制的是盒子内容的距离
margin : 外边距 控制盒子与盒子之间的距离
绝对定位:
position: absolute
top:
left:
使用js完成简单的数据校验
需求分析
使用js完成对注册页面的简单数据校验,不允许出现用户名或密码为空的情况
技术分析
javascript概述
什么是javascript: javascript一种直译式脚本语言，
什么是脚本语言?
java源代码 —-> 编译成.class文件 —–> java虚拟机中才能执行
脚本语言:源码——– > 解释执行
js由我们的浏览器来解释执行
html: 决定了页面的框架
css: 用来美化我们的页面
js:提供用户的交互的
js的组成:
ecmascript : 核心部分 ,定义js的语法规范
dom: document object model 文档对象模型 , 主要是用来管理页面的
bom : browr object model浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
js的语法:
变量弱类型: var i = true
区分大小写
语句结束之后的分号 ,可以有,也可以没有
写在script标签
js的数据类型:
–基本类型
–string
–number
–boolean
–undefine
–null
–引用类型
–对象, 内置对象
–类型转换
–js内部自动转换
js的运算符和
本文发布于:2023-04-03 11:34:58，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/070a843afb2e8de3fdf45c7477b5e232.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：02.doc
本文 PDF 下载地址：02.pdf
| 留言与评论（共有 0 条评论） |
