html day2 css
今日目标
使用CSS完成网站首页的优化
使用CSS完成网站注册页面的优化
使用JS完成简单的数据校验
使用JS完成图片轮播效果
教学目标：
- 了解CSS的概念
- 了解CSS的引入方式
- 了解CSS的基本用法和常用的选择器
- 了解CSS的盒子模型，悬浮和定位
- 了解JS的概念
- 掌握JS的基本语法，数据类型，能够使用JS完成简单的页面交互
使用CSS完成网站首页的优化
需求分析:
由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用DIV+CSS来对页面进行优化
表格布局的缺陷:
1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果
2. 采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变
技术分析
HTML的块标签:
1、div标签: 默认占一行,自动换行
2、span标签: 内容显示在同一行
- CSS概述:
Cascading Style Sheets : 层叠样式表
红砖, 抹了一层水泥, 白灰
- 主要用作用:
用来美化我们的HTML页面的
HTML 决定网页的骨架 ,
CSS 化妆
将页面的HTML和美化进行分离
- CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
<style>
选择器{
属性名称:属性的值;
属性名称2: 属性的值2;
}
style>CSS选择器: 帮助我们找到我们要修饰的标签或者元素
元素选择:
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}ID选择器:
以#号开头 ID在整个页面中必须是唯一的s
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}类选择器:
以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}CSS的引入方式:
- 外部样式: 通过link标签引入一个外部的css文件
- rel =”stylesheet” href=css文件
- 内部样式: 直接在style标签内编写CSS代码
- 行内样式: 直接在标签中添加一个style属性, 编写CSS样式
style = “color: green;”
CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
流式布局
float属性:
left
right
clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
流式布局
步骤分析:
- 创一个最外层div
- 第一部份: LOGO部分: 嵌套三个div
- 第二部分: 导航栏部分 : 放置5个超链接
- 第三部分: 轮播图
- 第四部分:
- 第五部分: 直接放一张图片
- 第六部分: 抄第四部分的
- 第七部分: 放置一张图片
- 第八部分: 放一堆超链接
代码实现:
<html>
<head>
<meta charset="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>
<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>
<div style="background-color: black; 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>
<div>
<img src="../img/1.jpg" width="100%"/>
div>
<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;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
div>
div>
<div>
<img src="../products/hao/ad.jpg" width="100%"/>
div>
<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;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高压锅p>
<p style="color: red;">$998p>
div>
div>
div>
<div>
<img src="../img/footer.jpg" width="100%"/>
div>
<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 : both left right
CSS中的其它选择器
选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
属性选择器:
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:
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: 控制距离左边的位置
步骤分析:
- 总共是5部分
- 第一部分是LOGO部分
- 第二部分是导航菜单
- 第三部分是注册部分
- 第四部分是FOOTER图片
- 第五部分是一堆超链接
代码实现:
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
head>
<body>
<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>
<div style="background-color: black; 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>
<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%;background-color: white;">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="6">会员注册font>USER REGISTERtd>
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="sex"/> 男
<input type="radio" name="sex"/> 女
<input type="radio" name="sex"/> 妖
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>
<div>
<img src="../img/footer.jpg" width="100%"/>
div>
<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>