跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!!

如图:页面下拉还有侧栏,中间内容等。

可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示。

收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面。就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀。

CSS的盒子模型,这个必须懂

这个图片是我看书看到的,觉得比较容易理解就拍下来了

   


选择器

一、基本分类:

1,标签选择器

2,类选择器class

3,ID选择器id

二、优先级:id > class > 标签

三、伪选择器:其实就是元素的一种状态

a:link:超链接被点前状态

a:visited:超链接点击后的状态

a:hover:悬停在超链接上的状态

a:action:点击超链接时的状态

在定义这些状态时,有一个顺序:L V H A

id和class属性名称使用限制

无论是应用到div,还是其他对象的id中,同一名称的id在当前页面中只能使用一次,而class属性名称可以重复使用多次。

框架中百分比的关系

例如,container等外层div的宽度设置为80%,是相对浏览器窗口而言的比例。而后面content和side这两个内层div的比例是相对于外层div而言的,即在container宽度的基础上而言的。

visibility和display属性的区别

visibility和display都可以达到隐藏页面元素的目的,但是还是有区别的。

如果想隐藏某元素,但还想在页面上保留该元素的空间,则使用visibility:hidden。

如果想在隐藏某元素的同时,让其他内容填充空白空间,则使用display:none。

在HTML中导入CSS文件技巧

为了提高相同的样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件。

如:p.css     div.css   . . .  
在一个总的css文件中使用css的import将多个标签样式文件导入到总的css文件中,

然后在HTML页面上,使用link标签导入这个总的css文件即可。

all.css

@import url(“p.css”);

@import url(“div.css”);

在HTML中导入:<link rel=”stylesheet” href=”all.css”>

CSS属性书写顺序

建议遵循:布局定位属性 –> 自身属性  –>  文本属性  –>  其他属性。 尽量保证同类属性写在一起。

属性列举:

布局属性:margin、padding、float(包括clear)、position(top,right,bottom,left即上右下左)、display、visibility、overflow等。

自身属性:width、height、background、border等。

文本属性:font、color、text-align、text-decoration、text-indent等。

其他属性:list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序)、zoom等。

CSS学习笔记总结和技巧的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

  1. 数据库和Doctrine(转载自http://www.111cn.net/phper/332/85987.htm)

    对于任何应用程序来说最为普遍最具挑战性的任务,就是从数据库中 读取和持久化数据信息.尽管symfony完整的框架没有默认集成ORM,但是symfony标准版,集成了很多程序,还自带集成了Doctrin ...

  2. 用c#在Access数据库中创建新表

    生成表NewTable,该表有文本字段Field1和整型字段Field2 private void CreateNewTable()  {    OleDbConnection conn = new ...

  3. Django新手图文教程

    Django新手图文教程 本文面向:有python基础,刚接触web框架的初学者. 环境:windows7   python3.5.1  pycharm专业版  Django 1.10版 pip3 一 ...

  4. 转:支撑Github的开源技术

    原文来自于:http://www.infoq.com/cn/news/2014/03/projects-power-github Github在3月19号开放了新的项目展示页面(Showcase),S ...

  5. 转:VC中UpdateData()函数的使用

    VC中UpdateData()函数的使用 UpdateData(FALSE)与UpdateData(TRUE)是相反的过程     UpdateData(FALSE)是把程序中改变的值更新到控件中去  ...

  6. ECharts使用心得——矩阵树图

    1. 缘起 最近实验室 boss 让用矩形树图做一下研究数据的展示,囧,矩形树图是什么鬼.问了问师兄,说用 R 语言可以实现,让我去研究一下. = =,那这周不是不用干别的了. 刚好最近在研究百度出的 ...

  7. cf D. Broken Monitor

    http://codeforces.com/contest/370/problem/D 题意:输入一张图,上面只有两个字符'w'和‘.’ ,如果可以用一个正方形把所有的‘w’围起来,所有的‘w’都在正 ...

  8. 【HDOJ】2585 Hotel

    字符串水题. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 55 cha ...

  9. iOS 9之分屏多任务(Split View)

    金田(github 示例源码) 多任务(multitasking)算是iOS9中最引人瞩目的核心新特性了,之前越狱版用户就用过类似的插件,微软的 苏菲 (Windows Surface)系列也有分屏多 ...

  10. delphi客户端调服务器端的java webservice如何在参数中传对象? 转

    我试过java返回一个对象到delphi端没问题,可反过来,delphi通过参数传一个对象到java,java端得到的对象值变为空,不知道是不是delphi这边设置或者对象注册方面有问题,究竟该怎么解 ...