這節課主要是講怎樣用div來類比出一個按鈕。
會使用到一些新屬性：
border-radius
向 div 元素添加圓角邊框，例如
border-radius: 5px;
margin
一個聲明中設定所有外邊距屬性，屬性可以設定1～4個值，例如：
margin:10px 5px 15px 20px;
上外邊距是 10px
右外邊距是 5px
下外邊距是 15px
左外邊距是 20px
margin:10px 5px 15px;
上外邊距是 10px
右外邊距和左外邊距是 5px
下外邊距是 15px
margin:10px 5px;
上外邊距和下外邊距是 10px
右外邊距和左外邊距是 5px
margin:10px;
所有 4 個外邊距都是 10px
margin:auto
瀏覽器計算外邊距。
text-align
規定元素中的文本的水平對齊。例如，
值 描述
left 把文本排列到左邊。預設值：由瀏覽器決定。
right 把文本排列到右邊。
center 把文本排列到中間。
更多精彩內容：http://www.bianceng.cn/web/Html/
justify 實現左右對齊文字效果。
div {
text-align: center;
}
表示div容器裡面的文本將會置中對齊。
stylesheet.css
img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div { height: 50px; width: 120px; border: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin: auto; text-align: center; } a { text-decoration: none; }
index.html
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>About Me</title> </head> <body> <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png" /> <p>We're Codecademy! We're here to help you learn to code.</p><br /><br /> <div> <a href="blog.csdn.net/shuangde800">my blog</a> </div> </body> </html>
效果圖：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
