一个html5页面的思考

最新推荐文章于 2023-07-12 16:00:35 发布
最新推荐文章于 2023-07-12 16:00:35 发布
阅读量841 收藏 1
点赞数
分类专栏： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuawanxiao/article/details/45461669
版权

<!DOCTYPE >

<HTML>

<HEAD>

<META charset="utf-8">
<META name="description" content="微单品">
<META name="keywords" content="微单品"><!-- uc强制竖屏 -->
<META name="screen-orientation" content="portrait"><!-- QQ强制竖屏 -->
<META name="x5-orientation" content="portrait"><!-- UC强制全屏 -->
<META name="full-screen" content="yes"><!-- QQ强制全屏 -->
<META name="x5-fullscreen" content="true"><!-- UC应用模式 -->
<META name="browsermode" content="application"><!-- QQ应用模式 -->
<META name="x5-page-mode" content="app"><!-- windows phone 点击无高光 -->

<META name="msapplication-tap-highlight" content="no"><!-- 适应移动端end -->


<META name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
<META name="format-detection" content="telephone=no,email=no,adress=no"><!--拨打电话邮箱和地址禁止--><TITLE>微单品</TITLE><LINK 
href="微单品_files/haodanpin.css" rel="stylesheet" type="text/css">
<SCRIPT src="微单品_files/jquery-1.7.2.min.js" type="text/javascript"></SCRIPT>


<META name="GENERATOR" content="MSHTML 11.00.9600.17728"></HEAD>
<BODY><HEADER></HEADER>
<DIV class="contaner">
<P class="img-box"><IMG style="display: inline-block;" src="微单品_files/logo_haodanpin_1024.png"></P>
<DIV class="main-msg">
<FORM name="form" action="demo_form.php" method="get" autocomplete="on">
<P class="public"><!-- <input type="text" value="" placeholder="版本1.0" autofocus="autofocus" id="pub"  > --><SPAN>版本1.0</SPAN></P>
<DIV class="line"></DIV><!-- <div class="ygw"></div> -->
<DIV class="nw">
<DIV 
class="pable"><LABEL>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</LABEL><!-- <input value="" type="email" placeholder="moblie@99114.com"autofocus="autofocus" id="email"> --><SPAN>mobile@99114.com</SPAN></DIV>
<DIV class="pable"><LABEL>官方&nbsp;QQ群:</LABEL><!-- <input  type="text" value="" placeholder="339118955"autofocus="autofocus" id="qq"> --><SPAN>339118955</SPAN></DIV>
<DIV class="pable"><LABEL>官方微信号:</LABEL><!-- <input  type="text" value="" placeholder="wxbongv"autofocus="autofocus" id="wx"> --><SPAN>wxbongv</SPAN></DIV></DIV><!-- <div class="sub">提交</div> --><INPUT name="__hash__" type="hidden" value="4ee18551d7b633b89f21924988ed7444_d3ac8d751f634eb10fe03aef3230eece"></FORM></DIV>
<DIV class="tip-box">
<DIV class="tip"></DIV></DIV></DIV><FOOTER class="footer">
<P>本产品解释权由帮微所有</P>
<P>www.bongv.com</P></FOOTER>
<SCRIPT type="text/javascript">$(document).ready(function(){
//提交验证
//1、邮箱验证》》》
//2、qq号码验证
//3、官方微信号验证
//4、好单品版本号验证
/*
var sub=$(".sub");
sub.on("click",function(){
var pub=$("#pub");
var pubTest=$.trim(pub.val());
var email=$("#email");
var textEmail=$.trim(email.val());
  var emailTest= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
  var qq=$("#qq");
  var textQQ=$.trim(qq.val());
  var qqTest=/^[1-9]\d{4,8}$/ ;//5-10位数字
  var wx=$("#wx");
  var textWx=$.trim(wx.val());
  var tipArr=[
"版本内容不为空！",
"邮箱不能为空！",
"邮箱格式不对！",
"qq不能为空！",
"qq格式错误！",
"微信号不能为空！"
  ];


if(!pubTest){
//alert("版本内容不为空");
tip(tipArr[0]);
pub.focus();
return false;
}
if(!textEmail){
//alert("邮箱不能为空！！");
tip(tipArr[1]);
email.focus();
return false;
}else if(!emailTest.test(textEmail)){
  //alert("邮箱格式不对！");
  tip(tipArr[2]);
  email.focus();
  return false;
  }
  if(!textQQ){
  //alert("qq不能为空");
  tip(tipArr[3]);
  qq.focus();
  return false;
  }else if(!qqTest.test(textQQ)){
  //alert("qq格式错误");
  tip(tipArr[4]);
  qq.focus();
  return false;
  }
  if(!textWx){
  //alert("微信号不能为空！");
  tip(tipArr[5]);
  wx.focus();
  return false;
  }
  function tip(msg){
  var box=$(".tip-box").show();
  box.find(".tip").html(msg);
  setTimeout(function(){
  box.hide();
  box.find(".tip").html("oUo");
  },1000);


  }
})*/
$('body').on('touchmove', function (event) {
    event.preventDefault();
});
 })
</SCRIPT>

</BODY></HTML>




css>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

body {
margin: 0px; padding: 0px;
}
div {
margin: 0px; padding: 0px;
}
dl {
margin: 0px; padding: 0px;
}
dt {
margin: 0px; padding: 0px;
}
dd {
margin: 0px; padding: 0px;
}
ul {
margin: 0px; padding: 0px;
}
ol {
margin: 0px; padding: 0px;
}
li {
margin: 0px; padding: 0px;
}
h1 {
margin: 0px; padding: 0px;
}
h2 {
margin: 0px; padding: 0px;
}
h3 {
margin: 0px; padding: 0px;
}
h4 {
margin: 0px; padding: 0px;
}
h5 {
margin: 0px; padding: 0px;
}
h6 {
margin: 0px; padding: 0px;
}
pre {
margin: 0px; padding: 0px;
}
code {
margin: 0px; padding: 0px;
}
form {
margin: 0px; padding: 0px;
}
fieldset {
margin: 0px; padding: 0px;
}
legend {
margin: 0px; padding: 0px;
}
input {
margin: 0px; padding: 0px;
}
textarea {
margin: 0px; padding: 0px;
}
p {
margin: 0px; padding: 0px;
}
blockquote {
margin: 0px; padding: 0px;
}
th {
margin: 0px; padding: 0px;
}
td {
margin: 0px; padding: 0px;
}
table {
border-collapse: collapse; border-spacing: 0;
}
fieldset {
border: 0px currentColor; border-image: none;
}
img {
border: 0px currentColor; border-image: none;
}
address {
font-style: normal; font-weight: normal;
}
caption {
font-style: normal; font-weight: normal;
}
cite {
font-style: normal; font-weight: normal;
}
code {
font-style: normal; font-weight: normal;
}
dfn {
font-style: normal; font-weight: normal;
}
em {
font-style: normal; font-weight: normal;
}
strong {
font-style: normal; font-weight: normal;
}
th {
font-style: normal; font-weight: normal;
}
var {
font-style: normal; font-weight: normal;
}
ol {
list-style: none;
}
ul {
list-style: none;
}
caption {
text-align: left;
}
th {
text-align: left;
}
h1 {
font-size: 100%; font-weight: normal;
}
h2 {
font-size: 100%; font-weight: normal;
}
h3 {
font-size: 100%; font-weight: normal;
}
h4 {
font-size: 100%; font-weight: normal;
}
h5 {
font-size: 100%; font-weight: normal;
}
h6 {
font-size: 100%; font-weight: normal;
}
q::before {
content: "";
}
q::after {
content: "";
}
abbr {
border: 0px currentColor; border-image: none; font-variant: normal;
}
acronym {
border: 0px currentColor; border-image: none; font-variant: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input {
font-family: inherit; font-size: inherit; font-weight: inherit;
}
textarea {
font-family: inherit; font-size: inherit; font-weight: inherit;
}
select {
font-family: inherit; font-size: inherit; font-weight: inherit;
}
legend {
color: rgb(0, 0, 0);
}
.clear {
height: 0px; line-height: 0; overflow: hidden; clear: both; font-size: 0px;
}
.clearfix::after {
height: 0px; clear: both; display: block; visibility: hidden; content: ".";
}
* html .clearfix {
-ms-zoom: 1;
}
*:first-child + html .clearfix {
-ms-zoom: 1;
}
img {
display: block;
}
body {
color: rgb(0, 0, 0); font-family: "微软雅黑","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif; font-size: 100%; -ms-overflow-y: hidden; min-width: 320px;
}
input {
font: 13.33px/normal "微软雅黑"; font-size-adjust: none; font-stretch: normal;
}
.contaner {
margin: 0px auto; text-align: center; font-size: 14px; position: relative;
}
.img-box {
margin: 10% auto; text-align: center;
}
.img-box img {
height: 100%; display: inline-block; max-width: 100%;
}
.line {
background: url("./images/bg.png") repeat-x rgb(190, 190, 190); margin: 0px auto; border: currentColor; border-image: none; width: 80%; height: 1px; text-align: center;
}
.nw {
margin-top: 20px; margin-bottom: 20px;
}
.footer {
margin: 0px auto; width: 100%; text-align: center; bottom: 1%; color: rgb(81, 78, 78); font-size: 12px; position: absolute;
}
.public {
margin: 2% auto;
}
.ygw {
margin: 2% auto;
}
.pable {
width: 300px; height: 34px; text-align: center; line-height: 34px; display: inline-block;
}
.public input {
padding: 6px; border: currentColor; border-image: none; text-align: center;
}
.pable label {
padding: 6px; width: 78px; display: inline-block;
}
.pable span {
padding: 6px; width: 136px; text-align: left; color: rgb(0, 0, 0); text-decoration: none; display: inline-block;
}
.pable input {
padding: 6px; border: currentColor; border-image: none;
}
@media screen and (max-width:992px) and (min-width:769px)
{
.img-box {
width: 200px; height: 200px;
}
}
@media screen and (max-width:768px) and (min-width:641px)
{
.img-box {
width: 180px; height: 180px;
}
}
@media screen and (max-width:640px) and (min-width:577px)
{
.img-box {
width: 160px; height: 160px;
}
}
@media screen and (max-width:576px) and (min-width:481px)
{
.img-box {
width: 140px; height: 140px;
}
}
@media screen and (max-width:480px) and (min-width:321px)
{
.img-box {
width: 120px; height: 120px;
}
}
@media screen and (max-width:320px) and (min-width:300px)
{
.img-box {
width: 100px; height: 100px;
}
}
.sub {
background: rgb(98, 207, 92); margin: 0px auto; border-radius: 4px; width: 160px; height: 44px; text-align: center; color: rgb(255, 255, 255); line-height: 44px; cursor: pointer;
}
.sub:link {
background: rgb(6, 190, 4); border-radius: 4px;
}
.sub:visited {
background: rgb(6, 190, 4); border-radius: 4px;
}
.sub:hover {
background: rgb(6, 190, 4); border-radius: 4px;
}
.sub:active {
background: rgb(6, 190, 4); border-radius: 4px;
}
.tip-box {
background: rgba(0, 0, 0, 0.4); border-radius: 4px; left: 50%; top: 45%; width: 180px; height: 44px; text-align: center; color: rgb(255, 255, 255); line-height: 44px; font-size: 14px; margin-left: -90px; display: none; position: fixed;
}


主要的想法是：

一、

iphone上9位数字变成可打电话的电话号码》》》修改方法：

<META name="format-detection" content="telephone=no,email=no,adress=no"><!--拨打电话邮箱和地址禁止-->

二、页面点击可放大禁用：

<META name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">

三、css3横屏与竖屏：

/*横竖屏判断*/


@media all and (orientation : landscape) {  /*竖着*/
                    /*body {   
                        background-color: #ff0000;   
                    }  */
 }   
@media all and (orientation : portrait){  /*横着*/
                   /* body {  
                        background-color: #00ff00;  
                    }  
*/
}

四、css3media属性判断屏幕的大小修改图片的大小


@media screen and (max-width:992px) and (min-width:769px)
{
.img-box {
width: 200px; height: 200px;
}
}
@media screen and (max-width:768px) and (min-width:641px)
{
.img-box {
width: 180px; height: 180px;
}
}
@media screen and (max-width:640px) and (min-width:577px)
{
.img-box {
width: 160px; height: 160px;
}
}
@media screen and (max-width:576px) and (min-width:481px)
{
.img-box {
width: 140px; height: 140px;
}
}
@media screen and (max-width:480px) and (min-width:321px)
{
.img-box {
width: 120px; height: 120px;
}
}
@media screen and (max-width:320px) and (min-width:300px)
{
.img-box {
width: 100px; height: 100px;
}
}




澄清寰宇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
如何用html5做个人中心,个人中心页面从思考到设计全过程
weixin_35070925的博客
06-01 4868
原标题：个人中心页面从思考到设计全过程最近刚做完一个项目，我发现我的设计效率相比之前竟然提升了30%以上，在以前做界面时总是会纠结采用什么样式，什么布局。而现在在看了原型之后就大概知道我要怎么做了，没有了以前做页面时的纠结，效率自然提升了。我想着主要是因为平时长期的分析总结的结果，我能够很明确的知道什么时候该用什么交互方式，什么时候该用什么样式。因此今天想拿“个人中心页面从思考到设计全过程”和大家...
html5什么是动态页面,举例说明什么是动态网站、静态网站
weixin_35473090的博客
06-04 2772
记得有一次和一朋友散步，他问到什么是动态网页、什么是静态网页、动态网页与静态网页有什么区别。当时我的回答似乎并没有让他真的明白到底什么是动态、什么是静态，所以今天想在这篇文章中详细的举例说明什么是动态网站、什么是晶体网站。都知道网站是由一个个网页组成的，所以动态(静态)网站与动态(静态)网页在本文中就不特别区别了，表达的意思是相似的。(1)动态网站与静态网站的概念及区别动态网站是指通过网页脚本语言...
一个html两个page,Notion 中如何快速合并多个页面 （Page）？
weixin_42528974的博客
06-22 2491
Hi~ 我是 Linmi，这里是 Notion Tips 栏目，我会每天更新一个 Notion 技巧，帮助小伙伴们更好的使用 Notion ，提高 Notion 使用效率。本篇是 Notion Tips 的第二篇。因为我每天都会记录一些好的想法与思考，每次都是直接 「Cmd + N」 新建 Page，然后拖拽到想法 Page 内，定期每周处理一次。在我不知道 Notion 页面合并这个技巧前，我是...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
基于HTML5+CSS3的网页设计与实现
kkkioe的博客
06-09 2969
摘要：随着互联网技术的不断发展，电子设备的广泛应用和高普及度，网页作为互联网信息的重要载体，其网页设计技术将面临新的挑战。HTML和CSS作为网页前端开发所运用的主要核心技术，如何灵活运用，使得web开发出来的网页设计满足绝大多数用户需求是技术人员和项目负责人的核心工作之一。文章以介绍XX主题网站首页页面为对象，实现基于HTML5+CSS3的网页页面设计与优化。...
制作一个简单HTML静态网页（HTML+CSS）
html精品源码
08-06 3万+
🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。🏅......
html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面
AlbertYang的博客
01-14 8万+
承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！ https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743 作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领.
简单的HTML登录页面制作及跳转页面
最新发布
Stephen_CY666的博客
07-12 6570
密码账号邮箱:
前端HTML5十大新特性详细总结
weixin_45709829的博客
04-04 1万+
前端HTML5十大新特性总结 一 必须知道 写前端的都知道，在代码最前面都有这一行代码，大家都知道一定要把这东西写上去。 <!DOCTYPE html> 但是！这是什么玩意儿？为什么要写上去?不写上去会怎么样？很少人去注意到，反正就照写就可以了。 所以，这是个啥玩意儿?这是声明！这是HTML5声明的新特性！ 既然有HTML5，那肯定有HTML4是吧，那HTML4是怎么声明的呢？ HTML4有三种声明方式：Strict（严格模式），Transitional（过渡模式），Frameset（框架模式
如何创建一个简易的HTML网页框架
DdLlCcc的博客
05-28 1万+
背景： 在我们初步学习了web前端开发的一些知识时，我们可能会考虑构建一个简单的html网站，但是，如何着手去开始我们的网站，对于新手来说可能是个问题。 在这篇文章中，我将介绍我在构建一个简易的网页时，首先去做的事情。 当然，我本身也并非专业的前端设计师，写此文章主要为了分享我的一些学习过程中的经验，所写内容可能也会存在思想局限以及纰漏，也希望大家批评指出。` 第一步：画出草图 在开始我们的编程之前，我觉得更关键的是设计出我们的网页效果，即使是最简单的框架图，也能够降低我们在编写代码过程中的难度。 首先，
HTML5页面无缝闪开的问题及解决方案
11-20
为了解决这个问题，提出了一个新的思考方向——以空间换时间，即避免重复加载和解析HTML。 容器化方案是针对这个问题提出的解决方案。它的核心思想是保持Webview常驻，而不是在页面关闭后销毁。这样，当切换页面时...
浅谈Html5页面打开app的一些思考
11-21
前段时间开发项目，遇到了一个需求，简单来说，就是我们H5的页面有一个“在App中打开”的按钮，用户点击后，如果用户已经安装app，则直接打开app，如果用户没有安装app，那就跳转到下载app的页面 首先，在我的认知中...
程序员给女朋友用HTML5制作的3D相册
04-21
在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来创建一个既美观又个性化的3D视觉体验。 首先，HTML5的`<canvas>`元素是实现3D效果的关键。`<canvas>`允许开发者在网页上...
用HTML5实现人脸识别
03-02
它并不是一个不好的特性，我只是不会经常用到它。每当看到一些开发中酷炫的新功能，我的大脑里都会思考它们可以产生哪些实际用途。显然对你有价值的内容可能对我来说并不一定，但搞清楚我如何实际使用一个功能是我...
HTML5课程设计
01-03
HTML5课程设计是一个涵盖网页开发基础到高级应用的实践项目，旨在帮助学习者掌握现代Web开发的核心技术。在这个课程设计中，学生将深入理解HTML5、CSS和JSP（JavaServer Pages）等关键技术，通过实际操作提升自己的...
css3动画在安卓上不生效
shuawanxiao的专栏
05-23 1万+
@keyframes anim{ 0{transform:translate(0,100px);} 100%{transform:translate(0,-50%);} } 就是因为少在动画的起始位置0后面写100%在安卓手机不能生效在苹果手机生效》》》查了很久才发现的》》》 应该写成： @keyframes anim{ 0%{transform:translate(0,100p
前端资源汇总
shuawanxiao的专栏
12-28 2634
很好的一个资源库：http://microjs.com/#
html5 reqiured属性
shuawanxiao的专栏
05-03 1242
为 input的验证属性之一 required 属性适用于以下 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 在360上使用css3禁止它生效不起作用》》》》》 HTML5的出现为我们提供一些属性，不用编写js和正则即可解决这个检验
请参照知乎写一个html页面
03-26
很高兴接受您的要求，以下是一个简单的 HTML 页面范例，您可以参考下面的代码实现页面设计。 ``` <!DOCTYPE html> <html lang="en"> 我的知乎主页 body { font-family: Arial, sans-serif; margin: 0...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

澄清寰宇

如果有用请给我一根烟钱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值