使用CSS完成网站首页的优化
需求分析：
- 由于我们昨天使用表格布局存在缺陷，那么我们要来考虑使用DIV+CSS来对页面进行优化
- 表格布局的缺陷
- 1.嵌套层级太多，一旦出现嵌套顺序错乱，整个页面达不到预期效果
- 2.采用表格布局，页面不够灵活，动其中某一块，整个表格布局的结构全部要变
技术分析：
- HTML的块标签
- div标签：默认占一行，自动换行
- span标签：内容显示在同一行
- CSS概述
- Cascading Style Sheets:层叠样式表
- 主要作用 美化HTML页面
- HTML决定网页的骨架
- 将页面的HTML和美化进行分离
- CSS的简单语法
- 在一个style标签中，去编写CSS内容，最好将style标签写在这个head标签中
<style>
选择器{
属性名称:属性的值;
属性名称2: 属性的值2;
}
</style>
- CSS选择器：帮助我们找到我们要修饰的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color:red;
font-size: 50px;
}
</style>
</head>
<body>
<div>大家新年好，恭喜发财，红包拿来</div>
<div>大家新年好，恭喜发财，红包拿来</div>
<div>大家新年好，恭喜发财，红包拿来</div>
<div>大家新年好，恭喜发财，红包拿来</div>
<div>大家新年好，恭喜发财，红包拿来</div>
</body>
</html>
-
元素选择:
元素的名称{ 属性名称:属性的值; 属性名称:属性的值; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> span{ color:blue; } </style> </head> <body> <span>讲完这个内容大家就可以下课了</span> <span>讲完这个内容大家就可以下课了</span> <span>讲完这个内容大家就可以下课了</span> <span>讲完这个内容大家就可以下课了</span> </body> </html> -
ID选择器：
以#号开头 ID在整个页面中必须是唯一的 ID的名称{ 属性名称:属性的值; 属性名称:属性的值; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ color:red; } </style> </head> <body> <div id="div1">JAVAEE</div> <div>IOS</div> <div>ANDROID</div> </body> </html> -
类选择器：
以.开头 .类的名称{ 属性名称:属性的值; 属性名称:属性的值; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .shuiguo{ color:yellow; } .shucai{ color: green; } </style> </head> <body> <div class="shuiguo">香蕉</div> <div class="shucai">黄瓜</div> <div class="shuiguo">苹果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html>
-
CSS的引入方式：
-
外部样式：通过link标签引入一个外部的css文件
.shuiguo{ color:yellow; } .shucai{ color: green; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style1.css" /> </head> <body> <div class="shuiguo">甘蔗</div> <div class="shucai">黄瓜</div> <div class="shuiguo">苹果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html> 内部样式：直接在style标签内编写css代码
-
行内样式：直接在标签中添加一个style属性，编写CSS样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="shuiguo" style="color: greenyellow">甘蔗</div> <div class="shucai">黄瓜</div> <div class="shuiguo">苹果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html>
-
-
CSS浮动：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- CSS浮动：浮动的元素会脱离正常的文档流，在正常的文档流中不占空间 float属性: left right clear属性：清除浮动 both：两边都不允许浮动 left：左边不允许浮动 right: 右边不允许浮动 流式布局 --> <div style="float:left;width: 200px;height:200px; background-color: red;"></div> <div style="clear: both;"></div> <div style="width: 250px;height:200px; background-color: greenyellow;"></div> <div style="width: 250px;height:200px; background-color: blue;"></div> </body> </html>
步骤分析：
- 创一个最外层div
- 第一部分：LOGO部分：嵌套三个div
- 第二部分：导航栏部分：放置5个超链接
- 第三部分：轮播图
- 第四部分：嵌套一个三行7列的表格
- 第五部分：直接放一张图片
- 第六部分：抄第四部分的
- 第七部分：放置一张图片
- 第八部分：放一堆超链接
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<!--<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="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>
<!--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>
.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;
}
扩展：
-
CSS的优先级
- 按照选择器搜索精确度来编写： 行内样式>ID选择器>类选择器>元素选择器
- 就近原则：哪个离得近，就选用哪个的样式
-
CSS中的其他选择器
选择器分组：选择器1,选择器2{属性的名称：属性的值}
-
属性选择器：
a[title] a[title='aaa'] a[href][title] a[href][title='aaa'] -
后代选择器：选择器1 选择器2 可以找出所有选择器2后代
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h1 em{ color:red; } </style> </head> <body> <h1> this is a <em>儿子</em> <strong> <em>孙子</em> </strong> </h1> </body> </html> -
子元素选择器：父选择器 > 儿子选择器 只能找出子选择器，不能找出所有后代
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h1 > em{ color:red; } </style> </head> <body> <h1> this is a <em>儿子</em> <strong> <em>孙子</em> </strong> </h1> </body> </html> -
伪类选择器：通常都是用在A标签上
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> a:link {color:yellow} /* 未访问的链接 */ a:visited{color:blue} /* 已访问链接 */ a:hover{color:green} /* 鼠标移动到链接上 */ a:active{color:gray} /* 选定的链接 */ </style> </head> <body> <a href="#">黑马程序员</a> </body> </html>
使用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 padding:10px 20px 30px 40px;上10px 右20px 下30px 左40px，上右下左，顺时针方向
-
外边距：
- margin-top:
- margin-right:
- margin-bottom:
- margin-left:
-
CSS绝对定位:
- position:absolute
- top:控制距离顶部的位置
- left：控制距离左边的位置
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="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 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. 第二部分是导航菜单-->
<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>
<!--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%;background-color: white;">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="6">会员注册</font>USER 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="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>
<!--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必须是唯一的
-
扩展选择器
选择器分组：选择器1,选择器2 以逗号隔开
后代选择器：选择器1 选择器2 中间以空格隔开
子元素选择器： 爸爸>儿子
属性选择器: 选择器[属性的名称='']
伪类选择器：超链接标签上使用
-
-
盒子模型：顺时针：上右下左
- 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：Browser Object Model 浏览器对象模型，前进，后退，页面刷新，地址栏，历史记录，屏幕宽高
JS的语法:
- 变量弱类型：var i = true
- 区分大小写
- 语句结束之后的分号，可以有，也可以没有
- 写在script标签
JS的数据类型:
- 基本类型
- string
- number
- boolean
- undefine
- null
- 引用类型
- 对象，内置对象
- 类型转换
- js内部自动转换
- string---->String
- js内部自动转换
JS的运算符和语句：
- 运算符和java一样
- ”===“全等号：值和类型都必须相等
- "==" 等等好：值相等就可以了
- 语句和java一样
JS的输出：
alert()直接弹框
document.write() 向页面输出
console.log() 向控制台输出
innerHTML ：向页面输出
获取页面元素：document.getElementByld("id的名称");
-
JS声明变量
- var 变量的名称 = 变量的值
-
JS声明函数
-
var 函数的名称 = function() {
}
-
function 函数的名称(){
}
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 弱变量类型*/
var i = 1;
var j = "zhangsan"; //string --- >String
//alert("lisi".length);
var str1 = 111;
var str2 = "111";
// alert(str1 === str2);
//向页面输出内容
document.write("黑马程序员");
//向控制台输出
console.log("向控制台输出");
</script>
</head>
<body>
</body>
</html>
JS的开发步骤
1.确定事件
2.通常事情都会触发一个函数
3.函数里面通常都会去操作页面元素，做一些交互动作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件 点击事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作
-->
<script>
function dianwo(){
//alert("我被点击了");
//1.首先要获得这个div
var div = document.getElementById("div1")
div.innerHTML = "<font color='red'>内容被替换掉了</font>";
// div.innerText = "<font color='red'>内容被替换掉了</font>";
}
</script>
</head>
<body>
<input type="button" value="点我,修改DIV中的内容" onclick="dianwo()" />
<div id="div1">
这里的内容一会要被替换掉
</div>
</body>
</html>
步骤分析
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1.校验用户名, 长度不能小于6位
1.确定事件: 提交事件 onsubmit
2.事件要触发函数 checkForm()
3. 函数中要去做一些校验
-->
<script>
function checkForm(){
//获取用户输入的内容
var input1 = document.getElementById("username");
// alert(input1.value);
var uValue = input1.value;
if(input1.value.length >= 6){
}else{
alert("对不起,用户名太短啦!")
return false;
}
//邮箱的校验
//获取用户输入的邮箱的值
var email = document.getElementById("email")
var uEmail = email.value;
if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){
alert("校验成功");
}else{
alert("校验失败")
return false;
}
return true;;
}
</script>
</head>
<body>
<form action="../01-网站首页的优化/网站首页.html" onsubmit="return checkForm()" >
用户名:<input type="text" id="username" /><br />
密码:<input type="password" id="password" /><br />
邮箱:<input type="text" id="email" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
会定义变量：var 变量的名称 = 变量的值
会定义函数：
? function 函数的名称(参数的名称) {
? }
