搜索到
146
篇与
的结果
-
43、不透明性 <!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>opacity</title> <style> .box1{ width: 200px; height: 200px; background-color: orange; font-size: 40px; opacity: 0.5; font-weight: bold; } </style> </head> <body> <div class="box1">你好啊</div> </body> </html> -
41、怪异盒子的使用 <!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> .father{ width: 900px; height: 300px; background-color: yellow; margin: 0 auto; } .box div{ width: 300px; height: 300px; float: left; text-align: center; } </style> </head> <body> <div class="father"> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet nesciunt consectetur voluptate assumenda! Bland itiis perferendis sed ducimus, atque in eaque porro ipsa dig nissimos, nisi beatae dolore fugiat, molestias architecto?</div> <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae commodi eligendi incidunt, minima ipsam necessitatib s? Quos nulla ipsum doloremque earum libero. Est aliquam eu m ullam nesciunt, voluptatibus dolores error dolorem.</div> <div>Lorem ipsum dolor sit amet consectetur adipisicin g elit. Accusantium tenetur veniam quam ratione ver ? Deserunt aliquid accusantium aliquam fugit sed in s unt, explicabo tenetur earum aspernatur cupiditate aut amet maxime.</div> </div> </body> </html>
-
40、怪异盒子 <!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> /* 怪异盒子的宽度是加内边距和边框 box-sizing 可选值： content-box{默认值} border-box｛挤压内部｝ */ .box1{ width: 200px; height: 200px; background-color: red; padding: 30px; border: 10px solid black; /*标准盒模型*/ box-sizing: content-box; } .box2{ width: 200px; height: 200px; background-color: green; margin-top: 100px; padding: 30px; border: 10px solid black; /*怪异盒模型*/ box-sizing: border-box; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
-
39、导航栏 <!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> .nav{ width: 800px; height: 40px; background-color:#008080; margin:0 auto; padding: 0; } .nav li{ list-style:none; float: left; height: 40px; line-height: 40px; } .nav a{ text-decoration:none; color: orange; font-size: 20px; display: block; padding: 0px 30px; } .nav a:hover{ background-color:green; } </style> </head> <body> <ul class="nav"> <li> <a href="#">网站首页</a> </li> <li> <a href="#v3">专业教程</a> </li> <li> <a href="#v4">作品展示</a> </li> <li> <a href="#v7">家乡山水</a> </li> </ul> </body> </html>
-
38、渐变 <!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-image: linear-gradient(to top ,#c7edcc,#fde6e0,#dce2f1); 第一个参数可选值为： to top/right/botton/top right/... 第二个参数到第n个参数为需要渐变的颜色，至少两种颜色 2.径向渐变 background: radial-gradient(ellipse,#c7edcc 50%,#fde6e0); 第一个参数可选值为： circle 圆形 ellipse 椭圆形 第二个参数到第n个参数为需要渐变的颜色，至少两种颜色 */ .box1{ width: 300px; height: 300px; margin: 0 auto; /*background-image: linear-gradient(90deg ,#c7edcc,#fde6e0,#dce2f1);*/ background: radial-gradient(ellipse,#c7edcc 50%,#fde6e0); } </style> </head> <body> <div class="box1"></div> </body> </html>
