前端解析，将在后期解析响应式（原生）

来源：互联网发布：网管软件破解版编辑：程序博客网时间：2024/06/05 10:23

    <div class="transaction clearfix"><!--不需要用section来独立成块-->        <div class="trans-content">            <div class="trans-data"><!--同下结构一样-->                <span>平台累计成交金额</span>                <span class="trans-money">19888</span>                <span>万元</span>            </div>            <div class="trans-data">                <span>过去7日成交金额</span>                <span class="trans-money">1888</span><!--不要嵌入式span-->                <span>万元</span>            </div>            <div class="trans-report">                <a href="#">查看平台运营报告</a><!--div后直接跟a，不需要span-->            </div>        </div>    </div>

.transaction {    width: 100%;/*纯色布局，响应式准备*/    background-color: #7c7365;}.trans-content {    max-width: 90%;/*做中间居中作用，两边留空*/    margin: 0 auto;/*居中*/    font-size: 1.5rem;}.trans-data {    float: left;    padding: 1rem;    text-align: left;}.trans-data span {    display: inline-block;    line-height: 3rem;/*span/a这类标签控制line-height*/    color: #fff;}.trans-data span.trans-money {    font-size: 2.2rem;    color: #ff9900;    letter-spacing: 3px;    margin: 0 1rem;/*左右拉开*/    padding: 0 1rem;/*内左右拉开*/    border-radius: 3px;    background-color: rgba(255, 255, 255, 0.9);    box-shadow: 1px 2px 1px #333 inset;/*水平上下阴影像素颜色内阴影*/}.trans-report {    text-align: right;}.trans-report a {    display: inline-block;    padding: 1rem;    line-height: 3rem;/*span/a这类标签控制line-height*/    color: #fff;}

    <section class="feature"><!--文本信息的引用-->        <div class="item">            <h3>安全</h3>            <p>国家AAA信用平台<br>银行资金托管<br>上市公司背景保证</p>        </div>        <div class="item">            <h3>权威</h3>            <p>中央电视台推荐<br>互联网百强企业<br>标准起草单位</p>        </div>        <div class="item">            <h3>省心</h3>            <p>100元起投<br>用户利益保障机制<br>保险公司承保</p>        </div>    </section>

.content .feature{display: flex;    flex-direction: row;}.content .feature .item{    display: flex;    flex-direction: row;    width: calc(33% - 3rem);/*记得空格*/    background-color: #fff;    margin: 2rem;    padding: 2rem;}.content .feature .item + .item{    margin-left: 1.5rem;}.feature .item h3 {    width: 40%;    margin: 0;/*清除h标题的自带margin*/    padding: 0;/*清除h标题的自带padding*/    font-size: 3.3rem;    text-align: center;/*百分比的width后的居中*/    color: #ff9900;}.feature .item p {    width: 55%;    margin: 0;/*清除自带padding*/    padding: 0;/*清除自带padding*/    color: #999;}

阅读全文

0 0