首页 > 其他分享> 文章详细

Css——第二周学习

2021-11-13 21:58:46 阅读：127 来源： 互联网

标签：flex 设置元素学习第二周 background border 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.导航栏

制作这样的导航栏在网页中是很常见的
在这里插入图片描述
导航条基本上是一个链接列表，所以使用 <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>

标签：flex,设置,元素,学习,第二周,background,border,Css,属性
来源： https://blog.csdn.net/m0_63348818/article/details/121307196

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9