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




 

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


效果图:

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









 

你可能感兴趣的:(button)