HTML5培训第11节课堂笔记
界面布局
媒体查询：响应式布局
1.@media用法
<style>
@media only screen and(min-width:100px) and (max-width:500px)
{
body{
background-color:blue;
}
}
@media only screen and(min-width:500px)
{
body{
background-color:red;
}
}
</style>
2.在link中使用media属性:
<link rel="stylesheet"href="css/001.css" media="screen and (max-width:500px)"/>
<linkrel="stylesheet" href="css/002.css" media="screenand (min-width:500px)"/>
01. css:
body{
background-color:red;
}
02. css
body{
background-color:blue;
}
3.各大浏览器兼容性,ie的测试
如果针对IE,可以使用条件注释
css条件注释Hack用法详解-<!–[if gte IE6]> <![endif]–>
语法：
<!--[if <keywords>? IE<version>?]>
HTML代码块
<![endif]-->
<keywords>
if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
是否：指定是否IE或IE某个版本。关键字：空
大于：选择大于指定版本的IE版本。关键字：gt（greater than）
大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
小于：选择小于指定版本的IE版本。关键字：lt（less than）
小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
非指定版本：选择除指定版本外的所有IE版本。关键字：!
<version>
目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上
例如：
只有IE6以上，才能看到应用了test类的元素是红色文本。
<!--[if gt IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->
http://www.uedsc.com/css-condition-hack.html
4.成熟响应式布局的框架bootstrap：
http://getbootstrap.com/
5.html 5
http://www.html5plus.org/doc/h5p.html
如果要调用里面的API，必须加上一句：
mui.plusReady(function(){})
6.mui html页面中head应该加
苹果关闭自带菜单栏，安卓不用
<meta name="apple-mobile-web-app-capable"content="yes">
<metaname="apple-mobile-web-app-status-bar-style"content="black">
7.mui manifest.json配置
调试，在hbuilder中自己看调试信息
8.制作引导页面：
从mui官网http://dev.dcloud.net.cn/mui/ui/#slide获取轮播组件进行修改
代码放入下面中
<div class="mui-content"></div>
加入图片
<img src="img/slide01.jpg"/>
<!--具体内容 -->
想要轮播的点，到hello MUI examples去查找，通过审查元素可找到对应部分放入到对应位置
<divclass="mui-slider-indicator">
<divclass="mui-indicator mui-active"></div>
<divclass="mui-indicator"></div>
<divclass="mui-indicator"></div>
<divclass="mui-indicator"></div>
</div>
需要重新改变样式，则找到原来对应的样式，自己在重写覆盖
将选中小圆点变成蓝色
.mui-slider-indicator.mui-active.mui-indicator {
background: blue;
}
自定义mui的组件
如：最后一个页面加入一个按钮，开启应用！
<div class="mui-slider-item">
<!--具体内容 -->
<imgsrc="img/slide04.jpg" />
<divclass="button-area">
<inputtype="button" value="开启应用吧" />
</div>
</div>
因为父级为position：relative，所以，子级可通过absolute定位
.button-area{
position:absolute;
width:100%;
height:30px;
bottom:50px;
margin:0auto;
text-align:center;
}
引导页整体代码：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title></title>
<linkhref="css/mui.min.css" rel="stylesheet" />
<style>
.mui-slider-indicator.mui-active.mui-indicator {
background: blue;
}
.button-area{
position:absolute;
width:100%;
height:30px;
bottom:50px;
margin:0auto;
text-align:center;
}
</style>
</head>
<body>
<divclass="mui-content">
<divclass="mui-slider">
<divclass="mui-slider-group">
<!--第一个内容区容器-->
<divclass="mui-slider-item">
<imgsrc="img/slide01.jpg" />
<!--具体内容 -->
</div>
<!--第二个内容区-->
<divclass="mui-slider-item">
<!--具体内容 -->
<imgsrc="img/slide02.jpg" />
</div>
<divclass="mui-slider-item">
<!--具体内容 -->
<imgsrc="img/slide03.jpg" />
</div>
<divclass="mui-slider-item">
<!--具体内容 -->
<imgsrc="img/slide04.jpg" />
<divclass="button-area">
<inputtype="button" value="开启应用吧" />
</div>
</div>
</div>
<divclass="mui-slider-indicator">
<divclass="mui-indicator mui-active"></div>
<divclass="mui-indicator"></div>
<divclass="mui-indicator"></div>
<divclass="mui-indicator"></div>
</div>
</div>
</div>
<scriptsrc="js/mui.min.js"></script>
<scripttype="text/javascript" charset="UTF-8">
mui.init();
</script>
</body>
</html>
扫一扫
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
