大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么用ccs制作一个简单的html布局

这篇文章将为大家详细讲解有关怎么用ccs制作一个简单的html布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联专业为企业提供澧县网站建设、澧县做网站、澧县网站设计、澧县网站制作等企业网站建设、网页设计与制作、澧县企业网站模板建站服务,十年澧县做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

1、创建html

Html编辑代码示例




	




2、定义一个包含文本的div大标题同时使用class属性向样式。

顶部
底部

3、在style之间,对body进行样式初始化,添加设置外边距margin为0,内边距padding为0,然后使用设置文字居中text-align


 body{text-align: center;margin: 0;padding: 0}

4、在style之间,对div进行样式添加设置所有的div高度为200px,内容的颜色为红色。

div{height: 200px;color: red;}

5、在style之间,对title进行样式使用div创建网页的头部,使用margin:0 auto设置div居中,同时设置其宽度为800px,背景颜色为灰色。

 .title{margin: 0 auto; width: 800px; background-color: #ccc}

6、在style之间,使用div创建网页的底部,使用clear:both清除上面div的浮动,避免影响底部的布局。接着使用margin:0 auto设置div居中,又使用设置其宽度为800px,最后背景颜色为#000fff

.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}

7、在浏览器打开文件,查看实现的效果。

怎么用ccs制作一个简单的html布局

完整代码




	布局



 body{text-align: center;margin: 0;padding: 0}
 div{height: 200px;color: red;}
 .title{margin: 0 auto; width: 800px; background-color: #ccc}
 
 .footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}

顶部
底部

关于“怎么用ccs制作一个简单的html布局”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网页名称:怎么用ccs制作一个简单的html布局
地址分享:http://dzwzjz.com/article/pjpjcs.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP