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

2012-08-09

使用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.com/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 class="aged2"><script type="text/javascript">a("article_content_down");</script></div>
 </div>
<div id="pagebox" >
<a href="/jiaocheng/css/" target="_blank">查看更多</a>
<A href="/jiaocheng/20120715/1291407.html" title="HTML5中Canvas如何拖动元素">下一篇</A></div>
<div id="MainLeftll">
<div id="MainLeftllToolbar">本文网址：<a href="https://www.reader8.com/jiaocheng/20120809/1291409.html">https://www.reader8.com/jiaocheng/20120809/1291409.html</a></div>
<div class="related"><span class="relatedIco1">读书人精选</span>
<ul class="relatedList">
</ul>
</div>
<div class="aged3"><script type="text/javascript">a("article_content_down2");</script></div>
<div class="aged3a"><script type="text/javascript">a("article_content_down3");</script></div>
</div>
</div>
<!-- 文章正文左边结束 -->
<!-- 文章正文右边开始 -->
<div class="leftbox_r">
<div class="aged4"><script type="text/javascript">a("article_right_up");</script></div> 
<div class="Rtitle">
<span class="Rtitle_text">热点排行</span></div>
<div class="RContl">
<ul>
<li><a href="/jiaocheng/20140105/1299674.html" target="_blank">html块级元素跟内联元素区别详解(转)</a></li>
<li><a href="/jiaocheng/20140113/1302291.html" target="_blank">HTML4.0的严厉模式与混杂模式 ，它们有何</a></li>
<li><a href="/jiaocheng/20140426/2314908.html" target="_blank">Jquery的each循环跟原生循环及html5fore</a></li>
<li><a href="/jiaocheng/20120524/1295759.html" target="_blank">关于event.srcElement的一些有关问题</a></li>
<li><a href="/jiaocheng/20140123/1299045.html" target="_blank">这种浮动在边框边缘的效果如何做</a></li>
<li><a href="/jiaocheng/20131230/1268065.html" target="_blank">asp.net主页自适应分辨率浏览器</a></li>
<li><a href="/jiaocheng/20140108/1268198.html" target="_blank">CSS3 Media Queries在iPhone4跟iPad上的</a></li>
<li><a href="/jiaocheng/20131230/1265304.html" target="_blank">CSS 式样规则选择器</a></li>
<li><a href="/jiaocheng/20140420/2308542.html" target="_blank">纯css下拉菜单，框子底纹用图片</a></li>
<li><a href="/jiaocheng/20131223/1296659.html" target="_blank">html文件的doctype从Transitional改为St</a></li>
</ul>
</div>
<div class="aged7"><script type="text/javascript">a("article_right_up2");</script></div>
<!-- 文章正文右边结束 -->
</div>
<!--主体结束-->
<script type="text/javascript">a("article_down_up");</script>
<script type="text/javascript">a("foot");</script>
<script type="text/javascript">a("article_down_up2");</script>
<!--主体结束-->
<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> 
<script type="text/javascript">a("allbt");</script>
</body>
</html>