搜索到
146
篇与
的结果
-
37、背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景</title> <style> /* 一。背景 1.background-color 设置背景颜色 transparent 透明的（默认值） 2.background-image 设置背景图片 可选值： none 无背景图片（默认值） url（）背景图片路径 3.background-repeat 设置背景平铺 可选值： repeat 平铺（默认值） no-repeat 不平铺 repeat-x 水平平铺 repeat-y 垂直平铺 4.background-position 设置背景图像位置 background-position：x y x代表水平位置 y代表垂直位置，x和y的值可以是： 1.像素 2.百分比 3.关键字 top right bottom left center 注意: 1.X和y的值可以混合使用，例如：background-position:100px center; 2.若我们只规定了一个值，另一个默认值为center 5。background-attachment 设置背景图形的滚动方式 可选值： scroll 背景图片会随着页面中其余部分滚动（默认值） fixed 当页面中其余部分滚动，背景图片位置不变 二、背景的简写属性：background background：背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置； 上述顺序无要求 */ body{ height: 2000px; /*背景简写属性*/ background: transparent url(../周渝皓的个人网站/tp/mm.jpg) no-repeat fixed center center; } .box1{ width: 600px; height: 600px; margin: 10px auto; /*设置背景颜色*/ background-color: #c7edcc; /*设置背景图片*/ background-image: url(../周渝皓的个人网站/tp/mm.jpg); /*设置背景平铺*/ background-repeat: no-repeat; /*设置背景图片位置*/ background-position: 100px center; /*设置背景图片滚动*/ background-attachment: scroll; } </style> </head> <body> <div class="box1"></div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus vel voluptates ea perspiciatis recusandae, ipsam, natus deserunt iure corporis officiis earum reprehenderit nam cum, ipsum saepe! Maxime, atque illum!</p> </body> </html> -
36、z-index叠放层次 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>z-index叠放层次</title> <style> /* 一、z-index属性用于设置元素的叠放层次，属性值可以为一个整数，整数值越大越优先显示 注意：z-index 只对开启了定位的元素有效 */ div{ width: 200px; height: 200px; } .box1{ background-color: #c7edcc; position: relative; left: 50px; top: 100px; z-index: -2; } .box2{ background-color: #fed6e0; position: absolute; left: 150px; top: 150px; z-index: -1; } .box3{ background-color: #dce2f1; float: left; } </style> </head> <body> <div class="box1">相对定位</div> <div class="box2">绝对定位</div> <div class="box3">浮动盒子</div> </body> </html>
-
35、CSS基本定位机制-粘性定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>粘性定位</title> <style> /* 一、定位：将盒子指定到页面的中的任意位置。 1.position 属性可以开启元素的定位 可选值： static 没有开启定位（默认值） relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘性定位 2.开启定位后通过 top right bottom left 四个属性设置元素的位置 二、粘性定位(兼容性不好，IE不支持) 1.可以理解为相对定位和固定定位的结合 2.粘性定位不会脱离文档流 3.粘性定位参照浏览器可视窗口进行定位 4.粘性定位可以在元素到达某个位置时将其固定 */ body{ height: 3000px; } .box1{ width: 1000px; height: 80px; background-color: #c7edcc; margin: 100px auto 0px; /*开启粘性定位*/ position: sticky; /*移动元素位置*/ top:10px; } </style> </head> <body> <div class="box1"></div> </body> </html>
-
34、固定定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定定位</title> <style> /* 一、定位：将盒子指定到页面的中的任意位置。 1.position 属性可以开启元素的定位 可选值： static 没有开启定位（默认值） relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘性定位 2.开启定位后通过 top right bottom left 四个属性设置元素的位置 二。固定定位 1.会脱离文档流 2.固定定位会改变元素的显示模式，具有行内块元素的特点 3.固定定位参照浏览器的可视窗口进行定位的 4.元素会固定在浏览器可视窗口的某个位置 */ body{ height: 2000px; } div{ width: 200px; height: 200px; } .box1{ background-color: #c7edcc; /*开启固定定位*/ position: fixed; /*移动元素位置*/ right: 10px; bottom: 10px; } .box2{ background-color: #fde6e0; } .father{ width: 300px; height: 300px; background-color: #dce2f1; margin-top: 100px; margin-left: 100px; position: relative; } </style> </head> <body> <div class="father"> <div class="box1">我是渣渣辉，是兄弟就来</div> </div> <div class="box2"></div> </body> </html>
-
33、CSS基本定位机制-绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style> /* 一、定位：将盒子指定到页面的中的任意位置。 1.position 属性可以开启元素的定位 可选值： static 没有开启定位（默认值） relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘性定位 2.开启定位后通过 top right bottom left 四个属性设置元素的位置 二、绝对定位 1.绝对定位会脱离文档流 2.绝对定位会改变元素的显示模式，具有行内块元素的特点 3.绝对定位参照开启了定位的祖先元素进行定位的 4.如果没有祖先元素或者祖先元素没有开启定位，则以浏览器为参照进行定位 如果有开启了定位的祖先元素，则参照最近一级的祖先元素进行定位 */ div{ width: 200px; height: 200px; } .box1{ background-color: #c7edcc; /*开启绝对定位*/ position: absolute; /*移动元素的位置*/ left: 100px; top: 100px; } .box2{ background-color: #fed6e0; } .father{ width: 300px; height: 300px; background-color: indianred; margin-top: 100px; margin-left: 200px; /*开启定位*/ position: relative; } .bbdbb{ width: 500px; height: 500px; background-color: #dce2f1; /*开启定位*/ position: relative; } </style> </head> <body> <div class="bbdbb"> <div class="father"> <div class="box1">我是div</div> </div> </div> <div class="box2"></div> </body> </html>
