当前位置: 老葡京网站娱乐 > 网页设计 > Html教程 > 正文

HTML及CSS基础课(八) 为你的网页设计一个按钮

时间:2014-11-07

老葡京网站娱乐 www.sdguanhua.com 这节课主要是讲怎样用div来模拟出一个按钮。

会使用到一些新属性:

border-radius

向 div 元素添加圆角边框,例如

border-radius: 5px;

margin

一个声明中设置所有外边距属性,属性可以设置1~4个值,例如:

margin:10px 5px 15px 20px;

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

margin:10px 5px 15px;

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

margin:10px 5px;

上外边距和下外边距是 10px

右外边距和左外边距是 5px

margin:10px;

所有 4 个外边距都是 10px

margin:auto

浏览器计算外边距。

text-align

规定元素中的文本的水平对齐方式。例如,

值  描述

left  把文本排列到左边。默认值:由浏览器决定。

right  把文本排列到右边。

center  把文本排列到中间。

更多精彩内容:http://www.sdguanhua.com/web/Html/

justify  实现两端对齐文本效果。

div {

text-align: center;

}

表示div容器里面的文本将会居中对齐。

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>  
<html>  
    <head>  
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />  
        <title>About Me</title>  
    </head>  
    <body>  
        <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png" />  
        <p>We're Codecademy! We're here to help you learn to code.</p><br /><br />  
        <div>  
            <a href="blog.csdn.net/shuangde800">my blog</a>  
        </div>  
    </body>  
</html>

效果图: