Getting started with CSS 07

I. supplement:

1. If the positioned box does not have width and height, the default width and height is 0;

2. If you set the width of the child box to 100%, the width of the child box is the same as that of the parent box.

3. Transparency:

Opacity: opacity

Assignment: opacity:0.5;

Value: decimal value between 0-1.

This property is not supported by ie6. To set transparency in ie6, use:

filter: Alpha(opacity=50);

<!DOCTYPE html>

<html lang="en">

   <head>

       <meta charset="utf-8">

       <style type="text/css">

           .father{

               background: red;

               opacity:0.2;

               width: 200px;

               height: 200px;

               margin:0 auto;

          }

           .son{

               background: black;

               width: 100px;

               height: 100px;

               margin:0 auto;

          }

       </style>

   </head>

   <body>

       <div class="father">

           <div class="son">

               

           </div>

       </div>

   </body>

</html>

 

II. margin supplement:

1. Usage:

margin: 0 auto;

Effect: center the container horizontally.

2  margin-right: auto;

Function: if you do not set other properties and only set this property, the browser will give all the default margins of a box to margin right when parsing

3 margin set to negative:

If margin left is set to a negative number, the box will move to the left in the future.

If margin right is set to a negative number, the box moves to the right.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div {

float: left;

width: 200px;

height: 400px;

border: 10px solid #ccc;

/*margin-left: -10px;*/

}

div:hover {

position: relative;

border: 10px solid red;

}

</style>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

 

4. Layout of the Holy Grail:

Features: left and right sides of the content remain unchanged, the middle content can be changed according to the size of the screen.

Name: double wing layout.

Code:

<!DOCTYPE html>

<html lang="en">

   <head>

       <meta charset="utf-8">

       <style type="text/css">

           .head,.footer{

               height: 100px;

               background:gold;

          }

           .content{

               padding:0 200px;

               height: 300px;

               background:pink;

          }

           

           .left{

               float:left;

               width: 200px;

               height: 300px;

               background:red;

               margin-left:-200px;

          }

           .right{

               float:right;

               width: 200px;

               height: 300px;

               background:red;

               margin-right:-200px;

          }

           .center{

               float:left;

               width: 100%;

               height: 300px;

               background:green;

               min-width: 200px;

          }

       </style>

   </head>

   <body>

   <div class="head"></div>

   <div class="content">

       <div class="left"></div>

       <div class="center">

           <img src="img/tbsprite.png" />

       </div>

       <div class="right"></div>

   </div>

   <div class="footer"></div>

   </body>

</html>

 

III. sliding door:

1. Basic sliding door:

Complete with three pictures

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div {

float: left;

}

span {

float: left;

width: 6px;

height: 35px;

background: url(img/01_l.png);

}

b {

float: left;

height: 35px;

line-height: 35px;

background: url(img/01_c.png);

}

i {

float: left;

width: 25px;

height: 35px;

background: url(img/01_r.png);

}

</style>

</head>

<body>

<div>

<span></span><b>Navigation 1</b><i></i>

</div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

li {

list-style: none;

float: left;

padding-left: 6px;

background: url(img/01_l.png) no-repeat;

height: 35px;

float: left;

}

li a {

text-decoration: none;

color: blue;

background: url(img/01_c.png);

display: inline-block;

height: 35px;

float: left;

line-height: 35px;

}

span {

display: inline-block;

width: 25px;

height: 35px;

background: url(img/01_r.png) no-repeat;

float: left;

}

</style>

</head>

<body>

<ul>

<li><a href="#"> navigation 1 < / a > < span > < span ></li>

<li><a href="#"> navigation navigation 22 < / a > < span > < span ></li>

<li><a href="#"> navigation 3 < / a > < span > < span ></li>

</ul>

</body>

</html>

 

2. Intermediate sliding door:

Finish with two pictures

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

li {

float: left;

list-style: none;

padding-left: 6px;

background: url(img/02_l.png) no-repeat;

height: 35px;

}

a {

display: inline-block;

height: 35px;

line-height: 35px;

background: url(img/02_r.png) no-repeat right top;

padding-right: 25px;

}

</style>

</head>

<body>

<ul>

<li><a href="#"> navigation 1</a></li>

<li><a href="#"> navigation 2</a></li>

<li><a href="#"> navigation 3</a></li>

<li><a href="#"> navigation 4</a></li>

</ul>

</body>

</html>

3. Advanced sliding door:

Complete with a picture

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

li {

list-style: none;

float: left;

padding-left: 6px;

background: url(img/nb.png) no-repeat;

height: 35px;

}

a {

display: inline-block;

padding-right: 25px;

height: 35px;

line-height: 35px;

background: url(img/nb.png) no-repeat right top;

}

</style>

</head>

<body>

<ul>

<li><a href="#"> navigation 1 navigation 1 navigation</a></li>

<li><a href="#"> navigation 22</a></li>

<li><a href="#"> navigation 3</a></li>

</ul>

</body>

</html>

4. Common triangles in the page:

Principle:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div {

width: 0;

height: 0;

border-top: 20px solid red;

border-right: 20px solid yellow;

border-bottom: 20px solid blue;

border-left: 20px solid green;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

1. Yixun network triangle:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div {

position: relative;

}

span {

position: absolute;

top: 5px;

display: inline-block;

width: 0;

height: 0;

border-width: 5px;

border-color: red transparent transparent transparent ;

border-style: solid dashed dashed dashed;

}

</style>

</head>

<body>

<div>This is a piece of text<span></span></div>

</body>

</html>

 

2. Taobao triangle:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div {

position: relative;

width: 500px;

height: 500px;

border: 1px solid #000;

}

b {

position: absolute;

display: inline-block;

width: 0;

height: 0;

}

.one {

bottom: 0;

right: 0;

border-width: 30px;

border-color: transparent transparent transparent red ;

border-style: dashed dashed dashed solid;

}

.two {

bottom: 0;

right: 20px;

border-width: 30px;

border-color: transparent transparent transparent white ;

border-style: dashed dashed dashed solid;

}

</style>

</head>

<body>

<div>

<b class="one"></b>

<b class="two"></b>

</div>

</body>

</html>

 

 

 

Tags: Front-end network

Posted on Sat, 09 Nov 2019 10:58:41 -0500 by wellscam