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

CuterCorley 等级 422 0 0

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

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>

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

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

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

本文原文首发来自博客专栏前端开发,由本人转发至https://www.helloworld.net/p/6wGTrDTw9Ig9,其他平台均属侵权,可点击https://blog.csdn.net/CUFEECR/article/details/104030161查看原文,也可点击https://blog.csdn.net/CUFEECR浏览更多优质原创内容。

收藏
评论区

相关推荐

使用reveal.js制作精美的网页版PPT
前言 最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT, 这个时候笔者发现了reveal.js: 一个使用 HTML 语言制作演示文稿的 Web 框架,支持插入多种格式的内容,并以类似 PPT 的形式呈现. 花了1
js 基础之弱类型/变量提升/TDZ/块作用域/重复定义/Object.freeze()
弱类型 在JS中变量类型由所引用的值决定 var web "helloWorld"; console.log(typeof web); //string web 99; console.log(typeof web); //number web {}; console.log(typeof web); //object 变量提升
容易被忽略的5个HTML技巧
对于所有 Web 开发人员来说,无论你选择的是哪种框架或后端语言,都需要大量使用 HTML(超文本标记语言)。 各种框架和编程语言可能会此消彼长,但 HTML 永不会过时。只是,就算 HTML 的应用如此广泛,这种语言中还是有不少多数开发人员都不了解的标签和属性。 而且,尽管市面上有各种模板引擎(例如 Pug)可用,但你仍然需要对 HTML 和 CSS
震惊!!Flutter 2 来了!
{{{width300}}} 作者 | Flutter 官方博客 译者 | 核子可乐 策划
Flutter 2 正式发布!
昨天凌晨,Flutter 2 正式发布: 开发者为_任何_平台创建美观、快速且可移植应用的能力得以更上一层楼。通过 Flutter 2,您可以使用相同的代码库为五种操作系统构建原生应用: iOS、Android、Windows、macOS 和 Linux;以及为 Chrome、Firefox、Safari 和 Edge 等浏览器打造 web 体验。Flutt
django搭建web小项目
创建项目 原文1:http://blog.csdn.net/yjx2323999451/article/details/53200243(http://blog.csdn.net/yjx2323999451/article/details/53200243) 原文2:http://www.cnblogs.com/benshan/p/4445074.
Web前端开发 HTML设计 经验与技巧总结
小编目前在做毕业设计,主题为“高考志愿信息交流平台”,面向高中生和大学生,辛苦各位读者大佬朋友们填下问卷,点击链接或扫描二维码、微信小程序码均可,希望各位能提供一些调查数据,先在这里谢过各位了(\\^_\^) 1.限制input 输入框只能输入纯数字、限制长度、默认显示文字加入oninput事件oninput "valuevalue
解读 Flutter 全平台开发的误解与偏见
Flutter 2.0 发布之后,Web 版本进入了 stable 分支,Desktop 版本也可以在 stable 分支通过 snapshot beta 镜像开始预览使用,导致最近关于 “Flutter 制霸全平台” 之类的话题又被炒作起来,所以本篇主要对这个话题做一次解答。1、Flutter 制霸全平台谷歌官方在 F
PHP Cookie与Session的使用与区别
Cookie与SessionCookie和session是目前使用的两种存储机制。cookie是从一个WEB页到下一个WEB页面的数据传送方法,cookie存储在客户端;Session是让数据在页面中持续有效的一个传递方法,session存储在服务器端。掌握了cookie与session这两个技术,在WEB网站页面间信息传递的安全性是
Hybrid APP基础篇-_Native、Hybrid、React Native、Web App方案的分析比较
说明 Native、Hybrid、React、Web App方案的分析比较 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app、web app与native app工具的初步比较与分析
Web APP UI一致性设计
前言做前端开发一段时间后,你会不会发现自己在持续的做着页面重复开发的工作,后面甚至干脆是CtrlC、CtrlV操作。你可能会说,那就使用组件啊!的确,通过抽取公用视图,创建子组件的方式确实可以提升代码复用度。上面是回答是基于你
2021涅普冬令营笔记——web
写在前面 老 web 🐕了 课程大纲 2021.2.6——黑客竟在我身边 Burpsuite 功能介绍 安装+ 百度、csdn 都有教程,跳过 proxy模块+ 代理模块,相当于在客户端和服务端中间的一个关卡,可以拦截、修改、丢弃所有的流量包 intruder模块+ 用来爆破的模块 Target Positions Payloads+ Payload Set
Bugku新平台——Web-wp
写在前面 Bugku新平台真不错,以前老平台的题 ak 了一直没有总结 wp ,这回重新打一遍写个 wp(水篇博客) web1F12查看源码得到flag web2F12修改前端JS对输入长度的限制 web3老萌新题了,但是不知道为什么打印两个flag出来php$what$GET['what'];echo $what;if($what'flag')echo '
JarvisOJ——Web-wp
写在前面 这几天 BUU 平台机房出故障了,回来把 JarvisOJ 平台已经做过的和剩下的 web 全部写一遍 wp 吧,很怀念大一那时候跟鹏神晚上通宵干题的时光,一转眼都过了一年了 PORT51需要用公网的一台服务器访问其 51 端口curl localport 51 http://web.jarvisoj.com:32770/ LOCALHOST添加
Java Web服务器的介绍
一、Java Web服务器的介绍Web服务器:是指能够为发出请求的浏览器提供文档的程序。服务器是一种被动程序,只有浏览器发出请求的时候才会响应。主流的Web服务器有:1.WebLogic:Bea公司开发的一个收费的大型服务器软件,后被Oracle收购,支持Java EE 所有规范。2.Tomcat:由Apache、Sun和其他一些公司及个人共同开发而成。该服