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

2771 ワード

本論は http://blog.csdn.net/shuangde800
[Codecademy]HTML&&CSSコース学習目録
----------------------------------------------------
この授業は主にdivを使ってボタンをなぞらえ似せる方法を話します.
いくつかの新しい属性が使用されます.
border-radius
四角枠をdiv要素に追加します.例えば、
border-radius:5 px;
マージン
一つの宣言では、すべての外距離属性を設定し、属性は1～4つの値を設定することができます.例えば、

margin:10px 5px 15px 20px;

上側余白は10 px です.
右の外の距離は5 px です.
下余白は15 px です.
左余白は20 px です.

margin:10px 5px 15px;

上側余白は10 px です.
右の外の距離と左の外の余白は5 px です.
下余白は15 px です.

margin:10px 5px;

上と下のマージンは10 px です.
右の外の距離と左の外の余白は5 px です.

margin:10px;

すべての4つの外の距離は10 px です.
margin:atot
ブラウザで外の距離を計算します.
text-align
要素内のテキストの水平方向の配置を指定します.例えば、
値
説明
left
テキストを左に並べる.デフォルト:ブラウザで決定します.
ライト
テキストを右に並べる.
センター
テキストを中央に並べる.
justify
テキストの両端揃え効果を実現します.
div｛
text-align:センター
)
divコンテナのテキストが中央に揃えられます.
styless.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.

<!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

四叉の木を勉強します.

JAVAの行列論実現