zoukankan      html  css  js  c++  java
  • Python正课104 —— 前端 进阶3

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12887888.html

    一:解决浮动带来的影响

    # 浮动带来的影响
    会造成父标签塌陷的问题
    
    """
    解决浮动带来的影响 推导步骤
    	1.自己加一个div设置高度
    	2.利用clear属性
    		#d4 {
                clear: left;  /*该标签的左边(地面和空中)不能有浮动的元素*/
            }
      3.通用的解决浮动带来的影响方法
      	在写html页面之前 先提前写好处理浮动带来的影响的 css代码
      	.clearfix:after {
                content: '';
                display: block;
                clear:both;
            }
        之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
        上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
    """
    

    二:溢出属性

    p {
                height: 100px;
                 50px;
                border: 3px solid red;
                /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/
                /*overflow: hidden;  !*溢出部分直接隐藏*!*/
                /*overflow: scroll;  !*设置成上下滚动条的形式*!*/
                /*overflow: auto;*/
            }
    

    三:定位

    1.静态

    所有的标签默认都是静态的static,无法改变位置

    2.相对定位(了解)

    相对于标签原来的位置做移动relative

    3.绝对定位(常用)

    相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)

    eg:小米网站购物车

    当你不知道页面其他标签的位置和参数,只给了你一个父标签的参数,让你基于该标签左定位

    4.固定定位(常用)

    相对于浏览器窗口固定在某个位置

    eg:右侧小广告

    <!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;
                 100px;
                background-color: red;
                left: 50px;  /*从左往右   如果是负数 方向则相反*/
                top: 50px;  /*从上往下    如果是负数 方向则相反*/
                /*position: static;  !*默认是static无法修改位置*!*/
                position: relative;
                /*相对定位
                标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
                虽然你哪怕没有动 但是你的性质也已经改变了
                */
            }
    
            #d2 {
                height: 100px;
                 200px;
                background-color: red;
                position: relative;  /*已经定位过了*/
            }
            #d3 {
                height: 200px;
                 400px;
                background-color: yellowgreen;
                position: absolute;
                left: 200px;
                top: 100px;
            }
    
            #d4 {
                position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
                bottom: 10px;
                right: 20px;
    
                height: 50px;
                 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>
    

    ps:浏览器是优先展示文本内容的

    四:验证浮动和定位是否脱离文档流(原来的位置是否还保留)

    """
    浮动
    相对定位
    绝对定位
    固定定位
    """
    # 不脱离文档流
    	1.相对定位
    # 脱离文档流
    	1.浮动
      2.绝对定位
      3.固定定位
      
    <!--<div style="height: 100px; 200px;background-color: red;position: relative;left: 500px"></div>-->
    <!--<div style="height: 100px; 200px;background-color: greenyellow"></div>-->
    
    <!--<div style="height: 100px; 200px;background-color: red;"></div>-->
    <!--<div style="height: 100px; 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
    <!--当没有父标签做到位 就参照与body-->
    <!--<div style="height: 100px; 200px;background-color: blue;"></div>-->
    
    <div style="height: 100px; 200px;background-color: red;"></div>
    <div style="height: 100px; 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
    <div style="height: 100px; 200px;background-color: blue;"></div>
    

    五:z-index模态框

    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;
                 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

    # 它不单单可以修改颜色的透明度还同时修改字体的透明度
    rgba只能影响颜色 
    而opacity可以修改颜色和字体
    
    opacity: 0.5;
    

    作业书写

    """
    当你在设计页面的时候 先用div划分区域,之后填写基本内容,最后再调节样式
    在书写html代码的时候 class、id等属性最好都起的见名知意
    """
    

    七:JS相关

    1.Js简介

    1.js也是一门编程语言 它也是可以写后端代码的
    	用js一统天下 前后端都可以写
      	nodejs 支持js代码跑在后端服务器上
        然而并不能 想的太天真了!!!
    2.js跟java一毛钱关系都没有,纯粹是为了蹭当时java的热度
    
    
    ECMAScript和JavaScript的关系
    因此ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。
    
    
    JS版本
    	主要还是用的5.1和6.0
    
    JavaScript 是脚本语言
    JavaScript 是一种轻量级的编程语言。
    JavaScript 是可插入 HTML 页面的编程代码。
    JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
    JavaScript 很容易学习
    
    # js的注释
    """
    // 单行注释
    
    /*
    多行注释1
    多行注释2
    多行注释3
    */
    """
    
    # 两种引入方式
    	1.script标签内部直接书写js代码
      2.script标签src属性引入外部js代码
    
    # js语法结构
    	js是以分号作为语句的结束
      但是如果你不写分号,问题也不大 也能够正常执行 但是它就相当于没有结束符
    

    2.js学习流程

    变量 ==> 数据类型 ==> 流程控制 ==> 函数对象 ==> 内置方法/模块

    3.变量

    """
    在js中 首次定义一个变量名的时候需要用关键字声明
    	1.关键字var
    		var name='jason'
    	2.es6推出的新语法
    		let name='jason'
    		如果你的编辑器支持的版本是5.1那么无法使用let
    		如果是6.0则向下兼容 var let
    """
    # var与let的区别
    n = 10
    for n in range(5):
      print(n)
    print(n)  
    # var 5		let 10
    
    """
    var在for循环里面定义也会影响到全局
    let在局部定义只会在局部生效
    """
    

    4.常量

    # python中没有真正意义上的常量 默认全大写就是表示常量
    # js中是有真正意义上的常量的
    const pi = 3.14
    
  • 相关阅读:
    连接上三星C5,播放音乐断音
    连接上LG NEXUS4播放音乐无声音输出,关机再开机回连再播放OK
    连接上LG G5时,“连接”提示音能听到明显拖尾杂音
    WebRTC原生开发和混合开发优缺点分析对比
    Safari即将支持WebRTC
    WebRTC通话过程中如何避免其它进程音量下降
    WebRTC 中RTT实现方法
    开发Rtmp推流端开发库的几种选择方案
    WebRTC中OPUS编码相关设置和分析
    WebRTC手记之初探
  • 原文地址:https://www.cnblogs.com/xuexianqi/p/12887888.html
Copyright © 2011-2022 走看看