这节课主要是讲怎样用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>
效果图:
来源: http://www.bianceng.cn/web/Html/201411/46558.htm