盒子模型综合练习
这边可以下源码和素材
样张
- 先打开ps(或者其他带标尺的看图软件)测量各个部分的大小
大概就这样那样搞一搞 - 核验测量数据(很重要,要不然错了代码打一半又要改一大堆数据)
- 开打
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 298px; height: 226px; border: #cccccc 1px solid; background: url("img/背景1.jpg"); padding: 0 15px; margin: 100px auto; } .new{ width:298px ; height: 26px; border-bottom: #cccccc 1px solid; font-size: 18px; padding-top: 17px; line-height: 26px; font-weight: bolder; } .d1{ padding-top: 13px; background: url("img/图标.jpg") 5px 21px no-repeat; } .d2{ padding-top: 3px; background: url("img/图标.jpg") 5px 12px no-repeat; } .d{ width: 278px; height: 27px; border-bottom: #cccccc 1px dashed; font-size: 10px; line-height: 27px; padding-left: 20px; } a{ text-decoration: none; color: black; } </style> </head> <body> <div class="box"> <div class="new">最新文章/New Articles</div> <div class="d d1"><a href="">北京招聘网页设计,平面设计,php</a></div> <div class="d d2"><a href="">体验javascript的魅力</a></div> <div class="d d2"><a href="">jquery世界来临</a></div> <div class="d d2"><a href="">网页设计师的梦想</a></div> <div class="d d2"><a href="">jquery中的链式编程是什么</a></div> </div> </body> </html>