background

CSS3对响应式设计非常有用：使用CSS3替代图片，在有带宽限制的网页中可有效减少http请求（从而使网页加载更快），并可使网页更灵活、更容易维护。 在开发CSS3时，要记住添加相关的浏览器私有前缀以保证最广泛的浏览器兼容。 1.文字阴影 　　1.基本语法 　　.element{ 　　　　text-shadow:1px 1px 1px #cccccc; 　　} 　　记住，阴影值的速记规则永远是先右再向下。因此，第一个值指的是右侧阴影的大小，第二个值指的是下方阴影的大小，第三个值指的是模糊距离（即阴影从开始变淡到完全消失的距离），最后一个值是阴影颜色。 　　2.HEX、HSL或RGB颜色都可以,同时要考虑浏览器兼容性。 　　text-shadow:4px 4px 0px #404442; 　　text-shadow:4px 4px 0px hsla(140,3%,26%,0.4); 　　3.px、em或rem都行 　　　　阴影值也可以使用em或rem单位。如下代码 　　　　text-shadow:.039215686em .039215686em 0em #dat7d7; 　　4.取消文字阴影： 　　text-shadow:none; 　　5.左上方文字阴影 　　text-shadow:-4px -4px 0px #dad7d7; 　　6.制作浮雕文字阴影效果 　　　　text

在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签 1. children(): 子标签中找 2. find() : 后代标签中找 3. parent() : 父标签 4. prevAll() : 前面所有的兄弟标签 5. nextAll() : 后面所有的兄弟标签 6. siblings() : 前后所有的兄弟标签　 需求: 1. ul标签的第2个span子标签 2. ul标签的第2个span后代标签 3. ul标签的父标签 4. id为cc的li标签的前面的所有li标签 5. id为cc的li标签的所有兄弟li标签 var $ul = $("ul"); //1. ul标签的第2个span子标签 $ul.children("span:eq(1)").css("background","red"); // 2. ul标签的第2个span后代标签 $ul.find("span:eq(1)").css("background","red") // 3. ul标签的父标签 $ul.parent().css("background","red") // 4. id为cc的li标签的前面的所有li标签 var $li = $("#cc"); $li.prevAll("li").css("background","red"); // 5. id为cc的li标签的所有兄弟li标签 $li

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。 块级元素与行内元素 首先谈谈人们经常提及的 块级元素 和 行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在 hongsediv下方，而不是右方 <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> 而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度

offset相对于页面来说 position相对于上层的父元素 获取/设置标签的位置数据 * offset(): 相对页面左上角的坐标 * position(): 相对于父元素左上角的坐标 1. scrollTop(): 读取/设置滚动条的Y坐标 2. $(document.body).scrollTop()+$(document.documentElement).scrollTop() 读取页面滚动条的Y坐标(兼容chrome和IE) 3. $('body,html').scrollTop(60); 滚动到指定位置(兼容chrome和IE) //////////////// scrollTop():实现回到顶部功能 $ ( '#to_top' ).click( function () { // 瞬间滚到顶部 //$('html,body').scrollTop(0) //循环定时器实现缓慢移动; var distance = $ ( 'html' ).scrollTop()+ $ ( 'body' ).scrollTop() // 滚动条移动的长度 var times=500 // 总时间500 var smalltime=50 // 间隔时间 var samlldis=distance/(times/ smalltime) // 设置定时器循环调用； var tim=

<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT> <script> var tempColor = "FFFFFF"; function returnColor(){ var Hcolor = dlgHelper.ChooseColorDlg(tempColor).toString(16); with(event.srcElement){ value = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor; style.backgroundColor = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor; } tempColor = Hcolor } </script> <input type="button" value="FFFFFF" size="12" onclick="returnColor()" style="background-color: #FFFFFF"> method - 2 : // --------------

前言 前端一直是我的一个很大的缺憾，这段时间痛顶思痛，决定好好的把前台的东西加强，这不，在学习了一段时间js之后，在做一些小练习，却发现最基本的一些css知识却还不了解，所以便有了这篇博文。 块级元素与行内元素 首先谈谈人们经常提及的块级元素和行级(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在hongsediv下方，而不是右方 <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> 而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度，这就是为什么我们一次次的在span上设置height属性不好使的原因。 简单了解了这些只是，让我们看看dispisplay常用的几个属性。 值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline

使用方法，狠狠的点击下面链接 http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class="bd"> <ul> <li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li> <li _src="url(images/2.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li> <li _src="url(images/3.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li> <li _src="url(images/4.jpg)" style="background:#98918E center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li> <li _src="url

SuperSlidev2.1 轮播图片和无缝滚动 使用方法点击链接：http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class="bd"> <ul> <li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li> <li _src="url(images/2.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li> <li _src="url(images/3.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li> <li _src="url(images/4.jpg)" style="background:#98918E center 0 no-repeat;"><a href="http://www.17sucai.com"></a></li>

<template> <div class="item_detail"> <van-swipe :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="(item,index) in goods.pictureList" v-bind:key="index"><img :src="item.url"></van-swipe-item> </van-swipe> <div class="buy-area"> <h2 class="title"> <!-- OGAWA 奥佳华 舒行者全自动按摩椅 OG-7105 泰式定 位拉抻按摩椅 --> {{goods.title}} </h2> <p class="des"> <!-- 透彻拉筋放松,舒畅全身；如儿时摇篮般的舒适体验；压肩揉按，抚慰颈部疲劳 --> {{goods.desc}} </p> <div class="point"> {{goods.minScorePrice}} 积分 </div> </div> <div class="detail-title"> <span> 商品详情 </span> </div> <div class="content" v-html="goods.detail"> </div> <van-goods-action>

css中默认会继承的属性： 一是 文本相关 的属性，具体有：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing、 二是 列表相关 的属性，具体如下：list-style-image、list-style-position、list-style-type、list-style. 还有一个属性比较重要的是 color 属性。 ·········································································································· 一、无继承性的属性 1、display：规定元素应该生成的框的类型 2、文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向 3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin