首页 > TAG信息列表 > 3px

css对齐方式总结

参考: https://www.runoob.com/css/css-align.html 居中对齐 元素居中对齐 margin: auto 设置元素的宽度将防止它溢出到容器的边缘 元素通过指定宽度, 并将两边的空外边距平均分配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素居中对齐

JavaScript小案例-仿登陆框案例

JavaScript小案例-仿登陆框案例 重点:oninput事件:输入文本就会触发 特点: 未输入时,右侧出现小蓝图标 输入后,不满6个字符,出现红色提示图标 输入后,满6个字符,出现绿色图标 效果 用到精灵图一张,大家网上随便找找就有了。算了,还是给你吧。 目录结构 代码 css <style> bo

前端CSS3阴影box-shadow用法

前端CSS3阴影box-shadow用法 语法 box-shadow: h-shadow v-shadow blur spread color inset; 对应解释 box-shadow: 水平阴影(必须) 垂直阴影(必须) 模糊效果(可选) 模糊距离(可选) 阴影颜色(可选) 内部阴影(可选,默认为外部阴影:outset,且不可设置为outset); 上代码详细介绍 点击查看代码 <!DOC

背景模糊css设置

background: rgba(0, 0, 0, 0.6) -webkit-backdrop-filter: blur(3px) backdrop-filter: blur(3px) 效果:  

CSS特效 图片模糊

  1:图片模糊特效效果    图片模糊特效代码 .ib-grid view image { -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); }  

文字前面加竖线表示标题

    <span class="title">日志总览</span> .title { position: relative; padding-left: 13px; margin: 24px 0px; } .title:before { content: ''; background-color: #3796EC; width: 4px; height: 16px; position: absolute;

内外边距及div居中

内外边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--外边距的妙用:居中元素 margin: 0 auto; --> <style> #box{ wid

html5调用手机本地摄像头和相册识别二维码详细实现过程(附源码下载)

https://www.cnblogs.com/benbenfishfish/p/9674197.html 需要引用的库请点击附件下载 ↓ 附件 源码参考直接右键 :https://files.cnblogs.com/files/benbenfishfish/htmltortf.zip html5调用手机本地摄像头和相册识别二维码详细实现过程(附源码下载) 项目中有用到h5识别我们的单

css实现颜色渐变小动画

效果如下:   完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con

JS学习-3.练习2

屏幕进行抖动(类似于qq抖动) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #myBody{ position: absolute; } </style> </head> <b

input复选框checkbox默认样式修改

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <st

Solve Warning: The elevation provided <Paper elevation={24}> is not available in the theme.

  If you got the following warning:   The elevation provided <Paper elevation={24}> is not available in the theme. Please make sure that `theme.shadows[24]` is defined   In order to mitigate this, you can change your shadows to a dictionary instea

10.盒子模型

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 /*body总有一个默认的外边距margin=0,常规操作*/ 9 /*h1,ul,li,a,

11.margin外边距

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--外边距的妙用:居中元素 7 margin: 0 auto; 8 --> 9 <style> 10

发光输入框

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>发光输入框</title> <style type="text/css"> input{width: 280px;height: 30px;} textarea{width:

CSS盒模型

CSS盒模型概述:所有 HTML 元素可以看作盒子,在 CSS 中,"box model "这一术语是用来设计和布局时使用。CSS盒模型(Box Model)规定了元素处理元素内容(content)、内边距(padding)、边框(border)、外边距(margin)的方式。下面的图片说明了盒子模型 (Box Model):                    

Hexo-NexT 设置圆角

在 blog_root/source/_data/variables.styl 中增加下列代码: // 圆角设置 $border-radius-inner = 20px; $border-radius = 20px; 然后在 NexT 的配置文件 _config.yml 中取消 variables.styl 的注释: variable: source/_data/variables.styl 问题描述 侧边栏

Angular cdk 之 drag-drop

官网链接:https://material.angular.io/cdk/drag-drop/overview 使用示例: import {Component} from '@angular/core'; @Component({ selector: 'app-drag-drop-drop', template: ` <div class="dragParent" style="width: 5

关于contenteditable属性

简介:H5新增属性,规定了标签内部内容是否可编辑; 属性值: true:可编辑 false:不可编辑 示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .edit_container { width: 500px;

css

@charset "utf-8"; /* CSS Document */*{ margin:0; padding:0;}body{ font-size:12px; font-family:"宋体";}.box{     width:660px;    height:600px;    border:solid #CCC 1px;    margin:50px auto 0;    padding:20px;    }.header{ font-size:22px;

25-微信小程序商城 我的收藏(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)

我的收藏 本节主要讲解我的收藏界面的实现。效果如图15-9所示。 内容的布局分析可以参考12.8节“销售排行”。 实现功能的.wxml文件代码示例如下: <!--收藏-1行2列:左侧图片,右侧3行文本--> <view class='text'> <view class='line_y'></view> <text>我的收藏列表</text> </v

21-微信小程序商城 会员首页(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)

本章主要讲解会员相关功能的界面实战。包含:会员首页界面、我的订单页面,收货地址管理、新增、修改页面、我的收藏页面、常见问题页面、联系客服页面等。 本章节不在分析界面的层级了,大家可以根据示意图分析,然后结合给出的示例代码对比实战。 会员首页 本节主要讲解会员首页界面的

CSS盒模型

CSS盒模型概述:CSS盒模型(Box Model)规定了元素处理元素内容(content)、内边距(padding)、边框(border)、外边距(margin)的方式。 下图为盒模型模型图。     盒模型各部分说明: 1、content(内容):盒子的内容,显示文本和图像。 2、padding(内边距):内容区与边框之间的填充部分,内边距是透明的。

Java毕业设计+现成产品 —>基于Java SSM酒店信息管理系统

主要技术:java springmvc  mybatis   mysql  tomcat js   jauery  jsp   log4j等一些常见基本技术适用于Java毕设和学习使用 项目有偿分享哈主要实现:前台:登录、注册、酒店信息浏览、搜索酒店信息、查看房间、预定房间、等后台:部门管理、房间管理、楼层管理、订单管

HTML元素脱离文档流的三种方法

一、什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流。 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成了文档流。 二、什么是脱离文档流? 元素脱离文档流之后,将不再在文档流中占据空间,而是