CSS的基本使用

﹏ヽ暗。殇╰゛Y 2022-11-27 00:50 190阅读 0赞

### CSS的基本使用： ###

###### 使用CSS完成网站首页的优化 ######

###### 使用CSS完成网站注册页面的优化 ######

###### 使用JS完成简单的数据校验 ######

###### 使用JS完成图片轮播效果 ######

##### 目标： #####

*  了解CSS的概念
 *  了解CSS的引入方式
 *  了解CSS的基本用法和常用的选择器
 *  了解CSS的盒子模型，悬浮和定位
 *  了解JS的概念
 *  掌握JS的基本语法，数据类型，能够使用JS完成简单的页面交互

--------------------

HTML内容简单回顾：

什么是HTML：超文本标记语言

*  p标签：段落标签
 *  br标签：简单换行
 *  h1-h6：标题标签
 *  hr标签：水平分割线，华丽的分割线
 *  font标签：color属性改变颜色，size默认3
 *  b标签：加粗
 *  i标签：斜体
 *  strong标签：带语义的加粗
 *  em标签：斜体标签，带语义
 *  img标签：图片标签
    
     *  src： 指定图片路径(相对路径)
     *  width： 宽度
     *  height： 高度
     *  alt： 图片加载失败时的提示

相对路径：

*  ./ 代表当前路径
 *  . ./ 代表的是上一级路径
 *  . ./. ./ 代表的是上上一级路径，依次类推
 *  ul标签：无序列表
 *  ol标签：有序列表
 *  li标签：列表项
 *  a标签：超链接标签：
 *  target：打开方式
 *  href：指定要跳转的链接地址
 *  table标签：table > tr > td
    
     *  tr标签：行
     *  td标签：列
     *  合并行：rowspan
     *  合并列：colspan
 *  form 标签：表单标签，主要是用来向服务器提交数据
    
     *  method：提交方式：get，post
     *  action：提交的路径
 *  input 标签：
    
     *  type：
        
         *  password：密码框
         *  text：文本
         *  submit：提交
         *  button：普通的按钮
         *  reset：重置按钮
         *  radio：单选按钮，设置name属性，让它们是一组
         *  checkbox：复选按钮
         *  email：邮箱
         *  date：日期
         *  tel：手机号码
 *  frameset：框架标签
    
     *  rows：
     *  cols：
     *  frame：

--------------------

### 使用CSS完成网站首页的优化 ###

#### 需求分析： ####

由于使用表格布局存在缺陷，那么我们要来考虑使用DIV+CSS来对页面进行优化。

表格布局的缺陷：

*  嵌套层级太多， 一旦出现嵌套顺序错乱， 整个页面达不到预期效果
 *  采用表格布局，页面不够灵活， 动其中某一块，整个表格布局的结构全都要变

--------------------

#### 技术分析 ####

HTML的块标签：

*  div标签：默认占一行，自动换行
 *  span标签：内容显示在同一行

CSS概述：

*  Cascading Style Sheets ： 层叠样式表
 *  主要用作用：用来美化我们的HTML页面的，HTML 决定网页的骨架，CSS决定样式，将页面的HTML和美化进行分离，提高代码的复用。

CSS的简单语法：

*  在一个style标签中，去编写CSS内容，最好将style标签写在这个head标签中。

--------------------

CSS选择器：帮助我们找到我们要修饰的标签或者元素

元素选择器：

元素的名称{
      属性名称1： 属性的值;
      属性名称2： 属性的值;
    }

ID选择器：

#ID的名称{
      属性名称：属性的值;
      属性名称：属性的值;
    }

类选择器：

以 . 开头 
    .类的名称{
       属性名称：属性的值;
      	属性名称：属性的值;
    }

**CSS的引入方式：**

*  外部样式：通过link标签引入一个外部的css文件
 *  内部样式：直接在style标签内编写CSS代码
 *  行内样式：直接在标签中添加一个style属性， 编写CSS样式

CSS浮动：浮动的元素会脱离正常的文档流，在正常的文档流中不占空间。

*  float属性：left，right
 *  clear属性：清除浮动
    
     *  both：两边都不允许浮动
     *  left：左边不允许浮动
     *  right：右边不允许浮动

这种浮动被称为：流式布局。

--------------------

#### 扩展： ####

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对我们的注册页面进行美化。

#### 技术分析 ####

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： 控制距离左边的位置

--------------------

### CSS部分的回顾： ###

CSS：层叠样式表.

CSS作用：美化页面，提高代码的复用性。

CSS选择器，需要掌握的有：

*  元素选择器：标签的名称
 *  类选择器：以 . 开头
 *  ID选择器：以\#开头，\#ID的名称，ID必须是页面上唯一的

优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器

当存在一样的选择器时，就近原则。

扩展选择器：

*  选择器分组：选择器1，选择器2 以逗号隔开
 *  后代选择器：爷爷 孙子 中间以空格隔开
 *  子元素选择器：爸爸 > 儿子
 *  属性选择器：选择器\[属性的名称=’’\]
 *  伪类选择器：超链接标签上使用

浮动：float属性，值left right

清除浮动：写一个空白div，加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：Browser Object Model，浏览器对象模型，前进，后退，页面刷新， 地址栏，历史记录，屏幕宽高等。

--------------------

##### JS的语法： #####

变量弱类型：var i = true; var j = “hello world”;

代码区分大小写。

语句结束之后的分号，可以有，也可以没有，最好写上。

代码写在script标签内。

--------------------

##### JS的数据类型： #####

*  基本类型
    
     *  string
     *  number
     *  boolean
     *  undefine
     *  null
 *  引用类型
    
     *  对象， 内置对象
 *  类型转换
    
     *  js内部自动转换

--------------------

##### JS的运算符和语句： #####

*  运算符和java一样  
    === 全等号：值和类型都必须相等  
    == 值相等就可以了
 *  语句和java一样

--------------------

##### JS的输出 #####

*  alert()：直接弹框
 *  document.write()：向页面输出
 *  console.log()：向控制台输出
 *  innerHTML：向页面输出
 *  获取页面元素： document.getElementById(“id的名称”);

--------------------

#### JS声明变量： ####

var 变量名称 = 变量值;

JS声明函数：

var 函数的名称 = function()\{

function 函数的名称()\{

--------------------

#### JS的开发步骤 ####

1、确定事件
    2、通常事件都会触发一个函数
    3、函数里面通常都会去操作页面元素，做一些交互动作

--------------------

javascript：它是一门脚本语言，直接解释执行的语言。

javascript：

*  ECMAScript：定义的语法
 *  DOM：document Object Model
 *  BOM：浏览器对象模型

定义变量：var 变量的名称 = 变量的值;

定义函数：

function 函数的名称(参数的名称)\{

--------------------

### 使用JS完成图片的轮播效果 ###

#### 代码实现： ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script> /* 当页面加载完成的时候， 动态切换图片 1.确定事件： 2.事件所要触发的函数 */ var index = 1; //切换图片的函数 function changeAd(){ //获取要操作的img var img = document.getElementById("imgAd"); img.src = "../img/"+(index%3+1)+".jpg"; //0，1，2 //1，2，3 index++; } function init(){ //启动定时器0 setInterval("changeAd()"，3000); } </script>
    	</head>
    	<body onload="init()">
    		<img src="../img/1.jpg" id="imgAd"/>
    	</body>
    </html>

--------------------