本次目标:
使用CSS完成网站首页的优化
使用CSS完成网站注册页面的优化
使用JS完成简单的数据校验
使用JS完成图片轮播效果
A:使用CSS完成网站首页的优化
需求分析:
由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用DIV+CSS来对页面进行优化
表格布局的缺陷:
1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果
2. 采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变
技术分析
HTML的块标签:
div标签: 默认占一行,自动换行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 5px solid red ; width: 500px;">这是一个div块</div>
<div style="border: 5px solid red ; width: 500px;">这是一个div块</div>
</body>
</html>
span标签: 内容显示在同一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="border:5px solid yellowgreen; with=500px">这是一个span块</span>
<span style="border:5px solid yellowgreen; with=500px">这是一个span块</span>
</body>
</html>
CSS概述:
Cascading Style Sheets : 层叠样式表
就像装修,给上面红砖, 抹了一层水泥, 白灰
主要用作用:
A:用来美化我们的HTML页面的
B:HTML 决定网页的骨架 ,CSS 化妆
C:将页面的HTML和美化进行分离
CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
<style>
选择器{
属性名称:属性的值;
属性名称2: 属性的值2;
}
</style>
CSS选择器: 帮助我们找到我们要修饰的标签或者元素
元素选择:
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
ID选择器:
以#号开头 ID在整个页面中必须是唯一的
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
类选择器:
以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
CSS的引入方式:
外部样式: 通过link标签引入一个外部的css文件
内部样式: 直接在style标签内编写CSS代码
行内样式: 直接在标签中添加一个style属性, 编写CSS样式
<!-- css文件 -->
.shuiguo{
color:red;
}
<!-- HTML文件 外部样式-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
A 在html文件外专门建一个css文件来配置css样式
rel:声明这是一个css文件
href:css文件路径
-->
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div class="shuiguo">苹果</div>
<div class="shucai">南瓜</div>
<div class="shuiguo">香蕉</div>
<div class="shucai">冬瓜</div>
<div class="shucai">木耳</div>
</body>
</html>
<!-- HTML文件 内部样式-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.shuiguo{
color:yellowgreen;
}
</style>
</head>
<body>
<div class="shuiguo">苹果</div>
<div class="shucai">南瓜</div>
<div class="shuiguo">香蕉</div>
<div class="shucai">冬瓜</div>
<div class="shucai">木耳</div>
</body>
</html>
<!-- 行内样式 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="shucai" style="color: cyan;">南瓜</div>
<div class="shucai">青瓜</div>
<div class="shuiguo">苹果</div>
<div class="shucai">茄子</div>
<div class="shuiguo">橘子</div>
</body>
</html>
CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
float属性:
left
right
clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
流式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
浮动:float 流氏布局
左浮动 left
右浮动 right
clear 属性 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
-->
<div style=" background: yellowgreen; width: 500px; height: 200px; float: left;"></div>
<div style=" background: cyan; width: 550px; height: 2