立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 3994|回复: 0

[DIV+CSS 教程笔记01] margin的练习-对于margin的设置,以及对于外边据和内边距还有border的设置

[复制链接]

116

主题

13

回帖

563

积分

终身VIP会员

Rank: 7Rank: 7Rank: 7

积分
563

推广达人宣传达人突出贡献荣誉管理论坛元老

发表于 2014-10-2 10:57:03 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

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

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

x
对于一个新手一定要理解margin的设置,默认的是上右下左的的数值来设置的。大家可以尝试下自己联系,下面是我做的代码效果
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  3. <head>
  4. <title>外边距margin设置</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="description" content="道勤教育 http://www.daoqin.net" />
  7. <style>
  8.         #container{
  9.                 width:1000px;
  10.                 height:600px;
  11.                 background:green;
  12.         }
  13.         div{
  14.                 width:400px;
  15.                 height:200px;
  16.                 background:blue;
  17.                 float:left;

  18.         }
  19.         #test{
  20.                 /*
  21.                 margin:10px;
  22.                
  23.                 margin-top:10px;
  24.                 margin-left:20px;
  25.                 margin-bottom:30px;
  26.                 */
  27.                 background:red;
  28.                
  29.                 margin:20px 30px 10px ;


  30.         }
  31.         #test003{
  32.                 width:1000px;
  33.         }
  34.         #test002{
  35.                 background:purple;
  36.         }
  37. </style>
  38. </head>
  39.     <body>
  40.             <div id="container">       

  41.                      <div id="test"></div>
  42.                      <div id="test002"></div>
  43.                      <div id="test003"></div>
  44.             </div>
  45.     </body>
  46. </html>
复制代码


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

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )

GMT+8, 2024-11-25 11:56

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表