html css
关注
分享
扫一扫
shl999
一枚前端菜鸟
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
webkit autofill 改变背景颜色
谷歌浏览器的提示框选中，有黄色背景，如何去掉呢？方法一：input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #3c3c41 inset; -webkit-text-fill-colo原创 2017-01-19 11:39:52 · 853 阅读 · 0 评论 -
纯css实现轮播效果
转载自： http://blog.youkuaiyun.com/rtian001/article/details/48474677#comments改动了一部分 方便自己以后使用<!DOCTYPE html><html><head> <title> 纯CSS代码实现图片轮播 </title> <meta charset="utf-8" /> <style type="text/cs转载 2016-08-30 15:22:00 · 3390 阅读 · 0 评论 -
会话框的 三角写法
<div class="a"></div><style>.a{position:relative;}.a::before{condent="";display:block;width:15px;height:15px;border-top:1px solid #ccc;border-left:1px solid #ccc;transform:rotate(-45deg);p原创 2017-02-19 10:28:55 · 306 阅读 · 0 评论 -
动画
写着玩<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text</title></head><style> body, html { background-color: #171717; } .box2 { width: 200原创 2017-02-14 15:36:22 · 330 阅读 · 0 评论 -
两个元素垂直居中
.val { font-size: 16px; display: inline-block; vertical-align: middle; line-height: normal; text-align: left; } .search-cl原创 2017-02-05 16:46:04 · 592 阅读 · 0 评论 -
居中问题
<div class="page"><ul class=""page-list><li></li><li></li></ul></div><style type="text/css">.page{display:block;text-align:center;}.page-list{display:inline-block;}</style>这样无论ul多宽 都可以居中了，总的来原创 2016-09-08 12:05:27 · 323 阅读 · 0 评论 -
元素水平垂直居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>垂直居中示例</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="ht原创 2017-03-17 18:11:50 · 369 阅读 · 0 评论 -
fullpage使用js增加动画
jQuery(document).ready(function ($) { $('.fullpager').fullpage({ //实例化完执行的回调函数 afterRender: function () { $(".fullpage:first-child").find(".animated").ea原创 2017-03-30 17:13:47 · 3062 阅读 · 1 评论 -
移动端自适应问题
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’, recalc = function () { var client原创 2017-03-31 16:17:31 · 446 阅读 · 0 评论 -
图片错误处理函数，基于joomla
<script> function imgErrorHandling(local_base_host, local_base_path, server_path) { var img_src, regexp = new RegExp("^" + local_base_path); jQuery("img").error(function () {原创 2017-03-13 09:31:58 · 350 阅读 · 0 评论 -
百度分享的微信二维码位置处理
var baiduShare = { ele: { weixinEle: $(".article-content .bds_weixin") }, init: function () { baiduShare.ele.weixinEle.bind("click", baiduShare.clickFun)原创 2017-04-12 16:05:19 · 3979 阅读 · 1 评论 -
浏览器内核 兼容问题--总结
先说浏览器内核：Trident内核： ie 遨游、世界之窗 \9 \0 + *_Gecko内核： firefox -moz-Webkit内核： safari chrome -webkit-presto内核： opera -0-注：最新的原创 2016-08-30 15:27:46 · 375 阅读 · 0 评论 -
html5 学习笔记
w3c是个好网站 要多去看看1.video 视频 2.audio 音频 3.Drag drop 拖放4.canvas 绘制图像 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript内部完成。 JavaScript 使用 id 来寻找 canvas 元素，varc=document.getElementByIdx_x("myCanva原创 2016-08-30 15:27:52 · 275 阅读 · 0 评论 -
css3 的一些新属性
1.边框新属性 border-radius border-shadow border-image 2.背景新属性 background-size background-origin –规定背景图片的定位区域 3.文本效果 text-shadow(文本阴影) word-warp(强制换行) 4.字体 @font-face 5.2D转换 transform转载 2016-08-30 16:01:17 · 337 阅读 · 0 评论 -
浏览器兼容问题，兼容ie8+，火狐
兼容ie：margin-top:-1px\0; 兼容火狐： @-moz-document url-prefix() { margin-top:-1px; }原创 2016-12-12 16:44:47 · 3042 阅读 · 0 评论 -
在移动端，body:overflow 无效的问题
在手机浏览器上，给body增加overflow:hidden;width:100%;height:100% 无效的问题。在网上找了几种解决办法1、body加position:fixed; —-可行2、给要滚动的元素添加一个父级，设定高度，overflow：auto；3、html,body{height:100%;overflow:hidden}后两种没有实验 ，不知道可行不可行。原创 2016-11-28 10:03:34 · 9815 阅读 · 0 评论 -
hover 右侧的 | 隐藏
实现下图所示效果 鼠标经过的时候没有右侧的 |。一般的方法是用border-right。可是鼠标经过后一个a链接的时候，border-right还在。后来想的是在a链接下面加span标签，可是实现起来总是不对 a:hover span{display：none} 仅仅是鼠标经过的时候这个a链接下面的span隐藏，当鼠标 hover后一个a链接的时候span 还是在。同border-rig原创 2016-11-09 16:08:34 · 490 阅读 · 0 评论 -
css 实现蒙版效果
样式：<style> .back {background:url(images/coupon-logo.gif) no-repeat;} .top {height:100px;background-color:#fff;filter:Alpha(Opacity=60);opacity:0.6;}</style>html<div class="back"> <div clas原创 2016-11-08 10:28:16 · 48783 阅读 · 1 评论 -
css水平垂直居中三种实现方法
方法一：使用dispaly：inline-block 和 vertical-align 还有伪类实现.block1{text-align:center;border:1px solid red;height:600px; }.block1:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-原创 2016-08-30 16:28:32 · 1058 阅读 · 0 评论 -
背景渐变 gradient
div { width:100px; height:100px; -webkit-transform:rotate(90deg);}div:before {content:""; display:block; width:100px;height:50px; margin-top:10px;padding:10px 10px 0 10px; box-sizing:border-box; bord原创 2016-08-30 16:20:06 · 261 阅读 · 0 评论 -
transform的一些属性
.div1{transform: rotate(45deg)}.div1 span{transform: rotate(45deg);display: inline-block}.div2{transform:scale(0.5,1)}.div3{transform:skew(30deg,20deg)}.div4{transform:translate(45px,50px)}.div5{t原创 2016-08-30 16:14:54 · 538 阅读 · 0 评论 -
html css实现左右两列固定宽度中间自适应效果
实现有很多方法 浮动，固定定位，和css布局，这篇文章通过浮动和display:table-sell 两种方法来实现。1.float和margin css部分：.main{overflow:hidden;min-width:405px;}.left,.right,.center { color: #fff;word-wrap: break-word;min-height:500px;}原创 2016-08-30 16:12:12 · 4457 阅读 · 0 评论 -
Animate css3动画 使用文档
1.先引入animate.min.css 文件。 下载网址：http://apps.bdimg.com/libs/animate.css/3.1.0/animate.min.css2.效果实现有两种方式：2.1给指定的元素加上类 “animated bounceOutLeft” ，animate是基本类 必须加上，而后一个就是根据自己想要的效果来增加类。 2.2添加动态效果，可以用jq原创 2016-08-30 16:08:39 · 1445 阅读 · 0 评论 -
小知识点 清除浮动
.row::after { display: table; clear: both; content: "";}转载 2016-08-30 16:02:45 · 437 阅读 · 0 评论 -
placeholder的颜色兼容写法
input:-moz-placeholder, input:-ms-input-placeholder, input::-moz-placeholder, input::-webkit-input-placeholder textarea:-moz-placeholder, textarea:-ms-input-placeholder, textarea::-moz-placehol原创 2017-04-06 12:00:52 · 647 阅读 · 0 评论