53页面的搭建与js简介

Posted 千岁兰

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了53页面的搭建与js简介相关的知识,希望对你有一定的参考价值。

一、解决浮动带来的影响

1.1、问题点

  浮动会导致父标签(上一级的边框)塌陷问题

1.2、解决方案

  往边框里面添加一个标签,使其撑起来

  1.利用clear属性

    #d1 {clear:left;}  标签的左边不能有浮动元素

  2.利用clearfix属性

    在clearfix这个类后面建立一个空的内容,使其具有块级的特性,并且两边都不能有浮动元素

    这是面对浮动塌陷问题最常用的方法,在编写html时直接写入,当遇到塌陷问题时,给标签添加一个clearfix的属性即可

    .clearfix:after {content:" ";

          display:block;

          clear:both:}

二、溢出问题

  当块级标签的大小,小于内容的大小时,会造成溢出现象

2.1、文本溢出

  overflow:visible  默认溢出可见

  overflow:hidden  溢出部分隐藏

  overflow:scroll  溢出部分,通过上下滑动可见

  overflow:auto  溢出部分,用过上下以及左右滑动可见

2.2、图片溢出

  将图片设置成溢出部分隐藏,并且宽度为标签宽度的100%

  #d1{overflow:hidden;}

  #d1>img{width:100%}

三、定位

3.1、静态定位  static

  所有标签都会默认为静态的static,不可改变位置,即position:static

3.2、相对定位  relative

  相对于原标签移动relative

    在使用相对定位时,需要先将静态定位改为相对定位,否则无法移动。position:relative;之后添加移动的数据

3.3、绝对定位  absolute

  在知道父类定位的情况下,进行移动absolute

    在使用绝对定位时,如果父类是默认定位的情况下,需要先将父类改成相对定位position:relative,在将子类进行绝对定位position:absolute,之后进行移动

3.4、固定定位  fixed

  固定在浏览器的某个位置,例如小广告

    默认固定定位在右下角,直接输入固定定位position:fixed,之后移动,设置边框的大小以及样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        #d1 {
            height: 100px;
            width: 100px;
            background-color: red;
            left: 50px;  /*从左往右   如果是负数 方向则相反*/
            top: 50px;  /*从上往下    如果是负数 方向则相反*/
            /*position: static;  !*默认是static无法修改位置*!*/
            position: relative;
            /*相对定位
            标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
            虽然你哪怕没有动 但是你的性质也已经改变了
            */
        }

        #d2 {
            height: 100px;
            width: 200px;
            background-color: red;
            position: relative;  /*已经定位过了*/
        }
        #d3 {
            height: 200px;
            width: 400px;
            background-color: yellowgreen;
            position: absolute;
            left: 200px;
            top: 100px;
        }

        #d4 {
            position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
            bottom: 10px;
            right: 20px;

            height: 50px;
            width: 100px;
            background-color: white;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<!--    <div id="d1"></div>-->

<!--<div id="d2">-->
<!--    <div id="d3"></div>-->
<!--</div>-->

<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>

</body>
</html>

四、验证浮动和定位是否脱离文本流(是否还保留原本位置)

  不脱离文本流:相对定位

  脱离文本流:浮动、绝对定位、固定定位

<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->

<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->

<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>

五、z-index模态框

  如百度登录页面,设置三层结构,使用z-index:99,数值越高,层级越高

eg:百度登陆页面 其实是三层结构
  1.最底部是正常内容(z=0)  最远的
  2.黑色的透明区(z=99)          中间层
  3.白色的注册区域(z=100)  离用户最近

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .modal {
            background-color: white;
            height: 200px;
            width: 400px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            margin-left: -200px;
            margin-top: -100px;

        }
    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登陆页面</h1>
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <button>点我点我~</button>
</div>
</body>
</html>

六、透明度的设置

  opacity:0.9;同时修改颜色以及字体

  background-color:rgba(0,0,0,0.5);只能修改字体的透明度

七、页面的搭建

7.1、书写顺序

  1.先试用div进行站位,在填写基本内容,最后调整样式

  2.在编写HTML时,id和class要求见名知意

7.2、页面的搭建  

  https://www.cnblogs.com/jingpeng/p/12892183.html 

八、javascript简介

  JavaScript和Java没有任何的关系,也是一种语言,可以写后端

  是一种脚本语言,可以插入HTML页面的代码,并且可以使用浏览器执行

  JavaScript是ecmascript的一种体现,后者是前者的规格

8.1、注释

  单行注释:/单行/

  多行注释:/*多行*/

8.2、引入方式

  1.直接在script标签里面编写js代码

  2.通过script标签src属性属性引入外部js代码

8.3、js语法结构

  以分号为结束语句

8.4、变量

  需要使用关键字声明

  1.es6前:var

    var name=‘a’;  局部和全部由分隔开

  2.es6之后:var和let

    let name=‘b’;  局部和全局未分隔

8.5、常量

  python中:未明确的定义常量,默认大写为常量

  js中:使用const声明是常量,const pi=3.14

  

以上是关于53页面的搭建与js简介的主要内容,如果未能解决你的问题,请参考以下文章

angularJS使用ocLazyLoad实现js延迟加载

在PaddlePaddle中的Notebook代码片段

CentOS 7.6 搭建Gitlab教程

回归 | js实用代码片段的封装与总结(持续更新中...)

Vue.js---实现前后端分离架构中前端页面搭建

vscode代码片段建议bug