赞
踩
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, user-scalable=no, maximum-scale=1.0, minimum=1.0"> <!-- 引入css初始化文件 --> <link rel="stylesheet" href="css/normalize.css"> <!-- 引入首页css文件 --> <link rel="stylesheet" href="css/index.css"> <title>京东首页</title> </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> <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/nav4.webp" alt=""> <span>京东生鲜</span> </a> <a href="#"> <img src="upload/nav5.webp" alt=""> <span>京东到家</span> </a> <a href="#"> <img src="upload/nav6.webp" alt=""> <span>充值缴费</span> </a> <a href="#"> <img src="upload/nav7.webp" alt=""> <span>物流查询</span> </a> <a href="#"> <img src="upload/nav8.webp" alt=""> <span>领券</span> </a> <a href="#"> <img src="upload/nav9.webp" alt=""> <span>零津贴</span> </a> <a href="#"> <img src="upload/nav10.webp" alt=""> <span>PLUS会员</span> </a> </nav> <!-- 清除浮动解决margin-top失效问题 --> <div style="clear: both;"></div> <!-- 新闻模块 --> <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>
index.css
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; background-color: #ccc; height: 2000px; } /* 点击高亮我们可以需要清除 设置为transparent完成透明 */ * { -webkit-tap-highlight-color: transparent; } /* 在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式 */ input { -webkit-appearance: none; } /* 禁用长按页面时的弹出菜单 */ img, a { -webkit-touch-callout: none; } 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: #F63515; } /* 搜索 */ .search-wrap { position: fixed; width: 100%; height: 44px; /* 给子盒子设置margin-top值会导致父盒子坍塌,外边距合并问题 */ 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 { position: relative; height: 30px; background-color: #fff; margin: 0 50px; border-radius: 15px; margin-top: 7px; } .jd-icon { position: absolute; top: 8px; left: 13px; width: 20px; height: 15px; 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; top: 8px; left: 50px; width: 18px; height: 15px; background-color: pink; background: url(../images/jd-sprites.png) no-repeat -81px 0 ; background-size: 200px auto; } .search-login { position: absolute; top: 0; right: 0; width: 40px; height: 44px; color: #fff; line-height: 44px; } .slider img { width: 100%; } /* 品骗日 */ .brand { overflow: hidden; border-radius: 10px 10px 0 0; } .brand div { float: left; width: 33.333%; } .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(n+2) */ .news a:nth-child(2), .news a:nth-child(3) { width: 25%; border-left: 1px solid #ccc; }
建议:
布局原理
flex是flexible Box的缩写,意为"弹性布局",用来为盒状模型最大的灵活性,任何一个容器都可以指定为flex布局
采用flex布局的元素,称为flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。
总结:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
1. flex-direction 设置主轴的方向
(1) 主轴和侧轴
在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x和y轴
(2) 属性值
flex-direction属性决定主轴的方向(即项目的排列方向)
注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴space,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
属性值 | 说明 |
---|---|
row | 默认值从左到右(123) |
row-reverse | 从右到左(321) |
column | 从上到下 |
column-reverse | 从下到上 |
2. justify-content 设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个
属性值 | 说明 |
---|---|
flex-start | 默认值 从头部开始 如果主轴是x轴,则从左到右(123) |
flex-end | 从尾部开始排列(123) |
center | 在主轴居中对齐(如果主轴是x轴则水平居中) |
space-around | 平分剩余空间 |
space-between | 先两边贴边,再平分剩余空间(重要) |
3. flex-wrap 设置子元素是否换行
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,flex布局中默认是不换行的.
属性值 | 说明 |
---|---|
nowrap | 默认值 不换行 |
wrap | 换行 |
4. align-items设置侧轴上的排列方式(单行)
该属性是控制子项在侧轴(默认是y轴)上的排列方式,在子项为单项的时候使用
属性值 | 说明 |
---|---|
flex-start | 从上到下 |
flex-end | 从下到上 |
center | 挤在一起(垂直居中) |
stretch | 拉伸(默认值)子盒子不要给高度 |
5. align-content 设置侧轴上的子元素的排列方式(多行)
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行),在单行下是没有效果的。
属性值 | 说明 |
---|---|
flex-start | 默认值在侧轴的头部开始排列 |
flex-end | 在侧轴的尾部开始排列 |
center | 在侧轴中间显示 |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布在两头,再平分剩余空间 |
stretch | 设置子项元素高度平分父元素高度 |
6. align-content 和 align-items的区别
7. flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性
flex-flow: row wrap;
1. flex属性
flex属性定义子项目分配剩余空间,用flex来表示占多少份数
.item {
flex: <number>; /* default 0 */
}
2. align-self 控制子项自己在侧轴的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
3. order属性定义子项的排列顺序(前后顺序
数值越小,排列越靠前,默认为0
注意:和z-index不一样
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"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> <title>携程网</title> </head> <body> <!-- 顶部搜索 --> <div class="search-index"> <div class="search">搜索:目的地/酒店/景点/航班号</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-nav-icon-1"></span> <span>景点·玩乐</span> </a> </li> <li> <a href="#" title="周边游"> <span class="local-nav-icon-2"></span> <span>周边游</span> </a> </li> <li> <a href="#" title="美食林"> <span class="local-nav-icon-3"></span> <span>美食林</span> </a> </li> <li> <a href="#" title="一日游"> <span class="local-nav-icon-4"></span> <span>一日游</span> </a> </li> <li> <a href="#" title="当地攻略"> <span class="local-nav-icon-5"></span> <span>当地攻略</span> </a> </li> </ul> <!-- 主导航栏 --> <nav> <div class="nav-common"> <div class="nav-items"> <a href="#"> <span class="icon-1"></span> <span>酒店</span> </a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="nav-items"> <a href="#">团购</a> <a href="#">民宿·客栈</a> </div> </div> <div class="nav-common"> <div class="nav-items"> <a href="#"> <span class="icon-2"></span> <span>机票</span> </a> </div> <div class="nav-items"> <a href="#">火车票</a> <a href="#">特价机票</a> </div> <div class="nav-items"> <a href="#">汽车票·船票</a> <a href="#">专车·租车</a> </div> </div> <div class="nav-common"> <div class="nav-items"> <a href="#"> <span class="icon-3"></span> <span>旅游</span> </a> </div> <div class="nav-items"> <a href="#">门票</a> <a href="#">目的地攻略</a> </div> <div class="nav-items"> <a href="#">邮轮旅行</a> <a href="#">定制旅行</a> </div> </div> </nav> <!-- 侧导航栏 --> <ul class="subnav-entry"> <li> <a href="#" title="WiFi电话卡"> <span class="subnav-entry-icon-1"></span> <span>WiFi电话卡</span> </a> </li> <li> <a href="#" title="保险·签证"> <span class="subnav-entry-icon-2"></span> <span>保险·签证</span> </a> </li> <li> <a href="#" title="外币兑换"> <span class="subnav-entry-icon-3"></span> <span>外币兑换</span> </a> </li> <li> <a href="#" title="购物"> <span class="subnav-entry-icon-4"></span> <span>购物</span> </a> </li> <li> <a href="#" title="当地向导"> <span class="subnav-entry-icon-5"></span> <span>当地向导</span> </a> </li> <li> <a href="#" title="自由行"> <span class="subnav-entry-icon-6"></span> <span>自由行</span> </a> </li> <li> <a href="#" title="境外玩乐"> <span class="subnav-entry-icon-7"></span> <span>境外玩乐</span> </a> </li> <li> <a href="#" title="礼品卡"> <span class="subnav-entry-icon-8"></span> <span>礼品卡</span> </a> </li> <li> <a href="#" title="信用卡"> <span class="subnav-entry-icon-9"></span> <span>信用卡</span> </a> </li> <li> <a href="#" title="更多"> <span class="subnav-entry-icon-10"></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>
index.css
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; -webkit-tap-highlight-color: transparent; } a { text-decoration: none; color: #222; } ul, li { list-style: none; margin: 0; padding: 0; } div { box-sizing: border-box; } /* 搜索模块 */ .search-index { display: flex; /* 固定定位跟父级没有关系,它以屏幕为准 */ position: fixed; top: 0; left: 50%; /* 兼容老版本浏览器 */ -webkit-transform: translateX(-50%); transform: translateX(-50%); /* 固定的盒子应该有宽度 */ width: 100%; min-width: 320px; max-width: 540px; height: 44px; background-color: #f6f6f6; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .search { position: relative; flex: 1; height: 26px; border: 1px solid #ccc; font-size: 12px; color: #666; line-height: 24px; padding-left: 25px; margin: 7px 10px; border-radius: 5px; box-shadow: 0 2px 4px rgb(0, 0, 0, .2); } .search::before { content: ""; position: absolute; top: 5px; left: 5px; width: 15px; height: 15px; background: url(../images/sprite.png) -59px -279px no-repeat; background-size: 104px auto; } .user { 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) -58px -194px no-repeat; /* 记得缩放 */ 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; margin: 3px 4px; border-radius: 8px; } .local-nav li { flex: 1; } .local-nav a { display: flex; flex-direction: column; /* 侧轴居中对齐 */ align-items: center; font-size: 12px; } .local-nav li [class^="local-nav-icon"] { width: 32px; height: 32px; margin-top: 8px; background: url(../images/localnav_bg.png) 0 0 no-repeat; background-size: 32px auto; } .local-nav li .local-nav-icon-2 { background-position: 0 -32px; } .local-nav li .local-nav-icon-3 { background-position: 0 -64px; } .local-nav li .local-nav-icon-4 { background-position: 0 -96px; } .local-nav li .local-nav-icon-5 { background-position: 0 -128px; } /* 主导航栏 */ nav { overflow: hidden; border-radius: 8px; margin: 0 4px 3px; } [class^="nav-common"] { display: flex; height: 88px; } .nav-common:nth-child(2) { margin: 3px 0; } .nav-items { /* 属性不冲突 */ flex: 1; display: flex; flex-direction: column; } .nav-items a { flex: 1; text-align: center; line-height: 44px; color: #fff; font-size: 14px; /* 文字阴影 */ text-shadow: 1px 1px rgb(0, 0, 0, .2); } .nav-items a:nth-child(1) { border-bottom: 1px solid #fff; } [class^="nav-common"] .nav-items:nth-child(1) a { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; } .nav-common [class^="icon"] { width: 28px; height: 28px; margin-bottom: 4px; background: url(../images/mainnav.png) 0 -80px no-repeat; background-size: 28px auto; } .nav-common .icon-2 { background-position: 0 -167px; } .nav-common .icon-3 { background-position: 0 -139px; } /* -n+2就是选择前面两个元素 */ .nav-items:nth-child(-n+2) { border-right: 1px solid #fff; } /* 背景颜色线性渐变 */ .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,#34C2A9,#6CD559); } /* 侧导航栏 */ .subnav-entry { display: flex; border-radius: 8px; background-color: #fff; margin: 0 4px; flex-wrap: wrap; padding: 5px; } .subnav-entry li { flex: 20%; } .subnav-entry a { display: flex; flex-direction: column; align-items: center; } .subnav-entry li [class^="subnav-entry-icon"] { width: 28px; height: 28px; margin-top: 4px; background: url(../images/subnav-bg.png) no-repeat; background-size: 28px auto; } .subnav-entry li .subnav-entry-icon-2 { background-position: 2px -30px; } .subnav-entry li .subnav-entry-icon-3 { background-position: 2px -64px; } .subnav-entry li .subnav-entry-icon-4 { background-position: 0 -100px; } .subnav-entry li .subnav-entry-icon-5 { background-position: 0 -134px; } .subnav-entry li .subnav-entry-icon-6 { background-position: 4px -164px; } .subnav-entry li .subnav-entry-icon-7 { background-position: 0 -198px; } .subnav-entry li .subnav-entry-icon-8 { background-position: 0 -234px; } .subnav-entry li .subnav-entry-icon-9 { background-position: 0 -262px; } .subnav-entry li .subnav-entry-icon-10 { background-position: 2px -292px; } .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; /* 缩进量 */ text-indent: -999px; overflow: hidden; } .sales-hd h2::after { position: absolute; top: 8px; left: 20px; content: ""; width: 79px; height: 15px; background: url(../images/hot.png) 0 -20px no-repeat; background-size: 79px auto; } .more { position: absolute; right: 5px; top: 0; background: -webkit-linear-gradient(left,#FF506C,#ff6BC6); border-radius: 15px; padding: 3px 20px 3px 10px; color: #fff; font-size: 13px; } .more::after { content: ""; position: absolute; top: 9px; right: 9px; 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 #eee; } .row a:nth-child(1) { border-right: 1px solid #eee; } .row a img { width: 100%; }
流式布局和flex布局主要针对于宽度布局,rem适配布局可设置高度布局。
rem(root em)是一个相对单位,类似于em,em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如,根元素(html)设置font-size: 12px; 非根元素设置width: 2rem; 则换成px表示就是24px。
媒体查询(Madia Query)是CSS3的新语法。
语法规范:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype查询类型:
将不同终端设备划分成不同的类型,称为媒体类型。
值 | 解释说明 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
scree | 用于电脑屏幕,平板电脑,智能手机等 |
关键字:
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
媒体特性:
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意它们要加小括号包含
值 | 解释说明 |
---|---|
width | 定义输出设备钟页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域的宽度 |
max-width | 定义输出设备中页面最大可见区域的宽度 |
<style> /* 小于540px 页面的背景颜色变为蓝色 */ @media screen and (max-width: 539px) { body { background-color: skyblue; } } /* 540px~970px 页面背景颜色变绿色 */ /* @media screen and (min-width: 540px) and (max-width: 969px) { body{ background-color: rgb(13, 243, 13); } } */ /* 利用css层叠性简写 */ @media screen and (min-width: 540px) { body { background-color: rgb(13, 243, 13); } } /* 大于等于970px 页面背景颜色变粉色 */ @media screen and (min-width: 970px) { body { background-color: pink; } } </style>
注意:为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是建议还是从小到大来写,这样代码更简洁。
rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸。
媒体查询可以根据不同设备宽度来修改样式。
媒体查询+rem 就可以实现不同设备宽度,实现页面元素大小的动态变化。
<!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> <style> * { margin: 0; padding: 0; } @media screen and (min-width:320px) { html { font-size: 50px; } } @media screen and (min-width:640px) { html { font-size: 100px; } } .top { height: 1rem; font-size: 0.5rem; background-color: pink; color: #fff; text-align: center; line-height: 1rem; } </style> </head> <body> <div class="top">购物车</div> </body> </html>
当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets(样式表)
原理:就是直接在link中判断设备的尺寸,然后引用不同的css文件。
语法规范:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"
维护css的弊端
CSS是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
常见的CSS预处理器:Sass、Less、Stylus
文件后缀名:.less
1. Less变量
变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名: 值;
变量命名规范
2. Less编译
本质上,Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的CSS文件。
安装vscode Less插件
Easy LESS插件用来吧less文件编译为css文件。
3. Less嵌套
我们经常用到选择器的嵌套
#header .logo {
width: 300px;
}
Less嵌套写法:
#header {
.logo {
width: 300px;
}
}
如果遇见(交集|伪类|伪元素选择器)
a:hover {
color: red;
}
Less嵌套写法:
a {
&:hover {
color: red;
}
}
4. Less运算
任何数字、颜色或者变量都可以参与运算。就是less提供了加减乘除算术运算。
/* Less里面写 */
@width: 10px + 5;
div {
border: @width solid red;
}
/* 生成的css */
div {
border: 15px solid red;
}
/* Less 还可以这样 */
width: (@width + 5) * 2;
注意:
技术方案:
less + 媒体查询 + rem
设计稿常见尺寸宽度
设备 | 常见宽度 |
---|---|
iPhone 4、5 | 640px |
iphone 6、7、8 | 750px |
Android | 常见320px、360px、375px、384px、400px、414px、500px、720px大部分4.7~5寸的安卓设备为720px |
一般情况下,我们以一套或两套效果图适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果,现在基本以750px为准。
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, user-scalable=no, maximum-scale=1.0, minimum=1.0"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> <title>苏宁</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> <!-- banner部分 --> <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> <!-- nav模块 --> <nav> <a href="#"> <img src="upload/nav1.png" alt=""> <span>苏宁秒杀</span> </a> <a href="#"> <img src="upload/nav2.png" alt=""> <span>苏宁超市</span> </a> <a href="#"> <img src="upload/nav3.png" alt=""> <span>苏宁拼购</span> </a> <a href="#"> <img src="upload/nav4.png" alt=""> <span>手机数码</span> </a> <a href="#"> <img src="upload/nav5.png" alt=""> <span>苏宁家电</span> </a> <a href="#"> <img src="upload/nav6.png" alt=""> <span>免费水果</span> </a> <a href="#"> <img src="upload/nav7.png" alt=""> <span>super会员</span> </a> <a href="#"> <img src="upload/nav8.png" alt=""> <span>签到有礼</span> </a> <a href="#"> <img src="upload/nav9.png" alt=""> <span>领券中心</span> </a> <a href="#"> <img src="upload/nav10.png" alt=""> <span>更多频道</span> </a> </nav> </body> </html>
common.less
// 设置常见的屏幕尺寸,修改里面的html文字大小 // 写在最上面 html { font-size: 50px; } a { text-decoration: none; } // 定义的划分的份数为15 @no: 15; // 320px @media screen and (min-width: 320px) { html{ font-size: (320px / @no); } } // 360px @media screen and (min-width: 360px) { html { font-size: (360px / @no); } } // 375px iphone6,7,8 @media screen and (min-width: 375px) { html { font-size: (375px / @no); } } // 384px @media screen and (min-width: 384px) { html{ font-size: (384px / @no); } } // 400px @media screen and (min-width: 400px) { html{ font-size: (400px / @no); } } // 414px @media screen and (min-width: 414px) { html{ font-size: (414px / @no); } } // 424px @media screen and (min-width: 424px) { html{ font-size: (424px / @no); } } // 480px @media screen and (min-width: 480px) { html{ font-size: (480px / @no); } } // 540px @media screen and (min-width: 540px) { html{ font-size: (540px / @no); } } // 720px @media screen and (min-width: 720px) { html{ font-size: (720px / @no); } } // 750px @media screen and (min-width: 750px) { html{ font-size: (750px / @no); } }
index.less
// 导入common.less文件 @import "common"; body { min-width: 320px; width: 15rem; margin: 0 auto; line-height: 1.5; font-family: Arial, Helvetica; background: #F2F2F2; } // 页面元素rem计算公式:页面元素的px / html 字体大小50 // 搜索框 @baseFont: 50; .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: url(../images/classify.png) no-repeat; background-size: (44rem / @baseFont) (70rem / @baseFont); margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont); } .search { flex: 1; input { outline: none; border: 0; width: 100%; height: (66rem / @baseFont); border-radius: (33rem / @baseFont); background-color: #FFF2CC; margin-top: (12rem / @baseFont); font-size: (25rem / @baseFont); padding-left: (55rem / @baseFont); color: #757575; } } .login { width: (75rem / @baseFont); height: (70rem / @baseFont); margin: (10rem / @baseFont); font-size: (25rem / @baseFont); text-align: center; line-height: (70rem / @baseFont); color: #fff; } } // banner模块 .banner { width: (750rem / @baseFont); height: (368rem / @baseFont); img { width: 100%; height: 100%; } } // 广告模块 .ad { display: flex; a { flex: 1; img { width: 100%; } } } // nav模块 nav { width: (750rem / @baseFont); a { float: left; width: (150rem / @baseFont); height: (140rem / @baseFont); text-align: center; img { display: block; width: (82rem / @baseFont); height: (82rem / @baseFont); margin: (10rem / @baseFont) auto 0; } span { display: block; font-size: (25rem / @baseFont); color: #333; } } }
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, user-scalable=no, maximum-scale=1.0, minimum=1.0"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> <!-- 引入flexible.js文件 --> <script src="js/flexible.js"></script> <title>苏宁</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> <!-- banner模块 --> <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> <!-- nav模块 --> <nav> <a href="#"> <img src="upload/nav1.png" alt=""> <span>苏宁秒杀</span> </a> <a href="#"> <img src="upload/nav2.png" alt=""> <span>苏宁超市</span> </a> <a href="#"> <img src="upload/nav3.png" alt=""> <span>苏宁拼购</span> </a> <a href="#"> <img src="upload/nav4.png" alt=""> <span>手机数码</span> </a> <a href="#"> <img src="upload/nav5.png" alt=""> <span>苏宁家电</span> </a> <a href="#"> <img src="upload/nav6.png" alt=""> <span>免费水果</span> </a> <a href="#"> <img src="upload/nav7.png" alt=""> <span>super会员</span> </a> <a href="#"> <img src="upload/nav8.png" alt=""> <span>签到有礼</span> </a> <a href="#"> <img src="upload/nav9.png" alt=""> <span>领券中心</span> </a> <a href="#"> <img src="upload/nav10.png" alt=""> <span>更多频道</span> </a> </nav> </body> </html>
index.css
body { min-width: 320px; max-width: 750px; /* flexible.js划分为10等份 */ width: 10rem; margin: 0 auto; line-height: 1.5; font-family: Arial, Helvetica; background: #F2F2F2; } a { text-decoration: none; } /* 如果屏幕超过设计稿750px,那么就按照设计稿走,不让我们的页面超过750px */ @media screen and (min-width: 750px) { html { font-size: 75px !important; } } /* cssrem插件默认的html文字大小 cssroot 16px ,这里设置的是75px*/ .search-content { display: flex; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 10rem; height: 1.1733rem; background-color: #FFC001; } .classify { width: .5867rem; height: .9333rem; background: url(../images/classify.png) no-repeat; margin: .1467rem .3333rem .1333rem; background-size: .5867rem .9333rem; } .search { flex: 1; } .search input { outline: none; border: 0; width: 100%; height: .88rem; font-size: .3333rem; background-color: #FFF2CC; margin-top: .1333rem; border-radius: .44rem; color: #757575; padding-left: .7333rem; } .login { width: 1rem; height: .9333rem; margin: .1333rem; color: #fff; text-align: center; line-height: .9333rem; font-size: .3333rem; } .banner { font-size: 0; } .banner img { width: 100%; height: 100%; } .ad { display: flex; } .ad a { flex: 1; } .ad a img { width: 100%; } nav { width: 10rem; } nav a { float: left; width: 2rem; height: 1.8667rem; text-align: center; } nav img { display: block; width: 1.0667rem; height: 1.0933rem; margin: .1333rem auto; } nav span { display: block; font-size: .3333rem; color: #333; }
前提:我们设计稿按照iPhone678来设计,有个盒子是50像素*50像素的,如何使用vw呢?
分析:
注意事项:
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"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="fonts/iconfont.css"> <title>bibi</title> </head> <body> <!-- 头部 --> <header> <div class="top"> <div class="left"> <i class="iconfont Navbar_logo"></i> </div> <div class="right"> <a href="#"> <i class="iconfont ic_search_tab"></i> </a> <a href="#"><img src="./images/login.png" alt=""></a> <a href="#"><img src="./images/download.png" alt=""></a> </div> </div> <div class="bottom"> <div class="tab"> <ul> <li class="active">首页</li> <li>动画</li> <li>番剧</li> <li>前端</li> <li>音乐</li> </ul> </div> <div class="more"> <i class="iconfont general_pulldown_s"></i> </div> </div> </header> <!-- 视频列表 --> <section> <a href="#"> <div class="pic"> <img src="./images/1.webp" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>111.2万</span> </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>13.2万</span> </p> </div> </div> <div class="txt ellipsis-2"> 新赛季蒙恬上分简直无敌,搭配新赛季铭文贼强 </div> </a> <a href="#"> <div class="pic"> <img src="./images/2.webp" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>1211.5万</span> </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>142.2万</span> </p> </div> </div> <div class="txt ellipsis-2"> 《自制动画/鬼灭之刃》耗时两个月!继国缘一对战黑死牟! </div> </a> <a href="#"> <div class="pic"> <img src="./images/3.webp" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>851.8万</span> </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>132.5万</span> </p> </div> </div> <div class="txt ellipsis-2"> 有一整颗章鱼的“章鱼烧”!一口一个太满足了! </div> </a> <a href="#"> <div class="pic"> <img src="./images/4.webp" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>511.2万</span> </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>232.9万</span> </p> </div> </div> <div class="txt ellipsis-2"> 竖屏 | 是夏天的味道吗? | ring ring ring </div> </a> <a href="#"> <div class="pic"> <img src="./images/5.webp" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>2101.2万</span> </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>332.2万</span> </p> </div> </div> <div class="txt ellipsis-2"> 白敬亭:TM你改我歌词是吧?! </div> </a> <a href="#"> <div class="pic"> <img src="./images/6.webp" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>105.2万</span> </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>32.2万</span> </p> </div> </div> <div class="txt ellipsis-2"> Bet On Me </div> </a> <a href="#"> <div class="pic"> <img src="./images/7.webp" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>888.2万</span> </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>135.2万</span> </p> </div> </div> <div class="txt ellipsis-2"> “至今为止 请睁眼看清你的英雄” </div> </a> <a href="#"> <div class="pic"> <img src="./images/8.webp" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>51.2万</span> </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>12.2万</span> </p> </div> </div> <div class="txt ellipsis-2"> 【路辰/双声道/黑化】Crazy In Love </div> </a> <a href="#"> <div class="pic"> <img src="./images/9.webp" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>1111.2万</span> </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>132.2万</span> </p> </div> </div> <div class="txt ellipsis-2"> 花木兰全面教学 </div> </a> <a href="#"> <div class="pic"> <img src="./images/10.webp" alt=""> <div class="count"> <p> <i class="iconfont icon_shipin_bofangshu"></i> <span>11.2万</span> </p> <p> <i class="iconfont icon_shipin_danmushu"></i> <span>1.2万</span> </p> </div> </div> <div class="txt ellipsis-2"> 高 手 总 是 难 以 预 判 !!! </div> </a> </section> <!-- 底部 --> <div class="btn"> <a href="#"> <i class="iconfont Navbar_logo"></i> <span>打开App,看你感兴趣的视频</span> </a> </div> </body> </html>
index.less
// 声明变量 @v_width: 3.75vw; @color: #fb7299; * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0,0,0,0); } body { font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif; } a { color: #333; text-decoration: none; } img { vertical-align: middle; width: 100%; height: 100%; } ul { list-style: none; } .ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } // 约定 iphone6 375px 为基准设备 1vw = 3.75px // 头部 header { position: fixed; top: 0; left: 0; width: 100%; height: (84 / @v_width); background-color: #fff; z-index: 999; // top .top { display: flex; justify-content: space-between; align-items: center; height: (44 / @v_width); padding: 0 (12 / @v_width) 0 (18 / @v_width); .left { i { font-size: (28 / @v_width); color: @color; } } .right { display: flex; i { font-size: (22 / @v_width); color: #ccc } a:nth-child(2) { width: (24 / @v_width); height: (24 / @v_width); margin-left: (24 / @v_width); } a:nth-child(3) { width: (72 / @v_width); height: (24 / @v_width); margin-left: (24 / @v_width); } } } // bottom .bottom { display: flex; height: (40 / @v_width); border-bottom: 1px solid #eee; .tab { flex: 1; height: (39 / @v_width); ul { display: flex; li { line-height: (39 / @v_width); margin: 0 (16 / @v_width); border-bottom: 2px solid transparent; font-size: (14 / @v_width); // &.active相当于.bottom.tab.active &.active { border-bottom-color: @color; } } } } .more { width: (40 / @v_width); height: (40 / @v_width); text-align: center; line-height: (40 / @v_width); i { font-size: (20 / @v_width); color: #ccc; } } } } // 视频列表 section { display: flex; justify-content: space-evenly; flex-wrap: wrap; margin-top: (90 / @v_width); a { width: (172 / @v_width); height: (134 / @v_width); margin-bottom: (10 / @v_width); .pic { position: relative; height: (97 / @v_width); .count { position: absolute; bottom: 0; left: 0; display: flex; justify-content: space-between; width: 100%; padding: (8 / @v_width); background-image: linear-gradient(to top,rgba(0,0,0,0.6),rgba(0,0,0,0)); color: #fff; font-size: (12 / @v_width); i { vertical-align: middle; } } } .txt { margin-top: (6 / @v_width); font-size: (12 / @v_width); color: #333; } } } // 底部 .btn { position: fixed; left: 0; bottom: (20 / @v_width); height: (36 / @v_width); width: 100%; padding: (12 / @v_width); a { display: block; height: (36 / @v_width); background-color: @color; border-radius: (18 / @v_width); color: #fff; font-size: (14 / @v_width); text-align: center; line-height: (36 / @v_width); } }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。