13. 2. 往主要内容的盒子中写入一些文字。在 html 文件中写入 <div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </div>
15. 同时往边框里写入一些文字。在 html 文件中写入: <div id="sidebar-a"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </div>
26. 最后我们回到内容部分: 用 <h2<> 表现内容标题– "About","Contact us" ;用 <p> 表现段落;用 </br> 断行。 <div id="content"> <h2>About</h2> <p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio.</p> <p>We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.</p> <h2>Contact Us</h2> <p>Phone: (07) 853 6060<br /> Fax: (07) 853 6060<br /> Email: <a href="mailto:info@enlighten.co.nz" >info@enlighten.co.nz</a><br /> P.O Box: 14159, Hamilton, New Zealand</p> <p><a href="http://css.jorux.com/wp-admin/post.php#" >More contact information…</a></p> </div>
31. 然后需要让 content 层的四周都空出 25px 的间隙,这本来是件很简单的事,理论上我们只需在 #content 的 css 文件中加入 padding: 25px; 就行了,但是 IE 给我们上了“一课” , 它的固有 BUG 根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码 (HACK IE), 但因为间隙 (padding, 在 Dreamweaver 中又叫填充 ) 使用很频繁,所以我们用另一种办法。 我们往需要填充的层中加入 padding 层,它的功能仅限于显示间隙: <div id="sidebar-a"> <div class="padding"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </div> </div>