文章目录
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. docker启动服务

    1 rabbitmq docker启动服务---------------rabbitmq 2 mysql docker启动服务---------------mysql 3 redis docker启动 ...

  2. Linux如何在vim里搜索关键字

    例如搜索 the写法:/the     +回车 /+关键字 ,回车即可.此为从文档当前位置向下查找关键字,按n键查找关键字下一个位置: ?+关键字,回车即可.此为从文档挡圈位置向上查找关键字,按n键向 ...

  3. ansible使用script模块在受控机上执行脚本（ansible2.9.5）

    一,ansible的script模块的用途 script 模块用来在远程主机上执行 ansible 管理主机上的脚本, 即:脚本一直存在于 ansible 管理主机本地, 不需要手动拷贝到远程主机后再 ...

  4. phpexcel导出数据 出现Formula Error的解决方案

    phpexcel导出数据报错 Uncaught exception 'Exception' with message 'Sheet1!A1364 -> Formula Error: Unexpe ...

  5. 边界层吞吸技术（BLI）

    气流在机体表面前进时,由于受到摩擦,其速度会不断降低,从而会产生湍流甚至气流分离,而流动分离又会造成大量紊流.涡,使升力大量损失,同时也会造成阻力急剧增加.边界层吞吸技术就是一种对附面层气流" ...

  6. 栈&队列&并查集&哈希表（julyedu网课整理）

    date: 2018-11-25 08:31:30 updated: 2018-11-25 08:31:30 栈&队列&并查集&哈希表(julyedu网课整理) 栈和队列 1. ...

  7. 查询时间段内所有日期（限foton）

    String dataStr = "2019-04"; try { Date date = DateUtils.parseDate(dataStr); Date startTime ...

  8. SpringBoot + Swagger Demo

    Swagger是什么? Swagger 是一个规范且完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.  Swagger 的目标是对 REST API 定义一个标准且和语 ...

  9. Spring源码知识概览

    目录 Spring知识总览 1.1 IOC 1.2 Spring中重要接口概览 Spring知识总览 1.1 IOC IOC是控制反转,是一种思想 DI是依赖注入,是控制翻转的一种实现 Spring的 ...

  10. ORB-SLAM3 Initializer.cpp函数解读

    作者: Liam 点击上方"计算机视觉工坊",选择"星标" 干货第一时间送达 构造函数 Initializer::Initializer(const Frame ...