61,112
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
风中的少年 2015-10-08
- 打赏
- 举报
关于布局，您还是使用bootstrap吧。。。。。
q81999008 2015-10-05
- 打赏
- 举报
截个效果图吧 分别在手机端和电脑端，
情诗未必惆怅 2015-10-05
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta name="MobileOptimized" content="240">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Cache-Control" content="no-cache">
<meta content="MSHTML 6.00.2900.3527" name="GENERATOR">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>痔疮专题</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="style/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="style/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="style/jquery.touchSlider.js"></script>
<script src="style/top.js"></script>
<script type="text/javascript" src="style/index.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*$(".main_visual").hover(function(){
$("#btn_prev,#btn_next").fadeIn()
},function(){
$("#btn_prev,#btn_next").fadeOut()
});
$dragBln = false;*/
$(".main_image").touchSlider({
flexible : true,
speed : 200,
btn_prev : $("#btn_prev"),
btn_next : $("#btn_next"),
paging : $(".flicking_con a"),
counter : function (e){
$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
}
});
$(".main_image").bind("mousedown", function() {
$dragBln = false;
});
$(".main_image").bind("dragstart", function() {
$dragBln = true;
});
$(".main_image a").click(function(){
if($dragBln) {
return false;
}
});
timer = setInterval(function(){
$("#btn_next").click();
}, 5000);
$(".main_visual").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
$("#btn_next").click();
},5000);
});
$(".main_image").bind("touchstart",function(){
clearInterval(timer);
}).bind("touchend", function(){
timer = setInterval(function(){
$("#btn_next").click();
}, 5000);
});
});
var div = document.getElementById("alpha");
var mask = document.getElementById("alpha");
div.onmouseover = function()
{
mask.style.opacity = "0.5";
mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)"
}
div.onmouseout = function()
{
mask.style.opacity = "0";
mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)"
}
</script>
<link href="style/uecms.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wap">
<!--头部-->
<div class="top" style=" padding:4px 0 4px; height:58px;left:30px;">
<div style="margin-left:23px;">
<img src="images/logo_a.jpg" />
</div>
<div style="margin-top:2px;">
<img src="images/nav_background.jpg" />
</div>
<div style="text-align:center; position:relative;top:-35px;left:22px; ">
<ul style=" color:#FFFFFF;">
<li>首页</li>
<li>简介</li>
<li>医生</li>
<li>技术</li>
<li>路线</li>
</ul>
</div>
</div>
<div id="banner">
<img src="images/banner.jpg" />
<div style="position:relative;top: -87px;left: 30px;">
<ul>
<li class="li1">首页></li>
<li class="li1" style="position:relative;right:30px;">微创外科></li>
<li class="li1" style="position:relative;right:34px;">痔疮专题</li>
</ul>
</div>
</div>
<div id="banner1">
<img src="images/banner1.jpg" />
<p class="alpha" style="margin-left: 87px;margin-top: -76px;">
<img src="images/zctp.jpg" width="223" height="56"/>
</p>
</div>
<div id="banner2">
<img src="images/banner2.jpg" />
<p style="position: relative;top:-33px;left:178px;color:#0061ae; font-size:16px;">自己是否得了痔疮?</p>
</div>
<div id="banner3">
<img src="images/banner3.jpg" />
<p style="position: relative;top:-33px;left:164px;color:#fe0000; font-size:16px;">自己可能是那种原因?</p>
</div>
<div id="banner4">
<img src="images/banner4.jpg" />
<p style="position: relative;top:-33px;left:164px;color:#fe0000; font-size:16px;">得了痔疮怎么办才好?</p>
</div>
<div id="banner5">
<img src="images/banner5.jpg" />
<a onclick="openZoosUrl();LR_HideInvite();;return false;" href="javascript:void(0)"><p style="position: relative;top:-33px;left:115px;color:#fe0000; font-size:16px;">了解奥林现代无痛微创技术!</p></a>
</div>
<div id="banner6">
<img src="images/banner6.jpg" />
</div>
<div class="footer">
<img src="images/LASA.jpg" />
<img src="images/ybsz.jpg" />
<img src="images/js.jpg" />
<img src="images/YB.jpg" />
<img src="images/wxts.jpg" />
</div>
<div class="bottom">
<img src="images/wyzxzx.jpg"/>
<img src="images/wyyygh.jpg" style="right:123px;position:relative;top:39px;"/>
<img src="images/tell.jpg" style=" position:relative;left:120px;top:-38px;" />
<img src="images/footer.jpg" style="margin-top:-30px;" />
</div>
</div>
</body>
</html>
这是CSS
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,pre,form,input,button{margin:0 auto; padding:0;font-family: inherit;font-style: inherit; width:100%; overflow-x:hidden;}
.top{ width:320px; height:58px; background:#0061ae; margin:0 auto}
#wap {
width: 320px;
margin: 0 auto;
background-color: #FFF;
overflow: hidden;
}
q81999008 2015-10-05
- 打赏
- 举报
代码 贴出来看看。
