移动WEB布局使用less语法之header布局
2016-10-30 13:16
204 查看
从今天开始小编会出一系列的移动web的常见布局类型的布局这里我们先来的是对于常见头部布局以及头部的一些细节问题的解决,首先先来一张图来解析一下我们要布局的头部,接下来要分布开始我们的讲解啦!
1.视口属性的设置
我们知道如果要想移动设备自动识别本机设备的一些参数我们需要设置一个视口属性,方便我们后来的一些参数的设置首先来介绍这个视口属性
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
这里有几个参数width的值device-width获取的就是设备的宽度
2.设置它的容器宽度
专业一下我们必须要设置的是它的最大的容器方便以后设置一些属性,l_container
width: 100%;
/*这里设置最小宽度*/
max-width: 640px;
/*这里是为了固定*/
margin: 0 auto;
3.开始头部
首先我们可以使用css的语义标签header来进行布局
首先开始的是html的布局
<span style="white-space:pre"> </span><a href="#" class="h_reback"></a>
<input type="text">
<a href="#" class="h_list"></a> 接下来的是css,但是我们使用的是less的语法,以便于查错和一个属性的层次感
header{
height: 44px;
border-bottom: 1px solid #ccc;
background-image: url("../images/header-bg.png");
background-size: 1px 44px;
background-repeat: repeat-x;
position: relative;
padding: 0 50px;
line-height: 45px;
.h_reback{
height: 44px;
width: 40px;
display: block;
position: absolute;
background-image: url(../images/sprites.png);
background-position: -20px 0;
background-size: 200px 200px;
padding: 10px 12px;
我们这里的重点就是对于背景图片的设置这里将a标签改为一个块级元素的标签然后对这个标签设置宽高后在设置padding在将切割原点修改内内容区域中,原因就是为了将点击的区域放大而又不影响图标的位置效果!
1.视口属性的设置
我们知道如果要想移动设备自动识别本机设备的一些参数我们需要设置一个视口属性,方便我们后来的一些参数的设置首先来介绍这个视口属性
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
这里有几个参数width的值device-width获取的就是设备的宽度
2.设置它的容器宽度
专业一下我们必须要设置的是它的最大的容器方便以后设置一些属性,l_container
width: 100%;
/*这里设置最小宽度*/
max-width: 640px;
/*这里是为了固定*/
margin: 0 auto;
3.开始头部
首先我们可以使用css的语义标签header来进行布局
首先开始的是html的布局
<span style="white-space:pre"> </span><a href="#" class="h_reback"></a>
<input type="text">
<a href="#" class="h_list"></a> 接下来的是css,但是我们使用的是less的语法,以便于查错和一个属性的层次感
header{
height: 44px;
border-bottom: 1px solid #ccc;
background-image: url("../images/header-bg.png");
background-size: 1px 44px;
background-repeat: repeat-x;
position: relative;
padding: 0 50px;
line-height: 45px;
.h_reback{
height: 44px;
width: 40px;
display: block;
position: absolute;
background-image: url(../images/sprites.png);
background-position: -20px 0;
background-size: 200px 200px;
padding: 10px 12px;
/*这里的重点就是使用背景原点和背景切割来进行背景的设置*/ background-origin: content-box; background-clip: content-box; top:0px; left: 0px; } .h_list{ height: 44px; width: 40px; display: block; position: absolute; background-image: url(../images/sprites.png); background-position: -60px 0; background-size: 200px 200px; padding: 10px 12px; background-origin: content-box; background-clip: content-box; top:0px; right: 0px; } input{ width: 100%; height: 30px; border-radius: 5px; } }
我们这里的重点就是对于背景图片的设置这里将a标签改为一个块级元素的标签然后对这个标签设置宽高后在设置padding在将切割原点修改内内容区域中,原因就是为了将点击的区域放大而又不影响图标的位置效果!
相关文章推荐
- 移动WEB布局使用less语法之视网膜屏幕如何来解决图片像素问题
- CSS中flexbox的使用技巧及相关的移动web布局优化
- 使用 ASP.NET 2.0 进行移动 Web 开发
- 使用 Eclipse Ganymede 进行桌面、Web 和移动设备开发
- 使用JxLib定制灵活网页布局Flexible weblayout
- Php header()函数语法及使用代码
- 移动设备web自适应布局
- 使用Sencha Touch开发移动Web应用平台
- 使用 ASP.NET 语法创建 Web 服务器控件模板
- 使用meta标签的【viewport】控制在移动设备上的布局
- Cookie工作基础原理、数据如何移动、Web站点怎么使用Cookies
- 自己开发的web快速开发平台教程(1),布局(Layout)的使用教程
- [引]ASP.NET 移动网页 与 如何:使用仿真程序和浏览器在部署移动 Web 应用程序之前对其进行测试
- 使用Sencha Designer来快速开发web用户界面 -- 页面布局
- Web移动应用的未来:使用HTML5和CSS
- 【转】使用Flex 4.5 SDK和Flash Builder 4.5构建Web和移动参考应用程序
- 使用 Eclipse Ganymede 进行桌面、Web 和移动设备开发
- 使用visual studio创建web移动程序
- Web移动应用的未来:使用HTML5,CSS和JavaScript
- 免费使用的PDF格式web/移动/平板设计草图模板 - INTERFACE SKETCH