首頁 > 博客列表 > 彈性布局(Flex box)|手機(jī)端通用布局|圣杯布局|超酷炫登錄頁面-大型CMS開發(fā)實(shí)戰(zhàn)第九期

博主信息

博文 25

粉絲 0

評(píng)論 0

訪問量 35199

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實(shí)例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 彈性布局(Flex box)創(chuàng)建手機(jī)端通用布局 </title>

    <style>
       *{
           padding: 0;
           margin: 0;
       }

       body {
           height: 100vh;
           display: flex;
           flex-flow: column nowrap;
       }

       a {
           color: #F2F2F2;
           text-decoration: none;
       }

       a:hover{
           color: #fff725;
       }

       main {
           flex:1;
           background: #F2F2F2;
           border-top: 1px solid #587d62;
           border-bottom: 1px solid #587d62;
           box-sizing: border-box;
       }


       header,footer {
           box-sizing: border-box;
           padding: 0 15px;
           background: #389bff;
           display: flex;
           flex-flow: row nowrap;
           height: 40px;
           justify-content: left;
           align-items: center;
           color: #FFFFFF;
        }

        footer {
            justify-content: center;
            padding: 0;

        }

        footer > a{
            display: flex;
            flex-flow: row nowrap;
            flex: 1;
            border-right: 1px dashed #6b9bb9;
            justify-content: center;
            align-items: center;
        }

       footer > a:last-child {
           border: none;
       }

    </style>

</head>
<body>
    <header>
        PHP 你開始學(xué)了嗎？
    </header>
    <main>
        這里是內(nèi)容
    </main>
    <footer>
        <a href="">網(wǎng)站主頁</a>
        <a href="">論壇社區(qū)</a>
        <a href="">課程視頻</a>
    </footer>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

圣杯布局

實(shí)例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 彈性布局(Flex box)圣杯布局 </title>

    <style>
       *{
           padding: 0;
           margin: 0;
       }

       body {
           height: 100vh;
           display: flex;
           flex-flow: column nowrap;
       }

       a {
           color: #F2F2F2;
           text-decoration: none;
       }

       a:hover{
           color: #fff725;
       }

       main {
           flex:1;
           background: #F2F2F2;
           border-top: 1px solid #587d62;
           border-bottom: 1px solid #587d62;
           box-sizing: border-box;

           display: flex;

       }

       aside {
           width: 200px;
           background: #FD482C;
           box-sizing: border-box;
       }

       aside:first-of-type {
           background: #2F4056;
           order: -1;
       }

       article {
           flex: 1;
           background: #c1b9ed;
       }

       header,footer {
           box-sizing: border-box;
           padding: 0 15px;
           background: #389bff;
           display: flex;
           flex-flow: row nowrap;
           height: 40px;
           justify-content: left;
           align-items: center;
           color: #FFFFFF;
        }

        footer {
            justify-content: center;
            padding: 0;
            background: #5FB878;
        }

        footer > a{
            display: flex;
            flex-flow: row nowrap;
            flex: 1;
            border-right: 1px dashed #6b9bb9;
            justify-content: center;
            align-items: center;
        }

       footer > a:last-child {
           border: none;
       }

    </style>

</head>
<body>
    <header>
       頭部
    </header>
    <main>
        <article>
            中間主體內(nèi)容部分
        </article>

        <aside>
            左邊欄
        </aside>

        <aside>
            右邊欄
        </aside>
    </main>
    <footer>
        這是底部
    </footer>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

超酷炫登錄頁面

實(shí)例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 彈性布局(Flex box)創(chuàng)建登錄頁面 </title>

    <style>
       *{
           padding: 0;
           margin: 0;
       }

       body {
           height: 100vh;
           display: flex;
           flex-flow: column nowrap;

           justify-content: center;
           align-items: center;
           background: linear-gradient(to bottom, #0ea2ff, #49a2b8,#000);
       }



       h2 {
           color: #FFF;
           font-weight: lighter;
           text-align: left;
           margin-bottom: 15px;
           border-bottom: 1px solid #92B8B1;
           height: 40px;
           font-size: 20px;
       }

        .box {
            width: 350px;
            padding: 15px;
            box-sizing: border-box;
            position: relative;
            top: -100px;
            border: 2px solid #5fc864;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;
            transition: all 0.5s;
        }

        .box > form {
            display: flex;
            flex-flow: column nowrap;
            box-sizing: border-box;
            transition: all .5s;
        }

       .box:hover {
            box-shadow: 1px 1px 50px #2F4056;
           background: linear-gradient(to bottom, #57759b, #007DDB,#F6F6F6);
           border-color: #dbb100;
       }

       form >div {
            display: flex;
            margin: 10px 0;
           height: 40px;
        }

       form >div >lable {
           line-height: 30px;
           color: #fff;
       }

       form > div >input {
            flex: 1;
            height: 30px;
           -webkit-border-radius: 8px;
           -moz-border-radius: 8px;
           border-radius: 8px;
           border: 1px solid #fff;
           padding: 0 15px;

        }

       form > div >input:focus {

           color: #eb7350;
       }

        form > div >button {
            flex: 1;
            background: #8bbb85;
            border: none;
            color: #FFFFFF;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            cursor: pointer;
        }

       .box:hover>form > div >button {
           background: linear-gradient(to top, #2F4056, #007DDB,#F6F6F6);
       }


    </style>

</head>
<body>
    <div class="box">
        <h2>用戶登錄</h2>
        <form action="">
            <div>
                <lable for="name">賬號(hào)：</lable>
                <input type="text" name="name"  id="name" placeholder="admin" autofocus>
            </div>

            <div>
                <lable for="pwd">密碼：</lable>
                <input type="password" name="name" id="pwd" placeholder="">
            </div>

            <div>
                <button onclick="return false;">登錄</button>
            </div>

        </form>
    </div>
</body>



</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

后臺(tái)布局

實(shí)例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>后臺(tái)頁面布局</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			font-size: 1rem;
		}
		
		body {
			display: flex;
			background: #F2F2F2;
			
			flex-flow: column nowrap;
			
		}
		
		nav {
			
			box-sizing: border-box;
			padding: 0 15px;
			height: 50px;
			background: #000000;
			color: #FFF;
			
			display: flex;
			align-items: center;
			
		
		}
		
		main {
			display: flex;
			height: 100vh;
			flex-flow: row nowrap;
			 background: firebrick;
		}
		
		main > aside {
			width: 200px;
			background: #228B22;
		}
		
		main > article {
			flex: 1;
			background: #CCCCCC;
			display: flex;
		}
		
		main > article > iframe {
			display: flex;
			flex: 1;
			border: 0;
		}
		
		
		
		
	</style>
	
	
</head>
<body>
	<nav>
		這里是頁頭
		
	</nav>
	
	<main>
		<aside>
			這里是左側(cè)
		</aside>
		
		<article>
				<iframe src="http://ipnx.cn"></iframe>
		</article>
	</main>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

批改狀態(tài)：合格

老師批語：完成的相當(dāng)出色

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

當(dāng)遇到困難時(shí)千萬不要被情緒左右

1970-01-01 08:00:00

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

實(shí)例

圣杯布局

實(shí)例

超酷炫登錄頁面

實(shí)例

后臺(tái)布局

實(shí)例