index.css
/* index.css是用来美化首页的 */ * { margin: 0; padding: 0; /* 內减模式 */ box-sizing: border-box; } li { list-style: none; } a { text-decoration: none; } .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } body{ background-color: #f3f5f7; } .wrapper{ width: 1200px; margin: 0 auto; } .header{ height: 42px; background-color: pink; margin: 30px; } h1 { float: left; } /* 导航 */ .nav { float: left; margin-left: 70px; height: 42px; } .nav li{ float: left; margin-right: 26px; } .nav li a{ display: block; padding: 0 9px; height: 42px; line-height: 42px; } .nav li a:hover{ border-bottom: 2px solid #00a4ff; } /* 搜索 */ .search { float: left; margin-left: 59px; width: 412px; height: 40px; border: 1px solid #00a4ff; } .search input { float: left; padding-left: 20px; /* 左右加一起的尺寸要小于等于410 */ width: 360px; height: 38px; border: 0; } /* 控制placeholder的样式 */ .search input::placeholder { font-size: 14px; color: #bfbfbf; } .search button { float: left; width: 50px; height: 40px; background-image: url(../images/btn.png); border: 0; } .user{ float: right; margin-right: 35px; height: 42px; line-height: 42px; } .user img{ vertical-align: middle; } .banner{ height: 420px; background-color: pink; } .banner .left { float: left; padding: 0 20px; width: 190px; height: 420px; background-color: rgba(0,0,0, 0.3); /* 行高属于控制文字的属性, 能继承 */ line-height: 44px; } .banner .right { float: right; margin-top: 50px; width: 228px; height: 300px; background-color: #fff; }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="header wrapper"> <h1> <a><img src="./images/logo.png"></a> </h1> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> </div> <diV class="search"> <input type="text" placeholder="输入关键词"><button></button> </diV> <div class="user"> <img src="./images/user.png" alt=""> <span>lilei</span> </div> </div> <div class="banner"> <div class="wrapper"> <div class="left"></div> <div class="right"></div> </div> </div> </body> </html>
