第三阶段-day02 & 03_css

(day02上午第二节课半开始）

1 CSS

主要用于修饰html显示,

可以创建一个专门的css页面来写。也可以在html页面写。

CSS历史

web的衰落：

在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。随着万维网的出现（用户交互体验的加强），对html的要求越来越大，人们迫切需要html增加新的元素，去完成一个特定的功能。

一片混乱：

迫于压力，html开始出现<font>，<i> , <s> 等标签,还增加了某些标签的很多属性。但是html是一种描述结构的语言，也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题：1：由于html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性。2：页面维护越来越困难

在1995年w3c开始发布CSS的计划(work-in-prrgress)。

CSS概念

CSS 指层叠样式表（级联样式表）

主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等等外观显示样式。
CSS以HTML为基础，提供了丰富样式功能。

0创建css文件

1.1 在html页面引入css

行内写在<body>中，内联&外联（链接和导入）写在<head>标签里。

行内: 在html页面的标签上增加一个style属性, style属性的值,就是css代码

<body>
<p style=" color:#FFFFFF">
    p标签段落内容。
</p>
</body>

内联：写在html页面的<head>标签里,用<style>标签包裹

<head>
<style type=”text/css”>
    p { color:#FF0000;}
</style>
</head>

外联: 写在head标签内部
- 链接

<head>
<link rel="stylesheet" type="text/css" href="css_3.css" />
</head>

- 导入

<head>
<style type="text/css">
    @import url(css_3.css);
</style>
</head>

1.2 选择器

就是把css样式用过某种途径和html标签相互关联起来---->选择器

标签选择器
类选择器
Id选择器
复合选择器
伪类选择器
伪元素选择器
属性选择器

1.2.1 标签选择器

通过标签名实现关联

Eg:// 对所有<p>标签

<style>
    p {color:red;}
</style>

1.2.2 类选择器（最常用）

通过类名(class)关联起来

类选择器的选择符是 “.“
类选择器在css样式编码中是最常用到的

在html代码中, 标签有一个class属性, class属性所指向的值,就是这个标签的css类名

在css中(style标签里) 可以创建一个以 .类名{} 的样式和html对应的标签绑定起来

<head>
    <style>
        .aaa{
            background: green;
        }
    </style>
</head>

<body>
<hr>
<div class="aaa">
    我是一个div
</div>

</body>

这里类名可以重复。

1.2.3 Id选择器

通过id属性关联起来

ID选择器以 "#" 来定义
不同于类选择器，ID 选择器不能结合使用
不提倡用id 去写样式，因为他的权重太高。 Id 主要是为了 js 做准备。

在html代码中, 标签有一个id属性, id属性所指向的值,就是这个标签的css id

在css中(style标签里) 可以创建一个以 #id{} 的样式和html对应的标签绑定起来

注意: id是一个唯一标识, 在一个html文档中, id是不可重复的

Id选择器,不是那么常用, (dom, id一帮会用于dom操作, js内容。对使用id选择器没有任何影响,但就是很少用。)

1.2.4 其它选择器(稍微看看即可）

1.复合--选择器

1.关联选择器（包含选择器）--->嵌套

p b { color:#FF000;}

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。

2.组合选择器

多个不同选择器要用逗号分隔开

p,div { color:#FF0000;}

类组合

.aaa ,div { color:#FF0000;}

<p class="aaa">P标签显示段落。</p>

<div>DIV标签显示段落</div>

2.属性选择器

[attribute] 用于选取带有指定属性的元素

[target]{

}

div[id]{
    background-color:yellow;
}

[attribute=value] 用于选取带有指定属性和值的元素。

a[href="http://www.w3school.com.cn/"][title="W3School"] {
    color: red;
}

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

[title~=flower]{
    background-color:yellow;
}

[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value] 匹配属性值以指定值开头的每个元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素。

a[href*="w3school.com.cn"] {
    color: red;
}

3.伪类--选择器

CSS伪类是用来添加一些选择器的特殊效果。

其实就在html中预先定义好的一些选择器。

:link 应用于未被访问过的链接；

:hover 应用于鼠标悬停到的元素；

:active 应用于被激活的元素；

:visited 应用于被访问过的链接，与:link互斥。

:focus 应用于拥有键盘输入焦点的元素。

:first-child 选择某个元素的第一个子元素；

:last-child 选择某个元素的最后一个子元素；

:nth-child() 选择某个元素的一个或多个特定的子元素；

:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

:nth-of-type() 选择指定的元素；

:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；

:first-of-type 选择一个上级元素下的第一个同类子元素；

:last-of-type 选择一个上级元素的最后一个同类子元素；

:only-child 选择的元素是它的父元素的唯一一个子元素；

:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；

:empty 选择的元素里面没有任何内容。

Eg:

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

a.red:link {color:#FF0000;} /* 未访问的链接 */

a.red:visited {color:#00FF00;} /* 已访问的链接 */

a.red:hover {color:#FF00FF;} /* 鼠标划过链接 */

a.red:active {color:#0000FF;} /* 已选中的链接 */

4.伪元素--选择器

伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多

:first-letter 选择元素文本的第一个字（母）。

:first-line 选择元素文本的第一行。

:before 在元素内容的最前面添加新内容。

:after 在元素内容的最后面添加新内容。

div::before {

    content: "1111";
    height: 40px;
    width: 100px;
    background-color: blue;
    display: block;

}

5.区别(伪元素/伪类)

伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。

伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。

1.2.5 选择器优先级

如果有两个相同的样式同时作用于某一个html元素, 那么就会在这两个样式间产生一个优先级问题

!important > 行内 > ID选择器 > 伪类|类 | 属性选择 > 标签 > 通配符*

在满足上述优先级的基础上, 要满足一个’就近原则’(上下结构的就近原则)

eg1:

<head>
    <style>
        div{
            background: yellow;
            font-size: 100px;
        }
        .div1{
            background: silver;
        }
    </style>
</head>


<body>
<div class="div1">
    我是一个div1
</div>
</body>

显示灰色。类选择器优先级＞标签选择器。

Eg2:

eg3:

两个都是标签选择器，∈同级选择器，就近原则。Div显示黄色，如果两个位置换换，就是红色（css.css文件中div是红色）

Html代码,在浏览器中解析的时候, 是从上向下解析的

1.3 盒子模型

我们把html的标签在页面上所占据的位置看成一个矩形的盒子

这个盒子分为四部分:

元素内容(context)
内边距(padding)
边框(border)
外边距(margin)----------参数方式上右下左

这个盒子是可控大小, 但是控制大小的方式需要注意

注意1: 宽高仅是元素内容的宽高

width: 100px;
height: 100px;

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 30px;
            background: red;
        }
        .div2{
            height:50px;
            background: silver;

            /*margin:100px;*/
            /*margin: 10px 100px;*/
            /*margin: 10px  100px  200px;*/
            margin: 10px  100px  200px  300px;

            /*margin-top: 10px;*/
            /*margin-bottom: 10px;*/
            /*margin-left: 10px;*/
            /*margin-right: 10px;*/


            padding: 50px;
            padding-top: 100px;

            border: 10px solid wheat;

        }
        .div3{
            height: 30px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="div1">
    我是一个div
</div>
<div class="div2">
    我是一个div
</div>
<div class="div3">
    我是一个div
</div>
</body>

注意2: 背景色 = 元素内容的区域+ 内边距的区域

注意3: 如果要设置边框, 那么必须要把边框设置为固体

如果不设置solid，不显示边框。

1.4 标签的分类和盒子模型

1.4.1 块级元素

独占一行, 上下排列

独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度以及盒子模型的相关css属性
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度 (宽度能继承)
在不设置高度的情况下，块级元素的高度是它本身内容的高度 (高度不能继承)

块级元素是指本身属性为display:block;的元素。
通常使用块级元素来进行大布局（大结构）的搭建

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .div-f{
           width: 200px;
           height: 200px;
       }
        .div-s{
            background: yellow;
        }
    </style>
</head>
<body>
<div class="div-f">
    <div class="div-s">
        123
    </div>
</div>
</body>

1.4.2 行级元素

在一行排列, 从左向右

和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关css属性，(但是直接设置内外边距的左右值是可以的)
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）
内联元素是指本身属性为display:inline;的元素。

通常使用行级元素来进行文字、小图标（小结构）的搭建

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        b{
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 100px;
            padding: 100px;
        }
    </style>
</head>
<body>
<b>123</b>
123
<br>
1223456789876543

</body>

1.4.3 行内块

本质上是一个行级元素(在一行排列), 有一些块级元素的特性(可以控制宽高和内外边距)

本质属于行级元素
可以与其他行内元素、内联元素共处一行
可以设置宽高、内外边距
属性为display:inline-block;的元素。

注意: 父元素, 子元素

实际上就是嵌套的关系,

子元素,所占据的盒子模型空间, 是父元素的元素内容区域

注意4: 关于元素的嵌套问题

行级元素内部, 不能嵌套块级元素, 可以嵌套行级元素

块级元素内部可以嵌套行级和块级

注意5: 默认的display属性

我们可以修改html元素的默认属性, 来做行和块的转变

不推荐使用(如果块级元素转化为行级元素之后,仅一行内容, 可以用, 不推荐)

1.4.4 外边距合并

在html页面元素排列中, 在垂直方向, 有两个外边距 ‘紧’相邻, 那么就会产生一种现象----叫外边距合并

合并之后的值? 是产生合并现象的最大的那个外边距, 就是最终合并值

1.5 浮动

1.5.1 标准文档流, 标准流

元素(标签) 根据元素特性(行级,块级, 行内块) 从左向右, 自上而下顺序排列

这就是标准文档流

1.5.2 设计的初衷

浮动设计的初衷是为了做文字环绕效果

浮动一般用来布局(把一个块级元素, 变成行内块元素)

1.5.3 浮动

float: left;

把一个元素’漂浮起来’

浮动使元素脱离了标准文档流

1.5.4 浮动特性

1：浮动只影响后面的元素

因为浮动脱离了标准文档流, 浮动元素本来占据的空间, 就空了出来

后面的元素,要想复合标准文档流规范, 它就要占据它前面的空间

所以,浮动影响后面的元素

2：浮动找浮动，不浮动找不浮动

3：浮动以元素顶部为基准对齐

4：浮动可是实现模式转换（eg:span 设置浮动可以设置宽高）

5：让块级元素在一行显示

1.5.5 清除浮动

谁被浮动效果影响了, 那么就在谁之上清除浮动

如图，div4被浮动效果影响了，就在div4上清除浮动。

清除后，效果：

Clear: 谁受影响谁清除

left:在左侧不允许浮动元素。
right:在右侧不允许浮动元素。
both:在左右侧不允许浮动元素，同时清除左右方向的浮动

clear: both;

.text { clear:both; }

为什么要清除浮动？

1.5.6 撑开和塌陷

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。
一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。
出现这种情况，我们需要清除浮动

2 重点

1, 选择器(三个: 标签, id 类)(其它选择器了解)

2, 盒子模型(理解)

3, 浮动 (熟悉)

3 作业

1.代码动手敲一遍

2.实现点击导航如图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left1{
            float: left;
            width: 100px;
            height: 300px;
            padding: 20px;
            margin: 30px 0px 0px 30px;
            border: 1px solid silver;
        }
        .right1{
            float: left;
            width: 600px;
            height: 600px;
            margin: 30px 0px 0px 30px;
        }
        .iframe1{
            width: 100%;
            height: 100%;
            /*width: 600px;*/
            /*height: 600px;*/
        }
        .left1-son{
            height: 30px;
            border-bottom: 1px solid silver;
        }
        a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>

<div class="left1">
    <div class="left1-son">
        <a href="">首页</a>
    </div>
    <div class="left1-son">
        <a href="https://www.taobao.com"  target="aaa">淘宝</a>
    </div>
    <div class="left1-son">
        <a href="https://www.baidu.com" target="aaa">百度</a>
    </div>
</div>

<div class="right1">
    <iframe name="aaa" class="iframe1">

    </iframe>
</div>

</body>
</html>

3.实现导航如图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top1{
            width: 700px;
            margin: 0 auto;
        }
        .bottom1{
            background: yellow;
            height: 30px;
            width: 700px;
            margin: 0 auto;
            clear: both;

        }
        .top1-son{
            width: 100px;
            color: white;
            background: black;
            float: left;
            text-align: center;
            border-bottom: 2px solid yellow;
            border-top: 2px solid white;
        }
        .top1-son:hover{
            background: red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }
    </style>
</head>
<body>

<div class="top1">
    <div class="top1-son">国内新闻</div>
    <div class="top1-son">国内新闻</div>
    <div class="top1-son">国内新闻</div>
    <div class="top1-son">国内新闻</div>
    <div class="top1-son">国内新闻</div>
    <div class="top1-son">国内新闻</div>
    <div class="top1-son">国内新闻</div>
</div>

<div class="bottom1">

</div>

</body>
</html>

day03

1.6 定位

position 就是一个html标签所显示在网页上的位置

通过使用position ，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

属性

Static:元素框正常生成。
- 默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。
Relative:元素框偏移某个距离。
- 相对定位的元素，相对于其正常位置进行定位
- 并不脱离文档流
Absolute:元素框从文档流完全删除，
- 绝对定位绝对不占空间位置（与浮动一样）
- 脱离文档
- 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
- 生成绝对定位的元素，相对于非 static 定位的第一个父元素进行定位。
- 当一个盒子包含在另一个盒子中，所有父级盒子未设置定位，子盒子以浏览器左上角为基准设置位置；当父盒子设置定位，子盒子以父盒子左上角为基准设置位置
Fixed:绝对定位的元素，相对于浏览器窗口进行定位
- 生成绝对定位的元素，相对于浏览器窗口进行定位。
z-index:z-index 仅能在定位元素上奏效, Static 无效（例如 position:absolute;）

一般子元素设置绝对定位，父元素设置相对对定位（子绝父相）,是一种习惯

1.6.1 默认定位

标准文档流(从左向右, 从上向下)

Static:元素框正常生成。

默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位1</title>
    <style>
        .div1{
            position: static;
        }
    </style>
</head>
<body>
<div class="div1">
    我是一个div
</div>
</body>
</html>

实现效果：

1.6.2 相对定位

相对于它本来的位置进行定位, 不脱离标准文档流

Relative:元素框偏移某个距离。
- 相对定位的元素，相对于其正常位置进行定位
- 并不脱离文档流

注意: 单设置相对定位不会起效果, 要结合方位元素, 才会产生效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位2</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            right: 50px;
        }

        .div2{
            width: 150px;
            height: 150px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="div1">
    div1
</div>

<div class="div2">
    div2
</div>
</body>
</html>

1.6.3 绝对定位

脱离标准文档流, 元素也需要方位元素配合使用

绝对定位会以边为距离控制

<head>
    <meta charset="UTF-8">
    <title>定位3</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 100px;
        }

        .div2{
            width: 150px;
            height: 150px;
            background: yellow;
        }
    </style>
</head>
<body>
<div class="div1">
    div1
</div>

<div class="div2">
    div2
</div>
</body>

是相对于父元素进行定位的(注意, 这个父元素要么是相对定位,或者是绝对定位)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位4</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background: yellow;

            position: relative;
            right: 0px;
        }
        .div2{
            width: 150px;
            height: 150px;
            background: red;
        }
        .div3{
            width: 100px;
            height: 100px;
            background: green;
        }
        .div4{
            width: 50px;
            height: 50px;
            background: silver;

            position: absolute;
            right: 100px;
        }

    </style>
</head>
<body>
<div class="div1">
    <div class="div2">
        <div class="div3">
            <div class="div4">

            </div>
        </div>
    </div>
</div>


</body>
</html>

第一个父元素: 是内层向外层扩展的

当一个绝对定位元素, 的所有父盒子都不设置相对或者绝对定位, 那么该定位元素要以浏览器窗口进行定位

Absolute:元素框从文档流完全删除，
- 绝对定位绝对不占空间位置（与浮动一样）
- 脱离文档
- 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

生成绝对定位的元素，相对于非 static 定位的第一个父元素进行定位。

Fixed:绝对定位的元素，相对于浏览器窗口进行定位

生成绝对定位的元素，相对于浏览器窗口进行定位

z-index:z-index 仅能在定位元素上奏效, Static 无效（例如 position:absolute;）

一般子元素设置绝对定位，父元素设置相对对定位（子绝父相）,是一种习惯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位6</title>
    <style>
        .div1{
            width: 100%;
            height: 3000px;
            background: red;
        }
        .div2{
            width: 100%;
            height: 30px;
            background: green;

            position: fixed;
            z-index: 99;
            /*bottom: 0px;*/
        }
        body{
            margin: 0px;
            padding: 0px;
        }
        .div3{
            width: 300px;
            height: 300px;
            background: yellow;

            position: absolute;
            top: 0px;
        }

    </style>
</head>
<body>
<div class="div1">
    <div class="div2">

    </div>
    <div class="div3">

    </div>
</div>

</body>
</html>

1.7 overflow溢出

overflow 属性规定当内容溢出元素框时发生的事情

属性

Visible:默认值。内容不会被修剪，会呈现在元素框之外。
Hidden:内容会被修剪，并且其余内容是不可见的。
Scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
Auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

<head>
    <meta charset="UTF-8">
    <title>23</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: green;

            /*overflow: hidden;*/
            /*overflow: visible;*/
            /*overflow: scroll;!*必定产生滚动条框*!*/
            overflow: auto;
        }
    </style>
</head>
<body>
<div>
    123dddddddddddddddddddddddddddddddddddddddddddddd
</div>

</body>

注意:

1：display:none 元素隐藏不占位置
2：overflow:hidden; 将超出部分的元素隐藏
3：visibility:hidden; 元素隐藏占位置
主要长宽单位
- px像素
- % 相对于父元素的大小
line-height(设置行高)
浏览器默认字体大小为:16px
浏览器默认行高：18px
行高=上间距+文字大小+下间距

2 重点

定位了解

3 CSS属性

3.1 CSS文字属性：

color : #999999; /*文字颜色*/

font-family : 宋体,sans-serif; /*文字字体*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜体*/

font-variant:small-caps; /*小字体*/

letter-spacing : 1pt; /*字间距离*/

line-height : 200%; /*设置行高*/

font-weight:bold; /*文字粗体*/

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

text-decoration:line-through; /*加删除线*/

text-decoration: overline; /*加顶线*/

text-decoration:underline; /*加下划线*/

text-decoration:none; /*删除链接下划线*/

text-transform : capitalize; /*首字大写*/

text-transform : uppercase; /*英文大写*/

text-transform : lowercase; /*英文小写*/

text-align:right; /*文字右对齐*/

text-align:left; /*文字左对齐*/

text-align:center; /*文字居中对齐*/

text-align:justify; /*文字分散对齐*/

vertical-align属性

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/

3.2 CSS边框空白

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白

3.3 CSS符号属性：

list-style-type:none; /*不编号*/

list-style-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/

list-style-image:url(/dot.gif); /*图片式符号*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*缩进*/

3.4 CSS背景样式：

background-color:#F5E2EC; /*背景颜色*/

background:transparent; /*透视背景*/

background-image : url(/image/bg.gif); /*背景图片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重复排列-网页默认*/

background-repeat : no-repeat; /*不重复排列*/

background-repeat : repeat-x; /*在x轴重复排列*/

background-repeat : repeat-y; /*在y轴重复排列*/

指定背景位置

background-position : 90% 90%; /*背景图片x与y轴的位置*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

3.5 CSS连接属性：

a /*所有超链接*/

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

鼠标光标样式：

链接手指CURSOR: hand

十字体cursor:crosshair

箭头朝下cursor:s-resize

十字箭头cursor:move

箭头朝右cursor:move

加一问号cursor:help

箭头朝左cursor:w-resize

箭头朝上cursor:n-resize

箭头朝右上cursor:ne-resize

箭头朝左上cursor:nw-resize

文字型cursor:text

箭头斜右下cursor:se-resize

箭头斜左下cursor:sw-resize

漏斗cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

3.6 CSS框线：

border-top : 1px solid #6699cc; /*上框线*/

border-bottom : 1px solid #6699cc; /*下框线*/

border-left : 1px solid #6699cc; /*左框线*/

border-right : 1px solid #6699cc; /*右框线*/

以上是建议书写方式,但也可以使用常规的方式如下:

border-top-color : #369 /*设置上框线top颜色*/

border-top-width :1px /*设置上框线top宽度*/

border-top-style : solid/*设置上框线top样式*/

其他框线样式

solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

4 CSS小案例

https://www.runoob.com/css/css-examples.html

下面这个网站可以看看

https://codepen.io/

day03作业

要用到js

1.把代码敲一遍

2.实现如图所示汇率换算页面（仅要求样子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            margin-bottom: 5px;
        }

        table{width: 600px;}
        th{background: red;}
        td{text-align: center;}
    </style>
</head>
<body>
<div class="top">
    <select>
        <option>美元</option>
        <option>人民币</option>
    </select>
    <input type="button" value="互换">
    <select>
        <option>美元</option>
        <option>人民币</option>
    </select>
    数额：<input><input type="button" value="汇率换算">
</div>
<div>
    <table border="1px" cellpadding="5px">
        <tr>
            <th colspan="3">按当前汇率兑换结果</th>
        </tr>
        <tr>
            <td>美元</td>
            <td>汇率</td>
            <td>人民币</td>
        </tr>
        <tr>
            <td>100</td>
            <td>7</td>
            <td>700</td>
        </tr>
    </table>
</div>
</body>
</html>

3.实现一个随机点名，弹出名字页面（如图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert(123)
    </script>
</head>
<body>
<button>
    按钮
</button>
</body>
</html>

posted @ 2022-04-03 04:43 dust-- 阅读(38) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

dust--

第三阶段-day02 & 03_css

1 CSS

CSS历史

CSS概念

0创建css文件

1.1 在html页面引入css

1.2 选择器

1.2.1 标签选择器

1.2.2 类选择器（最常用）

1.2.3 Id选择器

1.2.4 其它选择器(稍微看看即可）

1.复合--选择器

2.属性选择器

3.伪类--选择器

4.伪元素--选择器

5.区别(伪元素/伪类)

1.2.5 选择器优先级

1.3 盒子模型

1.4 标签的分类和盒子模型

1.4.1 块级元素

1.4.3 行内块

1.4.4 外边距合并

1.5 浮动

1.5.1 标准文档流, 标准流

1.5.2 设计的初衷

1.5.3 浮动

1.5.4 浮动特性

1.5.5 清除浮动

1.5.6 撑开和塌陷

2 重点

3 作业

day03

1.6 定位

1.6.1 默认定位

1.6.2 相对定位

1.6.3 绝对定位

1.7 overflow溢出

2 重点

3 CSS属性

3.1 CSS文字属性：

3.2 CSS边框空白

3.3 CSS符号属性：

3.4 CSS背景样式：

3.5 CSS连接属性：

3.6 CSS框线：

4 CSS小案例

day03作业

公告