Css——第二周学习

一·CSS学习后续

css以及css3的学习算上这周已是第二周

1.伪元素

1.first-line
“first-line” 伪元素用于向文本的首行设置特殊样式。
注意:“first-line” 伪元素只能用于块级元素。
常见的可用于的标签有:

  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

2.first-letter
“first-letter” 伪元素用于向文本的首字母设置特殊样式:
注意: “first-letter” 伪元素只能用于块级元素
常见的可用于的标签有:

  • text-decoration
  • vertical-align (only if “float” is “none”)
  • text-transform
  • line-height
  • float
  • clear

3.before
“:before” 伪元素可以在元素的内容前面插入新内容。
示例:下面的代码在h1前插入了一张图片

<style>
h1:before {content:url(smiley.gif);}
</style>

4.after
“:after” 伪元素可以在元素的内容之后插入新内容。
和before的用法一样

2.导航栏

制作这样的导航栏在网页中是很常见的
Css——第二周学习
导航条基本上是一个链接列表,所以使用 <ul><li>元素非常有意义:
要用li,那么必不可少的是**去除小圆点。**那么这样做:
list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记。

至于垂直导航栏,只需要把a标签使用:display:block转换为块状元素
然后设置想要的宽高度即可。
<li> 通过 border-right 样式来添加分割线:
这样的效果:
Css——第二周学习

3.下拉菜单

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。
注意 min-width 的值设置为 160px。你可以随意修改它。
注意: 如果你想设置下拉内容与下拉按钮的宽度一致,可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

4.提示工具

HTML) 使用容器元素 (like <div>) 并添加 “tooltip” 类。在鼠标移动到 <div> 上时显示提示信息。
CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。
而要规定提示工具的位置就要用定位要求
其top,left,right等值

5.图像透明度

CSS3中属性的透明度是 opacity。
opacity属性值从0.0 - 1.0。值越小,使得元素更加透明。

6.网页布局

网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。
Css——第二周学习

头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo:
菜单导航条包含了一些链接,可以引导用户浏览其他页面:
内容区域一般有三种形式:
要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。

  • 1 列:一般用于移动端
  • 2 列:一般用于平板设备
  • 3 列:一般用于 PC 桌面设备
    底部区域在网页的最下方,一般包含版权信息和联系方式等。

二·CSS3

1.css3边框

1**.圆角**
border-radius 属性被用于创建圆角:div

{
border:2px solid;
border-radius:25px;
}

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

但是,如果你要在四个角上一一指定,可以使用以下规则:

  • 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
  • 三个值: 第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角
  • 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
  • 一个值: 四个圆角值相同

而像素值越大,对应的圆角边框越大。
2.阴影
box-shadow 属性被用来添加阴影:

div
{
box-shadow: 10px 10px 5px #888888;
}

其中对应的4值对应上下左右的阴影值和颜色。
3.边界图片
border-image 属性允许你指定一个图片作为边框! 用于创建上文边框的原始图像:

2.背景

  1. 可以通过background-image属性添加背景图片
    不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一 张。
    可以给图片设置 background-position: right bottom, left top;
    同样background-repeat: no-repeat, repeat; 规定是否平铺
  2. background-size background-size指定背景图像的大小
  3. 您可以指定像素或百分比大小
    你指定的大小是相对于父元素的宽度和高度的百分比的大小
  4. background-origin background-origin 属性指定了背景图像的位置区域。
    content-box, padding-box,和 border-box区域内可以放置背景图像。
    Css——第二周学习

5.background-clip background-clip背景剪裁属性是从指定位置开始绘制。

3.渐变

CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。

  1. 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

  2. 径向渐变(Radial Gradients)-由它们的中心定义

  3. 语法
    background-image: linear-gradient(direction, color-stop1, color-stop2, …);
    而默认情况下就是从上到下渐变
    从左开始可以规定direction为:to right
    从左上角开始可以规定direction为:to bottom right
    还可以设置角度
    角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

  4. 径向渐变由它的中心定义。

    为了创建一个径向渐变,你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是
    center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是
    farthest-corner(表示到最远的角落)。
    

4.2D·3D转换

1.translate()
转换可以对元素进行移动、缩放、转动、拉长或拉伸。 就我的理解来说css3的2D转换相当于数学中的位移与偏转 它常与hover一起配合使用 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
注意的是向下为正,向上为负****向右为正,向左为负
2.rotate()
在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。其中单位用deg。rotate值(30deg)元素顺时针旋转30度。
3.scale()
scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。
4.skew()
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。
5.matrix()
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
6.3D转换rotate()
同样规定两个值x,y指定旋转角度

5.过渡

transition
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。
    常和hover一起用
transition: transform 0.5s, background-color 0.5s;
 .boxs:hover .box {
            transform: translateY(0);
            background-color: #ff1e56;

要添加多个过渡中间用逗号隔开
Css——第二周学习

6.动画

要创建 CSS3 动画,你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
创完后还需要把动画绑定一个选择器

  • 规定动画的名称
  • 规定动画的时长
@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}

如这样在和div绑定起来。在div里规定

animation:myfirst 5s;

下图是动画的相关属性
Css——第二周学习

7.多列

Css——第二周学习

8.按钮

  • 可以用background-color来改变按钮的颜色
  • 可以使用 font-size 属性来设置按钮大小:
  • 可以使用border-radius 属性来设置圆角按钮:
  • 可以使用 border 属性设置按钮边框颜色:
  • 可以使用 :hover选择器来修改鼠标悬停在按钮上的样式
  • 可以使用 box-shadow 属性来为按钮添加阴影:
  • 可以使用 opacity 属性为按钮添加透明度
  • 可以使用 width 属性来设置按钮的宽度:
  • 注意用浮动来显示一排按钮

9.分页

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>
  • 如果点击当前页,可以使用 .active 来设置当前页样式,鼠标悬停可以使用 :hover 选择器来修改样式:
  • 可以通过添加transition 属性来为鼠标移动到页码上时添加过渡效果:
  • 可以使用 border 属性来添加带边框分页:
  • 可以使用 margin属性来为每个页码直接添加空格:
  • 可以使用 font-size 属性来设置分页的字体大小:

10.弹性盒子flex布局

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
1.flex-direction
flex-direction 属性指定了弹性子元素在父容器中的位置。

  • row:横向从左到右排列(左对齐),默认的排列方式。
  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
  • column:纵向排列。
  • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

2**.justify-content**
(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。

  • flex-start: 弹性项目向行头紧挨着填充。这个是默认值。

  • flex-end: 弹性项目向行尾紧挨着填充。

  • center: 弹性项目居中紧挨着填充。

  • space-between: 弹性项目平均分布在该行上。

  • space-around: 弹性项目平均分布在该行上,两边留有一半的间隔空间。

3.align-items
align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
Css——第二周学习
4.flex-wrap

  • flex-wrap 属性用于指定弹性盒子的子元素换行方式。
  • nowrap - 默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器
  • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
  • wrap-reverse -反转 wrap排列。.

5 align-content

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。
Css——第二周学习
使用弹性盒子,居中变的很简单,只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:
6.align-self
align-self 属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式
Css——第二周学习

三·css用户界面设置及小技巧

Css——第二周学习
Css——第二周学习
Css——第二周学习
Css——第二周学习
Css——第二周学习
附上这一周用css完成的一个网页

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
            height: 100vh;
            opacity: 0.6;
            justify-content: center;
            align-items: center;
            flex-direction: row;


        }

        .boxss {
            width: 100%;
            min-height: 500px;
            flex-wrap: wrap;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border: #333 solid;
            flex-wrap: wrap;
        }

        .boxs {
            width: 200px;
            height: 200px;
            position: relative;
            flex-direction: row;
            margin: 80px;
            box-sizing: border-box;



        }

        .box {
            background-color: #333;
            height: 200px;
            width: 200px;
            border-radius: 30px;
            text-align: center;
            line-height: 180px;
            font-size: 66px;
            color: #fff;
            transform: translateY(100px);
            position: relative;
            z-index: 1;
            transition: transform 0.5s, background-color 0.5s;

        }

        .box1 {
            background-color: white;
            height: 200px;
            width: 200px;
            border-radius: 30px;
            position: absolute;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
            transform: translateY(-100px);
            transition: transform 0.5s;

        }

        .box1 h4 {
            position: relative;
            left: 10px;
        }

        .box1 a {
            text-decoration: none;
            display: block;
            width: 60px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 25px;
            color: brown;
            position: relative;
            top: 50px;
            left: 10px;
            border: solid pink;
            border-radius: 10px;

        }

        .boxs:hover .box {
            transform: translateY(0);
            background-color: #ff1e56;
            opacity: 1;

        }


        .boxs:hover .box1 {
            transform: translateY(0);
        }

        a:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
    </style>

</head>

<body>
    <div class="boxss">
        <div class="boxs">
            <div class="box">One</div>
            <div class="box1">
                <h4>this is one</h4>
                <p><a href="#">one</a></p>
            </div>
        </div>
        <div class="boxs">
            <div class="box">Two</div>
            <div class="box1">
                <h4>this is two</h4>
                <p><a href="#">two</a></p>
            </div>

        </div>
        <div class="boxs">
            <div class="box">Three</div>
            <div class="box1">
                <h4>this is three</h4>
                <p><a href="#">three</a></p>
            </div>
        </div>
    </div>
</body>

</html>
上一篇:v-for与flex布局一起使用的问题


下一篇:一阶段面试题