首页 > 移动平台 > 详细

HTML5 手机内容样式

时间:2015-11-14 02:10:57      阅读:250      评论:0      收藏:0      [点我收藏+]
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" />
<title>手机内容样式</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body{ margin:0; padding:50px 0 0 0; font:normal 12px/20px ‘微软雅黑‘; text-align:center; background:#f7f7f7; color:#5b5b5b}
p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form,div,input { margin:0; padding:0; list-style:none;-webkit-text-size-adjust:none;}
.maintext {  text-align:left; font:normal 15px/22px ‘微软雅黑‘; color:#444;border-left: 1px solid rgba(119, 109, 12, 0.2);margin: 15px auto 0; width:300px;}
.maintext p{ color:#444;padding-left: 20px; margin:15px auto;}
.maintext p.wzswt { line-height: 18px; text-align: center;}
.maintext p.wzswt img { margin: -5px 0 0 0; padding: 0;}
.maintext p.wzswt a{color: #0066cc;}
.maintext h3{color: #222;font-size: 16px;line-height: 22px;padding-left: 20px;position: relative; margin:15px 0;}
.maintext h3 a{ float:right; margin-right:15px; color:#222;}
.maintext h3 div{background: #91d488 none repeat scroll 0 0;border-radius: 10px;display: block;height: 20px;left: -11px;position: absolute;top: 0;width: 20px;}
.maintext h3 div span {background: #34ab23 none repeat scroll 0 0;border: 3px solid #fff;border-radius: 8px;display: block;height: 10px;margin: 2px auto 0;width: 10px;}
.maintext img{ max-width:260px; margin:auto;}
.curdh{}
.curdh .prenext{ color:#000;}
.curdh .prenext a{ color:#06c; font-weight:bold;}
</style>
</head>
<body>
<div class="maintext">
    <h3>段落标题<div><span>&nbsp;</span></div></h3>
    <p>阅谁问君诵,水落清清浮。阅谁问君诵,水落清清浮。阅谁问君诵,水落清清浮。</p>
    <p class="wzswt"><img src="images/jiantou.gif" border="0" /><a href="/zixun/"><strong>推荐购买</strong></a><img  src="images/jiantou.gif" border="0" height="15" width="26" /></p>
    <h3>段落标题<div><span>&nbsp;</span></div></h3>
    <p>阅谁问君诵,水落清清浮。阅谁问君诵,水落清清浮。阅谁问君诵,水落清清浮。</p>
    <div class="curdh">
        <p class="prenext">上一篇:<a href=‘###‘>上一篇</a> </p>
        <p class="prenext">下一篇:<a href=‘###‘>下一篇</a> </p>
    </div>
    <h3>猜你喜欢<div><span>&nbsp;</span></div></h3>
</div>
</body>
</html>

?

效果图:
bubuko.com,布布扣
?

?

HTML5 手机内容样式

原文:http://onestopweb.iteye.com/blog/2256612

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!