day53

############标签的隐藏

 

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

############盒子的阴影

 

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

###########固定定位

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /* 当前页面窗口的宽高(锁屏幕尺寸变化而变化):vw 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;
            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>

############相对定位

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orange;
            border: 1px solid black;
        }

        .box {
            /*margin-left: 100px;*/
            /*margin-right: 100px;*/
            /*margin-top: 100px;*/
        }

        .box {
            /*相对定位偏移的是图层*/
            position: relative;
            /*left: 100px;*/
            /*right: 100px;*/
            /*top: 100px;*/
            /*bottom: 100px;*/
            /*参考系:自身原有位置,且自身偏移不影响原有位置*/
        }

        p {
            margin: 0;
            border: 1px solid black;
        }
    </style>

    <style>
        .box {
            margin: 10px 100px;
            position: absolute;
        }
    </style>

</head>
<body>
<div class="box">12345</div>
<p>12345</p>
</body>
</html>

 

 

## 定位布局总结

 

```python
"""
固定定位:
1、一个标签要相对于窗口静止,采用固定定位
2、如果有多个固定定位标签,都是参考窗口,所以之间不相互影响,但可能出现图层重叠,通过 z-index 值绝对图层上下关系

 


绝对定位:
1、一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的),且兄弟标签之间布局不影响(兄弟动,自身相对父级还是保持静止)
2、z-index 值能改变重叠的兄弟图层上下关系
3、子级相对的父级一定要 定位处理 (三种定位均可以)
父级要先于子级布局,所以子级在采用绝对定位时,父级一般已经完成了布局,如果父级采用了 定位 来完成的布局,子级自然就相当于父级完成 绝对定位
如果父级没有采用 定位 来完成的布局,我们要后期为父级增加 定位 处理,来辅助子级 绝对定位,父级的 定位 是后期增加的,我们要保证增加后不影响父级之前的布局,相对定位可以完成

 


相对定位:
1、父相子绝

 

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

 

##########小米商城2

 

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

 

 

 

#############js导入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dd {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>

</head>
<body>
    <!-- 点击弹出:hello js -->
    <!--行间式: 写在标签的 事件属性 中-->
    <!--<div id="dd" onclick="alert('hello js')"></div>-->
    <div id="dd"></div>

</body>
<!--内联式:写在script标签中,script标签应该出现在body的最下方(可以将其放在body结束后)-->
<!--<script>-->
    <!--dd.onclick = function () {-->
        <!--alert('hello js')-->
    <!--}-->
<!--</script>-->

<!--外联式:通过script标签的src属性,链接外部js文件-->
<script src="js/js导入.js">
    // 一个script标签拥有src引入外部js文件后,就相当于单标签,所以内部的代码会被自动屏蔽
    dd.onclick = function () {  // 不会起作用
        alert(666)
    }
</script>
</html>

############js的语法

 

<!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>
    // 三、数据类型
    // 值类型
    // 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>
    // 二、变量与常量
    let num = 123;
    num++;
    console.log(num);

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

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

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

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

</html>

 

posted @ 2019-07-03 21:27  轩辕12  阅读(221)  评论(0编辑  收藏  举报