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: #1c036c; } .banner .wrapper { height: 420px; background-image: url(../images/banner2.png); } .banner .left { float: left; padding: 0 20px; width: 190px; height: 420px; background-color: rgba(0,0,0, 0.3); /* 行高属于控制文字的属性, 能继承 */ line-height: 44px; } .banner .left span{ float:right; } .banner .left a { font-size: 14px; color: #fff; } .banner .left a:hover { color: #00b4ff; } .banner .right { float: right; margin-top: 50px; width: 228px; height: 300px; background-color: #fff; } .banner .right h2 { height: 48px; background-color: #9bceea; text-align: center; line-height: 48px; font-size: 18px; color: #fff; } .banner .right .content { padding: 0 18px; } .banner .right .content dl { padding: 12px 0; border-bottom:2px solid #e5e5e5; } .banner .right .content dt { font-size: 16px; color: #4e4e4e; } .banner .right .content dd { font-size: 14px; color: #4e4e4e; } .banner .right .more { display: block; /* margin: 4px 14px 0; */ margin: 4px auto 0; width: 200px; height: 40px; border: 1px solid #00a4ff; font-size: 16px; color: #00a4ff; font-weight: 700; text-align: center; line-height: 40px; }
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"> <ul> <li><a href="#">我是歌谣</a><span>></span></li> <li><a href="#">我是歌谣</a><span>></span></li> <li><a href="#">我是歌谣</a><span>></span></li> <li><a href="#">我是歌谣</a><span>></span></li> <li><a href="#">我是歌谣</a><span>></span></li> <li><a href="#">我是歌谣</a><span>></span></li> <li><a href="#">我是歌谣</a><span>></span></li> <li><a href="#">我是歌谣</a><span>></span></li> <li><a href="#">我是歌谣</a><span>></span></li> </ul> </div> <div class="right"> <h2>我是歌谣</h2> <div class="content"> <dl> <dt>继续学习 程序语言设计</dt> <dd>正在学习-使用对象</dd> </dl> <dl> <dt>继续学习 程序语言设计</dt> <dd>正在学习-使用对象</dd> </dl> <dl> <dt>继续学习 程序语言设计</dt> <dd>正在学习-使用对象</dd> </dl> </div> <a href="#" class="more">全部课程</a> </div> </div> </div> </body> </html>
