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

来源：互联网发布：mac python教程编辑：程序博客网时间：2024/05/17 07:59

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

阅读全文

0 0