- 流式布局的案例–京东移动端
<!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,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<title>京东案例</title>
</head>
<body>
<header class="app">
<ul>
<li>
<img src="images1/cha.png" alt="">
</li>
<li>
<img src="images1/logo.png" alt="">
</li>
<li>打开京东app,购物更简单</li>
<li>立即打开</li>
</ul>
</header>
<div class="search">
<div class="search-btn"></div>
<div class="center">
<div class="jd"></div>
<div class="sou"></div>
</div>
<div class="search-login">登录</div>
</div>
<div class="main">
<div class="slider">
<img src="upload/q70.jpg" alt="">
</div>
<div class="brand">
<div>
<a href="##"><img src="upload/pic1.dpg" alt=""></a>
</div>
<div>
<a href="##"><img src="upload/pic2.dpg" alt=""></a>
</div>
<div>
<a href="##"><img src="upload/pic3.dpg" alt=""></a>
</div>
</div>
<nav class="clearfix">
<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/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<span>京东超市</span>
</a>
<a href="#">
<img src="upload/nav1.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>
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
body {
width: 100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
color: #666;
line-height: 1.5;
}
a {
color: #666;
text-decoration: none;
}
.app {
height: 45px;
}
img {
vertical-align: middle;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.app ul li {
float: left;
height: 45px;
line-height: 45px;
background-color: #333333;
text-align: center;
color: #fff;
}
.app ul li:nth-child(1) {
width: 8%;
}
.app ul li:nth-child(1) img {
width: 12px;
}
.app ul li:nth-child(2) {
width: 10%;
}
.app ul li:nth-child(2) img {
width: 35px;
vertical-align: middle;
}
.app ul li:nth-child(3) {
width: 57%;
}
.app ul li:nth-child(4) {
width: 25%;
background-color: #f63515;
}
.search {
position: fixed;
width: 100%;
height: 44px;
overflow: hidden;
min-width: 320px;
max-width: 640px;
}
.search-btn {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 44px;
}
.search-btn::before {
content: "";
display: block;
width: 20px;
height: 18px;
background: url(../images1/three.png) no-repeat;
background-size: 20px 18px;
margin: 14px 0 0 15px;
}
.search-login {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 44px;
color: #fff;
text-align: center;
line-height: 44px;
}
.center {
position: relative;
height: 30px;
background-color:#fff;
margin: 0 50px ;
border-radius: 15px;
margin-top: 7px;
}
.jd {
position: absolute;
top: 8px;
left: 13px;
width: 20px;
height: 15px;
background: url(../images1/jd.png);
background-size: 20px 15px;
}
.jd::after {
position: absolute;
right: -8px;
top: 0;
content: "";
display: block;
width: 1px;
height: 15px;
background-color: #ccc;
}
.sou {
position: absolute;
top: 8px;
left: 50px;
width: 18px;
height: 15px;
background: url(../images1/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.33%;
}
.brand div img {
width: 100%;
}
nav {
padding-top: 5px;
}
nav a {
float: left;
width: 20%;
text-align: center;
}
nav a img {
width: 40px;
margin: 10px 0;
}
nav a span {
display: block;
}
.news {
margin-top: 20px;
}
.news img {
width: 100%;
}
.news a {
float: left;
box-sizing: border-box;
}
.news a:nth-child(1) {
width: 50%;
}
.news a:nth-child(2) {
width: 25%;
border-left: 1px solid #ccc;
}
.news a:nth-child(3) {
width: 25%;
border-left: 1px solid #ccc;
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
body {
width: 100%;
min-width: 320px;
max-width: 640px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
color: #666;
line-height: 1.5;
}
a {
color: #666;
text-decoration: none;
}
.app {
height: 45px;
}
img {
vertical-align: middle;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.app ul li {
float: left;
height: 45px;
line-height: 45px;
background-color: #333333;
text-align: center;
color: #fff;
}
.app ul li:nth-child(1) {
width: 8%;
}
.app ul li:nth-child(1) img {
width: 12px;
}
.app ul li:nth-child(2) {
width: 10%;
}
.app ul li:nth-child(2) img {
width: 35px;
vertical-align: middle;
}
.app ul li:nth-child(3) {
width: 57%;
}
.app ul li:nth-child(4) {
width: 25%;
background-color: #f63515;
}
.search {
position: fixed;
width: 100%;
height: 44px;
overflow: hidden;
min-width: 320px;
max-width: 640px;
}
.search-btn {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 44px;
}
.search-btn::before {
content: "";
display: block;
width: 20px;
height: 18px;
background: url(../images1/three.png) no-repeat;
background-size: 20px 18px;
margin: 14px 0 0 15px;
}
.search-login {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 44px;
color: #fff;
text-align: center;
line-height: 44px;
}
.center {
position: relative;
height: 30px;
background-color:#fff;
margin: 0 50px ;
border-radius: 15px;
margin-top: 7px;
}
.jd {
position: absolute;
top: 8px;
left: 13px;
width: 20px;
height: 15px;
background: url(../images1/jd.png);
background-size: 20px 15px;
}
.jd::after {
position: absolute;
right: -8px;
top: 0;
content: "";
display: block;
width: 1px;
height: 15px;
background-color: #ccc;
}
.sou {
position: absolute;
top: 8px;
left: 50px;
width: 18px;
height: 15px;
background: url(../images1/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.33%;
}
.brand div img {
width: 100%;
}
nav {
padding-top: 5px;
}
nav a {
float: left;
width: 20%;
text-align: center;
}
nav a img {
width: 40px;
margin: 10px 0;
}
nav a span {
display: block;
}
.news {
margin-top: 20px;
}
.news img {
width: 100%;
}
.news a {
float: left;
box-sizing: border-box;
}
.news a:nth-child(1) {
width: 50%;
}
.news a:nth-child(2) {
width: 25%;
border-left: 1px solid #ccc;
}
.news a:nth-child(3) {
width: 25%;
border-left: 1px solid #ccc;
}
- flex布局的案例学习
<!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">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/normalize.css">
<title>携程在手,说走就走</title>
</head>
<body>
<div class="search">
<div class="search_lit">搜索:目的地/酒店/景点/航班号</div>
<a href="#" class="user">我 的</a>
</div>
<div class="focus">
<img src="upload/focus.jpg" alt="">
</div>
<ul class="local_nav">
<li>
<a href="#" title="景点·玩乐">
<span class="local_icon-i1"></span>
<span>景点·玩乐</span>
</a>
</li>
<li>
<a href="#" title="景点·玩乐">
<span class="local_icon-i2"></span>
<span>景点·玩乐</span>
</a>
</li>
<li>
<a href="#" title="景点·玩乐">
<span class="local_icon-i3"></span>
<span>景点·玩乐</span>
</a>
</li>
<li>
<a href="#" title="景点·玩乐">
<span class="local_icon-i4"></span>
<span>景点·玩乐</span>
</a>
</li>
<li>
<a href="#" title="景点·玩乐">
<span class="local_icon-i5"></span>
<span>景点·玩乐</span>
</a>
</li>
</ul>
<nav>
<div class="nav-common">
<div class="nva-items">
<a href="#">海外酒店</a>
</div>
<div class="nva-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="nva-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
<div class="nav-common">
<div class="nva-items">
<a href="#">海外酒店</a>
</div>
<div class="nva-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="nva-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
<div class="nav-common">
<div class="nva-items">
<a href="#">海外酒店</a>
</div>
<div class="nva-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="nva-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
</nav>
<ul class="subnav_entry">
<li>
<a href="#">
<span class="subnav_entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav_entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav_entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav_entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav_entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav_entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav_entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav_entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav_entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav_entry-icon"></span>
<span>电话费</span>
</a>
</li>
</ul>
<div class="sales-box">
<div class="sales-hd">
<h2>热门活动</h2>
<a href="#" class="more">获取更多福利</a>
</div>
<div class="sales-bd">
<div class="row">
<a href="#">
<img src="upload/pic1.jpg" alt="">
</a>
<a href="#">
<img src="upload/pic2.jpg" alt="">
</a>
</div>
<div class="row">
<a href="#">
<img src="upload/pic3.jpg" alt="">
</a>
<a href="#">
<img src="upload/pic4.jpg" alt="">
</a>
</div>
<div class="row">
<a href="#">
<img src="upload/pic5.jpg" alt="">
</a>
<a href="#">
<img src="upload/pic6.jpg" alt="">
</a>
</div>
</div>
</div>
</body>
</html>
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
div {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.search {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 540px;
min-width: 320px;
height: 44px;
background-color: #f6f6f6;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.search_lit {
position: relative;
height: 26px;
line-height: 24px;
border:1px solid #ccc ;
font-size: 12px;
color: #666;
flex: 1;
margin: 7px 10px;
padding-left: 30px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.search_lit::before {
content: "";
position: absolute;
top: 1px;
left: 5px;
width: 15px;
height: 15px;
background:url(../images/sprite.png) no-repeat -59px -279px;
background-size: 104px auto;
margin: 5px;
}
.user {
text-decoration: none;
width: 44px;
height: 44px;
font-size: 12px;
text-align: center;
color: #2eaae0;
}
.user::before {
content: "";
display: block;
width: 23px;
height: 23px;
background: url(../images/sprite.png) no-repeat -59px -194px;
background-size: 104px auto;
margin: 4px auto -2px;
}
.focus {
padding-top: 44px;
}
.focus img {
width: 100%;
}
.local_nav {
display: flex;
height: 64px;
background-color: #fff;
border-radius: 8px;
margin: 3px 4px;
}
.local_nav li {
flex: 1;
}
.local_nav a {
display: flex;
flex-direction: column;
align-items: center;
color: #222;
font-size: 12px;
}
.local_nav li [class^="local_icon"] {
background: url(../images/localnav_bg.png) no-repeat 0 0;
width: 32px;
height: 32px;
margin-top: 8px;
background-size: 32px auto ;
}
.local_nav li .local_icon-i2 {
background-position: 0 -32px;
}
.local_nav li .local_icon-i3 {
background-position: 0 -64px;
}
.local_nav li .local_icon-i4 {
background-position: 0 -96px;
}
.local_nav li .local_icon-i5 {
background-position: 0 -128px;
}
nav {
overflow: hidden;
border-radius: 8px;
margin: 0 4px 3px;
}
.nav-common {
display: flex;
height: 88px;
background-color: pink;
}
.nav-common:nth-child(2) {
margin: 3px 0;
}
.nva-items {
flex: 1;
display: flex;
flex-direction: column;
}
.nva-items:nth-child(-n+2) {
border: 1px solid #fff;
}
.nva-items a:nth-child(1) {
border-bottom: 1px solid #fff;
}
.nva-items a {
flex: 1;
text-align: center;
line-height: 44px;
color: #fff;
font-size: 14px;
text-shadow: 1px 1px rgba(0,0,0,.2);
}
.nva-items:nth-child(1) {
border-bottom: none;
}
.nva-items:nth-child(1) a {
background: url(../images/hotel.png) no-repeat bottom center;
background-size: 121px auto;
}
.nav-common:nth-child(1) {
background: -webkit-linear-gradient(left,#fa5a55,#fa994d);
}
.nav-common:nth-child(2) {
background: -webkit-linear-gradient(left,#4b90ed,#53bced);
}
.nav-common:nth-child(3) {
background: -webkit-linear-gradient(left,#34c219,#6cd559);
}
.subnav_entry {
display: flex;
border-radius: 8px;
background-color: #fff;
margin: 0 4px;
flex-wrap: wrap;
padding: 5px 0 ;
}
.subnav_entry li {
flex: 20%;
}
.subnav_entry a {
display: flex;
flex-direction: column;
align-items: center;
}
.subnav_entry-icon {
width: 28px;
height: 28px;
background-color: pink;
margin-top: 4px;
background:url(../images/subnav-bg.png) no-repeat;
background-size: 28px auto;
}
.sales-box {
border-top: 1px solid #bbb;
background-color: #fff;
margin: 4px;
}
.sales-hd {
position: relative;
height: 44px;
border-bottom: 1px solid #ccc;
}
.sales-hd h2 {
position: relative;
overflow: hidden;
text-indent: -999px;
}
.sales-hd h2::after {
position: absolute;
top: 8px;
left: 20px;
content: "";
width: 79px;
height: 15px;
background:url(../images/hot.png) no-repeat 0 -20px;
background-size: 79px auto;
}
.more {
position: absolute;
right: 5px;
top: 0px;
background: -webkit-linear-gradient(left,#ff506c,#ff6bc6);
border-radius: 15px;
padding: 3px 20px 3px 10px;
color: #fff;
}
.more::after {
position: absolute;
top: 9px;
right: 9px;
content: "";
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
.row{
display: flex;
}
.row a {
flex: 1;
border-bottom: 1px solid #ccc;
}
.row a img {
width: 100%;
}
.row a:nth-child(1) {
border-right: 1px solid #ccc;
}
- less 制作苏宁案例
<!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">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="search_content">
<a href="#" class="classify"></a>
<div class="search">
<form action="">
<input type="search" value="厨卫保暖季 每千减百">
</form>
</div>
<a href="#" class="login">登录</a>
</div>
<div class="banner">
<img src="upload/banner.gif" alt="">
</div>
<div class="ad">
<a href="#"><img src="upload/ad1.gif" alt=""></a>
<a href="#"><img src="upload/ad2.gif" alt=""></a>
<a href="#"><img src="upload/ad3.gif" alt=""></a>
</div>
<div class="nav">
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
</div>
</body>
</html>
// 首页的样式less文件
@import "common";
//import 是导入的意思 可以把一个样式文件导入另一个样式文件里面
//link是把样式文件引入到 html页面中去
body {
min-width: 320px;
margin: 0 auto;
width: 15rem;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}
a {
text-decoration: none;
}
@basefont:50px;
.search_content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 15rem;
height: (88rem / @basefont);
background-color: #ffc001;
}
.classify {
width:(44rem / @basefont ) ;
height: (70rem / @basefont);
background-color: pink;
margin: (11rem / @basefont) (25rem / @basefont) (7rem / @basefont) (24rem / @basefont);
background: url(images/classify.png) no-repeat;
background-size: 0.88rem 1.4rem;
}
.search {
flex: 1;
// background-color: purple;
input {
outline: none; //没有边框
width: 100%;
border: 0;
height: (66rem / @basefont);
border-radius: (33rem / @basefont);
background-color: #fff2cc;
margin-top: (12rem / @basefont);
padding-left: (55rem / @basefont);
font-size: (25rem / @basefont);
color: #757575;
}
}
.login {
width: (75rem / @basefont);
height: (70rem / @basefont);
// background-color: blue;
margin: (10rem / @basefont);
font-size: (25rem / @basefont);
text-align: center;
color: #fff;
line-height: (70rem / @basefont);
}
.banner {
width: 15rem;
height: (368rem / @basefont);
img {
width: 100%;
height: 100%;
}
}
.ad {
display: flex;
a {
flex: 1;
}
a img {
width: 100%;
}
}
.nav {
display: flex;
flex-wrap: wrap;
a {
display: flex;
flex-direction: column;
align-items: center;
flex: 20%;
font-size: (25rem / @basefont);
color: #333;
}
a img {
width: (82rem / @basefont);
// margin: (10rem / @basefont) auto 0;
}
}