H5页面基础元素
H5页面结构元素示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>h5结构</title>
</head>
<body>
<header>
<h1>网页标题</h1>
<h2>次级标题</h2>
<h4>提示信息</h4>
</header>
<div id="container">
<nav>
<h3>导航</h3>
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</nav>
<section>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章内容。。。</p>
<footer>
<h2>文章注脚</h2>
</footer>
</article>
</section>
<aside>
<h3>相关内容</h3>
<p>相关辅助信息或者服务...</p>
</aside>
<footer>
<h2>页脚</h2>
</footer>
</div>
</body>
</html>
style.css
```
body {
background-color: #CCCCCC;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin: 0px auto;
max-width: 900px;
border: solid;
border-color: #FFFFFF;
}
header {
background-color: #F47D31;
display: block;
color: #FFFFFF;
text-align: center;
}
header h2 {
margin: 0px;
color: #FFFFFF;
}
h1 {
font-size: 72px;
margin: 0px;
}
h2 {
font-size: 24px;
margin: 0px;
text-align: center;
color: #F47D31;
}
h3 {
font-size: 18px;
margin: 0px;
text-align: center;
color: #F47D31;
}
h4 {
color: #F47D31;
background-color: #fff;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-45deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-45deg);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align: center;
}
nav {
display: block;
width: 25%;
float: left;
}
nav a:link,
nav a:visited {
display: block;
border-bottom: 3px solid #fff;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
nav a:hover {
color: white;
background-color: #F47D31;
}
nav h3 {
margin: 15px;
color: white;
}
container {
background-color: #888;
}
section {
display: block;
width: 50%;
float: left;
}
article {
background-color: #eee;
display: block;
margin: 10px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-10deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-10deg);
}
article header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
article footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
article h1 {
font-size: 18px;
}
aside {
display: block;
width: 25%;
float: left;
}
aside h3 {
margin: 15px;
color: white;
}
aside p {
margin: 15px;
color: white;
font-weight: bold;
font-style: italic;
}
footer {
clear: both;
display: block;
background-color: #F47D31;
color: #FFFFFF;
text-align: center;
padding: 15px;
}
footer h2 {
font-size: 14px;
color: white;
}
/* links */
a {
color: #F47D31;
}
a:hover {
text-decoration: underline;
}

H5页面基础元素的更多相关文章
- H5页面 绝对定位元素被 软键盘弹出时顶起
H5页面 绝对定位元素被 软键盘弹出时顶起 在h5页面开发的过程中,我们可能会遇到下面这个问题,当页面中有输入框的时候,系统自带的软盘会把按钮挤出原来的位置.那么我们该怎么解决呢?下面列出一下的方法: ...
- APP端有原生态的控件,但嵌入了H5页面,怎么定位到H5页面的元素
appium 通常有很多种定位元素方法,例如xpath,driver.find_element_by_accessibility_id等,安卓sdk自带的uiautomatorviewer但是对于H5 ...
- 本地调试H5页面
摘要 详细讲述微信H5页面调试(安装在安卓或iOS手机上的),钉钉内H5页面的调试,QQ.微博以及各浏览器上H5页面的调试方法 背景 大学毕业快要一年了,用leader的话说我也是有一年开发经验的前端 ...
- Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理
本文已经不维护,新地址: http://www.cnblogs.com/dailc/p/8097598.html 说明 Hybrid模式原生和H5交互原理 目录 前言 参考来源 前置技术要求 楔子 A ...
- Appium Inspector定位Webview/H5页面元素
目录 操作步骤 Python操作该混合App代码 Appium在操作混合App或Android App的H5页面时, 常常需要定位H5页面中的元素, 传统方式是 翻墙 + 使用Chrome://ins ...
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
- H5页面适配所有iPhone和安卓机型的六个技巧
http://www.th7.cn/web/html-css/201605/166006.shtml http://www.th7.cn/web/html-css/201601/153127.shtm ...
- 关于H5页面在iPhoneX适配
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
随机推荐
- Django框架(十六)-- 中间件、CSRF跨站请求伪造
一.什么是中间件 中间件是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出 二.中间件的作用 如果你想修改请求,例如被传送到view ...
- odoo10学习笔记十七:controller
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189391.html 一:controller简述 odoo里面的controller相似于springM ...
- 3.1 Spark概述
一.Spark简介 1.Spark的特点 特点1:运行速度快(内存计算,循环数据流.有向无环图设计机制) 把所有针对数据集的操作转换成一张有向无环图,整个执行引擎调度都是基于这个有向无环图,对这个有向 ...
- Python运维中20个常用的库和模块
1.psutil是一个跨平台库(https://github.com/giampaolo/psutil) 能够实现获取系统运行的进程和系统利用率(内存,CPU,磁盘,网络等),主要用于系统监控,分析和 ...
- JDOJ 1958 机器分配
JDOJ 1958: 机器分配 Description 某总公司拥有高效生产设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为总公司提供一定的盈利.问:如何分配这M台设备才能使国家得到 ...
- flink源码学习
传送门: https://www.jianshu.com/c/c9b356caf8a6
- Shell变量——用户变量
1.Shell变量: (1)命令规则:由数字.字母.下划线组成,首字符不能为数字. (2)变量的默认类型都是字符串型,对于数值类型,则必须进行指定. (3)大小写敏感的,例如:ASD.asd.Asd是 ...
- 8.Vue的slot
1.什么是slot 在 Vue.js 中我们使用 <slot> 元素作为承载分发内容的出口,作者称其为 插槽,可以应用在组合组件的场景中 2.使用 建立组件预留插槽 定义填充入插槽 ...
- 爬虫之获取UA模块
from fake_useragent import UserAgent ua = UserAgent(verify_ssl=False)res = ua.randomprint(res) 注: 实列 ...
- Linux的开机启动流程
Linux的开机启动流程 1.开机BIOS自检 --> 检查CPU,硬盘等硬件信息 2.MBR[Major ...