393day(雲道頁面例項練習)
阿新 • • 發佈:2018-11-21
《2018年11月1日》【連續393天】
標題:雲道頁面例項練習;
內容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>例項</title> <link rel="stylesheet" type="text/css" href="l1.css"> </head> <body> <div class="header"> <div class="inner"> <div class="logo"> <a href="#"> <img src="images/logo.png"> </a> </div> <div class="nav"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">商城</a></li> <li><a href="#">商城</a></li> <li><a href="#">商城</a></li> <li><a href="#">商城</a></li> <li><a href="#">商城</a></li> </ul> </div> </div> </div> <div class="banner"> </div> <div class="service"> <div class="service-hd"> <h3> <img src="images/ser.png"> </h3> <p>shopcmd雲道,國內領先的獨立電商解決方案及全渠道營銷平臺。完整的產品體系,簡約的系統,個性化前端,全覆蓋多渠道營銷體系... 我們致力於打造一個服務於品牌商城/獨立電商的完整生態,讓企業的獨立電商之路變得更簡單,也更有價值!</p> </div> <div class="service-bd"></div> </div> </body> </html>
* { margin: 0px; padding: 0px; } body { background-color: #fafafa; } li { list-style: none; } .header { height: 100px; background-color: #fff; } .inner { width: 1200px; height: 100px; line-height: 100px; margin: 0 auto; background-color: #fff; } .logo { float: left; } .nav { float: right; } .nav li { float: left; } .nav li a { color: #333; text-decoration: none; margin:0 20px; } .nav li a:hover { color: #2288f6; } .banner { height: 620px; background: url(images/banner.jpg) no-repeat top center; } .service { margin: 75px auto 0; width: 1055px; height: 660ps; } .service-hd { border-top: 1px solid #ccc; margin: 0 25px; } .service-hd h3{ width: 167px; height: 46px; margin: -15px auto 0; margin-top: -25px; } .service p { font-size: 12px; color: #666; line-height: 26px; text-align: center; width: 830px; margin: 15px auto 0; }