css的学习分享

所学的css知识看多,会看懂。这只是在实践中发现的问题:

 一. ???h1比div还大  h1上下有边距   为什么浮动不了  (现不知道)

二. css写了 表现不出来....      选择器问题 ?一直搞不懂选择器。

 /*780=80  =113   33  a 31=20*/

 .warp{width: 780px;margin: 0 auto;border-left: 1px solid #e7e7e7;border-right: 1px solid #e7e7e7;}
header{width: 100%;overflow: hidden;}
.logo{margin:;padding:; height: 80px;
background-color: #3399cc;color: #fff;
line-height: 80px;text-indent: 36px;
font-size:30px;
font-family:"微软雅黑";
}
.nav-top{width: 100px;}
.nav-top li{
text-align: center;
margin-top: 0 32px;
float: left; }
section{}
.leftside{width: 200px;}
.leftside .nav-main{background-color:#3399cc;color:#fff;text-indent: 10px; }
.leftside a:hover{background-color: #ff0000;text-decoration: underline;}
.rightside{}
footer{}

练习明白 (一定要加)

1,页面或者body设置宽度 margin: 0 auto 居中内容

尽量不设置高度;overflow:hidden隐藏掉 避免有背景颜色下全渲染,全屏是蓝色。。。

2,浮动给li就好了 ,ul ol 不要考虑 ,li里的a要变成块元素 display:block; 一般要清除浮动 clear:both;一般情况下 不起作用。

所有要用第二种,visibility:hidden;height:0;IE的是.clearfloat{zoom:1;}

.clearfloat{             / 类选择器
display:block;          /*变成块元素*/
clear:both;           /*清除浮动 一定要设置高度为0*/
content:"";
visibility:hidden;
height:0;
}

3,

/*细节background要加 no-repeat*/
/*盒子模型写在前面*/
/*颜色尽量用3位数,不要英文*/

尽量不要*设置padding margin 为0;

4 有些要按顺序来 从大范围到小范围(和id,class没关系)

如:伪类  link hover visited active 不按顺序有彩蛋。 //a:hover{}

body,body,h1,h2,ul,li,header,footer,a,p,h3,h4,h5,{

margin: 0;
padding: 0;
color: #333;
font-family:Verdana, Geneva, sans-serif, "宋体";
list-style:none;
display: block;

}

a{text-decoration: none;}
ul,li{list-style: none;}

* 字体 字体样式 不要点 颜色 块元素
a 不要下横线
a :hover 下横线 颜色
p 行高
wrap 居中 限定宽度 边框 颜色等

头 宽100% 溢出隐藏
内元素 宽100% 高80 字体 字体样式 缩进
边距 浮动
ul
li 外边距 浮动

学习的乐趣是分享和比较(有成就感)!!!

学习css中得与惑的更多相关文章

  1. 深入学习CSS中如何使用定位

    CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对 ...

  2. WEB学习-CSS中Margin塌陷

    margin的塌陷现象 标准文档流中,竖直方向的margin不叠加,以较大的为准. 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的: 盒子居中margin:0 auto; marg ...

  3. CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法

    在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...

  4. 从逻辑思维中学习CSS,从宽高说起

    从宽高说起 从宽高说起,我们知道一个物体的大小是由长.宽.高三个方向的尺寸决定的,但是你想啊电脑显示器是一个平面的,而不是3维,另因网页大部分情况下只需要使用到2维,所以为了简单在CSS中只有宽和高的 ...

  5. CSS学习笔记(9)--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  6. CSS中input输入框点击时去掉外边框方法【outline:medium;】----CSS学习

    CSS 中添加 outline:medium; JS 控制焦点: $("#CUSTOM_PHONE").focus(function(event){ // this.attr(&q ...

  7. CSS学习系列2 -- CSS中的清除浮动

    CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...

  8. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  9. css学习--css基础

    学习慕课网笔记,课程:http://www.imooc.com/code/2024 1.css选择器 子选择器:parent>child 子选择器是指选择parent的范围内的第一个子元素.这里 ...

随机推荐

  1. ajax里面success函数return上层接收不到

    开发一个小功能,在success fail里直接return,没有收到返回值.排查,查了下往上的博客,参考了以下三个: http://blog.csdn.net/fairyhawk/article/d ...

  2. 为什么eclipse中代码提示错误,但是项目目录却不提示错误

    public class Aasf { public static void main(String[] args) { System.out.println("");aihfsa ...

  3. HTML <label> 标签

    定义:<label> 标签为 input 元素定义标注(标记). 用法: label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本, ...

  4. Java 数组声明与初始化

    引言 学习了好久的java,每次要写数组的声明和初始化代码,总是理不清.最近又碰到了一次这种情况.这次拿出<Thinking In Java>好好总结一翻. 数组声明 对于数组的声明其实都 ...

  5. 涵涵和爸爸习惯养成进度表(一)(May 5 - May 25)

    规则说明 三周时间(21天)内,没有哭脸,不超过三个无表情脸,可以给一个奖励(动画书等) 涵涵违反规则,在爸爸和妈妈都同意的情况下,可以给无表情脸 爸爸违反规则,在妈妈和涵涵都同意的情况下,可以给无表 ...

  6. SQL sever 学习,2016,5,31,(重点:100行以后,字符串操作。)

    --别名和表达式select OrderDate,YEAR(OrderDate)as 订单年份from orders; --选择select OrderDate,YEAR(OrderDate)as 订 ...

  7. Objective-C学习笔记-第四天(1)

    解决以下昨天遇到的问题 1.@class与import是怎么样的呢?参考:http://www.cnblogs.com/ios8/p/ios-oc-test.html 在头文件中, 一般只需要知道被引 ...

  8. jpa 表字段转bean对象

    select 'private ' || decode(v_type, 'int', 'Integer', 'float', 'Double', 'date', 'Date', 'String') | ...

  9. oracle全文索引

    1.检查数据库是否具有全文检索功能(这是针对已经建成使用的数据库) 查看用户中是否存在ctxsys用户,查询角色里是否存在ctxapp角色.以上两个中的1个不满足(不存在),则说明没有装过全文检索功能 ...

  10. 排球积分规则功能说明书(spec)

    排球规则: 由技术性规定.非技术性规定和场地设备要求等方面的内容组成的.每场比赛仍为五局三胜,前四局每局先得25分为胜,第五局先得15分者为胜.当出现24平或14平时,要继续比赛至领先2分才能取胜. ...