24.努比亚官网总结

努比亚项目

CSS书写格式

• 方式-:行内样式
  • 直接写在标签中
• 方式二:内联式/内嵌式
  • 写在head标签中的style标签中
• 方式三:外链式(企业开发中使用)
  • 创建一个.css文件,写在里面
  • link标签 rel href=.css文件
  • 优点:结构和样式,利于维护和阅读
• 方式四:导入式
  • 写在header标签中的style标签中, @import 一个外部的.css文件

编写网站要做的第一步

- 创建站点文件夹,并且创建一些子文件夹和子文件夹
- 注意:站点文件夹可以是中文, 但是里面的子文件夹或者子文件不能出现中文

编写网页第二步

- 新建css文件, 在这个文件夹中做一些初始化操作
- 设置全局的样式, bass.css
- 将新建的css文件和当前的index.html文件关联起来

重点一 span包裹,设置p标签单独的颜色

重点二 图片的宽度大于父元素的宽度,要让图片居中

• 如果图片的宽度大于父元素的宽度, 使用text-align: center;是无法让图片居中的,所以如果图片的宽度大于父元素的宽度

  • 定位流 (弊端:要写3行代码,而且要计算margin-left值为图片宽度的一半)

  position: relative;
  left: 50%;
  margin-left: -532px;
  

  • 奇淫技巧 margin: 0 -100%,同时设置设置父元素的text-align: center;

  .father {
      text-align: center;
  }
  .son{
      maring: 0 -100%;
  }   
  

重点三 后定位的会盖住先定位的,需要用z-index值来设置优先级,z-index的值越大,显示在最前面

.before-dom{
    z-index: 999;
}
.after-dom{
    z-index: 1;
}

重点四 导航栏定位,不跟随滑动

• position: fixed;如果看不见了,修改z-index,比其它的大
• 下边的元素如果位置变了,要吧设置下边元素的padding-top: 固定定位元素的高度