2014第16周三CSS布局再学习摘录
今天尝试写了下前端页面,费了不少时间,做出的结果仍然惨不忍睹,感觉很简单的几个页面,在现有框架多个样式混杂下就是感觉很不自在随意,晚上回来又看了些div+css方面的基础知识。
1.CSS的class和id的区别:
在CSS样式中以小写的“点”及“.”来命名如: .css5{属性:属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器。如: .css5{属性:属性值;} 选择器在html调用为“<div class="css5">我是class例子</div> ”
在CSS样式定义的时候 以“#”来开头命名id名称如:#css5{属性:属性值;} 这个也有点像class的定义,只是class是以小写句号“.”开头命名,而ID是以“#”开头定义。 Css里的ID用法与class用法一样,只是把class换成id。如例子:在CSS样式定义ID --- #css5{height:25px;width: 200px;} ,调用ID --- <div id="css5">我是ID例子</div>。
在命名id和class类的时候特别要注意大小写,ID和class是对大小写非常敏感的,最好以英文开头,不要用中文命名CSS类名。
2.学习CSS布局:
display
是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block
或 inline
。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
block
div
是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p
、 form
和HTML5中的新元素: header
、 footer
、 section
等等。
</div>
inline
span
是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a
元素是最常用的行内元素,它可以被用作链接。
none
另一个常用的display值是 none
。一些特殊元素的默认 display 值是它,例如 script
。display:none
通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility
属性不一样。把 display
设置成 none
不会保留元素本该显示的空间,但是 visibility: hidden;
还会保留。
2014第16周三CSS布局再学习摘录的更多相关文章
- CSS布局模型学习
转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习 参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- DIV+CSS布局重新学习之float/margin/padding
之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...
- CSS布局模型学习(Float、Position、Flexbox)
一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...
- DIV+CSS布局重新学习之css控制ul li实现2级菜单
竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- DIV+CSS布局重新学习之使用A标签和CSS制作按钮
这里主要利用A元素的伪类来实现: a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hove ...
- 详解CSS布局
CSS页面布局允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.主要对文档流的改变进行布局.假设你已经掌握了CSS的选择器.属性和值,并且可能对布局有一定了 ...
- 2014第2周三Web安全学习
2014第2周三Web安全学习 先记录下自己关于json和xml作为数据传递媒介的差异:在写一个java方法时我将正确结果返回的对象转成json返回,将错误结果根据不同原因以xml形式返回,同事看后有 ...
- 再谈布局,栅栏式自适应布局的学习和实现(calc自适应布局)
布局真的很重要.一个不好的布局后期会有很多很多的bug,就像是建房子的地基一样. 首先,再一次地圣杯布局的学习,来源于该教程: http://www.jianshu.com/p/f9bcddb0e8b ...
随机推荐
- 兼容IE6,IE7和firefox可以使用的一些css hack:
.一些问题是浏览器自身的问题,遇到问题发生无法避免的情况下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:(1) a: 针对区别IE6 ...
- Python之路第三天,基础(3)-set,函数,内置函数,文件,三元运算,lambda
set集合 集合是一个无序的,不重复的元素集合. 集合的创建: name_set = {'tom','jerry','alex','rose'} 或 name_set = set(['tom','je ...
- MYSQL 没有varchar(max)这个类型。
背景: MYSQL 中不可以用varchar(max) 这种类型列来建立表 -------------------------------------------------------------- ...
- Invalidate(TRUE)与Invalidate(FALSE)区别(前者会发送WM_ERASEBKGND消息全部刷新,然后使用WM_PAINT消息绘制,而后者只发送WM_PAINT消息)
使用Invalidate(TRUE)函数时,它会向消息队列中添加了WM_ERASEBKGND和WM_PAINT两个消息. 使用Invalidate(FALSE)函数时,它只会向消息队列中添加了WM_P ...
- 转载文章:Windows Azure 基础结构服务上的 Microsoft Dynamics NAV 和 Microsoft Dynamics GP!
Windows Azure 基础结构服务(虚拟机和虚拟网络)可提供按需基础结构,该基础结构可进行伸缩以适应不断变化的业务需求.无论您是在虚拟机中创建新应用程序,还是运行现有应用程序,我们都将按分钟收费 ...
- java的几个版本以及jre,jdk等概念——【转载】JDK、Java SE、Java EE、Java ME我该选
我们平时使用的一些软件,有一部分需要Java环境的支持,但是SUN那么多的产品,让人眼花缭乱的版本号,前看后看都差不多的缩写,让我们选择起来的时候常常望而却步,只好跟着感觉走.所以下面我要介绍的就是那 ...
- 练习3.20 a 将中缀表达式转换为后缀表达式
//将中缀表达式转换为后缀表达式 int main() { ; ]={,,,,,,,}; char tmp; PtrToStack s; s = CreateStack( MaxSize ); ) { ...
- 全国计算机等级考试二级教程-C语言程序设计_第9章_数组
四维数组,可用于航天卫星,三维+时间 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> ...
- android 网络状态判断【转】
import java.net.InetAddress; import android.app.Activity;import android.content.Context;import andro ...
- C语言中为什么不能把char**赋给const char**
这是我在知乎回答的一个问题. 这个问题是C中的一个深坑,首先说结论: char ** 和 const char ** 是两个不相容(incompatible)的类型,能够理解为不能直接赋值 在C11的 ...