快捷导航
发新帖
返回列表
0 511
电梯直达  跳转到指定楼层

[提问] div中图片居中的问题

minjiuu|新手上路 |勤币 43 |学币 0
发表于 2018-5-26 14:39 | 复制链接 | 打印 | 上一主题 | 下一主题
<!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图片居中不了?


举报 使用道具
| 回复

共0个回复 最后回复于 2018-5-26 14:39

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表