第29章CSS 3弾性伸縮レイアウト[上]

2027 ワード

httml 5 css 3

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3      [ ]</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>
	<p>      ，IP（Internet Procotol，     ）       ，              ，            。            IPv4            ，     “  ” IP    45  ，         。    ，IP                 ，   ，  、    、            。   ， 2020      500      ，  IPv4     10 。</p>
	<p>  ，               IP  ， IP                                    。   ，        2011       IP  ，               ，                   。</p>
	<p>    ，IP                     ，        IP               ，                     。</p>
</div>

</body>
</html>

style.css

@charset "utf-8";

p {
	width: 150px;
	border: 1px solid gray;
	background-color: silver;
	margin: 5px;
	padding: 5px;
}

div {
	width: 100%;
	display: -moz-box;
	display: -webkit-box;
	display: box;

	/*-moz-box-orient: vertical;*/
	/*-moz-box-orient: inline-axis;*/
	/*-moz-box-orient: block-axis;*/

	/*-moz-box-direction: reverse;*/

	/*-moz-box-pack: end;*/
	/*-moz-box-pack: center;*/
	/*-moz-box-pack: justify;*/
	/*-webkit-box-pack: justify;*/

	/*-moz-box-align: start;*/
	/*-moz-box-align: end;*/
	/*-moz-box-align: center;*/
	/*-moz-box-align: baseline;*/

}

p:nth-child(1) {
	-moz-box-flex: 1;
	-moz-box-ordinal-group: 2;
}
p:nth-child(2) {
	-moz-box-flex: 3;
	-moz-box-ordinal-group: 1;
}
p:nth-child(3) {
	-moz-box-flex: 1;
	-moz-box-ordinal-group: 3;
}

jQuery+Ajax+WebAPIアップロードファイル

ドメイン間localstorage