您的位置：首页 > Web前端 > CSS

css3多列效果及css3媒体查询响应式布局的实现

2017-08-16 19:49 531 查看

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[/b];}}/*平板 宽度 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;}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航