HTML and CSS Basic courses (eight) design a button for your Web page

This class is mainly about how to use div to simulate a button.

Some of the new properties are used:

Border-radius

Adds a rounded border to a DIV element, such as

border-radius:5px;

Margin

Set all the margin properties in a single declaration, properties can set 1~4 values, for example:

margin:10px 5px 15px 20px;

The outer margin is 10px.

The right outer margin is 5px

Lower outer margin is 15px

Left outer margin is 20px

margin:10px 5px 15px;

The outer margin is 10px.

The right outer margin and the left outer margin are 5px

Lower outer margin is 15px

margin:10px 5px;

The top and outer margins are 10px

The right outer margin and the left outer margin are 5px

margin:10px;

All 4 outer margins are 10px

Margin:auto

The browser calculates the outer margin.

Text-align

The horizontal alignment of the text in the specified element. For example

Value Description

Left aligns the text to the left-hand side. Default value: is determined by the browser.

Right aligns the text to the right-hand side.

Center arranges the text in the middle.

More Wonderful content: http://www.bianceng.cn/web/Html/

Justify to achieve justified text effects.

div {

Text-align:center;

}

Indicates that the text inside the div container will be centered.

Stylesheet.css

img {  
    display:block;  
    height:100px;  
    width:300px;  
    Margin:auto;  
}  
      
p {  
    text-align:center;  
    Font-family:garamond, serif;  
    font-size:18px;  
}  
      
/*start Adding your CSS below!*/  
div {  
    height:50px;  
    width:120px;  
    border: #6495ED;  
    Background-color: #BCD2EE;  
    border-radius:5px;  
    Margin:auto;  
    Text-align:center;  
          
}  
      
a {  
    text-decoration:none;  
}

Index.html

<! DOCTYPE html>