update css 02

This commit is contained in:
qianguyihao 2018-01-10 22:01:18 +08:00
parent 7ce3cb81a8
commit 06dc274003
5 changed files with 95 additions and 73 deletions

View File

@ -44,6 +44,12 @@
## 推荐阅读
- [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
我自己整理的。

View File

@ -1,5 +1,4 @@
> 本文最初于2015-10-02发表于[博客园](http://www.cnblogs.com/smyhvae/p/4852863.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 以下是正文。
@ -107,7 +106,7 @@
例如:
```html
<ol >
<ol >
<li>呵呵哒1</li>
<li>呵呵哒2</li>
<li>呵呵哒3</li>
@ -124,25 +123,25 @@
举例:
```html
<ol type="1">
<ol type="1">
<li>呵呵</li>
<li>呵呵</li>
<li>呵呵</li>
</ol>
<ol type="a">
<ol type="a">
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>呵呵</li>
</ol>
<ol type="i" start="4">
<ol type="i" start="4">
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ol>
<ol type="I" start="10">
<ol type="I" start="10">
<li>么么</li>
<li>么么</li>
<li>么么</li>
@ -503,7 +502,7 @@ int leixing de bianliang guocheng shi yizhon
- `bordercolor="#00FF00"`:给框架的边框定义颜色。这个属性在框架集合`<frameset>`中同样适用。
颜色这个属性在IE浏览器中生效但是在google浏览器中无效不知道为啥。
- `frameborder="0"`或`frameborder="1"`:隐藏或显示边框(框架线)。
- `frameborder="0"`或`frameborder="1"`:隐藏或显示边框(框架线)。
- `name`:给框架起一个名字。
利用`name`这个属性,我们可以在框架里进行超链。
@ -633,7 +632,7 @@ POST方式
昵称:<input value="哈哈" readonly=""><br>
名字:<input type="text" value="name" disabled=""><br>
密码:<input type="password" value="pwd" size="50"><br>
性别:<input type="radio" name="gender" value="male" checked="">
性别:<input type="radio" name="gender" value="male" checked="">
<input type="radio" name="gender" value="female" ><br>
爱好:<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
@ -769,7 +768,7 @@ text就是“文本”area就是“区域”。
<fieldset>
<legend>其他信息</legend>
性别:<input type="radio" name="gender" value="male" checked="">
性别:<input type="radio" name="gender" value="male" checked="">
<input type="radio" name="gender" value="female" ><br>
爱好:<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
@ -816,7 +815,7 @@ text就是“文本”area就是“区域”。
```html
<input type="checkbox" id="kk" />
<label for="kk">10天内免登陆</label>
<label for="kk">10天内免登陆</label>
```

View File

@ -1,8 +1,7 @@
> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4855106.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 以下是正文。
## 主要内容
@ -12,24 +11,29 @@
- 背景属性
- 列表属性
- 盒子模型
- 定位属性position、float、overflow、z-index
- 定位属性position、float、overflow等
- 鼠标的属性cursor
- 滤镜的介绍
## CSS的单位
html中的单位只有一种那就是像素px所以单位是可以省略的但是在CSS中不一样。
<font color="#0000FF">**CSS中的单位是必须要写的**,因为它没有默认单位。</font>
- **绝对单位:**1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
- **绝对单位:**
1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
各种单位的含义:
`in`英寸Inches (1 英寸 = 2.54 厘米)
`cm`厘米Centimeters
`mm`毫米Millimeters
`pt`点Points或者叫英镑 (1点 = 1/72英寸)
`pc`皮卡Picas (1 皮卡 = 12 点)
- `in`英寸Inches (1 英寸 = 2.54 厘米)
- `cm`厘米Centimeters
- `mm`毫米Millimeters
- `pt`点Points或者叫英镑 (1点 = 1/72英寸)
- `pc`皮卡Picas (1 皮卡 = 12 点)
- **相对单位:**
`px`:像素
`px`:像素
`em`印刷单位相当于12个点
`%`:百分比,相对周围的文字的大小
@ -43,6 +47,7 @@ html中的单位只有一种那就是像素px所以单位是可以省略
## 字体属性
css样式中常见的字体属性有以下几种
```html
p{
font-size:50px; /*字体大小*/
@ -52,17 +57,19 @@ p{
font-variant:small-caps; /*小写变大写*/
}
```
另外还有一个`font`属性,它是一个简写属性。指的是:可以将上面的多个属性写在一个声明里面,个人不太喜欢这种写法。
## 文本属性
CSS样式中常见的文本属性有以下几种
- `letter-spacing:0.5cm ;` 单个字母之间的间距
- `word-spacing:1cm;` 单词之间的间距
- `text-decoration:overline;` 字体修饰underline下划线、line-through中划线、overline上划线
- `text-decoration:underline;` 字体修饰:**underline下划线**、line-through中划线、overline上划线
- `text-transform:lowercase;` 单词字体大小写。uppercase大写、lowercase小写
- `color:red;` 字体颜色
- `text-align="属性值;"` 在当前容器中的对齐的方式。属性值可以是left、right、center<font color="#0000FF">**在当前容器的中间**</font>、justify
- `color:red;` 字体颜色
- `text-align="属性值;"` 在当前容器中的对齐的方式。属性值可以是left、right、center<font color="#0000FF">**在当前容器的中间**</font>、justify
- `text-transform:lowercase;` 单词的字体大小写。属性值可以是:`uppercase`(单词大写)、`lowercase`(单词小写)、`capitalize`(每个单词的首字母大写)
这里来一张表格的图片吧,一览无遗:
@ -73,15 +80,6 @@ CSS样式中常见的文本属性有以下几种
CSS样式中常见的背景属性有以下几种经常用到要记住
现在,我们把上面的比较重要的属性挑选出来,如下:
- `background-color:#ff99ff;` 设置元素的背景颜色。
- `background-image:url(images/2.gif);` 将图像设置为背景。
@ -122,7 +120,9 @@ PSpadding的区域也是有背景图的。
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-21.png)
其实这种属性的作用还是很广的。举个例子设计师设计一张宽度只有1px、颜色纵向渐变的图片然后我们通过这个属性将其进行水平方向的平铺就可以看到整个页面都是渐变的了。在搜索引擎上搜“平铺背景”就可以发现周期性的图片可以采用此种方法进行平铺。
其实这种属性的作用还是很广的。举个例子设计师设计一张宽度只有1px、颜色纵向渐变的图片然后我们通过这个属性将其进行水平方向的平铺就可以看到整个页面都是渐变的了。
在搜索引擎上搜“**平铺背景**”,就可以发现,**周期性的图片**可以采用此种方法进行平铺。
4属性值为`repeat-y`(纵向平铺)时:
@ -148,9 +148,11 @@ PSpadding的区域也是有背景图的。
举例如下:
20170812_1643.png
![](http://img.smyhvae.com/20170812_1643.png)
![](http://img.smyhvae.com/20170812_1645.png)
20170812_1645.png
**2、用单词描述属性值**
@ -172,11 +174,12 @@ PSpadding的区域也是有背景图的。
打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>,可以看到官网的效果是比较炫的:
20170812_1945.png
![](http://img.smyhvae.com/20170812_1945.jpg)
检查网页后找到网站背景图片的url<https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg>。背景图如下:
20170812_1950.jpg
![](http://img.smyhvae.com/20170812_1950.jpg)
实际上我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可
@ -194,7 +197,10 @@ PSpadding的区域也是有背景图的。
很多网站的首页都会有banner图网站最上方的全屏大图叫做「**通栏banner**」这种图要求横向的宽度特别大。比如说设计师给你一张1920*465的超大banner图如果我们把这个banner图作为img标签直接插入网页中会有问题的首先图片不在网页的中间其次肯定会出现横向滚动条。如下图所示
20170813_1102.gif
![](http://img.smyhvae.com/20170813_1102.gif)
正确的做法是将banner图作为div的背景图这样的话背景图超出div的部分会自动移溢出。需要给div设置的属性如下
@ -207,12 +213,11 @@ PSpadding的区域也是有背景图的。
}
```
上方代码中我们给div设置height高度为banner图的高度不需要设置宽度因为宽度会霸占整行)。效果如下:
上方代码中我们给div设置height高度为banner图的高度不需要设置宽度让宽度自动霸占整行即可)。效果如下:
20170813_1119.gif
上图可以看出将banner图作为div的背景后banner图会永远处于网页的正中间水平方向
![](http://img.smyhvae.com/20170813_1119.gif)
上图可以看出将banner图作为div的背景后banner图会永远处于网页的正中间水平方向来看
### background-attachment属性
@ -221,11 +226,9 @@ PSpadding的区域也是有背景图的。
- `fixed`(背景就会被固定住,不会被滚动条滚走)。
- `scroll`与fixed属性相反默认属性
`background-attachment:fixed;`的效果如下:
20170813_1158.gif
![](http://img.smyhvae.com/20170813_1158.gif)
### background综合属性
@ -347,7 +350,7 @@ IE盒子模型
</style>
</head>
<body>
<div>有生之年</div>
@ -358,6 +361,7 @@ IE盒子模型
</html>
```
上面的代码中我们对div标签设置了边距等信息。打开google浏览器按住F12显示效果如下
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-27.png)
@ -384,6 +388,7 @@ padding:20 30 40 50;
定位属性position的属性值可以是absolute、relative。
position定位分为绝对定位和相对定位
- `position:absolute;` <font color="#0000FF">**绝对定位**</font>:定义横纵坐标,原点在父容器的左上角。<font color="#0000FF">**脱离了本身的顺序流**</font>。横坐标用left表示纵坐标用top表示。
@ -433,7 +438,7 @@ position定位分为绝对定位和相对定位
width: 200px;
height: 200px;
border: 1px solid red;
border: 1px solid red;
}
</style>
</head>
@ -477,10 +482,11 @@ position定位分为绝对定位和相对定位
### 4、overflow属性超出范围的内容要怎么处理
`overflow`属性的属性值可以是:
- `auto`:浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
- `visible`:默认值。多余的内容不剪切也不添加滚动条,会全部显示出来。
- `hidden`:不显示超过对象尺寸的内容。
对象将以包含对象的 window 或 frame 的尺寸进行裁切,并且 clip 属性设置将失效。
对象将以包含对象的 window 或 frame 的尺寸进行裁切,并且 clip 属性设置将失效。
- `scroll`:总是显示滚动条。
针对上面的不同的属性值,我们来看一下效果:
@ -533,6 +539,7 @@ position定位分为绝对定位和相对定位
```
效果:
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-31.png)
@ -554,11 +561,13 @@ position定位分为绝对定位和相对定位
## 鼠标的属性cursor
鼠标的属性`cursor`有以下几个属性值:
- `auto`:默认值。浏览器根据当前情况自动确定鼠标光标类型。
- `pointer`IE6.0,竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
- `auto`:默认值。浏览器根据当前情况自动确定鼠标光标类型。
- `pointer`IE6.0,竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
- `hand`:和`pointer`的作用一样:竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
比如说,我想让鼠标放在那个标签上时,光标显示手状,代码如下:
```html
p:hover{
cursor: pointer;
@ -566,23 +575,24 @@ p:hover{
```
另外还有以下的属性:(不用记,需要的时候查一下就行了)
all-scroll :  IE6.0 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
col-resize :  IE6.0 有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair :  简单的十字线光标。
default :  客户端平台的默认光标。通常是一个箭头。
hand :  竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
move :  十字箭头光标。用于标示对象可被移动。
help :  带有问号标记的箭头。用于标示有帮助信息存在。
no-drop :  IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed :  IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
progress :  IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize :  IE6.0 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text :  用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
vertical-text :  IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
wait :  用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
*-resize :  用于标示对象可被改变尺寸方向的箭头光标。
w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url ) :  IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。
- all-scroll :  IE6.0 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
- col-resize :  IE6.0 有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
- crosshair :  简单的十字线光标。
- default :  客户端平台的默认光标。通常是一个箭头。
- hand :  竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
- move :  十字箭头光标。用于标示对象可被移动。
- help :  带有问号标记的箭头。用于标示有帮助信息存在。
- no-drop :  IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
- not-allowed :  IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
- progress :  IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
- row-resize :  IE6.0 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
- text :  用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
- vertical-text :  IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
- wait :  用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
- *-resize :  用于标示对象可被改变尺寸方向的箭头光标。
- w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
- url ( url ) :  IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。
## 滤镜
@ -623,7 +633,7 @@ url ( url ) :  IE6.0 用户自定义光标。使用绝对或相对 url
## 导航栏的制作(本段内容忽略)
## 导航栏的制作(本段内容忽略)
现在我们利用float浮动属性来把无序列表做成一个简单的导航栏吧效果如下
@ -641,7 +651,7 @@ url ( url ) :  IE6.0 用户自定义光标。使用绝对或相对 url
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;/*去掉列表前面的圆点*/

View File

@ -1,6 +1,6 @@
从零开始学前端做一个web全栈工程师。持续更新...
前端入门和进阶教程。从零开始学前端做一个web全栈工程师。持续更新...
## HTML

View File

@ -37,4 +37,11 @@
- [小白谈数据脱敏](http://www.54tianzhisheng.cn/2017/10/28/Data-Desensitization/)
- [不管做什么,和对的人在一起最重要]()
### 2018-01-10
- [MAC全栈开发环境搭建指南](https://mac.aotu.io/)
今天发现这个网址感觉还不错。在里面发现了一个比较好的Sublime Text主题。