转载 Web前端开发 HTML设计 经验与技巧总结
文章目录
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设计 经验与技巧总结的更多相关文章
- [转载]Web前端开发工程师编程能力飞升之路
[背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
- web前端开发浅析
原文地址:http://www.cnblogs.com/babyzone2004/articles/1807381.html 摘 要:前端开发作为一项新的领域,经历的时间随然较短,却显示了强大的生命里 ...
- Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
- 【转载】WEB前端开发规范文档
本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...
- [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- web前端开发和后端开发有什么区别?
web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...
- Web 前端开发学习之路(入门篇)
字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== ...
随机推荐
- linux-设置hostname
设置linux root后面的名字
- spring boot:用rocketmq发送延时消息用来取消订单(spring boot 2.3.3)
一,为什么要用延时消息来取消订单? 1,为什么要取消订单 在电商的下单过程中,需要在生成订单时扣减库存, 但有可能发生这种情况:用户下了单,临时改变主意不再支付, 则订单不能无限期的保留,因为还要把占 ...
- html的keywords标签
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /& ...
- Mybatis原理之数据源和连接池
在Java工程项目中,我们常会用到Mybatis框架对数据库中的数据进行增删查改,其原理就是对 JDBC 做了一层封装,并优化数据源的连接. 我们先来回顾下 JDBC 操作数据库的过程. JDBC 操 ...
- RedisManager2020.4最最最最简单的破解方式
前言 redis manager是一款很优秀的redis数据库可视化工具,果然优秀的软件最终都走向了收费,贫民玩家越来越难了.赶时间的直接拉到最后,有下载方式. 破解 无需破解,已是破解版 安装 下载 ...
- pytest-pyppeteer:在pytest中运行pyppeteer
pytest-pyppeteer pytest-pyppeteer是我写的一个 pytest 插件,支持在 pytest 中运行pyppeteer,起因是为了解决工作中的一个测试需求,现在将其开源并做 ...
- 在git下如何创建分支
创建main分支下的远程分支dev: 直接输入dev,就可以创建在main分支下的远程分支dev了 在dev下创建devdev
- 556. 下一个更大元素 III
556. 下一个更大元素 III 给定一个32位正整数 n,你需要找到最小的32位整数,其与 n 中存在的位数完全相同,并且其值大于n.如果不存在这样的32位整数,则返回-1. 示例 1: 输入: 1 ...
- AdaBoost算法详解与python实现
1. 概述 1.1 集成学习 目前存在各种各样的机器学习算法,例如SVM.决策树.感知机等等.但是实际应用中,或者说在打比赛时,成绩较好的队伍几乎都用了集成学习(ensemble learning)的 ...
- Linux系统目录简介
Linux系统目录简介 boot 系统启动 grub(内核加载程序,内核≈操作硬件) 界面 自检程序 bin 系统可执行文件 bash=终端程序 sbin 超级用户的可执行文件 root root家目 ...