2016.3.16__CSS3_选择器_边框_背景_蒙版mask__第九天

CSS3

假设您认为这篇文章还不错。能够去H5专题介绍中查看很多其它相关文章。

今日课程预览

1. CSS3 的选择器

1.1 子选择器

比如：设置div下一级的p标签的颜色属性

div>p
{
background-color:yellow;
}

1.2 相邻兄弟选择器

解释：可选择紧接在还有一元素后的元素，且二者有同样父元素。

假设想属性设置成功：则必须满足几个条件：
1.要有一个h1标签；
2.要有一个p标签。
3.是同级兄弟关系；
4.必须相邻的兄弟关系。

h1 + p {
margin-top:50px;
}

1.3 同级元素通用选择器

为全部同样的父元素中位于 p 元素之后的全部 ul 元素设置背景：

p~ul
{
background:#ff0000;
}

注意：
element1~element2 选择器 ： element1 之后出现的全部 element2。
两种元素必须拥有同样的父元素，可是 element2 不必直接紧随 element1

1.4 属性选择器

属性选择器（attribute选择器）(两种)

第一种:

作用：选择带有某种属性的全部元素

格式：element[attribute]

代码例如以下：

    <a href="https://www.baidu.com/" target="_blank">带有target属性</a>
    <a href="https://www.baidu.com/">不带有target属性</a>
    <a href="https://www.baidu.com/" target=“_blank”>又一个带有target属性的a标签</a>
    <input type="text" name="name1" />
    <input type="text" />
    <input type="text" name="name1" />

    a[target]{
        font-size: 40px;
        color: red;
    }

    input[name]{
        width: 200px;
    }

另外一种 :

格式：[attribute=value]

代码例如以下：

    <a href="https://www.baidu.com/" target="_blank">带有target属性</a>
    <a href="https://www.baidu.com/" target="_blank">带有target属性</a>
    <a href="https://www.baidu.com/">不带有target属性</a>
    <a href="https://www.baidu.com/" target="_parent">又一个带有target属性的a标签</a>
    <input type="text" name="name1" />
    <input type="text" />
    <input type="text" name="name1" />
    <input type="text" name="name2" />

    a[target=_blank]{
        color: pink;
    }
    input[name=name1]{
        border: solid 10px red;
    }

1.5 伪类选择器

类型 举例 说明
:before p:before 在每一个 <p> 元素的内容之前插入内容。
:after p:after 在每一个 <p> 元素的内容之后插入内容。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每一个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素開始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每一个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，可是从最后一个子元素開始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每一个 <p> 元素。

2. CSS边框属性

2.1 border-radius 属性

border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性。

语法：border-radius: 1-4 length|% / 1-4 length|%;

注意:

每一个半径的四个值的顺序是：左上角，右上角。右下角。左下角。

假设省略左下角，右上角是同样的。假设省略右下角，左上角是同样的。

假设省略右上角，左上角是同样的。

值 描写叙述
length 定义弯道的形状。
% 使用%定义角落的形状。

样例 1

border-radius:2em;

is equivalent to:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

样例 2

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

2.1.1 练习

见最后

2.2 box-shadow 属性

box-shadow属性能够设置一个或多个下拉阴影的框。

语法:

box-shadow: h-shadow v-shadow blur spread color inset;

注意：

boxShadow 属性把一个或多个下拉阴影加入到框上。

该属性是一个用逗号分隔阴影的列表，每一个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset keyword来规定。

省略长度的值是 0。

值 说明
h-shadow 必需的。水平阴影的位置。

同意负值
v-shadow 必需的。

垂直阴影的位置。同意负值
blur 可选。模糊距离
spread 可选。

阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。

从外层的阴影（開始时）改变阴影内側阴影

 
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div
    {
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
    }
    </style>
    </head>
    <body>

    <div></div>

    </body>
    </html>

内阴影效果展示

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        div{
            height: 100px;
            width: 100px;
            background-color: #ccc;
            /*border: 1px solid red;*/
            /*box-shadow: 1px 1px 15px rgba(0,0,0,0.7),5px 5px 30px red;*/
            box-shadow: inset 1px 1px 15px rgba(0,0,0,0.7);
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

2.3 border-image 属性

border-image属性是速记属性用于设置

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

省略的值设置为它们的默认值。

值 描写叙述
border-image-source 用于指定要用于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset 用于指定在边框外部绘制 border-image-area 的量
border-image-repeat 这个样例演示了怎样创建一个border-image 属性的button。

border-image-source

使用方法：

border-image-source:none/image;

用例：

div
{
border-image-source: url(border.png);
}

border-image-slice

使用方法：

border-image-slice: number|%|fill;

用例：

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

注意:

此属性指定顶部。右，底部，左边缘的图像向内偏移，分为九个区域：四个角。四边和中间。图像中间部分将被丢弃（全然透明的处理）。除非填写keyword。假设省略第四个数字/百分比，它和第二个同样的。假设也省略了第三个。它和第一个是同样的。假设也省略了第二个。它和第一个是同样的。

border-image-width

使用方法：

border-image-width: number|%|auto;

用例：

div
{
border-image-source: url(border.png);
border-image-width: 30 30;
}

注意：

border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部。左。两側向内距离。假设第四个值被省略，它和第二个是同样的。假设也省略了第三个，它和第一个是同样的。假设也省略了第二个。它和第一个是同样的。负值是不同意的。

border-image-outset

使用方法：

border-image-outset: length|number;

用例：

div
{
border-image-source: url(border.png);
border-image-outset: 30 30;
}

注意：

border-image-outset用于指定在边框外部绘制 border-image-area 的量。包含上下部和左右部分。

假设第四个值被省略，它和第二个是同样的。

假设也省略了第三个，它和第一个是同样的。

假设也省略了第二个。它和第一个是同样的。

不同意border-im-outset拥有负值。

border-image-repeat

使用方法：

border-image-repeat: stretch|repeat|round|initial|inherit;

用例：

div {
border-image-source: url(border.png);
border-image-repeat: repeat;
}

拓展：

http://www.runoob.com/cssref/css3-pr-border-image-repeat.html

2.4 text-shadow 属性

text-shadow 属性应用于阴影文本。

语法

text-shadow: h-shadow v-shadow blur color;

注意：

text-shadow属性连接一个或很多其它的阴影文本。

属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

值 描写叙述
h-shadow 必需。水平阴影的位置。同意负值。
v-shadow 必需。

垂直阴影的位置。

同意负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。參阅 CSS 颜色值。 
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {text-shadow:2px 2px #FF0000;}
    </style>
    </head>
    <body>

    <h1>Text-shadow effect</h1>

    <p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p>

    </body>
    </html>

3.CSS3的背景

3.1 background-clip属性

background-clip属性指定背景绘制区域。

语法：

background-clip: border-box|padding-box|content-box;
值 说明
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。 
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div
    {
    width:300px;
    height:300px;
    padding:50px;
    background-color:yellow;
    background-clip:content-box;
    border:2px solid #92b901;
    }
    </style>
    </head>
    <body>

    <div>
    Lorem ashdiuashdkajbsdkjbaskdjkakd
    </div>

    </body>
    </html>

3.2 background-Origin属性

background-Origin属性指定background-position属性应该是相对位置。

注意假设背景图像background-attachment是”固定”，这个属性没有不论什么效果。

background-origin: padding-box|border-box|content-box;
值 描写叙述
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框 
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div
    {
    border:1px solid black;
    padding:35px;
    background-image:url(‘smiley.gif‘);
    background-repeat:no-repeat;
    background-position:left;
    }
    #div1
    {
    background-origin:border-box;
    }
    #div2
    {
    background-origin:content-box;
    }
    </style>
    </head>
    <body>

    <p>background-origin:border-box:</p>
    <div id="div1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

    <p>background-origin:content-box:</p>
    <div id="div2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

    </body>
    </html>

3.3 background-size属性

background-size属性指定背景图片大小。

background-size: length|percentage|cover|contain;
值 描写叙述
auto 假设不做设置。默认是 auto（自己主动）
length 设置背景图片高度和宽度。

第一个值设置宽度，第二个值设置的高度。

假设仅仅给出一个值。第二个是设置为”atuo(自己主动)”
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。

假设仅仅给出一个值，第二个是设置为”auto(自己主动)”
cover 此时会保持图像的纵横比并将图像缩放成将全然覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body
    {
    background:url(/try/demo_source/img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
    padding-top:40px;
    }
    </style>
    </head>
    <body>
    <p>
    Lorem ipsum。中文又称“乱数假文”。 是指一篇经常使用于排版设计领域的拉丁文文章 ，基本的目的为測试文章或文字在不同字型、版型下看起来的效果。
    </p>

    <p>原始图片: <img src="/try/demo_source/img_flwr.gif"  alt="Flowers" width="224" height="162"></p>

    </body>
    </html>

4. CSS3 蒙版

会用PS的童鞋一定知道“蒙版”的概念，它能够在图片上实现一定的遮罩效果，当然这里我们不介绍ps里的蒙版，而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果。

大家对-webkit-mask这一属性可能不太熟悉。或许有非常多人都是第一次见到。没错。这一属性也是还未被众多浏览器所支持的CSS属性，眼下支持这一属性的仅有 -webkit- 前缀的谷歌及safari浏览器，可是相信在不久的未来这一属性将被其它主流浏览器所支持，以下我们来一睹为快。

mask 属性
-webkit-mask-image: url / gradient 能够使用图片或渐变作为遮罩层
-webkit-mask-repeat: repeat / repeat-x / repeat-y / no-repeat
-webkit-mask-position: x y;
-webkit-mask-clip: border / padding / content
-webkit-mask-origin: border / padding / content 
    <!DOCTYPE HTML>
    <html>
     <head>
      <meta charset="utf-8">
      <title> mask遮罩蒙版 </title>
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <style type="text/css">
     img{-webkit-mask-image:url(‘2.png‘);}
      </style>
      <link href="" style="text/css" rel="stylesheet"/>
     </head>
     <body>
      <img src="1.jpg"/>
     </body>
    </html>

也可将css部分更改为渐变的蒙版样式

img{
-webkit-mask-image:-webkit-radial-gradient(50%
50%,rgba(0,0,0,0),rgba(0,0,0,1));
}

渐变蒙版效果展示

.demo2{
    width: 300px;
    height: 200px;
    background: url("img/mask1.jpg") no-repeat;
    -webkit-mask: -webkit-gradient(linear,left top,right bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}

能够更改蒙版的起始位置（在上面的代码中加入例如以下代码）

-webkit-mask-position:70px 70px;

5. 分栏（拓展）

分栏效果

column

column-count：number； 设置内容分为多少栏显示

column-width：长度单位；设置每一栏的宽度而不设定元素的宽度

column-gap:长度单位;设置多栏之间的间隔距离

column-rule:宽度。颜色;在栏与栏之间添加一条间隔线。相似border.

column-span:all/none;设置是否跨栏显示

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title> column分栏效果 </title>
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
 div{width:1000px;}
 p{text-indent:2em;padding:0;margin:0;}
  </style>
  <link href="" style="text/css" rel="stylesheet"/>
 </head>
 <body>
  <div>
  <p>和平，使人类处于一种更近似的高度。

我们内心的辉煌梦想似乎在这个乏英雄年代显得格格不入，仅仅能在已逝的峥嵘岁月中艳羡那些以前高大伟岸的身影。我们或许非常难企及他们在特定历史环境中创造的丰功伟绩。可是在历史的暮色里。伟人们永不佝偻的却是他们高尚的人格和崇高的理想。</p>
  <p>理想，是我们为自己确定的人生最大值。仅仅有逐渐接近理想，才干够获得更为充盈的人生。那么，我们最好还是将人生的最大值确定大一些，若伟人一般置心高处。以他们一样高远的视角来关注社会，用他们一样宽阔的胸襟去容纳世界。古人曾云：“虽不能至，心向往之”虽然我们可能终于不能如伟人一般求证出这个过大的最大值，但仅仅要你曾执着以求，你便拥有了不断进取、无限延伸的人生。

仅仅要远处的那面高扬的理想之旗仍在招展，你就不会为取得一点小成就而自我满足、停步不前；也不会因身处逆境便自我消沉、萎畏退缩；更不会因身处恶境而同流合污、自甘堕落。</p>
<p>心在高处，不是欲扫天下而不扫一屋的好高骛远。目空一切。

而使一种着眼大处、大度从容、胸襟开阔的人生境界。如此，你就不会变得鼠目寸光、患得患失、蝇营狗苟。

一个拥有伟人般高尚品行和宽阔胸襟的人。或许依旧平凡，但绝不会平凡。就像那灯火，再微弱，仅仅要放于高处，便能最大限度的照射别处。</p>
<p>心在高处，不是像尼採那样自诩为太阳似的自我膨胀、自命不凡。

我们并非要去刻意追求非凡。仅仅是想让自己的一生在与理想的无限接近中变得无限充实丰盈。

假设你的理想是成为太阳。那么就像太阳那样默默地燃烧发光。而不是像闪电那样，即使是瞬间的闪烁也要伴以震耳欲聋的雷声。</p>
<p>心在高处。不是自不量力、不切实际。我们明晓得自身的能力与理想之间的差距，甚至明确我们的步伐终不可能全然覆盖现实与理想之间的距离。

我们以自身的详细行动一步一步地去接近它，即使不能全然达到那至美的境界。但至少，我们最大限度的接近了它。既然没有人注定成为伟人。那么，也就没有人注定成为平凡的屈膝于现实的现实主义者。那就做一仅仅不知疲倦地飞向太阳的玄鸟吧，虽然总难抵临，也最大限度的接近了辉煌。</p>
<p>有志者，事未必成。但。尽吾力。然后无悔。</p>
<p>在顺境里不滞留，在逆境里不消沉，在恶境里不堕落，在绝境里不绝望，正是由于自己有一颗永远置于高处的不曾沦落的心。</p>
</div>
 </body>
</html>

进行初步的分栏，分为3栏显示

即在css代码中加入例如以下内容：

div{width:1000px; -webkit-column-count:3;}/*此句为新加内容*/

控制栏和栏之间的宽度，创建分隔线，设置分隔线的样式和颜色

-webkit-column-gap:50px;/*控制每两个栏之间距离为50像素*/
-webkit-column-rule:5px dotted #00f;/*加入一条蓝色虚线分隔线，注意像素、样式和颜色之间均使用空格分隔开*/

6. 练习

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: #ccc;
        border-radius: 20px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: #ccc;
        border-radius: 50px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: #ccc;
        /*border-radius: 50px;*/
        border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: #ccc;
        /*border-radius: 50px;*/
        border-radius: 50px 0px 50px 50px/50px 0px 50px 50px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: #ccc;
        /*border-radius: 0 0 0 50px/0 0 0 50px;*/
        border-radius: 0 0 0 50px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
***
6.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        width: 200px;
        height: 100px;
        background-color: #ccc;
        /*border-radius: 100px 100px 100px 100px / 50px 50px 50px 50px;*/
        border-radius: 100px/50px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

7.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        width: 0;
        border: 100px solid red;
        border-left-color: red;
        border-right-color: green;
        border-top-color: yellow;
        border-bottom-color: blue;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

8.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        width: 0;
        border: 100px solid #ccc;
        border-right-color: transparent;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

9.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        width: 0;
        border: 100px solid #ccc;
        border-right-color: transparent;
        border-radius: 100px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
时间： 2024-10-09 13:58:06

2016.3.16__CSS3_选择器_边框_背景_蒙版mask__第九天的相关文章

CSS 基础-选择器-边框和背景-文本样式

CSS3 选择器 本文内容部分来自于https://developer.mozilla.org/zh-CN/docs/Learn/CSS 选择器可以被分为以下类别: 简单选择器(Simple selectors):通过元素类型.class 或 id 匹配一个或多个元素. 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素. 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,

android内部培训视频_第三节(3)_常用控件(ViewPager、日期时间相关、ListView)

第三节(2):常用控件之ViewPager.日期时间相关.ListView  一.ViewPager 实例:结合PagerAdapter滑动切换图片  二.日期时间相关:AnalogClock\DigitalClock\DatePicker\TimerPicker\DatePickerDialog\TimePickerDialog 三.ListView 实例1:城市选择器 实例2:自定义列表项 百度网盘视频下载地址:http://pan.baidu.com/s/1c0ip6la android内

软件工程_东师站_第五周作业

1.psp Date Type Job Start Int(min) End Total(min) 20160404 助教 团队博客 14:00 16:20 25 14:25 18:00 100 站立会议 "耐撕"站立会议 15:10 15:40 30 编码 重构 18:00 5 18:30 25 编码 选择抢答者(JSP) 18:30 10 19:30 50 20160405 编码 选择抢答者(生成抢答者圈圈) 18:10 15 19:00 35 看书 计算机网络与因特网 22:00

软件工程_东师站_第四周作业

1.PSP 全图落在实验室了,凭记忆画一个. 开始时间 结束时间 中断 净时间 写代码 1. 抢答器返回ID改按钮颜色 2. 随机生成题目 18:00 19:30 19:30 21:00 10 10 80 80 结对编程 19:30 21:00 10 80   站立会议 20:33 17:00    18:30 20:30 21:05 17:30  19:00 20:50 110 写博客 21:00 21:30 30   2.进度条 代码行数 博客字数 知识点 第一周 400 430 见我博客软

ArcGIS for Desktop入门教程_第七章_使用ArcGIS进行空间分析 - ArcGIS知乎-新一代ArcGIS问答社区

原文:ArcGIS for Desktop入门教程_第七章_使用ArcGIS进行空间分析 - ArcGIS知乎-新一代ArcGIS问答社区 1 使用ArcGIS进行空间分析 1.1 GIS分析基础 GIS的六大功能是数据获取.存储.查询.分析.表达.输出.在前面的内容里已经介绍了使用ArcGIS进行数据获取.存储.查询.表达和输出的过程,本章将介绍如何在ArcGIS中进行地理分析.分析是GIS的核心和灵魂,是GIS区别于一般的信息系统.CAD或者电子地图系统的主要标志之一. GIS分析,就是研究

年终总结PPT模板_工作报告PPT模板_述职报告PPT模板_免费分享下载

下载地址:网盘下载 备用地址:网盘下载 星空背景_工作总结述职报告PPT模板   演示 星空背景_工作总结述职报告PPT模板 扬帆起航 · 乘风破浪_工作总结ppt模板   演示 扬帆起航 · 乘风破浪_工作总结ppt模板 个人创意_工作总结ppt模板   演示 个人创意_工作总结ppt模板 时尚杂志风_工作总结汇报ppt模板   演示 时尚杂志风_工作总结汇报ppt模板 下载地址:https://u19252252.ctfile.com/dir/19252252-32283233-5ecf05

第17章 CSS边框与背景（上）

第 17章 CSS边框和背景[上]学习要点:1.声明边框2.边框样式3.圆角边框 本章主要探讨 HTML5中 CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观.一．声明边框边框的声明有三个属性设置,样式表如下:属性 值 说明 CSS版本border-width 长度值 设置边框的宽度,可选 1border-style 样式名称 设置边框的样式,必选 1border-color 颜色值 设置边框的颜色,可选 1 这三个属性值,只有 border-style是必须声明,才可以出现边

软件工程_东师站_第十周作业

一.PSP Data Type Job start Int End Total 20160510 助教 团队作业二 20:00 5 21:00 55 20160511 助教 团队作业二.三 18:45 16 20:45 104 20160512 耐撕 站立会议 18:15   18:35 20 二.进度条   代码行数 博客字数 知识点 第一周 400 430 见我博客软件工程——师大站1 第二周 0 5200 见我博客软件工程_东师站_课堂笔记 第三周 0 63 站立会议.单元测试 第四周 1

C++ Primer笔记12_运算符重载_递增递减运算符_成员访问运算符

1.递增递减运算符 C++语言并不要求递增递减运算符必须是类的成员.但是因为他们改变的正好是所操作对象的状态,所以建议设定为成员函数. 对于递增与递减运算符来说,有前置与后置两个版本,因此,我们应该为类定义两个版本的递增与递减运算符. 问题来了,程序是如何区分前置和后置呢?因为都是++和-- 为了解决这个问题,后置版本的递增递减运算符接受一个额外的(不被使用)int类型的形参.当我们使用后置运算符时,编译器为这个形参提供一个值为0的实参.这个形参唯一的作用就是区分前置和后置运算符函数. 因为不会