<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display属性</title> <style type="text/css"> div,span{background-color: #00aaee; border:1px #666 solid;} .one{font-size: 0px;} div{display:inline-block; font-size:16px; width:100px; height:30px; padding:5px; margin:10px; } span{display:block; width:100px; height:30px; padding:5px; margin:10px;} span{display:none;} a:hover span{display:inline;} </style> </head> <body> <!--块级元素--> <!-- <div class="one"> --> <div>display属性-div</div> <div>display属性-div</div> <div>display属性-div</div> <div>display属性-div</div> <div>display属性-div</div> <div>display属性-div</div> <!-- </div> --> <hr/> <!--内联元素--> <span>display属性-span</span><span>display属性-span</span><span>display属性-span</span> <hr/> <a href="#">指我...<span>和你捉迷藏</span></a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>应用</title> <style type="text/css"> body,p,div{margin:0px;padding: 0px;font-family: "微软雅黑";} .course{width: 220px;background-color: #f2f4f6;border: 1px #ececec solid;margin:0 auto;} .list1{width: 100%;height: 90px;background-color: #040a10;padding-top:60px;} .content{font-size: 20px;color:#fff;font-weight: bold;text-align: center;} .list2{font-size: 14px;border-bottom: 1px #d9dde1 solid;margin: 0px 15px; padding: 10px 5px 5px 5px;line-height: 1.5em;} .special{border-bottom: none;} span{color: #93999f;font-size: 12px;} </style> </head> <body> <div class="course"> <div class="list1"> <p class="content">前端课程排列</p> </div> <div class="list2"> <p>HTML+CSS基础课程</p> <span>466609人在学</span> </div> <div class="list2"> <p>HTML+CSS基础课程</p> <span>466609人在学</span> </div> <div class="list2 special"> <p>HTML+CSS基础课程</p> <span>466609人在学</span> </div> </div> </body> </html>