学习css中得与惑
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中得与惑的更多相关文章
- 深入学习CSS中如何使用定位
CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对 ...
- WEB学习-CSS中Margin塌陷
margin的塌陷现象 标准文档流中,竖直方向的margin不叠加,以较大的为准. 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的: 盒子居中margin:0 auto; marg ...
- CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法
在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...
- 从逻辑思维中学习CSS,从宽高说起
从宽高说起 从宽高说起,我们知道一个物体的大小是由长.宽.高三个方向的尺寸决定的,但是你想啊电脑显示器是一个平面的,而不是3维,另因网页大部分情况下只需要使用到2维,所以为了简单在CSS中只有宽和高的 ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- CSS中input输入框点击时去掉外边框方法【outline:medium;】----CSS学习
CSS 中添加 outline:medium; JS 控制焦点: $("#CUSTOM_PHONE").focus(function(event){ // this.attr(&q ...
- CSS学习系列2 -- CSS中的清除浮动
CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...
- CSS学习系列1 - CSS中的盒子模型 box model
css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距. 盒子模型有一个属性box-sizing属性来说明是否包括 ...
- css学习--css基础
学习慕课网笔记,课程:http://www.imooc.com/code/2024 1.css选择器 子选择器:parent>child 子选择器是指选择parent的范围内的第一个子元素.这里 ...
随机推荐
- Java 设计模式学习
看完headfirst设计模式,简单总结一下. 写在最前面:设计模式的关心的问题为"弹性.易于维护.易于扩展",通过对模式的应用,让自己的代码能够得到良好的可塑性.但是个人认为不能 ...
- Android 6.0 新特性
首先谈一谈Android 6.0的一些新特性 锁屏下语音搜索 指纹识别 更完整的应用权限管理 Doze电量管理 Now onTap App link 在开发过程中与我们关系最密切的就是"更完 ...
- 用profile分析算法性能
在命令行输入:profile viewer 会出现如下图所示探查器: 在运行此代码的后面的输入框中输入要运行的程序,然后点击启动探查,就会自动探查. 探查结束之后,会给出每个函数的调用次数.运行时间等 ...
- ACM 暴力搜索题 题目整理
UVa 129 Krypton Factor 注意输出格式,比较坑爹. 每次要进行处理去掉容易的串,统计困难串的个数. #include<iostream> #include<vec ...
- php+mysql的微信文章发布平台
如何在微信上发表丰富图文的文章? 最近在新浪云平台上做了一个php+mysql的微信文章发布平台,丫丫说. 在线编辑文章,扫一扫即可分享到微信,发到朋友圈,非常简单! http://yayashuo. ...
- 自增序号,而且默认变量就是$i,也就是说在你的volist标签之内,可以直接使用$i
<volist name="vlist" id="v"> <{$i}> // 直接使用$i </volist>
- BZOJ 2898 模拟
普及组水题. 按位模拟第一个序列和第二个序列,细节比较多.. 仅为部分看后面两位的和,如果大于10就近位小于8就不进位等于9就看下一位. #include <cstdio> #define ...
- 安装XAMPP后APACHE不能启动解决方法
自己的xampp中的apache启动失败,在网上找到了一篇文章,感觉不错,原文如下: Xampp的获得和安装都十分简单,你只要到以下网址: http://www.apachefriends.org/z ...
- 2.ViewBag、ViewData、TempData之间的区别
1.ViewBag and ViewData(非跨视图访问) 1)ViewBag是一种dynamic动态类型,用户可以自定义属性并为其赋值,它会在运行时动态解析(例:可以作为变量.数组等各种对象传递并 ...
- Ansible-Tower快速入门-6.查看tower的仪表板【翻译】
查看tower的仪表板 到这一步,我们已经可以在屏幕上看到tower的仪表板了,我们可以看到你目前"主机""资产清单"和"项目"的汇总信息, ...