Python Day 48 前端 CSS标签的隐藏、CSS 盒子阴影、CSS定位布局、CSS定位案例、Javascript语言、Javascript书写位置、JavaScript基础语法

时间 2019-12-08

标签 python day 前端 css 标签隐藏盒子阴影定位布局案例 javascript 语言书写位置基础语法栏目 Python 繁體版

原文原文链接

　　## CSS标签的隐藏javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            /*border-style: solid;*/
            /*border-width: 1px;*/
            /*border-color: red;*/

            border: 1px solid red;

            background: url("img/001.png") no-repeat 0 0;

            font: normal 30px/100px 'Arial';
            color: green;
            text-align: center;
        }
        .d1:hover ~ .d2 {
            display: block;
        }

        .d2 {
            /*不以任何方式显示，在页面中不占位，但从新显示，任然占位*/
            display: none;
        }
        .d3 {
            /*修改盒子的透明度，值为0，彻底透明，但在页面中占位*/
            opacity: 0.5;
        }
        /*显示和影藏都不占位，用来作一些标签的显示影藏切换*/
    </style>
</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</body>
</html>

　　##CSS 盒子阴影html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 100px auto;

            /*x轴偏移 y轴偏移 虚化程度 阴影宽度 颜色*/
            box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　##CSS定位布局java

#一、定位布局引入
“”“
学习完盒模型样式后，能够完成盒模型位置的改变，学习了浮动样式布局后，又能让默认上下排列显示的盒模型快速左右排列，可是仍然很差或不能完成一下两种样式布局需求：

需求1：在页面能够发生滚动的时候，盒模型能不能至关页面窗口是静止的，不会随着页面滚动而滚动（页面小广告）

需求2：父标签已经规定死了宽和高，多个子标签之间不相互影响位置布局，每一个子标签自身相对于父级宽高提供的显示区域进行独立的位置布局

”“”

#二、固定定位：
1、一个标签要相对于窗口静止，采用固定定位
二、若是有多个固定定位标签，都是参考窗口，因此之间不相互影响，但可能出现图层重叠，经过 z-index 值绝对图层上下关系


#三、绝对定位：
1、一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的)，且兄弟标签之间布局不影响(兄弟动，自身相对父级仍是保持静止)
二、z-index 值能改变重叠的兄弟图层上下关系
3、子级相对的父级必定要 定位处理 （三种定位都可以）
    父级要先于子级布局，因此子级在采用绝对定位时，父级通常已经完成了布局，若是父级采用了 定位 来完成的布局，子级天然就至关于父级完成 绝对定位
    若是父级没有采用 定位 来完成的布局，咱们要后期为父级增长 定位 处理，来辅助子级 绝对定位，父级的 定位 是后期增长的，咱们要保证增长后不影响父级以前的布局，相对定位能够完成


#四、相对定位：
1、父相子绝

二、相对定位也存在独立使用，可是能够用盒模型彻底取代，因此通常不用

　　##CSS定位案例编程

#案例1、固定定位****************************************************************************************************
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /* 当前页面窗口的宽高(锁屏幕尺寸变化而变化)：vw vh   vw：视窗宽度的百分比（1vw 表明视窗的宽度为 1%）
vh：视窗高度的百分比*/
            height: 500vw;
            background-color: red;
        }
        .tag {
            width: 180px;
            height: 300px;
            background-color: orange;

            /*一旦打开定位属性，left、right、top、bottom四个方位词均能参与布局*/
            /*固定定位参考浏览器窗口*/
            /*布局依据：固定定位的盒子四边距浏览器窗口四边的距离：eg：left - 左距左，right - 右距右*/
            /*左右取左，上下取上*/
            position: fixed;
            left: 0;
            /*calc会计算，使用窗口一半的高度减去.tag标签的一半高度*/
            top: calc(50% - 150px);
            right: 50px;
            bottom: 20px;
        }
        .flag {
            width: 220px;
            height: 330px;
            background-color: pink;

            position: fixed;
            left: 0;
            top: calc(50% - 165px);
        }
        .tag {
            /*z-index值就是大于等于1的正整数，多个重叠图层经过z-index值决定上下图层显示前后*/
            z-index: 666;
        }
        .flag {
            z-index: 888;
        }

    </style>
</head>
<body>
<div class="tag"></div>
<div class="box"></div>
<div class="flag"></div>
</body>
</html>

#二、绝对定位和绝对定位结合案例****************************************************************************************************
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orange;
            margin: 100px auto 0;
        }
        .s {
            width: 100px;
            height: 100px;
            font: normal 20px/100px 'Arial';
            text-align: center;
        }
        .s1 { background-color: red }
        .s2 { background-color: pink }
        .s3 { background-color: green }


        .s {
            /*绝对定位：子标签获取不到父级标签的宽，也撑不开父级的高*/
            /*子标签必须本身设置宽高，父级也必须本身设置宽高*/
            position: absolute;
            /*绝对定位的标签都是相对于一个参考系进行定位，直接不会相互影响*/

            /*参考系：最近的定位父级*/
            /*打开了四个定位方位*/
            /*上距上...下距下*/
            /*上下去上、左右取左*/
        }
        .box {
            /*子级采用绝对定位，通常都是想参考父级进行定位，父级必须采用定位处理才能做为子级的参考系*/
            /*父级能够选取 fixed、 absolute，但这两种定位都会影响盒模型，relative定位不会影响盒模型*/
            /*父相子绝*/
            position: relative;
        }
        .s1 {
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 1;
        }
        .s2 {
            bottom: 50px;
            left: 0;
            z-index: 10;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="s s1">1</div>
        <div class="s s2">2</div>
        <div class="s s3">3</div>
    </div>
</body>
</html>

#三、绝对定位和相对定位案例2（父相子绝）****************************************************************************************************
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body, ul, a {
            /*清除系统默认样式*/
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
    </style>
</head>
<body>

    <style>
        .header {
            width: 100vw;
            height: 50px;
            background-color: brown;
        }
        .header li {
            width: 150px;
            height: 50px;
            background-color: orange;
            /*左浮动*/
            float: left;
            /*控制兄弟向右移动10*/
            margin-right: 10px;
            text-align: center;
            font: normal 20px/50px 'Arial';
        }
        .nav {
            width: 100vw;
            height: 80px;
            background-color: tomato;
        }
        .info {
            width: 150px;
            height: 200px;
            background-color: pink;

        }

        .header {
            /*子级移动要相对于父级，因此要对父级进行定位处理，relative相对移动不影响盒子，规则：父相子绝*/
            position: relative;
        }
        .info {
             position: absolute;
            left: 160px;
            top: 50px;
            display: none;
        }
        .card:hover ~ .info {
            display: block;
        }
    </style>
    <ul class="header">
        <li>首页</li>
        <li class="card">下载</li>
        <li>我的主页</li>
        <div class="info"></div>
    </ul>
    <div class="nav"></div>

</body>
</html>

#三、定位案例3****************************************************************************************************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrapper {
            width: calc(200px * 5 + 40px);
            margin: 0 auto;
            border: 1px solid black;
        }
        .wrapper:after {
            content: "";
            display: block;
            clear: both;
        }
        .box {
            width: 200px;
            height: 260px;
            background-color: orange;
            margin-right: 10px;
            margin-bottom: 10px;
            float: left;
            /*要不要辅助子级，父级均可以添加一个相对定位*/
            position: relative;
        }
        .box:nth-child(5n) {
            margin-right: 0;
        }
        .t, .b {
            height: 125px;
            background-color: pink;
        }
        .t {
            margin-bottom: 10px;
        }
        .b1 {
            /*设置背景图片 不平铺*/
            background: url("img/001.jpg") no-repeat;
            /*修改图片大小 显示宽度的效果*/
            background-size: 200px 260px;
        }
        .b2 div {
            position: absolute;
            width: 50px;
            height: 30px;
            background-color: cyan;
            left: calc(50% - 25px);
            /*display: none;*/
        }
        .b2 img {
            width: 150px;
            position: absolute;
            left: calc(50% - 75px);
            top: 50px;
        }
        .b2 p {
            position: absolute;
            background-color: brown;
            bottom: 10px;
            width: calc(100%);
            text-align: center;
        }
        .b2 .f {
            width: calc(100%);
            background-color: #ff6700;
            position: absolute;
            left: 0;
            bottom: 0;
            /*没有高度，也会显示文本，因此文本要隐藏*/
            overflow: hidden;
            /*display: none;*/
            height: 0;
            /*谁过渡谁有transition*/
            transition: 0.2s;
        }
        .box {
            transition: 0.2s;
            top: 0;
        }
        .b2:hover {
            /*margin-top: -5px;*/
            top: -5px;
            /*盒子阴影*/
            box-shadow: 0 0 5px 0 black;
        }
        .b2:hover .f {
            /*display: block;*/
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box b1"></div>
        <div class="box b2">
            <div>新品</div>
            <img src="img/002.jpg">
            <p>小米么么么么</p>
            <div class="f">1234567878</div>
        </div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box">
            <div class="t"></div>
            <div class="b"></div>
        </div>
    </div>
</body>
</html>

　　##Javascript数组

#一、javascript介绍
js:前台脚本语言 - 编程语言 - 弱语言类型 - 完成页面业务逻辑及页面交互

1、能够本身生成页面数据
2、能够请求后台数据
三、能够接受用户数据 - 能够渲染给页面的其余位置；提交给后台
4、修改页面标签的 内容、样式、属性、事件(页面经过js能够完成与电脑的输入输出设备的交互)

#二、JavaScript如何学习
学习方向：从JS代码书写位置、JS基础语法、JS选择器和JS页面操做四部分进行学习

学习目的：完成页面标签与用户的人机交互及前台数据处理的业务逻辑

　　##Javascript书写位置浏览器

#一、书写位置：能够分为行间式、内联式和外联式三种。

#二、行间式
<!-- 关键代码 -->
<!-- 给div标签添加点击事件的交互逻辑：弹出文本提示框 -->
<div onclick="alert('点击我完成页面交互')">点我</div>

#三、内联式
JS代码书写在script标签中，script标签能够出如今页面中的任意位置，建议放在body标签的最后(html代码是自上而下进行解析加载，放在body标签的最下方，会保证页面全部标签都加载完毕，html再去加载js文件，那么js脚步文件就会更好的控制页面标签的人机交互了)

<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
    <!-- body标签中的全部子标签位置 -->
    
    <!-- script标签出如今body标签的最下方 -->
    <script>
        alert('该页面被加载！')
    </script>
</body>

#四、外联式
JS代码书在外部js文件中，在html页面中用script标签引入js文件（建议在body标签最下方引入，理由同上）

#4-一、js文件夹下的my.js
alert('外联式js文件弹出框')
#4-二、根目录下的second.html
<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
    <!-- body标签中的全部子标签位置 -->
    
    <!-- script标签出如今body标签的最下方 -->
    <script src="js/my.js">
        /* 不要在此写JS代码，缘由是用来引入外部js文件的script标签，标签内部书写的JS代码不在起做用 */
    </script>
</body>

#五、总结
行间式控制交互最直接，可是交互逻辑多了直接致使页面可读性变差，且交互逻辑相同的标签样式也须要各自设置，复用性差，不建议使用；

内联式能够同时为多个标签提供交互逻辑（课程后面会详细介绍），学习阶段代码量不大的状况下，也不须要分文件处理的，这时候建议使用内联式；

外联式是分文件管理不一样的页面存在的相同与不一样的数据处理的业务逻辑与人机交互，能够极大提升开发效率，项目开发时必定要采用外联式来处理JS代码。

经过上面的介绍，你们很清楚JS是一门脚本编程语言，那么咱们必定先要了解一下这门编程语言的基础语法，才能够慢慢的展开学。

　　##JavaScript基础语法app

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>js语法</h1>
</body>

<script>
    let aaa = 123;
    let bbb = '123';

    console.log(aaa == bbb);  // == 只作数据比较
    console.log(aaa === bbb);  // === 作数据与类型比较

    // 弱语言类型：会本身根据环境决定如何选择类型存储数据
    console.log(1 + 2);  // 3
    console.log('1' + '2');  // 12
    console.log(1 + '2');  // 12
    console.log(1 - '2');  // -1

</script>


<script>
    // 3、数据类型
    // 值类型
    // 1) 数字类型
    let a = 123;
    console.log(a, typeof(a));
    a = 3.14;
    console.log(a, typeof(a));

    // 2) 布尔类型
    let b = false;
    console.log(typeof(b), b);

    // 3) 字符串类型：''  ""  ``
    let c = `123
456
789`;
    console.log(c, typeof(c));

    // 4) 未定义类型：未初始化的变量
    let d;
    console.log(d, typeof(d));

    // 引用类型
    // 5) 数组（至关于list）：
    let arr = [1, 2, 3];
    console.log(arr, typeof(arr));

    // 6) 对象（至关于dict）：全部的key必须是字符串
    let sex = '男';
    let dic = {
        name: 'Owen',
        age: 17.5,
        sex,  // value若是是变量，变量名与key同名，能够简写
    };
    console.log(dic, typeof(dic));

    // 7) 函数类型
    function fn() { }
    console.log(fn, typeof(fn));

    // 8) null类型
    let x = null;
    console.log(x, typeof(x));
</script>



<script>
    // 2、变量与常量
    let num = 123;
    num++;
    console.log(num);

    const str = '123';
    // str = '456';  // 常量声明时必须赋初值，且一旦赋值，不可改变
    console.log(str);
</script>

<script>
    // 1、三种输出信息的方式
    // 控制台输出语句
    console.log('你丫真帅')

    // 弹出框提示信息
    alert('你丫确实帅')

    // 将内容书写到页面
    document.write('<h2 style="color: red">你丫帅掉渣</h2>')
</script>

</html>