佈局方法一

時間 2019-12-08

標籤佈局方法简体版

原文原文鏈接

1.兩端對齊方法

說明：利用外部div的padding使div居中對齊，左右浮動兩端對齊html

<div class="clearfix" style="padding:20px">
    <div class=left>
    </div>
    <div class=right>
    </div>
</div>

2.多列布局

說明：關鍵代碼.ui-courses {width: 1020px;}，.ui-courses-item{width: 320px;margin-right: 20px;}利用外部的div撐開多20個像素。web

<div class="ui-box-content" style="padding: 10px 0">
                    <div class="ui-courses fn-clear">
                        <div class="ui-courses-item fn-left">
                            <img src="images/課程1.png" alt="">
                            <h3>飛鷹訓練營</h3>
                            <p>銘智集團《飛鷹訓練營》第17期於2016年4月15-21日爲期七天培訓。主要內容圍繞四大模塊展開，打造針對企業全國運營......</p>
                        </div>
                        <div class="ui-courses-item fn-left">
                            <img src="images/課程1.png" alt="">
                            <h3>飛鷹訓練營</h3>
                            <p>銘智集團《飛鷹訓練營》第17期於2016年4月15-21日爲期七天培訓。主要內容圍繞四大模塊展開，打造針對企業全國運營......</p>
                        </div>
                        <div class="ui-courses-item fn-left">
                            <img src="images/課程1.png" alt="">
                            <h3>飛鷹訓練營</h3>
                            <p>銘智集團《飛鷹訓練營》第17期於2016年4月15-21日爲期七天培訓。主要內容圍繞四大模塊展開，打造針對企業全國運營......</p>
                        </div>
                    </div>
                </div>

導航居中佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中導航</title>
    <style>
        body, html, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, header, menu, section, p, input, td, th, ins {
            padding: 0;
            margin: 0;
        }
        body, textarea, select, input, button {
            font-size: 12px;
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
            -webkit-text-size-adjust: none;
        }
        .m-top, .m-top .logo a, .m-nav li, .m-nav li span, .m-nav a, .m-nav a em, .m-nav .cor, .m-nav .hot, .m-srch .srchbg, .m-subnav, .m-subnav .nav a, .m-subnav .nav em, .m-tophead, .m-mail, .m-tophead .head .mask, .m-msg{
            background: url(topbar.png) no-repeat 0 9999px;
        }
        .m-subnav{
            height: 35px;
            background-position: left -230px;
            background-repeat: repeat-x;
        }
        .m-subnav .wrap {
            width: 911px;
            margin: 0 auto;
        }
        .m-subnav .nav li {
            display: inline;
            margin: 0 17px;
        }
        .m-subnav .nav li, .m-subnav .nav a, .m-subnav .nav em {
            float: left;
            height: 35px;
            overflow: hidden;
        }
        .m-subnav .nav em {
            padding-right: 14px;
            line-height: 35px;
            color: #fff;
            text-shadow: 0 1px 0 #650303;
        }
        .m-subnav .nav a {
            padding-left: 14px;
        }
        .m-subnav .nav a:hover, .m-subnav .nav a.z-slt {
            background-position: left -268px;
        }
        .m-subnav .nav a:hover em, .m-subnav .nav a.z-slt em {
            background-position: right -268px;
        }
    </style>
</head>
<body>
<div class="m-subnav">
    <div class="wrap f-pr">
        <ul class="nav">
            <li><a href="" class="z-slt"><em>推薦</em></a></li>
            <li><a href=""><em>排行榜</em></a></li>
            <li><a href=""><em>歌單</em></a></li>
            <li><a href=""><em>主播電臺</em></a></li>
        </ul>
    </div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。