background | 易学教程

精灵图的使用方法

阅读更多关于精灵图的使用方法

精灵图，背景图，图片是一个网页的重要组成部分，所以学习与整理就变得有点重要了。精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。制作精灵图 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。大部分情况下，精灵图都是网页美工做。我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。我们精灵图的宽度取决于最宽的那个背景。我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 25px; height: 25px; background: url

14天入门JavaScript-day one

阅读更多关于 14天入门JavaScript-day one

第一天总结的是一些HTML DOM 事件中的鼠标事件  js事件中主要的都是对样式的显示隐藏， display:none or display:block 其中最简单的就是使用 onclick 事件对属性进行显示隐藏或者改变 class 属性 demo1 alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。语法 alert(message) 要在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本） <input type="button" value="按钮" onclick="alert('我是一个消息框')"> demo2 鼠标移入移出显示隐藏div块 <input type="checkbox" onmousemove="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"> <div id="div1" class="dsn">显示隐藏div块</div> 更多的鼠标事件属性描述 DOM onclick 当用户点击某个对象时调用的事件句柄。 2 oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发

未定义标识符cvCanny

阅读更多关于未定义标识符cvCanny

加头文件: #include <opencv2/opencv.hpp> #include "stdafx.h" #include <opencv2/opencv.hpp> #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <opencv2/video/background_segm.hpp> #include <iostream> #include <math.h> 【转载自】未定义的标识符blur ，Canny，cedge，cvtColor_qq_35366466的博客-CSDN博客 https://blog.csdn.net/qq_35366466/article/details/83387069 来源： https://www.cnblogs.com/wxl845235800/p/12098129.html

[PYQT]QSS使用，附自己的模板（算是扒OSX UI）

阅读更多关于 [PYQT]QSS使用，附自己的模板（算是扒OSX UI）

题记最近在做Python GUI开发，一直觉得自己的界面LOW爆了，所以想找一些好的资源，但真心没有太好的，最终只找到一个QSS编辑器，一个API，一个OSX的Sketch资源文件。就有了这个QSS文件，本人没有UI经验，调整了一套，算是对自己一个交待吧。一个QSS编辑器： https://github.com/hustlei/QssStylesheetEditor QssStylesheetEditor 支持预览，控件很全。一个API： https://doc.qt.io/qt-5/stylesheet-examples.html 官方例子。能用的都有了。源文件的位置在码云： https://gitee.com/aocshallo/mac-qss.git 1 QWidget{ 2 color: #222; 3 background-color: #C8F5F5F5; 4 } 5 6 QFrame, QLabel, QToolTip { 7 border: 1px solid #8D8D91; 8 border-radius: 5px; 9 padding: 1px; 10 background:#FFFFFF; 11 } 12 QLabel { 13 border: 0px solid #8D8D91; 14 padding: 2px; 15 background

css3选择器

阅读更多关于 css3选择器

CSS3 css3属性选择器根据属性名查找某个标签(E[attr])，代码如下 <style> p {height: 30px; border: 1px solid black;} // 查找含有属性test的p标签 p [test] {background: red;} </style> <body> <p test="dhl">dhl</p> <p test="xb">xiaobei</p> </body> 查找某个属性名为固定值的某个标签(E[attr="value"])，测试代码如下： <style> p {height: 30px; border: 1px solid black;} // 查找test属性值为dhl的p标签 p [test="dhl"] {background: red;} </style> <body> <p test="dhl">dhl</p> <p test="xb">xiaobei</p> </body> E[attr~="value"] 指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表包含了一个value词，而且等号前面的"~"不能不写，详细代码如下： <style> p {height: 30px; border: 1px solid black;} // 查找含有属性test

python开发之DOM

阅读更多关于 python开发之DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。一.查找元素 1、直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 2、间接查找 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling //

css hack

阅读更多关于 css hack

什么是CSS hack 由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。　　这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。　　这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。　　CSS Hack的原理是什么　　由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。　　比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等　　书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。　　如何写CSS Hack 　　比如要分辨IE6和firefox两种浏览器，可以这样写：　　<style> 　　div{ 　　background:green; /* for firefox */ 　　*background:red; /* for IE6 */ 　　} 　　</style> 　

响应式网站

阅读更多关于响应式网站

我们的眼睛在看东西时会自然地遵循一定的模式。通常从左上开始，然后从左到右，再从上到下。很多网页都是基于网格设计的，这说明网页是按列来布局的。响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。为什么是12列呢，因为12可以被2、3、4、6整除，能2、3、4、6等分。创建网格视图 CSS.css * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}* { border: 1px solid red !important;}.row{ width:100%; display: flex; flex-wrap: wrap; text-align: center;}.col-1{ width:8.3%;}.col-2{ width:16.6%;}.col-3{ width:25%; padding: 0.5%;}.col-4{ width:33.33%;}.col-5{ width:41.66%;}.col-6{ width:50%;}.col-7{ width:58.33%;}.col-8{ width:66.66%;}.col-9{ width:75%; padding

HTML连载78-3D播放器下、背景尺寸属性

阅读更多关于 HTML连载78-3D播放器下、背景尺寸属性

一、继续完善之前的页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D188_3DPlayerXia</title> <style> *{ margin:0px; padding:0px; } body{ background:url("image/taobaoFocusPicture.jpg") no-repeat; background-size:cover;/*这个属性表示我们的图片肯定会填满整个网页，无论图片的大小*/ overflow:hidden;/*代表的就是超出屏幕不会出现滚动条*/ } ul{ height: 200px; width: 200px; /*background-color: red;*/ top:150px; position:absolute; left:50%; margin-left:-100px; transform-style: preserve-3d;/*注意这个3D效果设置在了父元素上*/ /*transform:rotateX(-10deg);!*这一行的目的就是为了让我们的3D效果显示更加明显*!*/ animation:sport 10s linear 0s infinite normal;/*动画效果*/ } ul li {

几种有效的清除浮动的方法

阅读更多关于几种有效的清除浮动的方法

浮动是 CSS 布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为 CSS 布局的难点之一浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘。当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果清除浮动有好一些方法，但兼容各种浏览器的方法却不多，下面我就介绍几个比较有效的兼容的方法: 我们以下面的 HTML 代码为例来说明这几种方法的用法： <div id="box"> <div id="sidebar"></div> <div id="main"></div> </div> 对父级设置CSS高度原理：父级 div 手动定义 height ，就解决了父级 div 无法自动获取到高度的问题优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题建议：不推荐使用，只建议高度固定的布局时使用对应 CSS 代码： #box{ width:500px; margin:10px auto; background:#ccc; height:500px;/*解决代码*/ } #sidebar{ width:190px; height:500px; float:left;

订阅 background