dolola的博客

practice 默认无序列表 星期一 星期二 星期三 圆圈无序列表 星期一 星期二 星期三 正方形无序列表 星期一 星期二 星期三 默认有序列表 星期一 星期二 星期三 大写字母有序列表 星期一 星期二 星期三

transform:translate(50px,100px);左侧为X轴，顶部为y轴，根据给定的参数移动 transform: rotate(30deg); 旋转，正数为顺时针负数为逆时针 transform: scale(2,3); 缩放，第一个值为宽度的倍数，第二个值为高度的倍数 transform: skew(30deg,20deg);第一个值为水平的倾斜角度，正值向左，负值向右

transition-property：width； property规定了过渡的元素，这里是宽度。 transition-duration：2s; duration规定了过渡的时间，默认是0； transition-delay：2s；delay规定了指针悬浮多久触发过渡。 transition-timing-function: linear|ease|ease-in|ease-out|

column column-count:3; 分为三列 column-gap：50px;列与列之间的距离 column-rule-color:lightblue; 分割线颜色 column-rule-style:dotted; 分割线样式 column-rule-width:1px; 分割线宽度 column-width：200px； 每列的宽度 column-span:

后代选择器就不说了 子代选择器 div>p 被div直接包裹的p标签都会被选中，如果是div包裹span再包裹p则不会被选中。 然后就是相邻兄弟选择器了 div+p 这里有一点 要注意 hi hi hi 这段代码中使用div+p只会选中选中第一个P标签 但是 hello hello hello hello 使用div+div会选中出第一行之外的所有，因为+

display，默认是展示的，如果给值none则为隐藏。 display:none; visibility也是如此，给值hidden则为隐藏。 但二者有区别。 practice .hidden{visibility:hidden;} .hidden2{display:none;} 这是一个通过visibility展示的可见标题 这是一个通过vid

怎么说呢，觉得这里面之前没有触及的是行高 line-height:;百分之百的行高是紧密相邻的，所以大多数浏览器用是是110%或者120% 然后是最大最小高度和宽度。 新手上路，欢迎斧正。

大概分三个部分。 常驻内容（词贫） 就是一直显示的那种。 用div包裹起来（这里的div需要包裹第二个部分，也就是下拉内容） position:relatove; display:inline-block; 下拉内容 同样用一个div标签包裹到上一个div中。 position:absolute; display:hidden; 激活 指针指上去会触发下拉菜单，通过选择器

practice div.img { margin:5px; border:1px solid #ccc; float:left; width:180px; } div.img:hover { border:1px solid #777; } div.img img { width:100%; height:100px

这一节出了个小错误，耽误了巨久，巨久。 先总结套路 然后css .img pic { height:46px; width:46px; background:url(address) } 在HTML中，图片的地址处应该加一个透明图。然后CSS里面加需要切割的图片。 犯的错误是我自己默认他们两个都是一个图，哎。

为了更好地体验，一个网页在屏幕上和打印纸上用的字体、间距可能不同，所以通过媒体类型设置。 用法 @media type{}type常用类型有all、print、screen、handheld（是手机吗？）

其中，border就是图片的边框，如果边框尺寸大于图片的尺寸会自动填充颜色。src后面跟图片的地址， 本地图片需要跟图片的路径名字以及拓展名。如果是网络图片直接写图片的链接即可。 alt我的理解是当图片无法正常显示时会用alt后面的文字来代替图片， 图片的浮动就不仔细说了。 无非是用链接标签包裹图片标签   觉得比较有意思的是图片的映射，即在一般图片的格式后面添加了usem

【name】 { } 以上是普通的属性选择器 属性和值选择器 【name=value】 { } 区别在于指定的一个值。 然后是~和| [title~=hello] { color:blue; } 将适用: Hello world Hello CSS students! 将不适用: Hi CSS students![lang|=en] { color:blue; } 将适用

border-dadius:(1-4)/(1-4); 用于实现边框的圆角，斜杠前面的值代表水平方线，后面的四个值代表竖直方向。 按照位置，可以分为左上，右上，右下，左下四个位置。 如果有四个值，则一一对应。 如果三个值，左上，右上和左下，右下。 如果两个值，左上右下，右上左下。 box-shadow: h-shadow v-shadow blur spread color inset;

practice div { border:15px solid transparent; width:250px; padding:10px 20px; } #round { border-image:url(border.png) 30 30 round; } #stretch { border-image:url(border.png) 10 10 round

background-size; length|percentage|cover|contain; length,宽度、高度，如果只给出一个值，第二个值为auto； percentage，宽度、高度，如果只给出一个值，第二个值为auto； cover，保持图片的纵横比，将图片设置为能覆盖背景区域的最小尺寸； contain，保持图片的纵横比，将图片设置为能覆盖背景区域的最大尺寸。 bac

表格标题               其中会存在跨行、跨列的情况存在。 跨行时，即一个表格可能对应着多列表格，此时使用colspan、rowspan。 我们以跨两行为例，以上代码第三行应修改为 以跨两列为例，以上代码第四行代码应修改为 关于边框，由border定义，不写和border="0

文本阴影 text-shadow: h-shadow v-shadow blur color; 盒子阴影 box-shadow: h-shadow v-shadow blur color;单词换行（只有单个单词长度超过行的长度才生效） word-wrap: normal|break-word;word-break: normal|break-all|keep-all;第二行如果是norma

首先说id选择器 #name { } 然后是class .name { } 不过class名字后面可以继续精确的某个标签元素 .name p还有就是直接对多个标签设置 h1,h2,p逗号隔开

和margin的区别在于padding可以有背景色而后者不可以,不过padding的颜色不是它自己的，而是来自他包裹的元素的。 同样有padding-left:20px;

practice 这是一些文本 这是一个包裹在div中的标题 这是一个包裹在div中的文本 这是一个包裹在div中的标题 这是一个包裹在div中的文本 这是一个包裹在div中的标题 这是一个包裹在div中的文本 这是一个文本 本章节主要是介绍了div 和span标签，因为之前有老师略微介绍过HTML的内容，所以我理解为方便通过CS

表单即 1.文字输入框  2.密码输入框框  3.单选按钮 显示给用户的值 4.多选按钮（预选按钮）显示给用户的值 5.下拉框（预选下拉框）select 同时注意标签option需要/ 6.按钮（分为提交按钮和普通按钮） 7.文本框，顾名思义，textarea,通过width和height规定长度与宽度。 8.带边框的输入框。通过fieldset和lengend定义，其中len

（01）用div布局 practice 主要的网页标签 菜单 HTML CSS JavaScript 内容在这里 版权awt20141110@gmail.com （2）用表格布局 practice

看到框架想到的单词当然是frame，但是没明白标签iframe中的i是什么缩写 这个章节相当简单，简单说就是在自己写的网页里面有个窗口来展示别的网页，有点国中国的意思。 还有一个有意思的地方就是通过点击来实现窗口展示网页的切换，类似于电视换频道。 跳转 通俗说就是先给iframe一个网址作为默认显示的网页，然后给iframe起一个名字,然后标签包裹文本链接 同时指定目标（targe

颜色，red green blue这个没什么好说的大一头脑一热看过一本PScc教程（的前几页） 比较有意思的是透明色（毕竟android顶部状态栏都开始沉浸了）。 印象中大一老师教的如下 background:#FFFFFF opacity:0.8教材是这样子的 度娘说之前老师教的那个只能对背景色起作用，下面这个只支持IE9以上。 大概就是这些吧。

这也没啥，就是类似转义字符。

呃，因为没学JS只能等以后再更了先mark。 暂时理解就像直接引用script中的内容

从背景说起， 首先想到的是桌面（我也很无奈）那就从背景图说起吧。 background-image：url（'相对路径'）; 说道背景图不能避开重复这个问题，好像是叫平铺，记得小时候自己该桌面背景经常变成N个图片同时排列到一起。 for example 解决的办法是通过 background-image:no-repeat;或者希望它在横向或者纵向重复 background

字体字体当然是先说字体了 font-family:"times new roman",times,serif; 注意的地方就是如果字体的名字超过一个字就需要加引号。 然后是大小 font-szie:20px; 还有就是W3C建议的em，换算单位是em=px/16，数学烂的人表示很无奈。 再然后就就是斜体 font-style: 参数有normal和italic。 字体

a.class:link{;} a.class:visited{;} a.class:hover:{;} a.class:active{;} 讲的是对链接四个状态的设置。有颜色，下划线，字体大小，背景色，字体。 新手上路，欢迎斧正。

就是在HTML基础上更加个性化，回顾下带代码。 list-style-image:url(''); list-style-type:circle;

放一个模仿的代码吧，不知道说什么。 新的标签就是对标题位置的改变caption { caption-side:bottom; } practice caption { caption-side:bottom; } th { background-color:green; color:white; } .type1

先偷个图 border可以加颜色显示出来比如 border: 10px solid red;

主要是style、width和colorborder-left-style:dotted; border-width:; border-left-color:;

简单三个属性style、color和width。 主要即一下style的几个值 outline-style: none dotted（点虚线） dashed（虚线） solid（实线） double groove（凹槽） ridge（垄状） inset（嵌入） outset（外凸）

主要是四个方向的距离。 margin-left:;

线性渐变 background: repeating-linear-gradient(); 最简单的只加两个颜色，比如green，yellow，会出现上方绿色渐变为黄色，在颜色后面加空格加百分比可以控制整体比例。 如果加to right，green，yellow会出现左侧绿色渐变为黄色，参数有to bottom、to top、to right、to left、to bottom right