`

HTML5 手机内容样式

 
阅读更多 
<!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 alt="" 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>

 

效果图：

 

 

  • 大小: 11.5 KB
2
顶
2
踩
分享到：
| JS 页面下拉100像素出现悬浮窗口
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics