继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

2017/02/04 Html5作业中遇到的问题

HotDeath
关注TA
已关注
手记 3
粉丝 5
获赞 6

banner部分

  • .banner与.header的连接处有一条白色的多余部分:

在此处设置overflow:hidden即可解决

header > .container {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;}
  • 设置文字所在的container水平垂直居中的方法:

给banner区域的标题设置宽度,再设置text-align:center;文字就会居中显示;但是如果要实现contianer元素的水平和垂直居中,就要去计算他详细的值(图片高宽-标题高宽/2),使用定位的top和left属性使其居中。
如果想居中的话可以设置left为50%,然后再margin-left:负的宽度的一半。注意设置了left:50%,效果文字从50%的位置开始显示,所以偏右。

.banner > .container {
    position: absolute;
    color: #fff;
    width: 1200px;
    text-align: center;
    top: 278px;
    left: 50%;
    margin-left: -600px;}
  • margin:0 auto;跑到哪里去了?

如果给div的宽度设置了100%,就没必要再设置margin:0 auto;了;
margin:0 auto;是给有宽度限制的元素设置水平居中的。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP