设为首页收藏本站
开启辅助访问
搜索
快捷导航
论坛 › 学院 › 平面设计学院 › 盒子模型
发新帖
返回列表
1 517
电梯直达  跳转到指定楼层

[作业] 盒子模型

joker两点|中级会员 |勤币 417 |学币 0
发表于 2018-1-21 10:28 | 复制链接 | 打印 | 上一主题 | 下一主题
html+css网页前端课程 - 2.4.盒子模型的概念以及内边距和外边距
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>盒子模型</title>
  6. <style>
  7. *{ margin:0px;padding:0px}
  8. .box1,.box2,.box3{ background:#F00; width:500px; padding:100px; padding-right:50px;margin:0 auto}
  9. .box1{ background:#F00}
  10. .box2{ background:#0F0;margin:30px 20px; margin-top:50px}
  11. .box3{ background:#FF0}
  12. p{ background:#FF0; margin:0px}
  13. h1{ background:#900; margin:0px}
  14. h2{ background:#0FF}
  15. body{ margin:0px}
  16. .all{ background:#000; height:500px; width:1000px;margin:50px auto}
  17. .all .abc{ height:300px; width:300px; background:#00F; margin: 0 auto}
  18. </style>
  19. </head>
  20. <body>       

  22. <p>勤学善思</p>
  23. <h1>勤学善思</h1>
  24. <p>勤学善思</p>
  25. <h2>勤学善思</h2>
  26. <div class="all">
  27.     <div class="abc">
  28.     </div>
  29. </div>
  30. <div class="box1">勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网</div>
  31. <div class="box2">勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网</div>
  32. <div class="box3">勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网学网勤学网勤学网</div>
  33. </body>
  34. </html>
复制代码


本帖子中包含更多资源

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

x
举报 使用道具
| 回复

共1个回复 最后回复于 2018-1-22 18:08

潜意式
版主
勤币 18146   学币 398  
沙发
发表于 2018-1-22 18:08:21 | 只看该作者
练习完成不错，写出来之后还要注意理解哦
举报 使用道具
回复 支持 反对
发新帖
返回列表
B Color Image Link Quote Code Smilies
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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