移动端开发——京东首页制作（流式布局）
项目准备
- 初始化基本文件夹
- 创建
index.html - 设置视口
- 引入基本公共样式
- 引入自己的css样
<!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,user-scalable=no,min-scale=1.0,max-scale=1.0"> <title>京东</title> <!-- 引入外部文件样式 --> <link rel="stylesheet" href="css/normalize.css"> <!-- 引入自己的样式 --> <link rel="stylesheet" href="css/index.css"> </head> <body> <header class="app"> <ul> <li> <img src="images/close.png" alt=""> </li> <li> <img src="images/logo.png" alt=""> </li> <li>打开京东APP，购物更轻松</li> <li>立即打开</li> </ul> </header> <!-- 搜索 --> <div class="search-wrap"> <div class="search-btn"></div> <div class="search"> <div class="jd-icon"></div> <div class="sou"></div> </div> <div class="search-login">登录</div> </div> <!-- 主体内容--> <div class="main-content"> <!-- 滑动图 --> <div class="slider"> <img src="upload/banner.dpg" alt=""> </div> <!-- 品牌日 --> <div class="brand"> <div> <a href="#"> <img src="upload/pic11.dpg" alt=""></a> </div> <div> <a href="#"> <img src="upload/pic22.dpg" alt=""></a> </div> <div> <a href="#"> <img src="upload/pic33.dpg" alt=""></a> </div> </div> <!-- nav部分 --> <nav> <a href="#"> <img src="upload/nav1.webp" alt=""><span>京东超市</span> </a> <a href="#"> <img src="upload/nav2.webp" alt=""><span>京东超市</span> </a> <a href="#"> <img src="upload/nav3.webp" alt=""><span>京东超市</span> </a> <a href="#"> <img src="upload/nav2.webp" alt=""><span>京东超市</span> </a> <a href="#"> <img src="upload/nav1.webp" alt=""><span>京东超市</span> </a> <a href="#"> <img src="upload/nav2.webp" alt=""><span>京东超市</span> </a> <a href="#"> <img src="upload/nav1.webp" alt=""><span>京东超市</span> </a> <a href="#"> <img src="upload/nav2.webp" alt=""><span>京东超市</span> </a> <a href="#"> <img src="upload/nav3.webp" alt=""><span>京东超市</span> </a> <a href="#"> <img src="upload/nav2.webp" alt=""><span>京东超市</span> </a> </nav> <!-- 新闻块 --> <div class="news"> <a href="#"><img src="upload/new1.dpg" alt=""></a> <a href="#"><img src="upload/new2.dpg" alt=""></a> <a href="#"><img src="upload/new3.dpg" alt=""></a> </div> </div> </body> </html>
body { width: 100%; min-width: 320px; max-width: 640px; margin: 0 auto; font-size: 14px; color: #666; line-height: 1.5; font-family: Helvetica, sans-serif; } a { color: #666; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } img { vertical-align: middle; } .app { height: 45px; } .app ul li { float: left; height: 45px; background-color: #333333; text-align: center; line-height: 45px; color: #fff; } .app ul li:nth-child(1) { width: 8%; } .app ul li:nth-child(1) img { width: 10px; } .app ul li:nth-child(2) { width: 10%; } .app ul li:nth-child(2) img { width: 30px; /* 图片和文字居中对齐 */ vertical-align: middle; } .app ul li:nth-child(3) { width: 57%; } .app ul li:nth-child(4) { width: 25%; background-color: red; } /* 搜索 */ .search-wrap { position: fixed; width: 100%; height: 44px; overflow: hidden; min-width: 320px; max-width: 640px; } .search-btn { position: absolute; top: 0; left: 0; width: 40px; height: 44px; } .search-btn:before { content: ""; display: block; width: 20px; height: 18px; background: url(../images/s-btn.png) no-repeat; background-size: 20px 18px; margin: 14px 0 0 15px; } .search-login { position: absolute; top: 0; right: 0; width: 40px; height: 44px; color: #fff; line-height: 44px; } .search { position: relative; height: 30px; background-color: #fff; margin: 0 50px; border-radius: 15px; margin-top: 7px; } .jd-icon { width: 20px; height: 15px; position: absolute; top: 8px; left: 13px; background: url(../images/jd.png) no-repeat; background-size: 20px 15px; } .jd-icon:after { content: ""; position: absolute; top: 0; right: -8px; display: block; width: 1px; height: 15px; background-color: #ccc; } .sou { position: absolute; width: 18px; height: 15px; top: 8px; left: 50px; background: url(../images/jd-sprites.png) no-repeat -81px 0; background-size: 200px auto; } .slider img { width: 100%; } /* 品牌日 */ .brand { overflow: hidden; border-radius: 10px 10px 0 0; } .brand div { float: left; width: 33.3%; } .brand div img { width: 100%; } /* nav */ nav { text-align: center; padding-top: 10px } nav a { float: left; width: 20%; } nav a img { width: 40px; margin: 10px 0; } nav a span { display: block; } /* news */ .news img { width: 100%; } .news a { float: left; box-sizing: border-box; } .news a:nth-child(1) { width: 50%; } /* n+2就是从第2个往后选 */ .news a:nth-child(n+2) { width: 25%; border-left: 1px solid #ccc; }
