`

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
分享到:
评论

相关推荐

    html5 IOS下拉框样式

    在iOS设备上,HTML5的`&lt;select&gt;`元素默认的样式与Android或桌面浏览器存在显著差异,这常常会给开发者带来挑战。iOS中的下拉框(选择器)具有半透明背景和较窄的边框,其视觉效果可能不符合设计师对整体界面风格的...

    html5手机端动画展开收缩导航菜单特效

    HTML5手机端动画展开收缩导航菜单特效是一种在移动设备上实现动态交互的用户界面设计,它结合了HTML5的新特性,如SVG矢量图形和CSS3动画,为用户提供了一种直观且吸引人的导航体验。这种特效通常应用于移动端网站...

    html5手机版问卷

    HTML5手机版问卷是一种基于Web技术实现的移动端调查工具,它利用HTML5的先进特性,为用户提供了一种在手机或平板电脑上填写问卷的便捷方式。本压缩包包含了一个基本的HTML5问卷模板,该模板设计简洁,易于理解和修改...

    前端手机内页各种样式效果

    在前端开发领域,针对手机端...总的来说,"前端手机内页各种样式效果"这个主题涵盖的是使用HTML5和MUI框架构建移动端内页的实践方法,通过学习和运用这些知识,开发者能够快速创建出功能丰富、用户体验优良的手机页面。

    H5手机站页面,列表页+内容页

    H5,即HTML5,是一种超文本标记语言的最新版本,它提升了网页的互动性和多媒体支持,使其更适合于手机和平板等移动设备。以下是对这些标签和文件名所对应的知识点的详细说明: 1. **HTML5**: HTML5是网页开发的基础...

    jquery微信手机端答题卡特效_html5选择答题效果带图文并茂版式

    总的来说,"jquery微信手机端答题卡特效_html5选择答题效果带图文并茂版式"是一个综合运用了jQuery、HTML5和CSS技术的项目,它创建了一个富有吸引力且易用的微信移动端答题平台,不仅有丰富的图文展示,还具有良好的...

    HTML5+CSS3炫酷的手机登陆界面

    在这个“HTML5+CSS3炫酷的手机登录界面”项目中,我们将探讨如何利用这两种技术来创建一个吸引人的移动端登录界面。 首先,HTML5是超文本标记语言的第五版,它引入了许多新特性,旨在使网页开发更简洁、更具可扩展...

    html5手机页面源码样例

    移动CSS,通常称为手机样式表或Mobile CSS,是针对小屏幕设备优化网页布局的关键。它包括媒体查询(Media Queries),允许开发者根据设备的视口大小、方向或其他特性应用不同的样式。例如,使用`@media screen and ...

    用户协议样式模板后h5页面

    以上是关于“用户协议样式模板后H5页面”的主要知识点,涵盖前端开发的多个方面,包括HTML5、CSS、响应式设计、用户体验、JavaScript交互以及法律和安全考量。理解和掌握这些知识点对于创建高效、易用且合规的用户...

    移动端H5实现搜索框样式源码

    本文将深入探讨如何使用HTML5、CSS3以及JavaScript来实现一个交互式的搜索框样式。我们将从以下几个方面进行讨论: 1. **HTML结构**: 首先,我们需要构建基本的HTML元素来承载搜索框。一个典型的搜索框包括`...

    解决文本编辑器展示样式不一致

    用在线编辑器或许都会存在一个问题,即内容发表后呈现的样式会与编辑时的不一样,原因是编辑器其实是个内嵌的iframe,它里面用的大多是浏览器默认的样式(ckeditor 在其中另外定义了字体以及ul, ol 的缩进值),而...

    HTML5手机端万年历日历代码.zip

    HTML5手机端万年历日历代码是一种基于HTML5技术实现的交互式日历组件,适用于移动设备。这个代码库包含了一个完整的解决方案,允许用户在手机上查看和管理日期,具有良好的可定制性和适应性。下面我们将深入探讨...

    jquery mobile css3手机表单页面布局按钮样式

    为了更好地学习和实践,你可以下载这个文件并查看其中的内容,动手尝试创建和定制自己的手机表单页面布局和按钮样式。 总结来说,jQuery Mobile 和 CSS3 在手机表单页面布局和按钮样式设计中起到了关键作用。jQuery...

    很清爽的html5消息提示框

    首先,HTML5引入了新的结构元素,如`&lt;article&gt;`、`&lt;section&gt;`和`&lt;dialog&gt;`等,这使得我们能够更好地组织网页内容。在这个案例中,我们可以使用`&lt;dialog&gt;`元素来创建一个自定义的消息提示框。`&lt;dialog&gt;`元素是HTML5中...

    6款漂亮的html5手机导航菜单代码

    HTML5手机导航菜单是现代网页设计中的重要组成部分,特别是在移动设备上,它们为用户提供了一种简洁、直观的方式来浏览网站内容。以下是对标题和描述中提到的知识点的详细说明: 1. **HTML5**: HTML5是超文本标记...

    精选手机页面模版源码多达60多款样式

    在移动互联网飞速发展的今天,手机页面设计与开发已经成为网页设计者的重要工作内容。"精选手机页面模版源码多达60多款样式"提供了一套丰富的资源,旨在帮助开发者和设计师快速创建出吸引眼球、功能完备的移动端界面...

    jquery手机端列表分页样式.zip

    5. **响应式设计**:为了适应不同尺寸的手机屏幕,分页样式需要具有良好的响应性,确保在各种设备上都能正常显示和使用。 实现这些功能通常涉及以下技术: - 使用CSS(层叠样式表)来定义分页元素的样式,包括颜色...

    css苹果手机去掉input样式

    在移动端Web开发中,经常会遇到不同设备浏览器对HTML元素渲染效果不一致的问题,特别是对于输入框(`&lt;input&gt;`)的默认样式,苹果手机上的Safari浏览器常常与其他浏览器有所不同。本文将详细介绍如何通过CSS样式来...

    125国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip

    这个压缩包文件“125国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip”包含了丰富的IT知识,主要集中在网站开发的前端领域,特别是关于HTML、CSS以及JavaScript的应用。...

    HTML5紫色宽屏样式手机APP企业网站模板代码下载.zip

    HTML5紫色宽屏样式手机APP企业网站模板代码下载.zip

Global site tag (gtag.js) - Google Analytics