布局方法一

2024年5月31日 151次阅读 来源: Star_

1.两端对齐方法

说明：利用外部div的padding使div居中对齐，左右浮动两端对齐

<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个像素。

<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>
    原文作者：Star_
    原文地址: https://segmentfault.com/a/1190000005038006
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞