HTML5/CSS3
关注
分享
扫一扫
UIEngineer
玩中学！
展开
-
前端工具
做前段UI设计师已经有1年时间了，在这1年里修改了公司的研发管理系统，尝试过一些前端开发工具。-敲代码篇1.Sublime Text3前端开发神器，不多介绍了，支持各种插件、启动速度极快。平台：Windows、MAC、Linux官方网站：http://www.sublimetext.com/2.HBuilder仅次于Sublime Text之后的前端开发神器，支持安装插件，并且带有IOS/ANDRO转载 2017-10-08 14:30:32 · 334 阅读 · 0 评论 -
CSS3选择器nth-child
<!doctype html><html><head><meta charset="utf-8"><title></title><style> /* nth-child(n) An+B */ li:nth-child(4n+1){ background-color:darkviolet; }原创 2018-02-18 14:57:21 · 381 阅读 · 0 评论 -
HTML与CSS简单页面效果实例
index.html<!doctype html><html><head><meta charset="utf-8"><title></title><link href="style.css" rel="stylesheet" type="text/css"></head><body> <div class="container"> <div class="wrapp原创 2018-02-18 15:46:36 · 12721 阅读 · 0 评论 -
CSS3 - enabled和disabled
<!doctype html><html><head><meta charset="utf-8"><title></title><style> input[type="text"]:enabled{ background-color:gold; } input[type="text"]:disabled{ background-col原创 2018-02-18 16:39:23 · 3195 阅读 · 0 评论 -
HTML5新增的非主体结构元素
1.header元素<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body> <header> <h1>IT最新技术</h1> <a href="http://www.baidu.com/">宇宙学院</a> <nav>原创 2018-02-24 21:43:59 · 204 阅读 · 0 评论 -
Echarts3.0入门之浏览器画图原理
Canvas 基于像素 单个html，类似于画笔在画布上画画 Echarts基于canvas画图Svg 基于对象模型 多个图形元素 高保真<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body> <!--添加canvas标签，并加上红色边框以便于在页面上原创 2018-05-05 09:41:07 · 3336 阅读 · 0 评论 -
纯CSS3导航特效
2原创 2018-05-29 12:13:10 · 843 阅读 · 0 评论 -
web Worker使js实现‘多线程’
大家都知道js是单线程的，在上一段js执行结束之前，后面的js绝对不会执行，那么为什么标题说js实现‘多线程’，虽然说加了引号，可是标题也不能乱写不是，可恶的标题党？ 姑且抛开标题不说，先说我们经常会遇到的一个问题，假如我们页面中有很多js要执行，比如页面加载或点击某个按钮就会触发js,最坏的结果就是在很长的一段时间内用户都不能进行任何操作，所以，退出，关闭。。 当然上面说的有一些夸张，...原创 2018-06-14 12:09:42 · 937 阅读 · 0 评论 -
cursor禁止默认样式
cursor: not-allowed;注意： 如果没有效果，pointer-events: none;原创 2018-06-14 12:15:34 · 10560 阅读 · 0 评论 -
UI版式设计
一、购物车案例创建一个Vue的实例通过v-for指令渲染产品数据使用filter对金额和图片进行格式化使用v-on实现产品金额的动态计算综合二、地址选配功能原创 2018-06-26 12:22:51 · 780 阅读 · 0 评论 -
CSS :focus 选择器
一个输入字段获得焦点时选择的样式：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title&原创 2019-03-01 12:25:11 · 398 阅读 · 0 评论 -
css精灵图(雪碧图、图片合成技术)
1. 什么是css精灵图（sprite）？css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。2.使用css精灵图（sprite）的方...原创 2019-02-26 12:12:33 · 1482 阅读 · 0 评论 -
如何更改placeholder属性中文字颜色
熟悉HTML5的人应该都知道，placeholder这个属性是HTML5中新增的属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，该提示会在用户输入之前显示在输入字段中，会在用户输入字段后消失，有些浏览器则是获得焦点后该提示便消失（如Safari、IE）适用范围：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 pas...原创 2019-02-27 12:01:10 · 1943 阅读 · 1 评论 -
css中的高度塌陷以及开启BFC
初始代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title><原创 2019-03-04 12:31:06 · 492 阅读 · 0 评论 -
bootstrap自适应电脑手机端后台登录界面代码
html:在这里插入代码片css:在这里插入代码片原创 2019-03-29 12:10:27 · 4063 阅读 · 0 评论 -
CSS Grid 布局示例 - 圣杯布局
https://www.html.cn/archives/8635原创 2019-04-22 12:28:54 · 1084 阅读 · 0 评论 -
CSS3 选择器target
<!doctype html><html><head><meta charset="utf-8"><title></title><style> /* target */ :target{ background-color:orange; }</style></head><body> <a href="#a1">菜单1</a>| <a原创 2018-02-18 14:32:22 · 393 阅读 · 0 评论 -
CSS3结构性伪类选择器
<!doctype html><html><head><meta charset="utf-8"><title></title><style> /* 第一行 */ p:first-line{ color:crimson; } /* 首字母 */ p:first-letter{ color:green; }</原创 2018-02-18 14:20:11 · 226 阅读 · 0 评论 -
CSS3文字与字体相关样式
1.使用服务器端字体<!doctype html><html><head><meta charset="utf-8"><title></title><style> @font-face{ font-family:WebFont; /* ttf :o otf:t */ src:url(FUBOLD.TTF) format("truety原创 2018-02-18 14:01:56 · 1194 阅读 · 0 评论 -
table border
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/><title>Title</title><script src="https://cdn.原创 2017-10-28 13:55:23 · 242 阅读 · 0 评论 -
HTML5语义化标签综合基础案例
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"原创 2017-10-16 19:50:34 · 513 阅读 · 0 评论 -
XHTML的介绍
1原创 2018-01-16 21:34:31 · 205 阅读 · 0 评论 -
SVG基础
1.SVG介绍 2.SVG绘制矢量图形 index.html代码如下：html>head>meta charset="utf-8">title>无标题文档title>head>body> svg width="120" height="120" viewBox="0 0 120 120" version="1.1">原创 2018-01-28 21:56:00 · 386 阅读 · 0 评论 -
老式浏览器支持HTML5和CSS3
一、老式浏览器支持HTML5 二、老式浏览器支持CSS3原创 2018-02-13 20:51:20 · 247 阅读 · 0 评论 -
HTML5新增的主体结构元素
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><!--<script src="./index.js"></script>--></head><body> <article> <header> <h1>宇宙</h1> <p>h原创 2018-02-07 22:30:58 · 319 阅读 · 0 评论 -
CSS3布局属性全接触
推荐网站：caniuse原创 2018-02-16 16:14:19 · 175 阅读 · 0 评论 -
Flexbox菜单项目实战
index.html<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet"><link href="begin.css" rel="原创 2018-02-16 16:44:08 · 244 阅读 · 0 评论 -
CSS3 - 多列属性详解(图片瀑布流)
index.html<!doctype html><html><head><meta charset="utf-8"><title>图片瀑布流</title><link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet"><link href="picBegin.css" re原创 2018-02-16 20:44:19 · 2359 阅读 · 0 评论 -
CSS3 - 媒体查询解析
index.html<!doctype html><html><head><meta charset="utf-8"><title>图片瀑布流</title><link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet"><link href="picBegin.css" re原创 2018-02-16 21:06:36 · 219 阅读 · 0 评论 -
CSS3 - 响应式表格项目实战
index.htmll<!doctype html><html><head><meta charset="utf-8"><title></title><link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet"><link href="begin.css" rel="styl原创 2018-02-16 21:36:12 · 341 阅读 · 0 评论 -
CSS3 - 响应式图片项目实战
index.html<!doctype html><html><head><meta charset="utf-8"><title></title><link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet"><script src="https://cdn.bootcss.原创 2018-02-17 09:32:38 · 202 阅读 · 0 评论 -
CSS3中的动画功能
1.transitions功能<!doctype html><html><head><meta charset="utf-8"><title></title><style> div{ margin-top:150px; background-color:#ffff00; color:#000; width:100px;原创 2018-02-17 21:54:06 · 247 阅读 · 0 评论 -
CSS3背景与边框相关样式
1.background-clip<!doctype html><html><head><meta charset="utf-8"><title></title><style> div{ background-color:black; border:dashed 15px green; padding:30px; co原创 2018-02-17 22:57:46 · 676 阅读 · 0 评论 -
CSS3盒子相关样式
<!doctype html><html><head><meta charset="utf-8"><title></title><style> table{ border:solid 3px #0af; } td{ border:solid 1px #f0f; }</style></head><body> 你好sha原创 2018-02-18 10:58:40 · 202 阅读 · 0 评论 -
CSS Grid 布局基础 及 快速使用CSS Grid布局，实现响应式设计
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。简介CSS Grid(网格) 布局（又称为 “Gr...原创 2019-04-19 12:19:20 · 1842 阅读 · 0 评论