创新路
我们一直在努力

div+css布局

divspan在整个html标记中,主要是为了应用css样式,div是块级元素,span是内联元

素。Div元素占一整行,而span则会根据内容大小。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div+css布局</title>
<style type="text/css">/*内联式设置属性*/
         div{
                   background-color:blue;/*背景颜色*/
                   color:white;/*字体颜色*/
                   }
         span{
                   background-color:blue;
                   color:white;
                   }
</style>
</head>
<body>
         <div>天府数据港官方信息博客</div>
    <span>天府数据港官方信息博客</span>
</body>
</html>

页面显示:

4.jpg

<style type="text/css">/*内联式设置属性*/
         div{
                   background-color:blue;/*背景颜色*/
                   color:white;/*字体颜色*/
                   }
         span{
                   background-color:blue;
                   color:white;
                   }
</style>
</head>
<body>
         <div>天府数据港官方信息博客</div>
    <div>天府数据港官方信息博客</div>
    <div>天府数据港官方信息博客</div>
    <span>天府数据港官方信息博客</span>
    <span>天府数据港官方信息</span>
    <span>天府数据港</span>
</body>

页面显示:

5.JPG

<style type="text/css">/*内联式设置属性*/
         div{
                   background-color:blue;/*背景颜色*/
                   color:white;/*字体颜色*/
                   float:left;/*div元素向左浮动*/
                   width:200px;/*设置div宽度为200像素*/
                   height:40px;/*设置div高度为40像素*/
                   }
         span{
                   background-color:blue;
                   color:white;
                   }
</style>
</head>
<body>
         <div><p>天府数据港官方信息博客</p></div>
    <div><p>天府数据港官方信息博客</p></div>
    <div><p>天府数据港官方信息博客</p></div>
    <span>天府数据港官方信息博客</span>
    <span>天府数据港官方信息</span>
    <span>天府数据港</span>
</body>

页面显示:

6.JPG

<style type="text/css">/*内联式设置属性*/
         div{
                   background-color:blue;/*背景颜色*/
                   color:white;/*字体颜色*/
                   float:left;/*div元素向左浮动*/
                   width:200px;/*设置div宽度为200像素*/
                   height:40px;/*设置div高度为40像素*/
                   }
         div p{
                   padding:0 10px;
                   }
         span{
                   background-color:blue;
                   color:white;
                   }
</style>
</head>
<body>
         <div><p>天府数据港官方信息博客</p></div>
    <div><p>天府数据港官方信息博客</p></div>
    <div><p>天府数据港官方信息博客</p></div>
    <span>天府数据港官方信息博客</span>
    <span>天府数据港官方信息</span>
    <span>天府数据港</span>
</body>

页面显示:7.JPG

未经允许不得转载:天府数据港官方信息博客 » div+css布局

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机