施用CSS—轻松学习网站界面制作（二）

使用CSS—轻松学习网站界面制作（二）上次博客中，我们主要是对CSS进行了一个简单的介绍，CSS主要是让网页的内

使用CSS—轻松学习网站界面制作（二）

上次博客中，我们主要是对CSS进行了一个简单的介绍，CSS主要是让网页的内容与样式进行分离，我们需要改内容的时候，我们只需要改对应的样式也就行了；我们接下来介绍一下CSS的核心内容。

我们先来看一下两种形式的标签：块级元素，行内元素。

块级元素（div)：我们看一下效果：我们在HTMLPage中把栏目一的span改为div:

</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">现在的这个栏目一已经沾满了一行；除了使用这个div变成块级元素，那么我们的还有一种办法把行内元素变成块级元素，我们在HTMLPage里边这么写：<br></p><textarea readonly name="code" alt="施用CSS—轻松学习网站界面制作（二）"><br>这样我们的栏目二也占满 了一行，也变成了块级元素了。我们介绍完块级元素和行内元素之后，那么这个标准流也就出来了，其实说白了，就是一个标签的排列方式。</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt"><strong>盒子模型</strong>：我们来对一张图片进行分析，了解里边的构造，就简单多了：</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt"><img src="//img.reader8.net/uploadfile/jiaocheng/2014/0125/2014012519201013057.png" alt="施用CSS—轻松学习网站界面制作（二）"><br></p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">我们很easy的看的出来，盒子模型咱们要理解的就是：外边距margin（上、下、左、右），内边距border（上、下、左、右），内容content（宽、高），框padding（宽）。</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">接下来我们测试一下效果。我们在样式文件中，这么写：</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt"></p><textarea readonly name="code" alt="施用CSS—轻松学习网站界面制作（二）"><br>这有一个好玩的东西，咱们发现了栏目二的上边框特别的粗，很简单，是栏目一的下边框叠加了。我们继续看一下盒子模型的另外一下内容，我们padding，margin等等效果也是类似的，大家动手去实现一下；在这里特别要注意一点，行内样式对我们的边框很挑剔，基本没有响应。</p><p style="line-height:24pt; text-indent:28pt; font-family:arial; font-size:13pt">下一篇博客，我们继续来介绍界面效果。</p><dl class="comment_item comment_topic"><dt class="comment_head">3楼lfmilaoshi昨天 22:12<dd class="comment_body">很详细。米老师</dl><dl class="comment_item comment_topic"><dt class="comment_head">2楼liushuijinger昨天 18:55<dd class="comment_body">好文</dl><dl class="comment_item comment_topic"><dt class="comment_head">1楼lierdong8昨天 00:33<dd class="comment_body">太入门了吧。。。</dl> </p></div>
<div class="article-footer">
<div class="article-pager">
</div>
<div class="article-ranking">
<div class="ranking-title">阅读人气排行</div>
<div class="ranking-list"><ul class="hot-list-ul">
<li><span class="rank-num top-rank">1</span><a href="/jiaocheng/20140608/2370003.html" target="_blank" title="SQL SEVER 2008安装后出现的2个范例的区别，高分求解">SQL SEVER 2008安装后出现的2个范例的区</a></li>
<li><span class="rank-num top-rank">2</span><a href="/jiaocheng/20140222/2254670.html" target="_blank" title="硬盘查到计算机上为什么看不到盘符">硬盘查到计算机上为什么看不到盘符</a></li>
<li><span class="rank-num">3</span><a href="/jiaocheng/20140222/2254661.html" target="_blank" title="下面这个关于IP地址转换的有关问题，用什么方法解决呢">下面这个关于IP地址转换的有关问题，用什么</a></li>
<li><span class="rank-num">4</span><a href="/jiaocheng/20121008/2061488.html" target="_blank" title="struts2+ibators oralce设立ID自增长">struts2+ibators oralce设立ID自增长</a></li>
<li><span class="rank-num">5</span><a href="/jiaocheng/20120811/2027025.html" target="_blank" title="Linux 2.6.31内核优化-一">Linux 2.6.31内核优化-一</a></li>
<li><span class="rank-num">6</span><a href="/jiaocheng/20120702/2023821.html" target="_blank" title="linux 装配时分区选择（转载）">linux 装配时分区选择（转载）</a></li>
<li><span class="rank-num">7</span><a href="/jiaocheng/20140117/1990510.html" target="_blank" title="WinPcap网络抓包有关问题取不到PPP网卡">WinPcap网络抓包有关问题取不到PPP网卡</a></li>
<li><span class="rank-num">8</span><a href="/jiaocheng/20120324/1772320.html" target="_blank" title="妈妈的生日快到了,送什么礼物好呢解决方案">妈妈的生日快到了,送什么礼物好呢解决方</a></li>
<li><span class="rank-num">9</span><a href="/jiaocheng/20120611/1621921.html" target="_blank" title="20000多条记录的表做成cache合适吗？该怎么解决">20000多条记录的表做成cache合适吗？该怎么</a></li>
<li><span class="rank-num">10</span><a href="/jiaocheng/20141110/2641576.html" target="_blank" title="MS Dynamic AX 的理解">MS Dynamic AX 的理解</a></li>
</ul></div>
</div>
</div>
</div>
</div>
<aside class="right-sidebar">
</aside>
</div>
</div>
</main>
<footer class="site-footer"><div class="container"><div class="footer-links"><a href="/data/page/1.html">关于我们</a> - <a href="/data/page/2.html">联系方式</a> - <a href="/sitemap.html">网站地图</a> - <a href="/data/page/3.html">版权声明</a> - <a href="/data/friendsite/">友情链接</a> - <a href="#top">返回顶部</a></div><p>读书人 (Reader8.net) . <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2025459685号-1</a></p></div></footer><div style="display:none"><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script></div></body></html>