響應式設計的一些方法

時間 2019-12-17

標籤響應設計一些方法简体版

原文原文鏈接

一、表單輸入框自適應html

示例代碼：佈局

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>響應式設計--表單自適應</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            form {
                /*關鍵設置 margin-right*/
                margin-right: 4em;
                /*關鍵設置 定位*/
                position: relative;
            }
            
            form input {
                /*關鍵設置 寬度*/
                width: 100%;
                line-height: 1.4;
                box-sizing: border-box;
            }
            
            form button {
                /*關鍵設置 定位*/
                position: absolute;
                left: 100%;
                top: 2px;
                width: 4em;
                box-sizing: border-box;
            }
        </style>
    </head>

    <body>
        <form action="" method="post">
            <input type="text" name="age" value="" />
            <button type="button">提交</button>
        </form>
    </body>

</html>

效果：post

二、導航欄自適應佈局flex

（1）、display：table 實現ui

示例代碼：spa

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>響應式設計--導航欄自適應佈局</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            nav {
                /*關鍵屬性設置*/
                display: table;
                width: 100%;
                background: #00bcd4;
            }
            
            nav a {
                /*關鍵屬性設置*/
                display: table-cell;
                text-decoration: none;
                color: #fff;
                padding: 0 1em;
            }
            /*關鍵屬性設置*/
            
            nav a:not(:first-child) {
                border-left: 1px solid rgba(255, 255, 255, 0.7);
            }
        </style>
    </head>

    <body>
        <nav>
            <a href="#">Home</a>
            <a href="#">Javascript</a>
            <a href="#">HTML</a>
            <a href="#">CSS</a>
            <a href="#">HTTP</a>
        </nav>
    </body>

</html>

效果：設計

（2）flex佈局code

示例代碼：orm

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>響應式設計--導航欄自適應佈局</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            nav {
                /*關鍵屬性設置*/
                display: flex;
                width: 100%;
                background: #00bcd4;
            }
            
            nav a {
                /*關鍵屬性設置*/
                flex:1;
                text-decoration: none;
                color: #fff;
                padding: 0 1em;
            }
            /*關鍵屬性設置*/
            
            nav a:not(:first-child) {
                border-left: 1px solid rgba(255, 255, 255, 0.7);
            }
        </style>
    </head>

    <body>
        <nav>
            <a href="#">Home</a>
            <a href="#">Javascript</a>
            <a href="#">HTML</a>
            <a href="#">CSS</a>
            <a href="#">HTTP</a>
        </nav>
    </body>

</html>

效果同上。htm

三、網格佈局（inline-block+justify）

示例代碼：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>響應式設計--網格自適應佈局</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            ul {
                /*如下三行關鍵屬性設置*/
                margin: 0;
                padding: 0;
                text-align: justify;
            }
            
            li {
                /*關鍵屬性設置*/
                display: inline-block;
                /*關鍵屬性設置*/
                width: 30%;
                height: 100px;
                line-height: 100px;
                background: lightblue;
                text-align: center;
                margin-bottom: 1em;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </body>

</html>