转载 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前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== ...
随机推荐
- 【思维】UVA 11300 Spreading the Wealth
题目大意 vjudge链接 有n个人围圆桌而坐,每个人有Ai个金币,每个人可以给左右相邻的人一些金币. 若使得最终所有人金币数相等,求最小金币转移数. 数据范围 n<1000001 样例输入 3 ...
- elk-架构图
- 如何制作一个vagrant box
因为要用的窗口应用,基于服务器的各种box不能使用(曾经尝试安装桌面,没有成功).所以试着基于Ubuntu的虚拟机创建自己的box. 过程中主要参考了这篇文章:http://www.360do ...
- vagrantfile-参考示例
Vagrantfile 文件 bt为你需要新建的box名字 Vagrant.configure("2") do |config| config.vm.box = &qu ...
- centos8下启用rc-local服务
一,centos8不建议写rc.local,默认启动时执行的命令放到何处? 以前我们会把linux开机执行的命令写入到/etc/rc.local 在centos8上系统不再建议我们写入到rc.loca ...
- C++ Primer第5版 第二章课后练习
练习2.1 C++ 语言规定short 和 int 至少 16 位, long 至少32位, long long 至少64位.带符号类型可以表示整数.负数或0, 无符号类型则仅能表示大于等于0的值Th ...
- 第三十四章 Linux常规练习题(一)参考答案
一.练习题一 1.超级用户(管理员用户)提示符是___#_,普通用户提示符是___$_. 2.linux关机重启的命令有哪些 ? 关机命令 重启命令 shutdown -h now shutdown ...
- FrameworkElementFactory中的SetBinding与SetValue
public static Microsoft.Windows.Controls.DataGridColumn CreateDateColumn(string path, string header) ...
- .net core2.2 HealthChecks记录
abp core2.2版时使用 healthChecks使用:安装nuget包:Microsoft.AspNetCore.Diagnostics.HealthChecks startup.cs 中的 ...
- poj1011 Sticks (搜索经典好题)
poj1011 Sticks 题目连接: poj1011 Description George took sticks of the same length and cut them randomly ...