HTML&CSS
HTML、CSS
黄晶谛
GIS JAVA
展开
-
HTML5常用API
1、判断网络连接状态 window.addEventListener("online", function (){ $(".tips").text("网络已连接").fadeIn(500).delay(1000).fadeOut(); }); window.addEventListener("offline", function (){ $(".tips").text("网络已断开").fadeIn(500).delay(1000).fadeOut()原创 2021-08-28 11:56:01 · 390 阅读 · 0 评论 -
浏览器兼容性处理
在遇到浏览器兼容性问题时,需要针对不同版本的浏览器进行判断,再进一步进行兼容处理,如IE浏览器的版本判断:基本运算符如下:! [if!IE] NOT 运算符。这被放在特性,算符, 或者子表达式的前面以反转该表达式的布尔值含义。lt [if lt IE 5.5] 小于运算符。第一项小于第二项时返回 true。lte [if lte IE 6] 小于或等于运算符。第一项小于或等于第二项时返回 true。gt [if gt IE 5] 大于运算符。第一项大于第二项时返回 true。gte [if gt原创 2021-08-28 11:47:43 · 89 阅读 · 0 评论 -
背景渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 300px; height: 100px; /* background: -webkit-linear-gradient(渐变的起始位置,起原创 2021-05-16 23:36:01 · 70 阅读 · 0 评论 -
背景图片
通过background-size设定背景图片大小。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图片</title> <style type="text/css"> div { width: 600px; height: 600px; background: url(imgs/tudou.j原创 2021-05-16 23:34:49 · 83 阅读 · 0 评论 -
伸缩布局
一、伸缩布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伸缩布局</title> <style type="text/css"> * { padding: 0; margin: 0; } section { height: 300px; width: 80%; /* bac原创 2021-05-16 23:33:49 · 83 阅读 · 0 评论 -
动画效果
一、动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画</title> <style type="text/css"> /* 声明动画 */ @keyframes move { from { background-color: pink; left: 0; } to {原创 2021-05-16 23:30:40 · 79 阅读 · 0 评论 -
位移、缩放、旋转、阴影、斜切
一、位移<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; background-color: pink; /* transform: trans原创 2021-05-16 23:27:57 · 93 阅读 · 0 评论 -
径向渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 对于径向渐变,主要是3个参数控制。 一个是原点和大小。大小类似border-radius的感觉,原点使用at表示可以指定点的坐标,或使用left、right、top、bott原创 2021-05-16 23:22:22 · 355 阅读 · 0 评论 -
过渡效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡</title> <style type="text/css"> div { width: 300px; height: 200px; background-color: pink; /* transition: all .25s ea原创 2021-05-16 23:20:42 · 100 阅读 · 0 评论 -
字体图标
字体图标的引入和使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2');原创 2021-05-16 23:19:37 · 84 阅读 · 0 评论 -
文字溢出显示省略号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li { width: 200px; height: 30px; border: 1px solid red; line-height: 30px; whit原创 2021-05-13 00:04:15 · 120 阅读 · 0 评论 -
取消轮廓线和防止拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input { outline: none;/* 取消轮廓线 */ border: 1px solid #ccc; width: 200px; height: 50px;原创 2021-05-12 23:46:42 · 474 阅读 · 0 评论 -
鼠标样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <ul> <li style="cursor:move">移动样式</li> <li style="cursor:default">小白</li原创 2021-05-12 23:45:35 · 79 阅读 · 0 评论 -
元素叠放次序z-index
设置z-index大小,值大者层叠在上方。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 300px; height: 300px; position: fixed; } .red原创 2021-05-12 23:45:10 · 118 阅读 · 0 评论 -
绝对定位和相对定位
一、绝对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; } .father { position: absolute; /* 绝对定位,不原创 2021-05-12 23:42:52 · 155 阅读 · 0 评论 -
清除浮动的方法
一、通过标签清除浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .father { width: 300px; border: 1px solid red; } .big { width: 100px;原创 2021-05-12 23:28:41 · 70 阅读 · 0 评论 -
水平居中、圆角边框及盒子阴影效果
一、水平居中 text-align: center; /* 让盒子中的文字居中对齐 */ margin: 0 auto; /* 让盒子居中 上下为0 左右为auto */二、圆角边框 <style type="text/css"> div { width: 300px; height: 300px; background-color: pink; margin: 100px auto; /* border-radius: 150px; 正方形变原创 2021-05-12 23:21:43 · 236 阅读 · 0 评论 -
盒子模型之边框样式和内边距
边框的常见设置方式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子模型之边框</title> <style type="text/css"> div { width: 200px; height: 200px; /* border-width: 1px; */ /* border-color:原创 2021-05-12 23:16:28 · 97 阅读 · 0 评论 -
CSS设置元素背景
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景</title> <style type="text/css"> div { width: 400px; height: 500px; background-color: purple; background-image: url(btn.p原创 2021-05-12 23:12:40 · 255 阅读 · 0 评论 -
CSS特性
一、层叠性主要是指相同样式属性的层叠。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>层叠性</title> <style type="text/css"> div { color: red; font-size: 10px; } div { font-size: 25px; } <原创 2021-05-12 23:11:41 · 97 阅读 · 0 评论 -
显示模式转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>显示模式转换</title> <style type="text/css"> div { width: 300px; height: 100px; background-color: blue; display: inline; /* 把块级元素转为行内原创 2021-05-12 23:06:58 · 126 阅读 · 0 评论 -
浮动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .one { width: 200px; height: 200px; background-color: red; float: left; } .two {原创 2021-02-27 00:13:04 · 105 阅读 · 0 评论 -
盒子模型
一、边框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; /* border-width: 1px; */ /* border-color: red;原创 2021-02-27 00:09:17 · 87 阅读 · 0 评论 -
背景
一、背景设置基础<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景</title> <style type="text/css"> div { width: 400px; height: 500px; background-color: purple; background-image:原创 2021-02-27 00:03:46 · 119 阅读 · 0 评论 -
元素样式的三大特性
一、层叠性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>层叠性</title> <style type="text/css"> div { color: red; font-size: 10px; } div { font-size: 25px; } </style><原创 2021-02-27 00:00:10 · 168 阅读 · 0 评论 -
元素显示模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>块级元素和行内元素</title> <style type="text/css"> div { color: red; width: 300px; height: 300px; background-color: pink; } span {原创 2021-02-26 23:52:33 · 100 阅读 · 0 评论 -
Sublime Text3常用快捷键
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div></div> <!-- 生成标签,输入标签名,按TAB键即可 --> <a href=""></a> <!-- 快速生成多个相原创 2021-02-26 23:50:17 · 169 阅读 · 0 评论 -
常用选择器
一、类选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span { font-size: 150px; } .g { color: skyblue; } .o { color: red; } &l原创 2021-02-26 23:48:35 · 93 阅读 · 0 评论 -
表单元素
一、表单示例 <table border="0" cellpadding="0" cellspacing="0" align="center"> <caption><h3 style="color:pink; font-size:25px">注册信息</h3></caption> <tr height="60"> <td>所在地区</td> <td> <原创 2021-02-26 23:40:43 · 82 阅读 · 0 评论 -
表格
一、 表格的基本使用示例<table border="1" width="500" align="center" cellpadding="0" cellspacing="0" > <caption>个人信息表</caption> <tr align="center"> <th>姓名</th> <th>性别</th> <th>电话</th> </tr&原创 2021-02-26 23:33:44 · 104 阅读 · 0 评论 -
HTML基础标签
1、排版标签strong和b 表示加粗;i和em 表示倾斜;s和del 表示添加删除线;u和ins 表示添加下划线。 <strong>柳长风</strong> <b>小明</b> <i>哈哈</i> <em>嘎嘎</em> 原价<s>1888元</s>现价<del>888元</del> <u>特殊说明</u> <in原创 2021-01-15 23:18:58 · 187 阅读 · 1 评论