- <div style="color:blueviolet">ppppp</div>
- <div style="color:#ffee33">ppppp</div>
- <div style="color:rgb(255,0,0)">ppppp</div>
- <div style="color:rgba(255,0,0,0.5)">ppppp</div>
- font-size: 20px/50%/larger
- font-family:'Lucida Bright'
- font-weight: lighter/bold/border/
- <h1 style="font-style: oblique">老男孩</h1>
- background-color: cornflowerblue
- background-image: url('1.jpg');
- background-repeat: no-repeat;(repeat: 平铺满)
- background-position: right top(20px 20px);(横向: left center right)(纵向: top center bottom)
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- html{
- background-color: antiquewhite;
- }
- body{
- width: 100px;
- height: 600px;
- background-color: deeppink;
- background-image: url(1.jpg);
- background-repeat: no-repeat;
- background-position: center center;
- }
- </style>
- </head>
- <body>
- </body>
- </html>
- View Code
- eg:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- span{
- display: inline-block;
- width: 18px;
- height: 20px;
- background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
- background-position: 0 -100px;
- }
- </style>
- </head>
- <body>
- <span></span>
- </body>
- </html>
- View Code
- letter-spacing: 10px;
- word-spacing: 20px;
- text-transform: capitalize;
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .outer .item {
- width: 300px;
- height: 200px;
- background-color: chartreuse;
- display: inline-block;
- }
- </style>
- </head>
- <body>
- <div class="outer">
- <div class="item" style="vertical-align: top">ll
- </div>
- <div class="item">
- </div>
- </div>
- <script>
- </script>
- </body>
- </html>
- vertical-align
- View Code
- border-style: solid;
- border-color: chartreuse;
- border-width: 20px;
- ul,ol{ list-style: decimal-leading-zero;
- list-style: none; <br> list-style: circle;
- list-style: upper-alpha;
- list-style: disc; }
- #outer{
- border: 3px dashed;
- word-spacing: -5px;
- }
- width:250px;
- padding:10px;
- border:5px solid gray;
- margin:10px;
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .div1{
- background-color: aqua;
- width: 300px;
- height: 300px;
- }
- .div2{
- background-color: blueviolet;
- width: 100px;
- height: 100px;
- }
- </style>
- </head>
- <body>
- <div class="div1">
- <div class="div2"></div>
- <div class="div2"></div>
- </div>
- </body>
- </html>
- View Code
- body{
- border: 1px solid;
- background-color: cadetblue;
- }
- body{
- margin: 0;
- }
- <!DOCTYPE html>
- <html lang="en" style="padding: 0px">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- body{
- margin: 0px;
- }
- .div1{
- background-color: aqua;
- width: 300px;
- height: 300px;
- }
- .div2{
- background-color: blueviolet;
- width: 100px;
- height: 100px;
- margin: 20px;
- }
- </style>
- </head>
- <body>
- <div style="background-color: cadetblue;width: 300px;height: 300px"></div>
- <div class="div1">
- <div class="div2"></div>
- <div class="div2"></div>
- </div>
- </body>
- </html>
- View Code
- border:1px solid transparent
- padding:1px
- over-flow:hidden;
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style type="text/CSS">
- * {
- margin:0;padding:0;
- }
- .container{
- border:1px solid red;width:300px;
- }
- #box1{
- background-color:green;float:left;width:100px;height:100px;
- }
- #box2{
- background-color:deeppink; float:right;width:100px;height:100px;
- }
- #box3{
- background-color:pink;height:40px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div id="box1">box1 向左浮动</div>
- <div id="box2">box2 向右浮动</div>
- </div>
- <div id="box3">box3</div>
- </body>
- </body>
- </html>
- View Code
- 10 position(定位)
- 1 static
- <div box1
- <div box2 ---position:absolute; margin-top:50px; margin-left:120px;
- <div box3
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- a{
- display: inline-block;
- background-color: #2459a2;
- width: 100px;
- height: 100px;
- }
- </style>
- </head>
- <body>
- <a>111</a>
- <a>222</a>
- <a>333</a>
- </body>
- </html>
- View Code
- div{word-spacing: -5px;}
- 11.2 word-wrap & word-break:
- word-wrap:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .p1{
- width: 100px;
- background-color: #84a42b;
- word-wrap: break-word;
- word-break: break-all;
- }
- .p2{
- width: 100px;
- background-color: darkgoldenrod;
- word-wrap: break-word;
- word-break: break-all;
- }
- </style>
- </head>
- <body>
- <p class="p1">hello yuan hello yuan hello yuan hello yuan hello yuan</p>
- <p class="p2">helloyuanhelloyuanhelloyuanhelloyuanhelloyuanhelloyuan</p>
- </body>
- </html>
- View Code
- 1.3
- div.main>ul>li.c*4 tab
- 1.5 display:flex
来源: https://www.cnblogs.com/ls-2018/p/8885692.html