本文出自 http://blog.csdn.net/shuangde800
[Codecademy] HTML && CSS课程学习目录
------------------------------------------------------------------------------------------------
这节课主要是讲怎样用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 | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
div {
text-align: center;
}
表示div容器里面的文本将会居中对齐。
stylesheet.css
img {
display: block;
height: 100px;
300px;
margin: auto;
}
p {
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
/*Start adding your CSS below!*/
div {
height: 50px;
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>
效果图：
