网博会暨网站建设管理学习网

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广告弹窗</title>
<style type="text/css">
*{margin:0; padding:0; font-family:"微软雅黑"; font-weight:bold;}
.all{
	width:296px;
	height:283px;
	margin:100px auto;       //实现居中效果（前提设置宽度width 用法针对块元素）
	border:#CCC solid 1px;     //border综合属性设置 颜色 -风格-大小
}
h2{
	height:30px;
	background:#fff9fb url(img/2.png) no-repeat 268px;     //背景图像复合属性：背景色-url("图像")-平铺-定位-固定
	width:286px;
	height:34px;
	line-height:34px;
	color:#515151;
	border-bottom:#CCC 1px solid;
	padding-left:10px;
	font-size:14px;
}
.body{
	width:296px;
	height:250px;
	background:url(img/1.png) no-repeat center;
}
.one{
	text-align:center;
	font-size:14px;
	color:#FFF;
	padding-top:45px;               //上内边距
}
.two{
	text-align:center;
	font-size:18px;
	color:#FF0;
}
.three{
	font-size:12px;
	color:#ebebeb;
	background-color:#ce4d52;
	width:100px; 
	height:18px;
	margin:7px auto 0;	   //上7px  左右auto 下0px
}
</style>
</head>

<body>
<div class="all">
    <h2>实践等于实赚，等你来领钱！</h2>
    <div class="body">
        <p class="one">PS网络课堂</p>
        <p class="two">开课啦</p>
        <p class="three">⊙网络在线教学</p>
        <p class="three">⊙课程全程录制</p>
        <p class="three">⊙24小时在线辅导</p>
    </div>
</div>
</body>
</html>
左图为代码最终效果
本次重点学习的四个属性：
border
margin
padding
background
网站管理——盒子模型

相关附件
