随笔分类 -  html+css

bootstrap4强大的栅格功能
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 阅读全文
posted @ 2017-08-17 16:24 cacti_vc 阅读(2187) 评论(0) 推荐(0)
svg放图片
摘要：<svg width="118" height="42"> <image xlink:href="/Content/img/logo.svg" src="/Content/img/logo.png" width="118" height="42" /> </svg> 阅读全文
posted @ 2017-07-13 13:54 cacti_vc 阅读(451) 评论(0) 推荐(0)
把网页变成黑白（兼容谷歌、火狐、IE等浏览器）
摘要：把网页变成黑白同时兼容谷歌、火狐、IE等浏览器其实也是一个灰色滤镜的应用。 在CSS里面写入以下代码即可： html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -m 阅读全文
posted @ 2016-03-03 15:59 cacti_vc 阅读(3306) 评论(0) 推荐(0)
谷歌CSS风格规范
摘要：CSS 样式规范主要就是更进一步的最佳实践以及字节节约技术： 1、使用有效的CSS，除非是bugs处理或专属语法（浏览器私有前缀） 2、使用短ID或类命名，但确保他们不要太过隐晦，或直白（如 #blue-button ） 3、大型项目使用前缀，如 #xyz-help,.xyz-column 4、选择 阅读全文
posted @ 2016-03-03 14:53 cacti_vc 阅读(191) 评论(0) 推荐(0)
学习——获取元素css值之getComputedStyle方法熟悉
摘要：本文转自：http://www.zhangxinxu.com/wordpress/?p=2378 一、前言 我们都用过jquery的css()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。 对于那些只想混口饭吃的人来讲，晓得css()如何使用就足够 阅读全文
posted @ 2016-03-02 15:05 cacti_vc 阅读(201) 评论(0) 推荐(0)
学习——伪类+js实现css3 media queries跨界准确判断
摘要：本文转自：http://www.zhangxinxu.com/wordpress/?p=2387 media queries可以让设备在不同尺寸下应用不同的css样式、布局等。以适应手持设备、普屏显示器、宽屏显示器，以及未来冰箱上的联网显示器，汽车上的数码设备等。然后，仅仅通过css做布局可能无法应 阅读全文
posted @ 2016-03-02 13:30 cacti_vc 阅读(261) 评论(0) 推荐(0)
学习——display：none和visibility：hidden的区别在哪？
摘要：文章转自：http://www.zhangxinxu.com/wordpress/?p=2191 一、display：none和visibility：hidden的区别在哪？ 1、空间占据 2、回流与渲染 3、株连性 第一点，想必都知道；第二点，display：none隐藏产生reflow和repa 阅读全文
posted @ 2016-02-23 14:12 cacti_vc 阅读(461) 评论(0) 推荐(0)
CSSOM视图模式（CSSOM View Moudle）相关整理
摘要：本文非原创，学习并转自：http://www.zhangxinxu.com/wordpress/?p=1907 一、Window视图属性 这些属性可以hold住整个浏览器窗体大小。微软则将这些API称为“Screenview 接口”。包括：innerWidth 属性和 innerHeight 属性p 阅读全文
posted @ 2016-02-16 14:49 cacti_vc 阅读(288) 评论(0) 推荐(0)
我所知道的几种等高布局
摘要：第一种：absolute与等高布局 HTML+css <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < 阅读全文
posted @ 2016-01-28 16:42 cacti_vc 阅读(236) 评论(0) 推荐(0)
解决页面在苹果手机滑动时的卡顿现象
该文被密码保护。
posted @ 2016-01-19 17:12 cacti_vc 阅读(3) 评论(0) 推荐(0)
display:table-cell两列自适应布局
摘要：html： <div class="box"> <img src="img/love2.png" class="fle" /> <div class="con"> 大家放声大哭放假啊速度快放dkfjaldjfffffffffffff </div> </div> css: .box{width:60% 阅读全文
posted @ 2016-01-18 14:40 cacti_vc 阅读(960) 评论(0) 推荐(0)
解决iphone手机$(document).click()不起作用的问题
该文被密码保护。
posted @ 2015-09-18 15:27 cacti_vc 阅读(2) 评论(0) 推荐(0)
布局问题——左固定右适应、右固定左适应……
该文被密码保护。
posted @ 2015-09-17 16:08 cacti_vc 阅读(11) 评论(0) 推荐(0)
清除select标签在移动端的默认样式
摘要：select{-webkit-appearance:none;appearance:none;} 阅读全文
posted @ 2015-05-08 10:57 cacti_vc 阅读(1075) 评论(0) 推荐(0)
clear清浮动
摘要：转自：http://www.cnblogs.com/dolphinX/p/3508869.html在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼1 浮动带来布局的便利，却也带来了新问题 1 2 3 4 5 Clear f... 阅读全文
posted @ 2015-05-04 15:22 cacti_vc 阅读(148) 评论(0) 推荐(0)
meta标签的使用
摘要：元数据(Metadata)是数据的数据信息.标签提供了HTML文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。1、定义文档关键词，用于搜索引擎：2、定义web页面描述：3、定义页面作者：4、每30秒刷新页面:5、360浏览器meta标签使用--使用极速模式（即webkit内核）若页面需默认... 阅读全文
posted @ 2015-04-30 10:33 cacti_vc 阅读(260) 评论(0) 推荐(0)
网页地址栏显示图标
该文被密码保护。
posted @ 2015-03-17 17:05 cacti_vc 阅读(1) 评论(0) 推荐(0)