您的位置：首页 > Web前端 > CSS

[Codecademy] HTML&CSS第八课：Design a Button for Your Webwite

2013-09-13 19:51 573 查看

本文出自 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;
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>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航