给大家带来DIV+CSS网页计划实例:网页背景笔墨图片居中

显示全部楼层 · 发表于 2015-1-15 22:57:56

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

结构清晰，容易被搜索引擎搜索到，天生优化了seo

破洛洛文章简介：DIV+CSS网页计划实例:网页背景笔墨图片居中.
在DIVCSS结构的页面里，从结构内容到页面里文章笔墨居中都长短常主要的，而css来设置居中也长短常复杂的。
1、起首先容利用css属性让全体结构的居中：
设置工具的父级内容居中，这里一个页面的为父级是甚么呢？我们能够设想全部页面的内容是由<html></html>和<body></body>这两个包括，那依据较近父级我们就设置body的CSS来完成居中成绩，能够向在内容里居中有text-align:center;详细css的居中代码为：
body{text-aligh:center;}可是即便如许也会呈现成绩，由于你没有设置结构有多宽“width”，一旦你内容结构中在最外层css把持中，设置了float:属性，那结构将会向你设置的float:偏向靠，办理办法，除设置body的居中的css属性外，还需对结构工具设置居中，并且或界说宽度是几，假设网页宽度为700px，最外层css款式为的class="weicheng"，那设置应当如许“.weicheng{margin:0auto;width:700px;}”便可而这个元素在IE下有效，经由实验在火狐等扫瞄器下只除此父级（body）设置text-aligh:center;居中是没法让结构居中，那我们还必要对该工具设置个“margin:0auto;”这个是甚么意义呢，意义是内容高低为0间隔，而摆布为“auto”主动，如许就能够设置完成网页结构居中(这里设置margin:5pxauto;一样效果不影响实行)。完全实例为（可将代码拷贝新建html文件扫瞄寓目效果）
以下为援用的内容：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>www.poluoluo.com的CSSdiv的结构居中实例</title>
<styletype="text/css">

</style>
</head>
<body>
<divclass="waicheng">我是css中的居中的实行;我的结构外层有一个边为1px玄色边，我宽700px，高为200px,设置了与顶部内容间隔为5PX</div>
</body>
</html>2、先容利用css属性让网页的背景居中：
这里居中就包含了摆布居中与高低居中，居中代码以下：
body{BACKGROUND:#FFFurl(http://www.poluoluo.com/img/css-logo.gif）no-repeatcenter;}//这段话意义就是让css-logo.gif这个图片设置背景不反复（no-repeat），并将居中（center）这个居中是摆布居中，而垂直不必要设置，主动会居中。
3、css让先容笔墨、图片内容摆布高低居中办法教程：
我们晓得摆布就中好办，间接用text-align:center;便可让笔墨与图片内容居中，可是垂直呢，假设我们在高度为120px的高度下垂直居中，图片居中是vertical-align:middle;css属性，笔墨居中就要靠设置行高办法居中笔墨内容，这里我们设置为120px的高度这必要设置个line-height:120px;如许就经由过程css属性类款式来完成笔墨与图片的高低摆布居中。

全部网站居中的代码以下：
以下为援用的内容：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>www.poluoluo.com的CSSdiv的完全居中实例</title>
<styletype="text/css">

</style>
</head>
<body>
<divclass="waicheng">我是css中的居中的完全居中实例;我的结构外层有一个边为1px<imgsrc="http://www.poluoluo.com/img/css-logo.gif"alt="图片内容居中"/></div>
</body>
</html>

</p>
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来DIV+CSS网页计划实例:网页背景笔墨图片居中

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子