div+css入门教程
div+css入门教程此视频可以直接播放
链接: http://pan.baidu.com/s/1mgBiZgO 密码: i622
初步完成网页的布局，注意，在映入div class="four"的设置；float:left; 以及margin:10px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>网页布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="道勤教育 http://www.daoqin.net" />
<style>
#container{
width:1002px;
}
#header{
height:120px;
background:orange;
}
#main{
height:600px;
background:purple;
}
#iside{
width:700px;
height:600px;
float:left;
background:pink;
}
.four{
width:330px;
height:280px;
background:black;
float:left;
margin:10px;
}
#risde{
width:302px;
height:600px;
float:right;
}
#footer{
height:120px;
background:blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="iside">
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
</div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
新手在学习的时候要注意：border-top border-width宽度 border-style边的线 border-color颜色 当然可以结合border-top bottom 这些来结合使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>13课程盒子border的设置</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
div{
width:800px;
height:800px;
background:blue;
/*border:10px solid black;*/
border-top:20px solid green;
border-top-style:dashed;
/*border-top border-width宽度 border-style边的线 border-color颜色 当然可以结合border-top bottom 这些来结合使用*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
用div+css来控制绘制一个三角形的实际案例，大家一定要经常使用css里面的一些边框设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="道勤教育 http://www.daoqin.net" />
<style>
#div{
background:gray;
height:200px;
}
#trip{
width:0px;
height:0px;
border-top:50px solid white;
border-right:50px solid white;
border-bottom:50px solid green;
border-left:50px solid white;
}
</style>
</head>
<body>
<div>
<div id="trip"></div>
</div>
</body>
</html>
padding的用法，padding指的是div（可以理解为一个盒子）当中文字的内边距的大小，不要理解错误了！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>15课程作业padding的了解！</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="道勤教育 http://www.daoqin.net" />
<style>
div{
background:gray;
/*padding:10px;
padding-top:20px;
padding-right:30px;
padding-bottom:20px;
padding-left:10px;*/
padding:10px 20px 30px ;
}
</style>
</head>
<body>
<div>
本版块视频教程主要由第三方提供，本站只做搜集整理并免费分享给大家学习交流，请勿用于非法途径，尊重原作者版权。哈哈哈哈哈哈哈哈哈哈哈啊啊哈哈哈啊哈哈哈哈哈啊啊哈哈哈哈哈哈啊啊哈哈哈哈哈啊啊哈哈哈啊哈哈哈哈哈哈哈啊哈啊哈哈哈哈啊哈哈啊哈哈哈哈啊哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈啊哈哈市地价房价快速电话贷款计划带回家斯蒂芬啊三季度说得好斯蒂芬集散地恢复后三地警方三地警方后是科技大道电话三大恢复健康神灯即可发挥神灯即可恢复撒艰苦的恢复科斯蒂哈多少分江苏队交锋合适的江苏队空间四大皆空数据宽度户籍卡三大恢复健康的设计开发斯达康警方后说得好江苏队健康华盛顿开会可是大家斯蒂芬江苏队的黄金时代 的是神灯即可地方科技独家开发海水淡化斯蒂芬是！
</div>
</body>
</html>
页:
[1]