html代码
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>解忧杂货店</title> <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="top-nav"> <div class="container clear-float"> <div class="floatleft"> <a class="item" href="%">首页</a> </div> <div class="floatright"> <a class="item" href="%">我的订单</a> <a class="item" href="%">收藏夹</a> <a class="item" href="%">登陆</a> <a class="item" href="%">注册</a> </div> </div> </div> <div class="header clear-float"> <div class="container"> <div class="logo size-2"> <a href="#">蘑菇商城</a> </div> <div class="size-5 searh-bar"> <input type="text" class="size-8"> <button class="size-2">搜索</button> </div> <div class="size-3 cart"> <a href="#">我的购物车</a> </div> </div> </div> <div class="main-promote clear-float"> <div class="container"> <div class="size-2 cat"> <div class="item">item/item</div> <div class="item">item/item</div> <div class="item">item/item</div> <div class="item">item/item</div> <div class="item">item/item</div> <div class="item">item/item</div> <div class="item">item/item</div> <div class="item">item/item</div> <div class="item">item/item</div> </div> <div class="size-6"> <div class="solider"> <img src="img/bk3.png" alt=""> </div> <div class="sub-promote"> <div class="size-5"> <img src="img/1.jpg" alt=""> </div> <div class="size-5"> <img src="img/1.jpg" alt=""> </div> </div> </div> <div class="size-2 info"> <div class="auth"> <div class="avatar"></div> 你好――李花花 </div> <div class="anno clear-float"> <div class="title">公告</div> <div class="content">Lorem ipsum dolor sit amet, aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </div> </div> </div> <div class="container"> <div class="promote clear-float"> <div class="title">女装</div> <div class="content"> <div class="size-2 item"> <div class="card"></div> </div> <div class="size-3 item"> <div class="card"></div> </div> <div class="size-3 item"> <div class="card"></div> </div> <div class="size-2 item"> <div class="card"></div> </div> </div> </div> <div class="promote clear-float"> <div class="title">女装</div> <div class="content"> <div class="size-2 item"> <div class="card"></div> </div> <div class="size-3 item"> <div class="card"></div> </div> <div class="size-3 item"> <div class="card"></div> </div> <div class="size-2 item"> <div class="card"></div> </div> </div> </div> <div class="promote clear-float"> <div class="title">女装</div> <div class="content"> <div class="size-2 item"> <div class="card"></div> </div> <div class="size-3 item"> <div class="card"></div> </div> <div class="size-3 item"> <div class="card"></div> </div> <div class="size-2 item"> <div class="card"></div> </div> </div> </div> </div> <div class="footer clear-float"> <div class="container"></div> </div> </body> </html>
css布局代码
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 14px; color: #444; background: #f9f9f9; line-height: 1.7; } a { text-decoration: none; } img { display: block; width: 100%; border: 1px solid #fff; } .container { max-width: 1080px; margin: auto; } .floatleft { float: left; } .floatright { float: right; } .clear-float:after, .clear-float:before{ content: " "; display: block; clear: both; } .size-1, .size-2, .size-3, .size-4, .size-5, .size-6, .size-7, .size-8, .size-9 { position: relative; min-height: 1px; float: left; } .size-1 { width: 10%; } .size-2 { width: 20%; } .size-3 { width: 30%; } .size-4 { width: 40%; } .size-5 { width: 50%; } .size-6 { width: 50%; } .size-7 { width: 70%; } .size-8 { width: 80%; } .size-9 { width: 90%; } .top-nav { background: #eee; } .top-nav .item { display: inline-block; padding: 6px 10px; } .top-nav .item:hover { color: #333; } .header { padding: 20px 0px; } .header .logo { background-image: url(../image/logo.png); background-size: contain; background-repeat:no-repeat; background-position: center center; height: 60px; } .header .searh-bar { border: 2px solid #dd182b; background: #dd182b; } .header .searh-bar input, .header .searh-bar button{ display: block; float: left; border: 0; padding: 10px; } .header .searh-bar input{ width: 80%; } .header .searh-bar button{ width: 20%; background: #dd182b; color: #fff; } .header .cart { text-align: center; } .header .cart a{ float: right; padding: 10px; background: #fff; border: 1px solid #eee; color: #dd182b; width: 80%; } .main-promote .cat { background: #6e6568; color: #fff; } .main-promote .cat .item { padding: 15px 20px; } .main-promote .cat .item:hover { background: rgba(0,0,0,0.2); } .main-promote .info { padding: 20px; background: #fff; } .main-promote .info > * { margin-bottom: 10px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .main-promote .avatar { width: 50px; height: 50px; background: #aaa; border-radius: 50%; float: left; margin-right: 10px; } .main-promote { background: #dedede; } .container .title { font-size: 25px; } .container .title:before{ content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 25px; } .container .item { padding: 5px; } .promote .card { height: 300px; background: #ccc; border-radius: 3px; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1); box-shadow: 0 2px 2px rgba(0,0,0,0.1); } .promote { height: auto; } .footer { margin: 30px; padding: 30px 0; text-align: center; color: #999; } .footer a{ color: #999; } .header a { font-size: 25px; color: black; }样式预览
文章来源: html 网上商城部署项目