4.内边距
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1 { width: 100px; height: 100px; border: 1px solid red; /* 添加内边距会影响元素的宽高 */ padding-top: 20px; padding-left: 50px; } #d2,#d3 { width: 100px; height: 100px; border: 1px solid red; } div>div { width: 25px; height: 25px; background-color: green; } #d2{ padding: 25px 0 0 25px; width: 75px ; height: 75px; } #d3>div{ /*除了给上级元素添加overflow:hidden可以 解决粘连问题,给上级元素添加边框也能解决*/ margin: 25px 0 0 25px; } </style> </head> <body> <div id="d1">内边距测试</div> <div id="d2"> <div></div> </div> <div id="d3"> <div></div> </body> </html>
显示效果：
5.学子商城练习1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font: 12px "simhei",Arial, Helvetica, sans-serif; color: #666; } a{ /*宽高132*40 颜色#Oaaled */ width: 132px; height: 40px; background-color: #0aa1ed ; display: block; text-align: center; line-height: 40px; color: white ; text-decoration: none ; border-radius: 3px; font-size: 20px; } #d1>div { width: 245px; height: 232px; margin: 68px 0 0 36px; } #d1{ width: 611px; height: 376px; background-color: #e8e8e8; /*设置背景图片*/ background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png); background-size: 318px 319px; background-repeat: no-repeat ; background-position: 90% 70%; overflow: hidden; } #p1{ font-size: 32px; color: #333; } #p3{ font-size: 24px; font-weight: bold; color: #0aa1ed; } </style> </head> <body> <div id="d1"> <div> <p id="p1">灵越 燃7000系列</p> <p id="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br /> 英特尔HD显卡620含共享显卡内存</p> <p id="p3">￥999999.99</p> <a href="#">查看详情</a> </div> </div> </body> </html>
显示效果：
6.学子商城练习2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font: 12px "simhei",Arial, Helvetica, sans-serif; color: #666; } a{ /*宽高132*40 颜色#Oaaled */ width: 132px; height: 40px; background-color: #0aa1ed ; display: block; text-align: center; line-height: 40px; color: white ; text-decoration: none ; border-radius: 3px; font-size: 20px; } #d1>div { width: 253px; height: 232px; margin: 39px 0 0 25px; } #d1{ width: 400px; height: 376px; background-color: #e8e8e8; /*设置背景图片*/ background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png); background-size: 290px 232px; background-repeat: no-repeat ; background-position: 90% 90%; overflow: hidden; } #p1{ font-size: 32px; color: #333; } #p3{ font-size: 24px; font-weight: bold; color: #0aa1ed; } </style> </head> <body> <div id="d1"> <div> <p id="p1">颜值 框不住</p> <p id="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br /> 英特尔HD显卡620含共享显卡内存 <p id="p3">￥999999.99</p> <a href="#">查看详情</a> </div> </div> </body> </html>
显示效果：
本节所有的代码: https://download.csdn.net/download/qq_44273429/12729648
