commom.css
/* 各个页面相同的样式表 : 头, 尾部 */ /* 版心 */ .wrapper { width: 1240px; margin: 0 auto; } /* 快捷导航 */ .shortcut { height: 52px; background-color: #333; } .shortcut .wrapper { height: 52px; } /* 目的: 所有的文字内容居右侧对齐 */ .shortcut .wrapper ul { float: right; } /* 目的: 让所有的文字在一行显示 */ .shortcut .wrapper li { float: left; line-height: 52px; } .shortcut .wrapper a { padding: 0 16px; border-right: 1px solid #666; font-size: 14px; color: #dcdcdc; } .shortcut .wrapper a span { display: inline-block; margin-right: 8px; width: 11px; height: 16px; background-image: url(../images/sprites.png); background-position: -160px -70px; vertical-align: middle; } /* 头部 */ .header { margin: 30px auto; height: 70px; } .logo { float: left; width: 207px; height: 70px; } .logo h1 { width: 207px; height: 70px; } .logo h1 a { display: block; width: 207px; height: 70px; background-image: url(../images/logo.png); background-size: contain; /* 目的: 让h1里面的字看不见 */ font-size: 0; } .nav { float: left; margin-left: 40px; height: 70px; } .search { position: relative; float: left; margin-top: 24px; margin-left: 34px; width: 172px; height: 30px; border-bottom: 2px solid #e7e7e7; } .nav li { float: left; margin-right: 48px; line-height: 70px; } .nav li a { padding-bottom: 7px; } .nav li a:hover { color: #27ba9b; border-bottom: 1px solid #27ba9b; } .search input { padding-left: 30px; width: 172px; height: 28px; } .search input::placeholder { font-size: 14px; color: #ccc; }
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>项目代码准备</title> <!-- 外链式样式表的生成 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/index.css"> </head> <body> <!-- 快捷导航 --> <div class="shortcut"> <div class="wrapper"> <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> <li><a href="#"><span></span>手机版</a></li> </ul> </div> </div> <div class="header wrapper"> <div class="logo"> <h1><a href="#">小兔鲜儿</a></h1> </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> <li><a href="#">洗护</a></li> <li><a href="#">孕婴</a></li> <li><a href="#">服装</a></li> </ul> </div> <div class="search"> <input type="text" placeholder="搜一搜"> <!-- 定位 放大镜 --> <span></span> </div> <div class="car"> <span>2</span> </div> </div> </body> </html>
