施用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 style="max-width: 100%;height: auto;width: auto\9;" 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等等效果也是类&#20284;的，大家动手去实现一下；在这里特别要注意一点，行内样式对我们的边框很挑剔，基本没有响应。</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 style="margin:0 auto;width:300px;height:250px;position:relative;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 移动端全站正文 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6147101717324856"
data-ad-slot="1958144088"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<div class="subn-nav"><a href="//m.reader8.net">读书人网</a> ><a href="//m.reader8.net/jiaocheng/css/">CSS</a></div><div class="sp-jctu"><h3><span> 热点推荐 </span></h3><ul><li><p><a href="//m.reader8.net/jiaocheng/20140607/2366389.html">怎样实现在地址栏输入因特网址就弹出</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140605/2358829.html">html中的特殊字符变换</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140605/2358828.html">PHP中htmlentities跟htmlspecialchars</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140604/2355057.html">娴HTML5ㄧЩㄥㄥ腑</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140604/2355056.html">html做成的chm无法打开</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140603/2350252.html">CSS截取图片上一部分做背景,该怎么解决</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140603/2350251.html">jsp如何将list传给后台</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140602/2346539.html">怎样实现在地址栏输入因特网址就弹出</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140602/2346538.html">html做成的chm无法打开</a></p></li>
<li><p><a href="//m.reader8.net/jiaocheng/20140601/2345174.html">惯用特殊符号HTML代码</a></p></li>
</ul></div><div style="display:none;">
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script></div>
<div class="footer"><p>触屏版 | <a href="//www.reader8.net/jiaocheng/20120809/1291409.html#fromapp">电脑版</a></p><p>读书人网 m.reader8.net</p></div>
<script language="javascript">
function clickme(sad){
var divobjdiv = document.getElementById("divobjdiv" + sad);
if(divobjdiv.style.display =="none"){
divobjdiv.style.display ="block"; 
}else{
divobjdiv.style.display ="none";
}
var wenzi = document.getElementById('divobjimg' + sad);
if(wenzi.innerText == "收起"){
wenzi.innerText = "查看更多";
}else{
    wenzi.innerText = "收起";
  }
}
</script>
<div id="back-top"><a href="#top"><span></span></a></div>
</body>
</html>
施用CSS轻松学习网站界面制作（二）
