qq_42309685的博客

css3分页如何使用html和css来创建分页 ul.pagination { display: inline-block; padding: 0px; margin: 0px; } ul.pagination li { display: block; float: left; } ul.pagination li a { padding:...

css3的2D转换css3转换可以对元素进行移动、缩放、转动、拉伸或拉长2D变换方法translate()rotate()scale()skew()matrix()1. translate()方法translate()方法，根据左（x轴）和顶部（y轴）位置给定的参数，从当前元素位置移动。div{ transform: translate(50px,100px); -...

1. text-shadowcss3中，text-shadow是设置文字阴影水平阴影、垂直阴影、模糊的距离、以及阴影的颜色/*给标题添加阴影*/h1 { text-shdow: 5px 5px 5px #FF0000;}2. text-overflowcss3文本溢出属性指定应向用户如何显示溢出内容div { width: 200px; border: 1px so...

css3线性渐变为了创建一个线性渐变，必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或者一个角度）。语法background-image: linear-gradient(direction, color1,color2);线性渐变-从上到下（默认情况下）div { width: 200px; height: 100px; b...

1. background-imagecss3可以通过background-image属性添加背景图片。不同的背景图片或者图像用逗号隔开，所有的图片中显示在最顶端的为第一张。div { width: 200px; height: 180px; background-image: url(1.jpg), url(2.jpg); background-poistion: left t...

1. 什么是外边距重叠外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。2. 外边距重叠演示当外边距均为正值时二者外边距相同，已经产生了垂直外边距重叠的现...

什么是css Hack百度文库定义简单地讲，css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。由于各浏览器的内核不同，所以会造成一些误差就像JS一样，一个JS网页特效，在微软IE6、IE7、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫做JS hack ，所以我们对于CSS来说他们来解决各浏览器对...

1. display: list-itemdiv { margin-left: 30px; display: list-item;}<div>1</div><div>2</div><div>3</div><div>4</div>效果如下：这个属性就像ul list-style一...

解决方法.opacity { opacity: 0.4; filter: alpha(opacity=60); /*for IE5-7*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/*for IE8*/}

自制简单的搜索栏效果如下图：CSS部分<style>body ul { margin: 0px; padding: 0px;}div { margin: 150px auto; width: 500px;}input { width: 390px; padding-left: 10px; height: 35px; border: 1px solid ...

浪费一晚上时间写了些轮播图，恶心死先看一下效果：CSS部分CSS部分和js部分同等重要，在添加属性.current吃了好多亏，得设置.current为ol li.current才能附上值。<style>body,ul { margin: 0px; padding: 0px;}.round { position: relative; width: 1190px;...

效果如下：CSS部分.wrap{ width:1200px; margin:10px auto;}.slide { height:500px; position: relative;}.slide li{ list-style: none; position: absolute; left:200px; top:0;}.s...

CSS部分.box { margin: 50px auto; width: 1150px; height: 400px; border: 1px solid #eee; overflow: hidden;}.box ul { list-style: none; width: 1300px;}.box ul li { float: left; heigh: 400px;...

word-wrap 属性允许长单词或 URL 地址换行到下一行。word-break 有很多属性，最常见的是break-all和keep-all①break-all: 允许在单词内换行。②keep-all: 只能在半角空格或连字符处换行。下面是我测试的效果图:总结：...

效果如下：CSS部分div { position: absolute; left: 10px; top: 40px; width: 100px; height: 100px; background-color: pink;}body部分<button>运动到400再回来</button><div></div><sc...

手风琴（transition）之间用了很多方法写了手风琴，js，jquery都可以，这回是用HTML5中新添加的过渡属性transition写的。（本案例没有考虑各浏览器兼容性）效果如下（oh~这该死的gif，效果真差）:代码如下：(CSS部分用到了渐变)CSS部分body, ul { padding: 0px; margin: 0px; } div { margin:...

声明：本图片文件来源于网络，侵权必删，谢谢。图片文件路径：链接：https://pan.baidu.com/s/1xdpIMCf53jd-b-xNUslvmA提取码：8nzp效果如下：功能：获取用户祝福内容贴在墙上点击任意纸条都可以置顶查看可以单击或双击关闭纸条代码如下：CSS部分body { margin: 0 auto; padding: 0px; font-si...

5s后关闭广告<div>这是一则广告<span title="关闭广告">×</span></div><script>//获取相关元素var div = document.getElementsByTagName("div")[0];setTimeout(function(){ div.style.display = "...

效果如下：代码如下：head部分<style>body, ul { margin: 0px; padding: 0px;}.header { width: 100%; height: 75px; background-color: #333; }.nav_wrap { position: relative; width: 900px; height: ...

乱七八糟一锅粥本案例，很乱，包含：监听滚动轴固定导航栏小广告的动态固定返回顶部按钮效果如下：CSS部分body, ul { margin: 0px; padding: 0px;}#ads { height: 75px; width: 100%; font: 400 25px/75px "simsun"; text-align: center; backgrou...

自制是视频播放器现在HTML5新增了很多视频制作方面的属性，比如控制音量(volume)的，视频进度(duration)的还有全屏(webkitRequestFullScreen)的，等等，很多很多，这就使得当对默认的视频播放器样式 不满意时，自己也可以做一个替换默认样式。自制播放器样式效果如下：录的比较仓促，媒体文件就一个视频，可以自己选择引用的外部文件主要有一些字体文件，jquer...

后代选择器和子代选择器的区别后代选择器：div p：匹配div中所有的p元素子代选择器：div>p：匹配div子元素中的p元素代码：CSS部分<style> .wrap { width: 400px; height: 220px; padding: 9px; font: 700/20px/40px "microsoft yahei"; ...

3D轮播图效果如下：思路：首选先写好3D轮播图的结构<div class="view"> <ul> <li> <span></span> <span></span> <span></span> <span></sp...

垂直居中本案例使用的是动画中的transform属性做的：效果如下：可以看到：小圆在大圆里面垂直居中css部分.box { position: relative; width: 400px; height: 400px; margin: 100px auto; border-radius: 50%; background-color: #08AEEA; ba...

:nth-child和:nth-of-type的区别:nth-child定义：:nth-child() 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序。/*css部分*/ul li { list-style: none; width: 200px; height: 30px; margin: 5px; } li:nth-child(...

box-sizingbox-sizing官方定义：规定两个并排的带边框的框刚一开始并不知道怎么回事。继续查阅得知它有两个属性：box-sizing:content-box:在宽度和高度之外绘制元素的的内外边距和边框box-sizing:border-box:在已设定的宽度和高度之内绘制内外边距和边框图解如下：box-sizing: border-box.wrap { he...

table选项卡需求：制作一个Table选项卡（不是CSS锚点的那种，用到了JavaScript），当鼠标滑过一个选项时显示对应部分的内容步骤和代码如下：CSS部分<style>body,ul { padding: 0px; margin: 0px;}.box { height: 400px; width: 500px; margin: 100px auto;...

首先自己从网上下载字体图标压缩包将压缩包里面的全部文件拷贝到你想要的地方在style样式表里面写上@face-font样式，这个一般都差不多，如下：/*拷贝项目下面生成的font-face*//*iconfont-phone可以自定义*//*下面的路径是因为我项目的原因，可以自定义路径*/@font-face {font-family: 'iconfont-phone'; src...

效果如下：CSS部分body, html { width: 100%; padding: 0px; margin: 0px;}.mask { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; display: none; background-color: #666;}.login {...

节点访问关系父节点

事件监听器第一种绑定方法：<button>赋诗</button><script>var btn = document.getElementsByTagName("button")[0];btn.onclick = function(){ console.log("九尺龙泉万卷书，上天生我意何如。");}btn.onclick = functi...

效果如下：CSS部分body, ol, ul { padding: 0px; margin: 0px;}body, html { height: 100%;}ul { list-style: none; height: 100%;}ul li { height: 100%; width: 100%; color: #fff;}ol { position: f...

获取节点元素（封装）效果如下图：css部分 div { width: 100px; height: 100px; margin: 5px; background-color: pink; cursor: pointer; }body部分<div></div><div class="box"></div><d...

tab选项卡（封装版）适合一个页面多个选项卡使用CSS部分<style>body ul { margin: 0px; padding: 0px;}.box { height: 400px; width: 500px; margin: 100px auto; text-align: center; border: 1px solid #ccc; overflo...

简单的倒计时效果先看一下效果图：代码如下：css部分<style> div { margin: 100px auto; width: 700px; font: 500 30px/30px "simsun"; text-align: center; color: #f00; }</style>body部分<div><...

全选和反选效果如下：代码如下：css部分<style>body { margin: 0px; padding: 0px;}.wrap { width: 300px; margin: 100px auto;}table { border-collapse: collapse; border-spacing: 0px; border: 1px solid...

cellspacing和cellpadding的区别1.cellspacing表示各单元格之间的空隙2.cellpadding表示单元格内容与单元格边界之间的距离上代码：CSS部分<style>table td{ height: 50px; width: 200px;}</style>body部分<body>//表格1<tab...

javascript制作九九乘法表代码如下：<script language="javascript">//需求：利用table表制作九九乘法表//思路：table表中的td和tr进行输入和输出，不需要换行。//步骤：1.新建一个Table表document.write("<table border='1'>");//步骤2：利用tr输出9个行，用到简单的fo...

关闭广告css部分body { margin: 0px; padding: 0px;}.banner-wrap { background-color: #000; height: 75px;}.banner { position: relative; margin: 0 auto; width: 1210px; height: 75px; background: ...

CSS制作下拉箭头今天在学会了如何用“◇”制作我们网页中常见的下拉箭头，暂时没有用iconfont。首先我们知道i,s等标签在HTML4的时候已经不再提倡使用（语义化方面），但是这些小标签的使用在很多大网站的开发中也起着举足轻重的作用。话不多说，上图：文本后面的箭头就是今天学到的。CSS部分: s, i, em { font-style: normal; t...