大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

[JavaScript] (Day-25) - jQuery 操作DOM

[JavaScript] (Day-25) - jQuery 操作DOM Learn wisdom by the follies of others.要从别人的愚行中学到聪明。 jQuery的选择器很强大,当我们获取到节点后,主要目的就是操作DOM 修改Text和HTML jQuery 对象的text()和html()方法分别获取节点的文本和原始 HTML 文本 例如,如下的HTML结构: JavaScript Python from 0 to 1 分别获取文本和 HTML: $('#test-ul li.js'). // 添加highlight这个class div.removeClass('highlight');

css奇技淫巧(一、减少重复的代码)

color: #ffffff; line-height: 1em; } rem是相对于html的font-size 做出改变的 body,html { font-size: 20px; } 2、使用 currentColor currentColor 可以说是css的一个变量,会被解析为 clole 的一个值,所以下面我们就可以给跟color同样值使用currentColor,来减少以后代码变动改动的地方: . } 4、使用预处理器 @mixin borderRadius($radius) { -webkit-border-radius: $radius;

js增删改查

js增删改查 /** * Created by xiaomage on 15/9/1. */ // 插入 //1. write document.write('hello world! // 2. var btn = document.createElement('button'); btn.style.width = '100px'; btn.style.height = '200px'; // 把按钮加入到div var div = document.getElementsByClassName('test')[0]; div.appendChild(btn); document.body.removeChild(img); // // //// 2 img.remove(); btn.remove(); a.target = '_blank'; // var dives = document.getElementsByClassName('test1'); console.log(document.body.outerHTML);

DOM的操作

DOM的操作 1.来回切换图片 !

CSS布局

CSS布局 1.float .one{ background-color: red; width: 300px; height: 200px; } .two{ background-color: yellow; width: 100px; float: left; } .three{ background-color: blue; width: 100px; float: right; } 1111111111 22222222222 22222222222 22222222222 22222222222 2.position /*子绝父相*/ .one{ background-color: red; width: 300px; height: 400px; margin: 30px; position: relative; } .two{ background-color: yellow; width: 50px; position: absolute; /*top: 20px;*/ /*left: 20px

那是我夕阳下的奔跑,电商网站PC端详情页图片放大效果实现

manifyImg').css('display','block') }) //监听鼠标离开事件 $imgWrap.mouseleave(function (e) { //当鼠标离开时,使遮罩层隐藏 $('#imgLoc').left //得到商品大图的相对于页面的纵坐标 var imgY=document.getElementById('imgMainWrap').css('left',maskX) $('#imgLoc').css('top',maskY) //设置放大镜中图片的位置 $('.css('top',maginfyY) }) 以下是HTML结构div.detail-img a(href='javascript:;'/images/detail/band/b1.jpg')#imgMain div#imgLoc div.manifyImg img(src='.

基于jQuery的页面便签插件--一个可以任意拖拽,保存,删除,导入,定制颜色的页面便签

$('body').sticker({ color:'purple', //便签默认是黄色,可以选择pink,green,blue,purple width:'200px', //便签的宽度 height:'300px', //便签的高度 saveStickerCallback: function(sticker){ //保存便签的回调方法,参数是sticker对象,包括便签的位置和内容信息 alert('sticker info: left ' + sticker.left + ',top ' + sticker.top + ',content ' + sticker.content);

js入门动态添加删除标签

js入门动态添加删除标签 js、动态添加删除 运用下边几个标签实现动态创建标签,删除标签,大家要考虑的是内存里边发生的情况 createElemen创建元素; appendChild追加元素; parentNode返回指定节点的父节点; removeChild删除指定的元素节点。 第一步 HTML写法 动态创建元素 css设置属性 #box{ width:200px; var del=document.createElement("input"); del.type="button"; wenben=oTxt.value;

蚂蚁线-css(3)

蚂蚁线-css(3) 主要知识点: linear-gradientanimationbackground-clip:text 纯css实现类似ps中的蚂蚁线 效果图片 myx.png html文件 蚂蚁线 css文件 .item-box { width: 400px;line-height: 200px;text-align: center; background: linear-gradient(#efefef,#ccc) padding-box, linear-gradient(135deg, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 50%, rgba(1, 1, 1, 1) 50%, rgba(255, 255, 255, .text{ height: 100%; font-size: 90px; } @keyframes bg { 0% { background-position: 0 0;

flex-direction属性

这三个参数的意思。。由于100+200+300=600 300px所以第一个参数是没用的。随便你写啥数字都行。第二个参数是0,说明超出的部分也不会被压缩。当然这里由于是lex-direction: column。第三个参数实际表示的是高度。 #flex{ flex-direction: column;list-style:none;background:#888;结果 image.png 如果没有flex-direction:column结果是可以看到超出了父容器(箭头所指位置) image.png 总结 还是很简单的嘛!

flex-grow属性

怎么算的呢?flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。本例中b,c两项都显式的定义了flex-grow,flex容器的剩余空间分成了4份,其中b占1份,c占3分,即1:3flex容器的剩余空间长度为:600-200-50-50=300px,所以最终a,b,c的长度分别为:a: 50+(300/4)=200pxb: 50+(300/41)=125pxa: 50+(300/43)=275px image.png 总结 就是把父容器剩余的给按比例分配一下

flex-shrink属性

flex-shrink属性 干嘛的? 比如你设置了一个父元素400px,然后来了三个子元素,宽度分别200px。 那么加起来600px。我擦,这不脑残么? 超了怎么办?还有得救。flex-shrink 按比例压缩。 h1{font:bold 20px/1.5 georgia,simsun,sans-serif;list-style:none;} #flex li:nth-child(1){background:#888;b同理40px;c压缩200(3/5)=120px; image.png 总结 看明白了就是soeasy这个属性菜鸟教程讲的不清楚 参考 flex-shrink - CSS3参考手册

php 图片瀑布流

php 图片瀑布流 1.test.php代码(html js) 瀑布流测试 #wf-main{position: relative;} #wf-main li{padding: 15px 0 0 15px; float:left;} "; } ?" limit 5;"; $re = mysql_query($query); while($arr = mysql_fetch_assoc($re)) { $arry [] = $arr; } exit(json_encode($arry));//这里一定要写成exit 之前写成return 一直报错,ajax远程调程序,得到数据。要停止程序并返回到ajax 文件目录 结果

截图图片两边使图片在盒子里居中的三种方法

img-box1 { width: 200px; left: 50%;2.使用display:flex属性。 不得不说flex非常强大,设置了display:flex以后,可以通过简单设置justify-content以及align-items来规定内部元素的呈现方式而不用做任何的计算。 .img-box2 { width: 200px; -webkit-justify-content: center; /* Safari 6.1+ */ align-items: center;3.大比例负margin 不得不说最后一种方法略微诡异,一般margin:0 -100%;img-box3 { width: 200px; margin: 0 -300%;

css双飞 翼布局

css双飞 翼布局 引言 曾经在江湖上盛传的双飞翼布局,无人不知,无人不晓。大概的意思就是左右两边盒子固定宽度,剩下中间部分自由缩放,考虑到一般网站的主体部分在中间,用户首先需要看到的是中间部分。所以将中间的div放在最上方,如下图所示。 双飞翼布局经典实现 // HTML部分 主内容栏自适应宽度 侧边栏1固定宽度 侧边栏2固定宽度 //css部分 .

[翻译]Flex Basis与Width的区别

height: 200px;充在容器内部: container-items01 上面的示例就是当flex-basis没有被指定,默认值是flex-basis: auto,也就意味着items以宽度width(200px)为准。 设置一个Flex Basis值 让我们看看当给这些已经设置固定宽度width的items设置一个flex-basis值会发生什么。 container-items02 item { width: 30px; max-width: 100px; min-width: 250px;

元素背景几种样式-css学习笔记

元素背景几种样式-css学习笔记 主要知识点: backgroundradial-gradientlinear-gradient说明:一个元素可以设置多重背景图像(背景色 不能设置多组)。 效果图片 bg-img.png html文件 css文件 html,body{background-color: #efefef} div{ width: 200px; background-size: 50px 50px, 50px 50px,10px 10px, 10px 10px;15) 50%, rgba(255, 255, 255, . } @keyframes bg-stripes { 0% { background-position: 0 0; } 100% { background-position: 30px 0;

解决给父级div设置padding让子级元素居

解决给父级div设置padding让子级元素居 在做网页过程中,我们常常会遇到让子级块状div居中的问题,如下图 css3_padding1.png 代码 无标题文档 .box{ margin: 20px 20px; height: 200px; background: #00A72B; border: 5px solid #007FFF;box-content{ width: 50px; background: #3399FF; box-sizing: border-box;结果如图 css3_padding3.png 下面只要我们设置padding为70px,就可以让它垂直居中啦,是不是很给力啊! css3_padding4.png

【CSS3盒模型display:box的应用】

【CSS3盒模型display:box的应用】 CSS3盒模型display:box的应用 CSS3新增属性 “display:box; width: 500px; margin: 100px auto; } div:nth-child(1) { -webkit-box-flex: 3; background: orange;*/ width: 200px; } 应用:垂直布局 body { display: -webkit-box; width: 300px; margin: 50px auto;

jQuery

jQuery 1.jQuery简介及使用 jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。(write less,do more.) jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 下载地址 我用的是jQuery1.12.4版本 uncompressed:未压缩版本,适用于开发环境,方便查看源代码minified:压缩版本,适用于生产环境 jQueryapi文档left: 400px;