文章目录

1.限制input 输入框只能输入纯数字、限制长度、默认显示文字
2.input输入框自动获取焦点
3.用CSS让背景有透明度文字不变
4.a标签禁止点击
5.文字两种居中对齐
6.设置一个元素一直在页面的最底部：

小编目前在做毕业设计，主题为“高考志愿信息交流平台”，面向高中生和大学生，辛苦各位读者大佬朋友们填下问卷，点击链接https://www.wjx.cn/jq/98944127.aspx或扫描二维码、微信小程序码均可，希望各位能提供一些调查数据，先在这里谢过各位了(*^_^*)

1.限制input 输入框只能输入纯数字、限制长度、默认显示文字

加入oninput事件oninput = "value=value.replace(/[^\d]/g,'')"
代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>input</title>
</head>
<body>只能输入纯数字的输入框:<input type="text" maxlength="5" name="" οninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入编号">
</body>
</html>

2.input输入框自动获取焦点

在该input标签后添加autofocus=“autofocus”。
例如

<html><head></head><body>用户名：<input type="text" id="username" name="username" autofocus="autofocus"/><br/>密码：<input type="text" id="password" name="password"/><br/><input type="submit" name="submitBtn" value="提交"/></body>
</html>

3.用CSS让背景有透明度文字不变

（1）背景为纯色背景非图片
用background:rgba(x,x,x,x)来让背景带有透明度
四个参数的值是指:
red红色;green绿色;blue蓝色;alpha透明度
rgb三个参数有正整数值和百分数值2两个取值范围：
正整数值的取值范围为：0 - 255；
百分数值的取值范围为：0.0% - 100.0%。
a取值范围在:0~1(数值越小,越透明)。
HTML代码：

<body><div class="纯色背景div"></div>
</body>

CSS代码：

.纯色背景div{background:rgba(0,0,0,.6);

（2）背景为图片背景
用opacity(x)来设置背景的透明度。
x指的是alpha透明度，取值范围也在 0~1(数值越小,越透明)。
css的opacity属性可以让很多元素都变透明,这里要让背景变透明而文字不变透明需要一点小技巧：将背景取出来单独放个div再把这个div和原来的div重叠。

HTML代码：

<body><div class="背景"></div><div class="其他内容">可得解脱处，唯神佛前，与山水间</div>
</body>

CSS代码：

.背景{background:url("bg.jpg") no-repeat;background-size: 100% 100%;height: 800px;position: absolute;opacity:0.6;
}.其他内容{height: 800px;background-size: 100% 100%;color:white;
}

完整代码：

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">*{width: 100%;padding:0;margin: 0 auto;text-align: center;}.bg{height: 800px;background: url("bg.jpg") no-repeat;background-size: 100% 100%;position: absolute;opacity:0.6;}.box{height: 800px;background-size: 100% 100%;}p{width: 300px;line-height: 50px;position:relative;top: 50%;font-size: 30px;background: yellow;color: #000000;font:bold 50px Verdana, Geneva, sans-serif;}</style>
</head>
<body>
<div class="bg"></div>
<div class="box"><p>可得解脱处，唯神佛前，与山水间</p>
</div>
</body>
</html>

4.a标签禁止点击

在a标签的样式加上以下属性：

<a style="pointer-events: none;"/>

pointer-events是CSS3的一个属性，支持的值非常多，其中大部分都是和SVG有关；
pointer-events: none;可以让鼠标事件失效（链接、点击等事件），阻止用户的点击动作产生任何效果，不仅在a标签中可以用，在img标签等元素中也可以使用、阻止鼠标点击事件。

5.文字两种居中对齐

（1）平水居中：text-align:center;
text-align 属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
（2）垂直居中：line-height:height;
line-height 属性设置行间的距离（行高），不允许使用负值。
具体示例：

<!DOCTYPE HTML><html lang="en"><head><title>html文字居中测试</title><meta charset="UTF-8"><style type="text/css">body{background: #ddd;}div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}.box1{background: #71a879;text-align: center;}.box2{background: #6a8bbc;line-height: 200px;}.box3{background: #dea46b;text-align: center;line-height: 180px;}</style></head><body><div  class="box1">html文字水平居中</div><div  class="box2">html文字垂直居中</div><div  class="box3">html文字水平上下居中</div></body></html>

效果：

6.设置一个元素一直在页面的最底部：

position:fixed; bottom:0px; left:0px;

Web前端开发 HTML设计经验与技巧总结相关推荐

【Web前端开发】面试经验分享（应届生）
序言: 一直在前端学习路上摸爬滚打,从实习到校招,经历了很多场面试,通过该篇文章,总结自己在面试过程中的一些心得体会,希望与大家共勉,一起加油! 学习迷茫?看鸡汤既然走进了前端大门,就不要退缩,你想 ...
怎样入门web前端开发？
Web前端开发怎么入门? Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,下面就给大家简单介绍一下. ...
Web前端开发工程师必读de设计博客
2019独角兽企业重金招聘Python工程师标准>>> Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具 ...
web前端好学吗？如何能提高CSS编写技巧提高Web前端开发效率
前端开发学习每个人都想走捷径,即想高效快速学习又想掌握当今最新的前端技术知识.其实,这样的想法是对的,找对学习方法就能达到这个效果.前端开发学习每个阶段都是非常重要的,一部分为专业知识.另一部分实战经 ...
web端设计和web前端开发的区别
Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用各种工具进 ...
web前端项目实例网站_招聘 | 北京 | tSynsth系联设计建筑设计师 / 室内设计师 / 项目负责人 / WEB前端开发工程师 / 实习生...
关于我们系联设计(Tuning Synesthesia ,tSynsth, TS)是一支由多元背景的设计师与软件工程师组成的国际团队,致力于想法与过程让设计 "可持续". 系联专 ...
学习c语言还是web前端好,是该学UI设计还是Web前端开发呢？
UI设计和web前端学习哪个好?哪个比较有前景? 1.Web前端开发:通俗来讲,当你打开某个网站时,往往时间被那些炫酷的动态网页设计所吸引.但是,如果没有Web前端工程师,这些图片是不会动的.这样一个 ...
html透明度_学好Web前端开发，必要了解的HTML+CSS的技巧有哪些
HTML+CSS的技巧有哪些?怎么学好Web前端开发?经过Web前端学习的一个过程,每个人都会对前端的认识逐渐由浅入深,由一开始僵硬地使用标签和标签属性进行简单网页布局,到最后能够对网页进行丰富的CS ...
关于零基础学习web前端开发，有些过来经验分享
大家好,今天给大家分享一下我从事WEB前行业一些自己的学习经验分享也希望通过这篇文章,可以帮助到更多正在学习但是又不知道从哪里学习学习的前端的小伙伴,还有一些想要去转行的,但是不知道不知道如何去学习 ...

Web前端开发 HTML设计经验与技巧总结

文章目录

1.限制input 输入框只能输入纯数字、限制长度、默认显示文字

2.input输入框自动获取焦点

3.用CSS让背景有透明度文字不变

4.a标签禁止点击

5.文字两种居中对齐

6.设置一个元素一直在页面的最底部：

Web前端开发 HTML设计经验与技巧总结相关推荐

最新文章

热门文章

Web前端开发 HTML设计 经验与技巧总结

文章目录

1.限制input 输入框只能输入纯数字、限制长度、默认显示文字

2.input输入框自动获取焦点

3.用CSS让背景有透明度文字不变

4.a标签禁止点击

5.文字两种居中对齐

6.设置一个元素一直在页面的最底部：

Web前端开发 HTML设计 经验与技巧总结相关推荐

最新文章

热门文章

Web前端开发 HTML设计经验与技巧总结

Web前端开发 HTML设计经验与技巧总结相关推荐