Grid布局教程之网格单元格布局

最新推荐文章于 2023-07-05 09:32:32 发布

s_daqing

最新推荐文章于 2023-07-05 09:32:32 发布

阅读量253

点赞数

分类专栏：前端技术文章标签： grid

本文链接：https://blog.csdn.net/s_daqing/article/details/101344262

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    blockquote,body,button,div,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
    </style>
    <link rel="stylesheet" href="./telephone_position.css">
    <script src="./jquery-3.4.1.js"></script>
    <script src="./telephone_position.js"></script>
</head>
<body>
    <div>
        <span>ismi：</span><input type="text" name="ismi" id="ismi" value="" placeholder="请输入"> <button>提交</button>
    </div>
    <h2 class="title">xxxxxxxxxx</h2>
    <div class="main">
        <div class="parent">
            <div class="base_station_1"><p>基站1</p></div>
            <div class="base_station_2"><p>基站2</p></div>
            <div class="box a"><p>A</p></div>
            <div class="box b"><p>B</p></div>
            <div class="box c"><p>C</p></div>
            <div class="box d"><p>D</p></div>
            <div class="box e"><p>E</p></div>
            <div class="box f"><p>F</p></div>
            <div class="box g"><p>G</p></div>
            <div class="box h"><p>H</p></div>
            <div class="box i"><p>I</p></div>
            <div class="box j"><p>J</p></div>
            <div class="box k"><p>K</p></div>
            <div class="box l"><p>L</p></div>
        </div>
    </div>

</body>
</html>

css文件：

.title {
    text-align: center;
}

.main {
    width:100%;
    height:100vh;
    display:flex;
    /* 子元素水平居中 */
    justify-content: center;
    /* 子元素垂直居中 */
    align-items: center;
}

.base_station_1 {
    width: 40px;
    height: 20px;
    position: absolute;
    background: green;
    margin-left: 140px
}
.base_station_1 p {
    font-size: 15px;
}

.base_station_2 {
    width: 20px;
    height: 40px;
    position: absolute;
    background: green;
    margin-left: 300px;
    margin-top: 140px;
}

.base_station_2 p {
    font-size: 15px;
}

.parent {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    /* 给区域起名字 */
    /* grid-template-areas: "a a b"
                         "c d e"
                         "c d ."; */ 
    /* 行列间隔设置 */
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    /* 简写 */
    /* grid-gap: 10px 10px; */
    /* 设置中心对齐 */
    justify-items: center;
    align-items: center;
}
.box {
    width: 100px;
    height: 100px;
    background-color: royalblue;
    color: black;
    font-size: 100%;
    text-align: center;
    }

.box p {
    height: 20px;
    margin-top: 40px;
}

.a{
    grid-column-start: 1;
    grid-column-end: 2; 
    grid-row-start: 1;
    grid-row-end: 2;
    }
.b {
    grid-column-start: 2;
    grid-column-end: 3; 
    grid-row-start: 1;
    grid-row-end: 2; 
    /* background: yellowgreen */
    }
.c { 
    grid-column-start: 3;
    grid-column-end: 4; 
    grid-row-start: 1;
    grid-row-end: 2;
    }
.d { 
    grid-column-start: 1;
    grid-column-end: 2; 
    grid-row-start: 2;
    grid-row-end: 3;
    }
.e { 
    grid-column-start: 2;
    grid-column-end: 3; 
    grid-row-start: 2;
    grid-row-end: 3;
    }
.f { 
    grid-column-start: 3;
    grid-column-end: 4; 
    grid-row-start: 2;
    grid-row-end: 3;
    }
.g {
    grid-column-start: 1;
    grid-column-end: 2; 
    grid-row-start: 3;
    grid-row-end: 4;
    }
.h {
    grid-column-start: 2;
    grid-column-end: 3; 
    grid-row-start: 3;
    grid-row-end: 4;
    }
.i {
    grid-column-start: 3;
    grid-column-end: 4; 
    grid-row-start: 3;
    grid-row-end:4;
    }
.j {
    grid-column-start: 1;
    grid-column-end: 2; 
    grid-row-start: 4;
    grid-row-end:5;
    }
.k {
    grid-column-start: 2;
    grid-column-end: 3; 
    grid-row-start: 4;
    grid-row-end:5;
    }
.l {
    grid-column-start: 3;
    grid-column-end: 4; 
    grid-row-start: 4;
    grid-row-end:5;
    }


/* 指定起始行，结束行，起始列，结束列 */
/* .child:first-child {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    background: red;
} */
/* 使用缩写形式 */
/* .child:nth-child(2) {
	grid-row: 2/3;
	grid-column: 2/4;
	background: yellow;
} */
/* 直接指定区域名 */
/* .child:nth-child(3) {
	grid-area: i;
	background: green;
} */

js文件:

$(function(){
    // $('#txt01').keyup(function(){
    // $('button').click(function(){
        // var sVal = $('#ismi').val();
        $.ajax({
            url: 'http://127.0.0.1:8000/clothes/',
            type: 'GET',
            dataType: 'json',
            // data:{'code':300268}
        })
        .done(function(data) {
            // console.log(data)
            // var position_data = data.data
            var position_data = {"position_data1": -50, "position_data2": -50}
            console.log(position_data)
            position_data1 = position_data.position_data1
            position_data2 = position_data.position_data2
            if(position_data1 >= -53){
                var position_1 = ['a', 'b', 'c']
            }else if(position_data1 < -53 && position_data1 >= -63){
                var position_1 = ['d', 'e', 'f', 'g', 'h', 'i']
            }
            if(position_data2 >= -53){
                var position_2 = ['a', 'b', 'c']
            }else if(position_data2 < -53 && position_data2 >= -63){
                var position_2 = ['d', 'e', 'f', 'g', 'h', 'i']
            }
            let intersect = $(position_1).filter(position_2).toArray();
            console.log(intersect)
            if(intersect.length === 0){
                return
            }
            for(var i=0;i<intersect.length;i++)
            {
                let index = intersect[i]
                let tag = '.' + index 
                $(tag).css({background: "red"})
            }
        })
        .fail(function() {
            alert('服务器超时，请重试！');
        })
    })
// })

s_daqing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Grid布局教程之网格单元格布局

html页面：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
复制链接

扫一扫