Css——第二周学习

2024-04-04 23:56:18

一·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.导航栏

制作这样的导航栏在网页中是很常见的

导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：
要用li，那么必不可少的是**去除小圆点。**那么这样做：
list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记。

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

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.网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 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.背景

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

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

3.渐变

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

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）-由它们的中心定义
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
而默认情况下就是从上到下渐变
从左开始可以规定direction为：to right
从左上角开始可以规定direction为：to bottom right
还可以设置角度
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

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

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是
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;

要添加多个过渡中间用逗号隔开

6.动画

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

@keyframes 规则是创建动画。

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

规定动画的名称
规定动画的时长

@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}

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

animation:myfirst 5s;

下图是动画的相关属性

7.多列

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 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

4.flex-wrap

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

5 align-content

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

注：使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:
6.align-self
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式

三·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>

码农公寓