网页布局基础 第二次（盒子模型）
图片来源：慕课网
盒子的3D模型从上到下分解开来依次是：
边框——border
内容和内边距：content+padding
背景图像：background-image
背景颜色：background-color
外边框：margin
例子：
.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap的HTML标准模板</title> <link href="css/styles.css" rel="stylesheet"> </head> <body> <div> <div class="threepage"> <div class="threepage-bg" id="threepagebg"> <div class="threepagecontent"> <h1>为什么学习</h1> </div> </div> </div> </body> </html>
.css
.threepage-bg { margin: 50px;/*外边框（包装纸），与其他盒子间隔，一个属性，允许使用负值。*/ height: 200px;/*内容大小*/ width: 100px; color: white; background-color: greenyellow;/*背景色*/ padding: 100px;/*内间距,留白，无其他属性*/ border:100px solid #357EBD;/*边框三个属性 border-width border-style border-color;*/ background-clip: content-box;/*padding-box;*//*border-box;*/ } .threepagecontent{ text-align: center; } /* background-image: url("../img/header-bg.png");/*背景图片*/*/ /*background-repeat: no-repeat; /* background-position: top bottom;*/ /*background-size: cover;*/ /* background-position: 75px 0;*/*/
padding:44px 15px 15px 15px;
border:4px solid #badbdb; 边框宽，虚实线，颜色（缺一不可）
margin:10px 18px;
http://www.imooc.com/code/1505
自动居中一列布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>几米简介</title> <style type="text/css"> *{margin:0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋体";} a{text-decoration:none;} a:hover{text-decoration:underline;} h2{line-height:30px; font-size:14px; margin-bottom:5px;} p{line-height:24px; text-indent:26px; margin-bottom:5px;} #wrap{width:770px; margin:0px auto;} #header{width:762px; border:4px solid #badbdb; background:url(../images/banner.gif) no-repeat; height:92px; text-align:right; color:#fff;} #header a{color:#fff; margin:0 5px;} #mainbody,#footer{ width:100%; } #footer{text-align:center; padding:20px 0;} .content{background:#eff9f9; padding:44px 15px 15px; border:4px solid #badbdb;} .profile{background:url(../images/t_profile.gif) no-repeat #eff9f9;} .book{background:url(../images/t_book.gif) no-repeat #eff9f9;} .book img{ border:1px solid #b1adaa; margin:10px 18px;} </style> </head> <body> <div id="wrap"> <div id="header"><a href="#">联系我们</a>|<a href="#">站点地图</a></div> <div id="mainbody"> <div class="content profile"> <h2>:: 关于幾米 ::</h2> <p>幾米，一位用画笔描绘梦想、吸引无数读者画迷为之疯狂，知名度迅速窜升的当红绘本作家，同时却也是一个腼腆善良的中年男子，偏好简单的居家生活，低调而淡泊。</p> <p>幾米的个性害羞内向，不擅长用言语表达，他用敏锐细腻的心去感受周遭的人与事，将情感、思绪藉由「绘画」传达他对大千世界的看法，作品风貌多变，创作力源源不绝，因此看幾米的作品，就像是走入他的内在，幾米的故事引领着每一位欣赏他作品的人看到并相信世界上的美与善，同时也反应了现代人生活中的点点滴滴，因此每个人都能在他的故事找到一个映照和寄托，或许这就是幾米作品的迷人之处。</p> <p>幾米，绘本作家，文化大学美术系毕业，曾在广告公司工作十二年，后来为报纸、杂志等各种出版品画插画 。1998年开始创作，发表《森林里的秘密》和《微笑的鱼》，拿下当年度中国时报开卷最佳童书、 民生报好书大家读年度最佳童书，以及联合报读书人最佳童书奖。 1999年出版《向左走．向右走》，开创出成人绘本的新型式，兴起一股绘本创作风潮。本书获选为1999年金石堂十大最具影响力的书，并已改 编成电影、电视剧。之后陆续推出《听幾米唱歌》、《月亮忘记了》、《森林唱游》、《我的心中每天开出一朵花》等作品，展现惊人的创作力和多变的叙事风格。 2001年出版《地下铁》，获选2002年金鼎奖 推荐优良图书，并改编成音乐剧和电影。次年《照相本子》、《1.2.3.木头人》和《我只能为你画一张小卡片》获选2002年行政院新闻局推介中小学生优良课外读物图书类推荐读物。2002年《布瓜的世界》甫上 市便登上各大书店畅销排行榜第一名。 2003、2004年陆续出版《幸运儿》、《你们我们他们》、《又寂寞又美好》、《履历表》、《遗失了一只猫》等作品，内容风格上更形突破。2005年的《小蝴蝶小披风》 和《失乐园》开始经营角色，多变的故事节奏有不同于以往的阅读趣味。 作品风靡两岸三地，美、法、德、希腊、韩、日、泰等国皆有译本。学界和媒体多次以「幾米现象」为主题分析评论。 2003年Studio Voice杂 志选为亚洲最有创意的五十五人之一。 </p> </div> <div class="content book"> <a href="#"><img src="http://img.mukewang.com/536c9dc30001135400800080.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img.mukewang.com/536c9de300012a0500800080.jpg". width="80" height="80" /></a> <a href="#"><img src="http://img.mukewang.com/536c9dfe0001b81b00800080.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img.mukewang.com/536c9fa00001f6dd00800080.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img.mukewang.com/536c9fad0001f29800800080.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img.mukewang.com/536c9fb90001d71b00800080.jpg" width="80" height="80" /></a></div> </div> <div id="footer">copyright © 2004-2012 Jimmyspa.com All Rights Reserved.</div> </div> </body> </html>
