css-box-model小案例

原创 2018-10-26 18:47:06 146
摘要:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<title>Box Model</title>

<style type="text/css" media="screen">

body{

color:#FFF;text-align:center;

}

.box{width:200px;height:200px;background-color:#1E9FFF;margin:0px auto;padding:0px 0px;border-radius:10px;}

.box1{width:300px;height:300px;background-color:#FF5722;margin:0 auto;padding:0px 0px;border-radius:10px;}

.box2{width:350px;height:350px;background-color:#2F4056;margin:0 auto;padding:0px 0px;border-radius:10px;}

.box3{width:400px;height:400px;background-color:#5FB878;margin:0 auto;padding:0px 0px;border:2px solid #c2c2c2;box-shadow:5px 5px 5px gray;border-radius:10px;}

</style>

</head>

<body>

<div>

外边距

<div>

边框

<div>

内边距

<div>

内容

</div>

</div>

</div>

</div>

</body>

</html>



发布手记

热门词条