想稍微写一点关于h5页面的总结,因为时间比较仓促,并没有适配所有的机型,但是对于页面的布局以及如何写页面还是感觉更了解了一点。
1: 如何是整个页面使用背景图铺满?
<doctype html>
<head>
<style>
.main{
width: 100%;
height: 100%;
margin:0 auto;
background:url(../images/bg.png) no-repeat;
background-size:cover;
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
2: 对于页面中所有的宽高,使用百分比,不要直接写死。同时,没有使用rem,使用的是百分比。
3: 其中让我感觉比较困难的一个点,单选按钮的样式的改变:
代码如下:
<doctype html>
<head>
<style>
.pay_list_c1 {
margin-left: 10%;
cursor: pointer;
text-align: center;
background-image: url(../images/单选框2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
.radioclass {
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
width: 2rem;
}
.on {
background-image: url(../images/答题页对勾1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
</style>
</head>
<body>
<div class="center-problem-choice">
<div class="problemA">
<!-- <label>满意</label><input class="radioclass" type="radio" name="answer" value="answer" onclick="location='p2.html'"> -->
<div class="div-span"></div>
<label>满意</label>
<span id = "radio1" class="pay_list_c1">
<input type="radio" name="paylist" value="1" class="radioclass" onclick="toggleClassTest1('p2.html')">
</span>
</div>
<div class="problemB">
<div class="div-span"></div>
<label>不满意</label>
<span id = "radio2" class="pay_list_c1">
<input type="radio" name="paylist" value="2" class="radioclass" onclick="toggleClassTest2('p3.html')">
</span>
<!-- <label>不满意</label><input type="radio" name="answer" value="answer" onclick="toggleClassTest2('p3.html')" class="radioclass"> -->
</div>
</div>
<script type="text/javascript">
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}
function toggleClass(obj,cls, url){
if(hasClass(obj,cls)){
removeClass(obj, cls);
}else{
addClass(obj, cls);
window.location.href = url;
}
}
function toggleClassTest1(url){
var obj = document. getElementById('radio1');
// var that = this;
toggleClass(obj,"on",url);
}
function toggleClassTest2(url){
var obj = document. getElementById('radio2');
// var that = this;
toggleClass(obj,"on",url);
}
</script>
</body>
</html>