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; }
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> </body> </html>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)