[Codecademy] HTML&CSS第八课:Design a Button for Your Webwite
2013-09-13 19:30
369 查看
本文出自 http://blog.csdn.net/shuangde800
[Codecademy]
HTML && CSS课程学习目录
------------------------------------------------------------------------------------------------
这节课主要是讲怎样用div来模拟出一个按钮。
会使用到一些新属性:
border-radius: 5px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
上外边距和下外边距是 10px
右外边距和左外边距是 5px
所有 4 个外边距都是 10px
margin:auto
浏览器计算外边距。
div {
text-align: center;
}
表示div容器里面的文本将会居中对齐。
stylesheet.css
index.html
效果图:
[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 | 实现两端对齐文本效果。 |
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>
效果图:
相关文章推荐
- [Codecademy] HTML&CSS第八课:Design a Button for Your Webwite
- [Codecademy] HTML&CSS 第二课:Build Your Own Webpage
- [Codecademy] HTML&CSS 第二课:Build Your Own Webpage
- [Codecademy] HTML&CSS 第十课:Sorting Your Friends
- [Codecademy] HTML&CSS 第三课:HTML Basic II
- [Codecademy] HTML&CSS 第三课:HTML Basic II
- HTML&CSS学习二之web页面建设
- [Codecademy] HTML&CSS 第三课:HTML Basic II
- [Codecademy] HTML&CSS 第七课:CSS: An Overview
- [Codecademy] HTML&CSS第九课 :CSS Selectors
- [Codecademy] HTML&CSS 第一课:HTML Basic
- HTML Iframes & Responsive Web Design
- [Codecademy] HTML&CSS 第七课:CSS: An Overview
- web前端面试题(HTML&CSS)上 答案详解
- The Zen of CSS Design: Visual Enlightenment for the Web
- 002 JavaWeb之HTML&CSS
- Think & Design in CSS, 再谈web 2.0时代的网页设计
- 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架
- [codecademy]html&css
- CSS Web Design For Dummies