background | 易学教程

关于CSS设置页面背景图的一些疑问

阅读更多关于关于CSS设置页面背景图的一些疑问

关于背景图片的位置其background-position设置背景图片的位置有两种方式，一种是是根据像素设置，第二种根据百分比设置，第一种根据像素的位置是很简单的，只是关于百分比这个设置理解特别容易出现偏差的，先看看一段简单的代码: .bg-position { background : url(../../public/images/404.jpg) no-repeat ; margin-top : 100px ; margin-left : 100px ; background-color : #ccc ; height : 500px ; width : 800px ; background-position : 100px 100px ; } 这种情况是可以预见的，如下所示: 网上看了一篇文章说是background-position是依赖于no-repeat的，在repeat的状态下和默认的状态下（默认即为repeat）,background-position是不起作用的，因此自己尝试了一把，看了一下效果: 代码中去掉了no-repeat，同样是可以展示，以前repeat的时候没有注意和background-position结合一起，不过现在发现设置background-position之后，我们不断的调整垂直方向的距离

JQuery（选择器、事件、DOM操作）

阅读更多关于 JQuery（选择器、事件、DOM操作）

一、jQuery简介 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。 $：jQuery标识符二、jQuery选择器 1.基本选择器 ①ID选择器:# $("#div1").css("background-color", "red") ②class选择器：. 1 $(".div2").css("background-color", "red"); ③标签选择器 $("div").css("background-color", "red"); ④并列 $("#div1,#div2").css("background-color", "red"); //并列选择，用逗号隔开 ⑤后代 $("#div1 a").css("background-color", "red"); //后代选择，用空格隔开 2、过滤选择器（1）、基本过滤 ①首个：:first $(".div:first").css("background-color", "red"); //取首个 ②尾个：:last $(".div:last").css("background-color", "red"); //取最后一个 ③任意个：:eq(索引号) $(".div:eq

html&css 机器猫的实现

阅读更多关于 html&css 机器猫的实现

新手小白写的机器猫，效果图如下： html代码： <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <meta http-equiv= "X-UA-Compatible" content= "ie=edge" > <title>哆啦A梦</title> <link rel= "stylesheet" href= "./css/demo.css" > </head> <body> <div class= "box" >  <header>  <div class= "face" >  <div class= "eye1" >  <div class= "eyeball" ></div> </div>  <div class= "eye2" >  <div class= "eyeball" ></div> </div>  <div class= "nose" > <div></div> </div> <

深入了解absolute

阅读更多关于深入了解absolute

1.absolute与float的相同的特性表现 a.包裹性 b.破坏性:父元素没有设置高或宽，父元素的高或宽取决于这个元素的内容 c.不能同时存在 2.absolute独立使用，不与relative合用 * 超越overflow，无论是滚动还是隐藏案例： html <div class="scroll"> <a href="javascript:;" class="close" title="关闭"></a> <img src="1.jpg"> <img src="2.jpg"> </div> css .scroll { width: 500px; height: 300px; margin: 200px auto 0; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 0 3px rgba(0,0,0,.35); background-color: #fff; overflow: auto; } .close { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 483px; background: url(images/close.png) no-repeat; } img { display: block; margin:

Custom Looks using Qt Style Sheets

阅读更多关于 Custom Looks using Qt Style Sheets

With the introduction of Qt Style Sheets, styling Qt widgets has become a lot simpler. Whether you just need to customize the look of an existing widget or design a whole new style from scratch, there is now an alternative to subclassing QStyle. What are Qt Style Sheets? Basic Style Sheet Syntax The Box Model Foregrounds and Backgrounds Creating Scalable Styles Controlling the Size Handling Pseudo-States Micro Customization using Subcontrols What are Qt Style Sheets? Qt Style Sheets are heavily inspired by HTML Cascading Style Sheets (CSS) but adapted to widgets. You can set a style sheet on

HTML5和CSS3重点知识汇总

阅读更多关于 HTML5和CSS3重点知识汇总

HTML5 1、什么是H5： HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。设计目的是为了在移动设备上支持多媒体。 2、新增特性：绘画<canvas>；多媒体播放<video><audio>；本地离线存储；特殊内容元素<article><header><nav><footer>；表单控件<calendar><date><email>等 3、最小的HTML5文档 <!DOCTYPE html>  <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html> 4、支持：最新版Safari,Chrome,Firefox,Opera支持，IE9支持 5、自定义标签：首先在html标签通过xmlns:命名空间名来指定；其次可以使用这个标签写内容（通常命名采用-连接方式）；最后，在样式里使用命名空间名\:标签名{}定义 <!DOCTYPE html> <html xmlns:ownhtml> <head> <meta charset="UTF-8"> <title>Document</title> <style> //2、这里如果有多个标签，都是从ownhtml创建的

高度塌陷的产生条件和解决方法

阅读更多关于高度塌陷的产生条件和解决方法

高度塌陷的产生条件：父元素没有设置高度，所有的子元素都浮动父元素在文档流中高度默认是被子元素撑开的, 1 <!DOCTYPE html> 2 <html 3 <head> 4 <meta charset="utf-8"> 5 <title>解决高度塌陷</title> 6 <style type="text/css"> 7 body{margin: 0;padding:0;} 8 .container{border: 5px solid red;} 9 .box1{width: 100px;height:100px;background: yellow;} 10 .box2{width: 200px;height:200px;background: green;} 11 </style> 12 </head> 13 <body> 14 <div class="container"> 15 <div class="box1"></div> 16 <div class="box2"></div> 17 </div> 18 </body> 19 </html> 当子元素脱离文档流以后,将无法撑起父元素的高度,也就会导致父元素的高度塌陷 1 <!DOCTYPE html> 2 <html 3 <head> 4 <meta charset="utf-8"> 5 <title>解决高度塌陷<

CSS的样式（1）

阅读更多关于 CSS的样式（1）

背景： 1、颜色：　　　 background-color p{backgroud-color:gray;} 2、内边距： {background-color:gray;padding:20px} 3、背景图像： body{background-image:url(/i/eg_bg_04.gif)} 4、背景重复：　　body{background-image:url; background-repeat:repeat(-X/-y} 5、背景定位：改变图像在背景中的位置。 {background-image:url; background-repeat:no-repeat background-position:center/top/botton/left/right} 6、背景大小（size）: 接数字和百分比，建议接数字 7、背景关联： {background-attachment:fixed} 文本： 1、缩进：　　text-indent(正负值）　　p{text-indent:5em(/-5em);} 2、对齐： text-align(center、left、right） 3、文本装饰：　　text-decration(none/underline/overline/line-through/blink) 链接默认地会有下划线。如果想要去掉超链接的下划线

如何实现两列固定与一列自适应

阅读更多关于如何实现两列固定与一列自适应

【逆战班】 1.flex布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。这里我们利用flex布局来实现两列固定一列自适应 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #main{ display: flex;/*设为伸缩容器*/ } #left{ width:200px;/*左侧固定宽度*/ height:400px; background:aqua; } #center{ flex-grow:1; /*填满剩余空间*/ height:400px; background:green;} #right{ width:200px;/*固定右侧宽度*/ height:400px; background:blue; } </style> </head> <body> <div id=

导航栏

阅读更多关于导航栏

<template> <div class="box"> <div v-for="(item, i) in Array(4)" :key='i' class='item'> <span>歌曲</span> </div> </div> </template> <style scoped> .box{ display: flex; line-height: 44px; } .item{ flex: 1; background-color: blue; color: red; text-align: center; } .item span{ border-bottom: 2px solid red; padding-bottom: 8px; } </style> 来源： CSDN 作者： QunBingCheng 链接： https://blog.csdn.net/chengQunBin/article/details/104574356

订阅 background