web第二次作业练习grid

效果图：

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>win10</title>
<script type="text/javascript" src="jquery-3.3.1.min.js">

</script>
<style type="text/css">

.wrapper {
display: grid;

grid-template-columns:repeat(3, 1fr);/*css fr 单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。*//*设置三列的宽度,repeat(3,1fr)等同1fr 1fr 1fr,也就是grid-template-columns:1fr 1fr 1fr;因为剩余容器空间100%，所以将容器三等分成3列*/

grid-gap: 10px;/*间隔10px,等同（grid-column-gap: 10px;grid-column-gap: 10px;）（grid-gap: 10px 10px;）*/

grid-template-rows: 100%;/*行的宽度*/
/*网格容器的长宽*/
width: 850px;
height: 600px;
background: rgba(128,0,0,0.8);
}

.bigCol1 {
display: grid;
grid-template-columns: 2fr 9fr;/*列宽*/
grid-template-rows: repeat(16,1fr);/*行数16，平分网格容器*/

}
.col-2 {
grid-row: 1/17;/*col-2这个内容占第一根行网格线到第十七根网格线*/
display: grid;
grid-template-rows: repeat(12,1fr);/*行数12，平分网格容器*/
}

.bigCol2 {
display: grid;
grid-template-rows: 1fr 6fr 1fr 9fr;/*将剩余100%空间按1：6：1：9比列分高度*/
grid-gap:5px;/*间隔5px*/
grid-template-columns: 100%; /*每列占父元素100%，因此只有一列*/
}

.bigCol3 {
display:grid;
grid-template-rows: 1fr 9fr 1fr 6fr;/*将剩余100%空间按1：9：1：6比列分高度*/
grid-gap:5px;/*间隔5px*/
grid-template-columns: 100%; /*每列占父元素100%，因此只有一列*/
}

.Center {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.Center .center {
width: 50%;
height: 50%;
border-radius: 50%;

}
.Center .center img {
height: 100%;
width: 100%;
border-radius: 50%;

}

.item1 {

font-size: 13px;
color: white;
margin-top:10px;
padding-left:20px;
}

.bigCol2-2,
.bigCol3-4 {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
grid-gap: 5px;
}
.bigCol2-4,
.bigCol3-2 {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(3,1fr);
grid-gap: 5px;

}

.item {
color: white;

}
.pink-red {
background-color: #FF6666;
}

.yellow-red {
background-color: #FF3300;
}
.sky-blue {
background-color: #0099FF;

}

.black {
background-color: black;
}

.depth-gray-blue {
background-color: #333333;
}
.gay {
background-color: #660099;
}
.depth-green {
background-color: #006633;
}
.gray-blue {
background-color: #336666;
}
.thin-blue {
background-color: #66FFFF;
}

.text span {
display: inline-block;
font-size: 13px;
padding-top:10px;

}

.text span:hover {
cursor: pointer;
}
.text input {
margin-top:10px;
margin-left: 10px;
width:200px;
border-style: solid;
border-width: 2px 50px 2px 2px;
border-color: #FF6666;

}

.option:hover {
background-color: rgba(255,255,255,0.2)
}

.choose:hover {
border:2px solid rgba(255, 255, 255, 0.7);
}
</style>
</head>
<body>

<div class="wrapper">
<div class="bigCol1 item">
<div class="col-2">
<div class="option Center"><span>S</span></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div class="option Center"><div class="center"><img src="1FZ9131229-4.jpg" alt=""></div></div>
<div class="option Center" ><div class="center"><img src="590c4b55ca.png"alt=""></div></div>
<div class="option Center"><div class="center"><img src="57a757038a.png"alt=""></div></div>
</div>
<div class="option"><div class="item1">最近添加</div></div>
<div class="option "><div class="item1">WPS</div></div>
<div class="option"><div class="item1">Visual Studio 2017</div></div>
<div class="option "><div class="item1">Pycharm</div></div>
<div class="option"><div class="item1">A</div></div>
<div class="option "><div class="item1">Apache2.4</div></div>
<div class="option"><div class="item1">Anaconda3</div></div>
<div class="option "><div class="item1">B</div></div>
<div class="option"><div class="item1">Blend</div></div>
<div class="option "><div class="item1">C</div></div>
<div class="option"><div class="item1">Chinese</div></div>
<div class="option "><div class="item1">E</div></div>
<div class="option"><div class="item1">eclipse</div></div>
<div class="option "><div class="item1">Epc Game</div></div>
<div class="option"><div class="item1">F</div></div>
<div class="option "><div class="item1">Firefox</div></div>

</div>
<script type="text/javascript">

function show(element){
$(element).hide();
$(element.nextSibling).show();
element.nextSibling.focus();
$(element.nextSibling).attr({
"value":$(element).html()
});
}

function hid(element,name) {
$(element).hide();

$(name).show();
}

</script>
<div class="bigCol2 item text">
<div><span onclick="show(this)" id="title1" >创建</span><input onblur="hid(this,"#title1")" hidden="hidden" type="text"></div>
<div class="bigCol2-2 ">
<div class="choose pink-red Center">
<div class="item2">星期四</div>
</div>
<div class="choose pink-red Center">
<div class="item2">邮件</div>
</div>
<div class="choose pink-red Center">
<div class="item2">画图3D</div>
</div>
<div class="choose yellow-red Center">
<div class="item2">My Office</div>
</div>

</div>
<div class="text"><span onclick="show(this)" id="title2">浏览</span><input onblur="hid(this,"#title2")" hidden="hidden" type="text"></div>
<div class="bigCol2-4 ">
<div class="choose sky-blue Center">
<div class="item2 ">Microsoft Store</div>
</div>
<div class="choose sky-blue Center">
<div class="item2 ">Microsoft Edge</div>
</div>
<div class="choose black Center">
<div class="item2">DOLBY</div>
</div>
<div class="choose depth-gray-blue Center">
<div class="item2">多云19.C</div>
</div>
<div class="choose thin-blue Center">
<div class="item2">音乐</div>
</div>
<div class="choose pink-red Center">
<div class="item2">BliBli</div>
</div>

</div>
</div>
<div class="bigCol3 item text">
<div><span onclick="show(this)" id="title3">娱乐</span><input onblur="hid(this,"#title3")" hidden="hidden" type="text"></div>
<div class="bigCol3-2 ">
<div class="choose sky-blue Center">
<div class="item2 ">Microsoft Store</div>
</div>
<div class="choose sky-blue Center">
<div class="item2 ">Microsoft Edge</div>
</div>
<div class="choose black Center">
<div class="item2">DOLBY</div>
</div>
<div class="choose depth-gray-blue Center">
<div class="item2">多云19.C</div>
</div>
<div class="choose thin-blue Center">
<div class="item2">音乐</div>
</div>
<div class="choose pink-red Center">
<div class="item2">BliBli</div>
</div>
</div>
<div><span onclick="show(this)" id="title4">其他</span><input onblur="hid(this,"#title4")" hidden="hidden" type="text"></div>
<div class="bigCol3-4 ">
<div class="choose pink-red Center">
<div class="item2">星期四</div>
</div>
<div class="choose pink-red Center">
<div class="item2">邮件</div>
</div>
<div class="choose pink-red Center">
<div class="item2">画图3D</div>
</div>
<div class="choose yellow-red Center">
<div class="item2">My Office</div>
</div>

</div>
</div>

</div>

</body>
</html>

全部代码下载地址:www.nekonekolili.top/file/webF/second_web_grid.zip

web第二次作业练习grid

猜你喜欢