WEB_Day04(DIV+CSS布局、定位模式转换、元素的显示与隐藏、鼠标样式、轮廓、防止拖拽文本域、文字的居中、垂直对齐、JavaScript、JS的使用)

最新推荐文章于 2023-04-03 16:21:54 发布

hrh1276

最新推荐文章于 2023-04-03 16:21:54 发布

阅读量173

点赞数

分类专栏： WEB前端文章标签： css html js

本文链接：https://blog.csdn.net/weixin_47469183/article/details/114900918

版权

WEB前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

WEB_Day04(DIV+CSS布局、定位模式转换、元素的显示与隐藏、鼠标样式、轮廓、防止拖拽文本域、文字的居中、垂直对齐、JavaScript、JS的使用)

DIV+CSS布局

定位模式

静态定位就是标准流的布局方式
相对定位没有脱离标准流占有位置
绝对定位完全脱离标准流不占有位置
固定定位完全脱离标准流不占有位置

练习-轮播图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 1180px;
            height: 500px;
            border: 1px solid gray;
            margin: 20px auto;
            position: relative;
        }
        .left{
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -18px;
        }
        .right{
            position:absolute;
            top: 50%;
            right: 0;
            margin-top: -18px;
        }
        .cri{
            width: 200px;
            height: 20px;
            position: relative;
            bottom: 40px;
            left: 490px;
            list-style: none;
            background-color: rgba(216, 210, 210, 0.8);
            border-radius: 6px;
        }
        .cri li{
            float: left;
            width: 15px;
            height: 15px;
            background-color: white;
            border-radius: 50%;
            margin-left: 20px;
            margin-top: 3px;
            z-index: 100;
        }
        .current{
            background-color: rgb(80, 78, 78) !important;
        }
    </style>
</head>
<body>
    <div>
        <img class="main" src="images/1.jpg" alt="">
        <img class="left" src="images/left.png" alt="">
        <img class="right" src="images/right.png" alt="">
        <ul class="cri">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 2500px;
    }

    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      position: relative;
      left: 50%;
      top: 50%;
      margin-left: -100px;
    }

    .f {
      position: fixed;
      top: 50px;
      right: 20px;

    }
  </style>
</head>

<body>
  <div>
    <img class="f" src="imgs/sun.jpg" width="50px" height="50px" alt="">
  </div>
</body>

</html>

顶部导航栏和广告位采用固定定位：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      width: 1520px;
      height: 1500px;
      position: relative;
      top: 0;
      left: 50%;
      margin-left: -760px;
    }

    .top {
      position: fixed;
      top: 5px;
    }

    .l {
      position: fixed;
      top: 10px;
      left: 10px;
    }

    .r {
      position: fixed;
      top: 10px;
      right: 10px;
    }
  </style>
</head>

<body>

  <div class="main">
    <div class="top">
      <img src="imgs/top.png" alt="">
    </div>
    <div class="center;">
      <img class="l" src="imgs/ad-l.png" alt="">
      <img class="box" src="imgs/box.png" alt="">
      <img class="r" src="imgs/ad-r.png" alt="">
    </div>
  </div>

</body>

</html>

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
比如： z-index: 2;
注意：

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
    }

    .d1 {
      background-color: yellowgreen;
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 20;
    }

    .d2 {
      background-color: violet;
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 10;
    }

    .d3 {
      background-color: turquoise;
      position: absolute;
      top: 30px;
      left: 30px;
    }
  </style>
</head>

<body>
  <div class="d1"></div>
  <div class="d2"></div>
  <div class="d3"></div>
</body>

</html>

四种定位总结：

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，因此，比如行内元素如果添加了绝对定位或者固定定位后，可以不用转换模式，直接给高度和宽度就可以了。

元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！

display 显示：

display 设置或检索对象是否及如何显示。
display : none 隐藏对象与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点：隐藏之后，不再保留位置。

visibility 可见性：

设置或检索是否显示对象。

visible : 　对象可视
hidden : 　对象隐藏

特点：隐藏之后，继续保留原有位置。（停职留薪）

	/* 隐藏元素 不保留位置  */
      /* display: none; */
      /* 隐藏元素 保留位置 */
      visibility: hidden;

overflow 溢出：

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。
auto : 　超出自动显示滚动条，不超出不显示滚动条
hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 　不管超出内容否，总是显示滚动条

  /* 当内容超出了容器的大小的时候  隐藏多余的内容 */
      /* overflow: hidden; */
      /* 当内容超出了容器的大小的时候 根据内容选择是否添加滚动条 */
      /* overflow: auto; */
      /* 无论内容多少 都显示滚动条*/
      overflow: scroll;
    /* 不隐藏内容 也不添加滚动条 默认的选择 */
      overflow: visible;

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor : default 小白 | pointer 小手 | move 移动 | text 文本

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是： outline: 0;

防止拖拽文本域resize

resize：none 这个单词可以防止火狐、谷歌等浏览器随意的拖动文本域。
右下角可以拖拽：
在这里插入图片描述

文字的居中设置

  /* 设置文字的行高等于容器的高度 则文字可以垂直居中 */
      line-height: 200px;
      /* 设置文本水平居中 */
      text-align: center;

vertical-align 垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;
以前我们还讲过让文字居中对齐，是 text-align: center;
vertical-align 垂直对齐，这个看上去很美好的一个属性，实际有着不可捉摸的脾气

 img {
      vertical-align: middle;
    }

JavaScript

组成：
在这里插入图片描述
语言：解释执行，由浏览器执行

ECMAScript - 语法规范：

变量、数据类型、类型转换、操作符
流程控制语句：判断、循环语句
数组、函数、作用域、预解析
对象、属性、方法、简单类型和复杂类型的区别
内置对象：Math、Date、Array，基本包装类型String、Number、Boolean

Web APIs：

BOM
- onload页面加载事件，window顶级对象
- 定时器
- location、history
DOM
- 获取页面元素，注册事件
- 属性操作，样式操作
- 节点属性，节点层级
- 动态创建元素
- 事件：注册事件的方式、事件的三个阶段、事件对象

特点：

解释型语言
类似于 C 和 Java 的语法结构
动态语言
基于原型的面向对象
弱类型语言

作用：

表单验证
页面特效
动态调整页面内容

Js的使用

<!-- 使用外部的js文件   -->
  <script src="js/index.js" type="text/javascript"></script>
  <!--使用script标签来完成内部的js  -->
  <script type="text/javascript">

    alert("hello  Javascript");
    console.log("你好 javascript");

  </script>

行内的js代码（了解）

  <input type="button" value="按钮" onclick="javaScript:alert('这是行内的js代码')">

注释：

// 单行注释
/* 多行注释  */

标识符：

所谓标识符，就是指变量、函数、属性的名字，或函数的参数。
标识符可以是按照下列格式规则组合起来的一或多个字符：
- 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）
- 其他字符可以是字母、下划线、美元符号或数字。
按照惯例， ECMAScript 标识符采用驼峰命名法。
但是要注意的是JavaScript中的标识符不能是关键字和保留字符

变量：

变量的声明 var 标识符=值；

    var a = 10;
    var b = "aaaa";
    var c = true;
    alert(a + "--" + b + "--" + c);

数据类型：

JS中的六大数据类型：

js中有六种数据类型，包括五种基本数据类型

字符串型（ String）
数值型（ Number）
布尔型（ Boolean）
null型（ Null）
undefined型（ Undefined）

和一种复杂数据类型（Object）。这5种之外的类型都称为Object

typeof运算符：

由于js中的变量是松散类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是typeof关键字.

    var a = 10;
    var b = "aaaa";
    var c = true;
    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
    console.log(typeof null);
    console.log(typeof undefined);
    console.log(typeof {});
    console.log(typeof fun);

Number类型：

Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。
NaN:非数字类型。
特点：

涉及到的任何关于NaN的操作，都会返回NaN
NaN不等于自身。

isNaN() 函数用于检查其参数是否是非数字值。
isNaN(123) //false isNaN(“hello”) //true

  var a = 10;
    var b = "aa";
    //a = a + b;//string
    console.log(a);
    console.log(isNaN(a));
    console.log(isNaN(b));

有三个函数可以把非数值转换为数值： Number()、 parseInt()和parseFloat()。
Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。
parseInt()只会将字符串转换为整数，而parseFloat()可以转换为浮点数。

    var a = "10";
    var b = "aa";
    var c = true;
    var d = false;
    console.log(Number(b));//NaN
    console.log(Number(a));//10
    console.log(Number(c));//1
    console.log(Number(d));//0
    console.log(parseInt(a));//10
    console.log(parseInt(c));//NaN

string：

String用于表示一个字符序列，即字符串。
字符串需要使用 ’ 或“ 括起来。
转义字符：

将其他数值转换为字符串有三种方式： toString()、 String()、拼串

    var a = 10;
    console.log(typeof a.toString());
    console.log(typeof String(a));
    var b = "aa";
    console.log(typeof (a + b));

将其他数值转换为字符串有三种方式： toString()、 String()、拼串。
字符串有length属性。
字符串转换：

转型函数String(),适用于任何数据类型（null,undefined 转换后为null和undefined）
toString()方法（null,defined没有toString()方法）。

 console.log((a + b).length);

Boolean(布尔型)：

布尔型也被称为逻辑值类型或者真假值类型。
布尔型只能够取真（ true）和假（ false）两种数值。除此以外，其他的值都不被支持。
其他的数据类型也可以通过Boolean()函数转换为布尔类型。
转换规则：
在这里插入图片描述

console.log(Boolean('aa'));//true 
console.log(Boolean(''));//false 
console.log(Boolean(123));//true 
console.log(Boolean(0));//false 
console.log(Boolean(NaN));//false 
console.log(Boolean(undefined));//false

hrh1276

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB_Day04(DIV+CSS布局、定位模式转换、元素的显示与隐藏、鼠标样式、轮廓、防止拖拽文本域、文字的居中、垂直对齐、JavaScript、JS的使用)

WEB_Day04(DIV+CSS布局、定位模式转换、元素的显示与隐藏、鼠标样式、轮廓、防止拖拽文本域、文字的居中、垂直对齐、JavaScript、JS的使用)DIV+CSS布局定位模式静态定位就是标准流的布局方式相对定位没有脱离标准流占有位置绝对定位完全脱离标准流不占有位置固定定位完全脱离标准流不占有位置练习-轮播图：<!DOCTYPE html><html lang="en"><head> <meta chars
复制链接

扫一扫