HTML/CSS
文章平均质量分 88
后除
不知不问
展开
-
PWA 实践/应用(Google Workbox)
PWA(Progressive Web App – 渐进式网页应用)是一种理念,由 Google Chrome 在 2015 年提出。PWA 它不是特指某一项技术,而是应用多项技术来改善用户体验的 Web App,其核心技术包括 Web App Manifest、Service Worker、Web Push 等,用户体验才是 PWA 的核心。原创 2022-03-11 14:27:24 · 1266 阅读 · 0 评论 -
Bootstrap实战 - 单页面网站
单页面结构简单、布局清晰,常常用来做手机 App 或者某个产品的下载介绍页面。现在,展示型网页整体趋向于单页网站设计,这样一次性把核心信息展现出来,对于用户来说更加直观和简单,能够快速了解一个产品。原创 2022-03-03 20:55:06 · 1103 阅读 · 0 评论 -
Bootstrap实战 - 评论列表
Bootstrap 是当前很受欢迎的前端框架,如何用 Bootstrap 快速完成一个网站?社交媒体网站盛行,人们常常会使用评论表达自己的观点,评论功能已然成为网站的一部分。一个基础的媒体对象由四个部分组成...原创 2022-01-26 22:36:01 · 2822 阅读 · 0 评论 -
Bootstrap实战 - 注册和登录
注册和登录在社交和商业网站中是必不可少的一个部分。原创 2022-01-13 22:50:29 · 4253 阅读 · 0 评论 -
Bootstrap实战 - 响应式布局
响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的角色。在响应式布局中,要求导航栏能够根据终端屏幕大小显示不同的样式。原创 2022-01-11 23:42:10 · 1952 阅读 · 0 评论 -
前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)
页面为何会卡?等待时间长?看起来卡?特别是对于首屏资源加载中的白屏时间,用户等待的时间就越长,用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出,“人类将被动等待高估了 36%”。这意味着用户感觉到的等待时间比开发工具记录的长得多。原创 2021-12-28 15:24:26 · 2756 阅读 · 0 评论 -
CSS3 边框 border-radius
一、官方解释设置或检索对象使用圆角边框。提供 2 个参数,2 个参数以“/”分隔,每个参数允许设置 1~4 个参数值,第 1 个参数表示水平半径,第 2 个参数表示垂直半径,如第 2 个参数省略,则默认等于第 1 个参数。水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。如果只提供一个,将用于全部的于四个角。如果提供两个,第一个用于上左(top-left)、下右(bottom原创 2021-11-18 23:17:24 · 114 阅读 · 0 评论 -
前端常用库 CDN
本文介绍了前端开发中常用的一些库的 CDN 资源,包括 jQuery、Bootstrap、Vue.js 等流行框架和库。我们将探讨这些库的功能、使用方法以及如何通过 CDN 进行快速引入。通过使用 CDN,可以显著提高网站的加载速度和性能,为开发者提供便利。原创 2021-02-18 11:35:15 · 424 阅读 · 0 评论 -
HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样。 标准 webkit Firefox IE Element.requestFullscreen() webkitRequestFullscreen mozRequestFullScreen msRequestFullscreen Document.exitFullscre原创 2018-01-02 11:57:52 · 1192 阅读 · 0 评论 -
CSS3 Flex布局(项目)
一、order属性order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。二、flex-grow属性flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。三、flex转载 2017-10-23 22:59:51 · 267 阅读 · 0 评论 -
CSS3 Flex布局(容器)
一、flex-direction属性row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。.box{ background: #0074D9; display: flex; flex-direction: row-re转载 2017-10-23 21:54:28 · 520 阅读 · 0 评论 -
HTML友情链接代码
友情链接: #">One | #">Two | ">Three | # ">Four |&nb原创 2017-05-16 17:08:14 · 12757 阅读 · 0 评论 -
CSS伪类选择器active模拟JavaScript点击事件
一、说明设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active。另:如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现。超链接的4种状态,需要有特定的书写顺序才能生效。注意,a:hover必须位于a:li原创 2017-07-17 10:17:09 · 2862 阅读 · 0 评论 -
理解CSS3属性transition
一、说明1.1 定义和用法transition 属性是一个简写属性,用于设置四个过渡属性:transition-property:规定设置过渡效果的CSS属性的名称。 transition-duration:规定完成过渡效果需要多少秒或毫秒。 transition-timing-function:规定速度效果的速度曲线。 transition-delay:定义过渡效果何时开始。原创 2017-07-16 23:45:48 · 455 阅读 · 0 评论 -
CSS3::nth-child与:nth-of-type区别
一、:nth-child1.1 说明:nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素的类型。n可以是数字、关键词或公式。 注意:如果第N个子元素与选择的元素类型不同则样式无效!1.2 示例div>p:nth-child(2){ color:red;} 我是第1个段落 我是第2个段落元素,2、父元素的第二个元素。这里原创 2017-06-24 18:55:00 · 443 阅读 · 0 评论 -
CSS3边框border-radius
一、官方解释设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数。水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。如果只提供一原创 2017-07-12 10:01:26 · 357 阅读 · 0 评论 -
解决CSS3多列样式column-width布局时内容被截断、错乱
一、问题使用CSS3的column-width: auto | 属性时,出现排列的内容被截断,出现错位的现象。二、原因需要为图片容器设置高度,不然会崩掉。三、解决方法给需要分列的容器加上height:100%;overflow: auto;。解决CSS3多列样式column-width布局时内容被截断、错乱原创 2017-06-20 22:41:52 · 2763 阅读 · 0 评论 -
负边距的应用
HTML: tr> td class="PX15 widthTD1 textRight heightFirst" valign="top">div class="paddingTop12">机器尺寸:div>td> td class="PX15 widthTD2原创 2017-05-16 17:07:51 · 173 阅读 · 0 评论 -
JS表单提交
测试一:function submit(){var form1=document.getElementById("form1")form1.action="/manager/alipay/alipay.asp";form1.submit();}测试二:function test(){ document.getElementById("myform").submit(); a原创 2017-05-16 17:09:08 · 142 阅读 · 0 评论 -
IE模式下背景图片不显示
初衷是想给这个提交按钮加上背景图片,用了以下css样式:1 .subtn input {2 background-attachment: scroll;3 background-image: url(images/btn.gif);4 background-repeat: no-repeat;5 background-position: 0px 0px;原创 2017-05-16 17:09:36 · 2769 阅读 · 0 评论 -
HTML/CSS/JS初始化
CSSjQuery2.1.1LayerBootstrap原创 2017-05-16 17:10:05 · 224 阅读 · 0 评论 -
HTML-Table-Td固定宽度使内容换行
table style="TABLE-LAYOUT: fixed;" td style="WORD-WRAP: break-word;WIDTH:200px;"原创 2017-05-16 17:10:15 · 1075 阅读 · 0 评论 -
CSS图片居中,多余隐藏
/*外层DIV*/div {position: relative;overflow:hidden;width: 显示宽度px;}/*left=50%刚好在中间,margin-left=往前移动图片一半,这是图片就是居中了*/img {border:none;width: 图片宽度px;position:absolute;top:0;left:50%;margin-left: -图片宽度一半p原创 2017-05-16 17:10:59 · 1002 阅读 · 0 评论 -
DIV背景图片
.bigY{ position:absolute; width:95px; height:93px; visibility:visible; right: 277px; top: 599px; border: 0px; background-image: url(../images/picBigY.png); background-原创 2017-05-16 17:11:52 · 594 阅读 · 0 评论 -
分界线<hr/>
原创 2017-05-16 17:12:11 · 579 阅读 · 0 评论 -
box-shadow阴影效果
.shadowBox{ -moz-box-shadow:5px 5px 5px #A9A9A9; -webkit-box-shadow:5px 5px 5px #A9A9A9; box-shadow:5px 5px 5px #A9A9A9;}原创 2017-05-16 17:12:47 · 310 阅读 · 0 评论 -
CSS标签内多余内容隐藏
CSS:1 2 .mazey{width:100px;}3 .nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}4 HTML:1 div class="mazey nowrap">http://www.mazey.net/baby/blog/#http://www.mazey.net/baby/bl原创 2017-05-16 17:13:54 · 1146 阅读 · 0 评论 -
CSS:text-decoration参数说明
CSS:text-decoration(下划线参数)underline:下划线效果:下划线overline:上划线效果:上划线line-through:贯穿线效果:贯穿线blink:闪烁效果:闪烁(老版火狐支持,现在主流浏览器均不支持)none:无装饰效果:无装饰原创 2017-06-03 10:53:38 · 1135 阅读 · 0 评论 -
解决IE,z-index失效
在影响显示顺序的模块加上:style="position:relative;z-index:-1;"原创 2017-06-03 11:36:03 · 481 阅读 · 0 评论 -
解决table插入tr错位
table中用JavaScript插入隐藏(即display="none";)的tr时,别用display="block";换成display="";原创 2017-06-03 11:49:43 · 1240 阅读 · 0 评论 -
图片居中,多余隐藏
显示1000px,图片1920px。1 /*外层DIV*/2 div{position:relative;overflow:hidden;width:1000px;}3 /*left=50%刚好在中间,margin-left=往前移动图片一半,这是图片就是居中了*/4 img{border:none;width:1920px;position:absolute;top:0;left:50原创 2017-05-16 17:07:11 · 495 阅读 · 0 评论