div+css入门教程

quanshiyinian · 发表于 2014-8-6 00:39:44

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

html" target="_blank" class="relatedlink">div+css入门教程

此视频可以直接播放

链接: http://pan.baidu.com/s/1mgBiZgO 密码: i622

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！

设计排版老师 · 发表于 2014-10-2 19:33:55

初步完成网页的布局，注意，在映入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>

复制代码

网页学习者 · 发表于 2014-10-2 21:24:58

新手在学习的时候要注意：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>

复制代码

网页学习者 · 发表于 2014-10-2 21:51:24

用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>

复制代码

网页学习者 · 发表于 2014-10-2 23:43:19

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>