HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--设置视口-移动端必须写-->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="menu">语言</button>
<ul class="ul">
<li><a href="#">ios</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">nodeJS</a></li>
<li><a href="#">java</a></li>
<li><a href="#">前端</a></li>
</ul>
<div>
<h3>夏天的雨</h3>
<p>
“哗哗哗”下来了,伴着雷公公、电婆婆一起落了下来。天空,就像被仙女散下了帷幔。
夏天的雨点,落到窗户上。立刻形成一个个“小珍珠”变成了透明的“珠帘”。有的比直地落到玻璃上,顺着玻璃像“流星似得飞过去了,只剩下一条淡淡的水印。
夏天的雨点,落到树叶、花瓣上。有的跟着叶子“吱溜——”一声滑进土里,有的则静静的躺在花瓣里,等着新伙伴的到来!
小雨点落到池塘里。水花四溅。可雨点儿不见了!到哪去了呢?原来它躲到了水里,在和我们玩游戏呢!
雨点又飞呀飞,落到了地上。马上跳起舞来,可一下子就消失了,只留下一颗透明的“珠子”。
夏天的雨“哗哗哗……”
</p>
</div>
<script>
document.querySelector(".menu").onclick=function () {
document.querySelector(".ul").style.display="block";
this.style.display="none";
}
</script>
</body>
</html>
css代码:
html{
font-size: 16px;
}
div{
/*rem:根据根元素的字号决定rem的大小*/
/*根元素字号是16号字 1rem就表示16号字 表示16像素*/
font-size: 1rem;
}
div{
/*列的数量*/
column-count: 3;
/*每一列的宽度*/
column-width: 300px;
/*列之间分割线的效果*/
column-rule: red solid 3px;
/*列间距*/
column-gap: 20px;
/*列之间填充方式*/
column-fill: balance;
}
h3{
/*横跨列的数量*/
column-span: all;
}
/*获取设备宽度*/
/*@media (max-device-width:1200px) and (min-device-width:920px){*/
/*html{*/
/*font-size: 30px;*/
/*background-color: #ff211a;*/
/*}*/
/*}*/
/*手机 宽度 <768*/
@media (max-width: 768px) {
html{
/*font-size: 10px;*/
background-color: #56ff3f;
}
ul{
display: none;
}
.menu{
display: block;
}
}
/*平板 宽度 768~992*/
@media (max-width: 992px) and (min-width: 768px) {
html{
/*font-size: 14px;*/
background-color: #ff42ad;
}
ul{
display: none;
}
.menu{
display: block;
}
}
/*桌面显示器 中等屏幕 笔记本 宽度 992-1200*/
@media (max-width: 1200px) and (min-width: 992px) {
html{
/*font-size: 18px;*/
background-color: #ffe75c;
}
ul {
display: block;
}
.menu{
display: none;
}
}
/*台式机 大屏幕 >1200*/
@media (min-width: 1200px) {
html{
/*font-size: 24px;*/
background-color: #2f91ff;
}
ul {
display: block;
}
.menu{
display: none;
}
}
ul{
width: 100%;
}
ul:after{
content: "";
display: block;
clear: both;
}
ul li{
float: left;
list-style: none;
min-width: 7rem;
width: 10%;
height: 2rem;
border: 2px solid #0e0201;
box-sizing: border-box;
background-color: #64ffd8;
text-align: center;
line-height: 2rem;
}
.menu{
float: right;
width: 3rem;
height: 2rem;
text-align: center;
line-height: 2rem;
}