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

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>
1
2
3
4
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;"/>
1
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: 200px;}

</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;
————————————————
版权声明：本文为CSDN博主「cupyter」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/CUFEECR/article/details/104030161

转载 Web前端开发 HTML设计 经验与技巧总结的更多相关文章

  1. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

  2. web前端开发浅析

    原文地址:http://www.cnblogs.com/babyzone2004/articles/1807381.html 摘 要:前端开发作为一项新的领域,经历的时间随然较短,却显示了强大的生命里 ...

  3. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  4. 【转载】WEB前端开发规范文档

    本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...

  5. [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...

  6. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  7. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  8. web前端开发和后端开发有什么区别？

    web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...

  9. Web 前端开发学习之路（入门篇）

    字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝ ...

随机推荐

  1. python 不定长参数

    1 #不定长参数 * 元祖 ** 字典 2 def item(a,b,*c,**d): 3 print(a) 4 print(b) 5 print(c) 6 print(d) 7 8 item(11, ...

  2. python接口测试之日志功能

    之前在简书中看了一篇关于日志功能的文档,供大家参考:https://www.jianshu.com/p/62f7b49b41e7 Python通过logging模块提供日志功能,所以直接导入即可 im ...

  3. vi/vim系统编辑命令使用技巧

    01前言 在Linux系统中会有很多的文件信息,这些文件的内容如果需要编辑,就必须借助vi或vim编辑命令. vi是Linux命令行界面下的重要文字编辑器.vim是vi命令的增强版. [语法格式] v ...

  4. 【不知道怎么分类】CF 819B Mister B and PR Shifts

    题目内容 洛谷链接 定义一个全排列\(p_i\)的偏移值为\(\sum_{i=1}^{n}|p[i]-i|\). 给你一个全排列,你可以从后面拿\(k\in[0,n-1]\)个数放在前面,使得该全排列 ...

  5. centos8安装zookeeper(单机方式)

    一,下载zookeeper: 1,官网地址 http://zookeeper.apache.org/ 找到这个地址: https://mirrors.tuna.tsinghua.edu.cn/apac ...

  6. http请求需要了解的一些信息

    http请求需要了解的一些信息 http请求头:https://jingyan.baidu.com/article/375c8e19770f0e25f2a22900.htmlhttp状态码 :http ...

  7. Microsoft.Extensions.DependencyInjection中的Transient依赖注入关系，使用不当会造成内存泄漏

    Microsoft.Extensions.DependencyInjection中(下面简称DI)的Transient依赖注入关系,表示每次DI获取一个全新的注入对象.但是使用Transient依赖注 ...

  8. vue渐进式开发的理解和指令

    1.vue渐进式开发 vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或 ...

  9. JavaWeb宿舍管理系统（附 演示、源码下载地址）

    宿舍管理是高校管理的重要组成部分,一套优秀的管理系统不仅可以降低宿舍管理的难度,也能在一定程度上减少学校管理费用的支出,能是建设现代化高校管理体系的重要标志. 本篇文章将带你从运行环境搭建.系统设计. ...

  10. ssh免密登陆 2

    应用场景之一:java 程序调用shell脚本,通过ssh 免密登陆数据库服务器,进行数据的抽取打包工作. 免密设置步骤: 1.客户端生成公私钥,在任意目录下执行命令ssh-keygen(一路回车默认 ...