css(6)

学习目标

能够完成尚合项目的头部部分

能够完成尚合的导航部分

能够完成尚合的产品详情部分

能够完成尚合的底部部分

理解上课的知识点…

浮动元素的有行内块的显示效果

浮动元素的特点之一为：浮动之后的元素有类似行内块的显示效果

所以浮动元素不管前生是什么，浮动之后就变成了一个类似行内块的效果！不再有块级的特点：

以div为例：

• 块级元素特点1：水平居中使用margin:0 auto;
  • 前生：块级元素：margin：0 auto；
  • 浮动之后：margin：0 auto；不能居中（浮动本身就是到页面的一侧，并且浮动之后有行内块的效果）也不能使用text-align：center；居中
• 块级元素特点2：宽度继承
  • 前生：块级元素：有继承父元素宽度的效果
  • 浮动之后：不能继承父元素的宽度

记忆：浮动之后元素当做一个特殊的显示方式！

不能使用text-align；或者margin：0 auto；居中

宽度不能继承父元素

（一行显示多个，并且可以设置宽高）

不要乱用浮动，只有当遇到让盒子水平布局时才使用！！！

浮动的元素相当于父元素的内容，仍然在盒子的content部分中！

上课的记录

上课敲的项目首要任务是听懂

学习的是写页面的步骤，每个知识点都会，不会的是接下来做什么

可以试着用写笔记，把老师的步骤记下来，然后下午（忘记怎么做的时候）根据自己写的步骤看看能不能一步一步做出来

比如：

1. 页面的顶部
   1. 需要一个版心
   2. 里面两张图片，左右布局用左右浮动，上下的距离给大盒子设置margintop
   3. …

版心

固定且居中的盒子

为什么要有版心?

因为电脑的屏幕不一样大，为了在不同的电脑上视觉效果一致，我们需要版心作为约束

版心的公共类的设定：

.w {
	width: 1200px；
    margin：0 auto；
}

<div class="w"></div>

特殊情况：

设计师会给你一张很大的图片 1920 * 1000  (是为了适应不同的屏幕) 
但是版心只有1280 

问：图片怎么处理

答：这个盒子不做约束 width:100%;  这个图片作为背景图片放到这个盒子里面 
同时background-position:center 0;

综合项目：尚合

项目初始化（公共类的抽取）

/*-----------------------------项目样式的初始化--------------------------------------------*/
/*清除默认的marign和padding*/
* {
  margin: 0;
  padding: 0;
}

/*消除页面中li的小点*/
ul {
  list-style: none;
}

/*消除a标签默认的下划线*/
a {
  text-decoration: none;
}

/*版心的样式*/
/*版心就是宽度固定水平居中的盒子*/
.w {
  width: 980px;
  margin: 0 auto;
}

/*左浮动的类*/
.fl {
  float: left;  
}

/*右浮动的类*/
.fr {
  float: right;
}

/*清除浮动的代码*/
.clearfix::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  visibility: hidden;
}

/*为了在上面看到下面的标签 最后删掉*/
/*body {
  height: 2000px;
}*/