CSS——div & span

来源：互联网发布：公共场所网络上报编辑：程序博客网时间：2024/06/05 18:23

div+css：div标签负责布局，结构，分块；css负责样式。

div: division，分割。div在浏览器中，默认是不会增加任何的效果改变的，但语义变了。div是一个容器级标签，里面什么都能放，甚至可以放div本身。

<div style="background-color: lightblue";>    <h2>金曲奖最佳作词嘻</h2>    <h3>成名在望</h3>    <p>那黑的终点可有光</p>    <p>那夜的尽头可会亮</p>    <p>那成名在望 会有希望</p>    <p>又或是 无知的狂妄</p></div><div style="background-color: lightyellow";>    <h2>金曲奖年度最佳歌曲嘿</h2>    <h3>第二人生</h3>    <p>生命不是过程 而是美丽旅程</p>    <p>风景 有亮和暗 也有爱和恨</p>    <p>第一站叫天真 第二站叫青春</p>    <p>下一站的名字 等你去确认</p></div>

span：表达“小区域、小跨度”的标签，但是是一个文本级的标签。span里面放置的是小元素，div里放置的是大元素，div标签是最重要的布局标签。

<h3>专辑</h3><p>自传</p>    <p>简介：……。    <span>        <a href="">详细信息</a>        <a href="">买不买啊</a>    </span>    </p><p>第二人生</p>    <p>简介：……。    <span>        <a href="">详细信息</a>        <a href="">买不买啊</a>    </span>    </p><p>后青春期的诗</p>    <p>简介：……。    <span>        <a href="">详细信息</a>        <a href="">买不买啊</a>    </span>    </p></p>

    <style type="text/css">    .header{        width: 980px;        height: 100px;        margin: 0 auto;        background-color: lightyellow;        margin-bottom: 10px;    }    .content{        width: 980px;        height: 500px;        margin: 0 auto;        background-color: skyblue;        margin-bottom: 10px    }    .footer{        width: 980px;        height: 150px;        margin: 0 auto;        background-color: lightgreen;        margin-bottom: 10px;    }    </style></head><body>    <div class="header">        <div class="logo">            logo        </div>        <div class="nav">            导航        </div>    </div>    <div class="content">        <div class="guanggao">            广告        </div>        <div class="goods">            商品        </div>    </div>    <div class="footer">        页脚    </div>

阅读全文

0 0