论坛
标题:
div中图片居中的问题
[打印本页]
作者:
minjiuu
时间:
2018-5-26 14:39
标题:
div中图片居中的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gulp中文网示例</title>
<style type="text/css">
*{padding:0; margin:0; }
ul{list-style: none}
a{text-decoration: none}
body{font-family: "微软雅黑"}
.header{height: 50px;background-color: rgb(207,70,70)}
.header a{color: #eee;}
.header a :hover{color: #FFFFFF}
.hd_con{width: 1100px;height: 50px ;margin:0px auto}
.header .logo{float: left;font-size: 18px; line-height: 50px}
.header .nav{float: right}
.nav li{float: left;}
.nav li a{font-size: 14px;line-height: 50px; display: block;margin: 15px}
.banner{height: 380px; background-color: rgb(207,70,70); text-align: center}
.banner .mm{margin-top: 60px; }
.banner p{font-size: 22px; color: #FFFFFF; font-weight: 100; margin: 20px auto 40px}
.banner .btn{font-size: 16px; color: aliceblue; padding: 10px 15px; font-weight: 100; border: 1px solid #FFFFFF }
.con{height:260px; width: 1100px; margin: 60px auto; overflow: hidden}
.con .box{float: left; padding: 0 20px; width: 510px; color: #333;padding-bottom: 40px}
.con .box h2{font-size: 30px; font-weight: 400; margin-bottom: 10px}
.con .box p{font-size: 18px; line-height: 1.6em}
.footer{height:120px; text-align: center;font-size: 14px; color: #BABABA; line-height: 2.0em}
</style>
</head>
<body>
<div class="header">
<div class="hd_con">
<a href="#" class="logo">GUlp中文网</a>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">中文文档</a></li>
<li><a href="#">入门指南</a></li>
<li><a href="#">API</a></li>
<li><a href="#">插件开发</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">使用技巧</a></li>
</ul>
</div>
</div>
<div class="banner">
<img alt="logo" class="mm" src="images/logo.jpg"/>
<p>用自动化构建工具增强你的工作流程！</p>
<a href="#" class="btn">开始使用</a>
</div>
<div class="con">
<div class="box">
<h2>易于使用</h2>
<p>通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。</p>
</div>
<div class="box"><h2>构建快速</h2>
<p>利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。</p>
</div>
<div class="box"><h2>插件高质</h2>
<p>Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。</p>
</div>
<div class="box"><h2>易于学习</h2>
<p>通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。</p>
</div>
</div>
<div class="footer">© Gulp 中文网 2018 <br/>京ICP备11008151号 | 京公网安备11010802014853</div>
</body>
</html>
老师，为何我的logo图片居中不了？
欢迎光临 论坛 (http://bbs.qinxue.com/)
Powered by Discuz! X3.1