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

CuterCorley 等级 733 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浏览更多优质原创内容。

收藏
评论区

相关推荐

Web前端开发 HTML设计 经验与技巧总结
小编目前在做毕业设计,主题为“高考志愿信息交流平台”,面向高中生和大学生,辛苦各位读者大佬朋友们填下问卷,点击链接或扫描二维码、微信小程序码均可,希望各位能提供一些调查数据,先在这里谢过各位了(\\^_\^) 1.限制input 输入框只能输入纯数字、限制长度、默认显示文字加入oninput事件oninput "valuevalue
小白怎么成为一个黑客?按照这个路线来!
大家好,我是周杰伦。接下来我会写系列的文章,给大家整理下网络安全的详细的学习步骤和学习资源推荐。今天的主题是——Web安全。Web安全是网络渗透中很重要的一个组成部分,今天跟大家聊一下,如何在三个月内从零基础掌握Web安全。 第一个月第一周:HTML+CSS,学会网页基本格式,学会编写基本网页,表单,学会用浏览器F12检查元素,查看源码 推荐学习地址: H
JavaWeb学习总结(一)——JavaWeb开发入门
一、基本概念 ------ ### 1.1、WEB开发的相关知识   WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源。   Internet上供外界访问的Web资源分为: 1. **静态web资源(如html 页面):指web页面中供人们浏览的数据始终是不变。** 2. **动态web资源:指
mysql字符串如何得到指定字符最后的位置,学习SUBSTRING_INDEX的用法
转载原文 [http://www.myexception.cn/java-web/43.html](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.myexception.cn%2Fjava-web%2F43.html) 表里的数据如 1 1.1 1.1.1 1.2.1
20154331 EXP9web安全基础实践
[EXP9 Web安全基础实践](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.cnblogs.com%2Fyqh0524%2Fp%2F9074483.html) ============================================================
20155211 网络攻防技术 Exp08 Web基础
20155211 网络攻防技术 Exp08 Web基础 =========================== 实践内容 ---- 1. Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。 2. Web前端javascipt,理解JavaScript的基本功能,理解DOM。
20154331 EXP9web安全基础实践
[EXP9 Web安全基础实践](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.cnblogs.com%2Fyqh0524%2Fp%2F9074483.html) ============================================================
20155211 网络攻防技术 Exp08 Web基础
20155211 网络攻防技术 Exp08 Web基础 =========================== 实践内容 ---- 1. Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。 2. Web前端javascipt,理解JavaScript的基本功能,理解DOM。
Django之Web框架本质和Django实例
[Django之Web框架本质及第一个Django实例](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2Faaronthon%2Fp%2F8962849.html) =============================================
HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
在前面《[百度地图、ECharts整合HT for Web网络拓扑图应用](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.cnblogs.com%2Fxhload3d%2Fp%2F4358804.html)》我们有介绍百度地图和 [HT for Web](https://www.os
HTML前端开发App汇总
**1、web App** ============= (1)what -------         Web App就是运行于网络和标准浏览器上,基于网页技术开发实现特定功能的应用。 (2)why  -------         第一、使用W3C标准的HTML(标准通用标记语言下的一个应用)语言开发,能够轻松实现跨平台,移动应用开发者不再需要考虑
Kafka web console安装
参考:  http://www.cnblogs.com/yxwkf/p/5092589.html 1. 安装包下载 ======== 下载地址:https://github.com/claudemamo/kafka-web-console/releases 目前最新是2.0.0版本 ![](https://oscimg.oschina.net/os
LVS(Linus Virtual Server):三种IP负载均衡方式比较+另三种Web负载均衡方式
我还写了一篇:[【系统架构】亿级Web系统搭建(1):Web负载均衡(阿里)](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2Faspirant%2Fp%2F11607839.html) 还有个姊妹篇也可以参考这个文章:[六大Web负载均衡原理与实现](
SpringBoot Web Https 配置
不管是游戏服务器开发,还是其它服务开发,越来越多的平台都要求服务端必须支持https的访问。以增加安全性。比如目前火热的小程序,要求服务端必须支持https,苹果商店也有说http请求要修改为https。所以https将会是游戏服务器的普遍需求。 一,证书生成 ======    证书可以自己使用jdk生成进行测试。但是在正常使用的时候,需要去第三方机构
Tomcat部署Web项目的3种方式
转载自[Tomcat部署Web项目的3种方式](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2Frmxd%2Fp%2F11419193.html) ### 文章目录 * 一、将war包丢进webapps * 二、配置Server.xm