zoukankan      html  css  js  c++  java
  • css媒体查询和居中

    1.媒体查询

      @media语法规则

        -1.概念:指定样式表规则用于指定的媒体类型和查询条件

        -2.语法:@media screen and(width/min-width/max-width){}

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            @media screen and (max- 640px){
                .d1{
                    width: 100%;
                    height: 800px;
                    background-color: aquamarine;
                }
            }
            @media screen and (min- 640px) and (max- 800px){
                .d1{
                    width: 100%;
                    height: 800px;
                    background-color: red;
                }
            }
            @media screen and (min- 800px){
                .d1{
                    width: 100%;
                    height: 800px;
                    background-color: bisque;
                }
            }
        </style>
    </head>
    <body>
        <div class="d1"></div>
    </body>
    </html>

    2.居中
      -1.margin:0 auto;

      -2.文字居中:line-height;text-align:center;

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,body,ul{
                margin: 0;
                padding: 0;
            }
            .container{
                width: 100%;
                height: 70px;
                min-width: 996px;
                background-color: aqua;
            }
            .header{
                width: 80%;
                height: 70px;
                background-color: pink;
                min-width: 996px;
                margin: 0 auto;
                text-align: center;
            }
            ul {
                line-height: 70px;
            }
            ul li {
                display: inline-block;
                list-style-type: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <ul>
                    <li>列表项目</li>
                    <li>列表项目</li>
                    <li>列表项目</li>
                    <li>列表项目</li>
                </ul>
            </div>
        </div>
    </body>
    </html>

      -3.由table演变过来的一种居中

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .t{
                display: table;
                width: 200px;
                height: 200px;
                background-color: aqua;
            }
            p{
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="t">
            <p>haha</p>
        </div>
    </body>
    </html>

      -4.利用伸缩盒居中

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .outer{
                display: -webkit-box;
                width: 200px;
                height: 200px;
                background-color: aqua;
                -webkit-box-pack: center;
                -webkit-box-align: center;
            }
            .inner{
                display: -webkit-box ;
                width: 100px;
                height: 100px;
                background-color: pink;
                -webkit-box-pack: center;
                -webkit-box-align: center;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                haha
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    android 底部菜单栏实现(转)
    android 用webView作为编辑器 各种问题
    android 自定图库(转)
    js document.queryCommandState() 各个参数
    自定义简单的按钮点击动画效果
    android 类似QQ底部输入框弹出键盘和面板冲突 布局闪动处理方案(转)
    android 自定义控件View在Activity中使用findByViewId得到结果为null
    Tinker 热修复框架 简单上手教程
    网页天气模块,包括当天天气和未来四天预报
    关于闭包(closure)的一些概念
  • 原文地址:https://www.cnblogs.com/yangfanasp/p/7020312.html
Copyright © 2011-2022 走看看