如何用background-image实现作业效果

如何用background-image实现作业效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>banner</title>

<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: Microsoft YaHei UI, sans-serif;
}

.banner{
background-image:url(2/images/banner.jpg); 
height: 675px;
}

.banner > h1{
font-size: 48px;
width: 800px;
margin: 0 auto;
text-align: center;
}

.banner > p{
font-size: 24px;
width: 1200px;
margin: 0 auto;
text-align: center;
}

</style>
</head>
<body>
<section>
<h1>Weclome to Website</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing edit</p>
</section>
</body>
</html>

http://img1.sycdn.imooc.com/climg//58b40de00001489319030767.jpg

老师作业批复说:

页面块级内容的居中建议通过设置margin:0 auto,实现区域内容在网页内居中的效果

但是按照上面我写的代码效果如下,

http://img1.sycdn.imooc.com/climg//58b40e780001b7c019200686.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
小丸子爱吃菜 2017-02-28 13:37:25

如果说的是垂直居中,那就要详细的测量了,算出大盒子的高度,减去元素的高度,再除以2,得出的值设置为margin-top值,这样元素就垂直居中了;或者也可以设置元素的行高跟高一样,也能实现垂直居中,不同问题用不同的解决办法!

小丸子爱吃菜 2017-02-28 09:10:34

锤子居中?哪个是锤子?

  • 哈哈,他是说“垂直居中”吧
    2017-02-28 12:24:56
小丸子爱吃菜 2017-02-27 21:10:03

margin:0 auto;这对的是各个大的区域块在页面中的居中显示,比如banner区域,stats区域;

banner图片上的标题和文字还是要通过定位来实现居中的效果的。

祝学习愉快!

  • 提问者 xurdy #1
    margin:0 auto 是水平居中,那上述例子中,锤子居中怎么实现呢?
    2017-02-28 08:11:07
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师