网页美化的基础为层叠式样式表，也就是我们熟知的css属性。这里给大家分享一个在css中基础盒模型的运用。
这里有一个实战示例：
整个大盒子的宽为750px，高为485px，背景使用background属性将图片导入，边框圆角为50px。盒子阴影为黑色，最后盒子居中展示。具体实现代码如下
代码语言：javascript复制div {
/*定义盒模型类型*/
box-sizing: border-box;
/*定义宽和高的过程*/
width: 750px;
height: 485px;
/*用background-image属性导入图片*/
background-image: url(图片地址);
/*盒模型的居中设置*/
margin: 250px auto;
/*边框圆角设置*/
border-radius: 50px;
/*边框阴影设置*/
box-shadow: 10px 10px 5px black;
}设置文本内容为居中展示，字体颜色为蓝色，行高为30px。
其中：文本内容居中、颜色和行高均为基础css属性设置。
设置作者的名字的左内边距为450px。
最后我的不成功示例如下（因为我想体现换行所以直接用了很多段落标签，嘿嘿ovo）
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
box-sizing: border-box;
width: 750px;
height: 485px;
background-image: url(img/pic.jpg);
margin: 250px auto;
border-radius: 50px;
box-shadow: 10px 10px 5px black;
}
h1{
text-align: center;
padding-top: 50px;
color: white;
font-family: "华文楷体";
}
p{
text-align: center;
color: white;
font-family: "华文楷体";
}
#a{
padding-left: 450px;
}
</style>
</head>
<body>
<div>
<h1><strong>水调歌头</strong></h1>
<p>明月几时有？把酒问青天。</p>
<p>不知天上宫阙。今夕是何年？</p>
<p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p>
<p>起舞弄清影，何似在人间？</p>
<p>转朱阁，低绮户，照无眠。不应有恨，问事长向别时圆？</p>
<p>人有悲欢离合，月有阴晴圆缺，此事古难全。</p>
<p>但愿人长久，千里共婵娟。</p>
<p id="a">————苏轼</p>
</div>
</body>
</html>最终的效果图为：
这个实例中运用到了简单盒模型的各种基础属性,例如边框阴影，边框内外边距，以及将图片放入盒模型中充当背景等等。盒模型是美化我们的网页重要的一环，一定要精通运用。=^.^=
