注意:
一.写的是黑马程序员跟着老师写的,有点小差别,主要看注释理解结构
二.以前学thml和css没有深入理解到盒子的坍塌问题,注意理解外边距的合并。有两种情况,一个是两个盒子紧挨着一起,会进行外边距合并,只保留较大的外边距,注意就行。一个是盒子的嵌套,造成合并解决办法有两个,一是为父元素添加1px的外边距或内边距(可能会将盒子变大),而是在父元素中添加overflow:hidden;
三.另外要深刻理解浮动,因为某些界面需要几个盒子进行元素的并列等排布时,需要定义为float:left; 但是会影响到,后面紧着的元素的排列。解决方法有四种:
1、额外标签法:接着浮动的元素后面写一个空元素并定义清除浮动。这样就将他作为一条分割线,接下来的元素不会受到影响。但是空元素的可读性不强,结构化较差。
2、父级元素添加overflow属性,选择一个想要的值(auto、hidden、scroll等),但是这样不会自动换行,当一个盒子满了的时候,可能将溢出的元素隐藏掉。
3、使用:after伪元素选择器
固定写法.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;} //将需要清除浮动的元素类名添加clearfix
.clearfix{*zoom:1;} //这句话表示IE6/7触发hasLayout,zoom前面的*其他浏览器遇到时直接跳过,提升速度。
4、:after :before两个伪元素选择器联合使用
固定写法.clearfix:after,clearfix:before{content:"";display:table} //发出BFC,BFC可以清除浮动。
.clearfix:after{clear:both} .clearfix{*zoom:1}
四.在广告栏或者左右箭头等的布局,用到绝对定位时,一定要记住:”子决夫相”,子元素使用绝对定位时,如果父元素没有特殊定位的属性话不知道会以什么为自己的参考点。(一般以盒子的左上角点为基准点)。
五.开发时,在自己需要做模块可以先设置高度,完成后再删除,利用内容撑开盒子即可,可以提高开发效率。
六.开发是,有小套路多总结。如行高定义为字体高,即可将文字垂直居中,盒子平移的时候,往想要的方向上移动50%,然后在往回移动自己盒子移动方向上的宽度的一般即可。
HTML结构代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝之外另一个生态</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
<div class="inner">
<div class="logo">
<a href="#"><img src="img/logo.jpg"></a>
</div>
<!--顶部内容左边logo-->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">云道商城</a></li>
<li><a href="#">智慧门店</a></li>
<li><a href="#">销售平台</a></li>
<li><a href="#">媒体联盟</a></li>
<li><a href="#">关于云道</a></li>
</ul>
</div>
</div>
</div>
<!--导航栏部分-->
<div class="banner"><