前端之css

Author： abc
发布时间：December 1, 2022
989views
关闭评论
22191字数
Categories：前端html

## 前端之css

基于form表单发送数据

1. 用于获取用户数据的标签至少应该含有name属性
  		name属性相当于字典的键
    用户输入的数据会被保存到标签的value属性中
    	value属性相当于字典的值
2. 如果不需要用户填写数据 只需要选择 那么我们需要自己填写value

```python
<input type="radio" name="gender" value="male">
```
  ps:没有name属性的标签 form表单会直接忽略 不会发送
3. 针对input标签理论上应该配一个label标签绑定 但是也可以不写

```python
<label for="d1">username:
    <input type="text" id="d1">
    </label>
<label for="d1">username:</label>
    <input type="text" id="d1">
```

4. 标签的属性如果和属性值相等 那么可以简写

```python
<input type="file" multiple="multiple">
<input type="file" multiple>
```

5. 针对选择类型的标签可以提前设置默认选项

```python
<input type="radio" name="gender" checked="checked">
<input type="radio" name="gender" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" name="gender" checked>
<option value="" selected="selected">222</option>
<option value="" selected>222</option>
```

6. 下拉框与文件上传可以复选

```python
<input type="file" multiple>
```

## css叠层样式表

主要用来调节html标签的各种样式

页面都是由HTML构成的页面上有很多相同的HTML标签 但是相同的HTML标签在不同位置可能有不同的样式

标签的两大重要属性》》》区分标签

1. class属性
   分门别类 主要用于批量查找
2. id属性
   精确查找 主要用于点对点

写css流程

1. 先查找标签
2. 在想如何调整样式

1. css语法结构

```python
   选择器{
       样式名1:样式值1;
       样式名2:样式值2;
   }
   ```

2. css注释语法

```python
   /*注释语句*/
   ```

3. 引入css的多种方式

- head内sytle标签内部编写
   - head内link标签链接css样式(标准引入方式)
   - 标签内style属性内直接编写(不推荐)

## css选择器

```python










```

1. css基本选择器

- 标签选择器(直接按照标签名查找标签)

```css
     div {
         color: #5affce;
     }
     ```

- 类标签选择器(按照标签的class值查找标签)

```css
     .c1{
         color: red;
     }
     ```

- id选择器（根据标签id值精准查找标签）

```css
     #span1{
         color: aqua;
     }
     ```

- 通用选择器(直接选择页面所有的标签)

```css
     *{
         background-color: #2f0099;
     }
     ```

2. css组合选择器

```python
   预知知识点 我们对标签的嵌套有另外一套说辞
   <p>ppp</p>
   <p>ppp</p>
   <div>div
   <div>divdiv
       <p>divdivp
       	<span>divdivpspan</span>
       </p>
   </div>
   <p>divp</p>
   <span>divspan</span>
   </div>
   <p>ppp</p>
   <span>spanspan</span>
   ```

针对标签的上下层级以及嵌套有另外的说法

父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签

- 后代选择器

```css
     div span{
         color: aquamarine;
     }
     ```

- 儿子选择器（不能隔代选择）

```css
     div>p{
         color: red;
     }
     ```

- 毗邻选择器（在用一级标签）谁在前就从哪一个标签向下找不想上找（如果有多个相连，必须要按照顺序找，一个没找到，就不行）

```css
     div+p{
         color: #006699;
     }
     ```

- 弟弟选择器（小波浪号）只要是同级向下标签都能找到

```css
     div~p{
         color: red;
     }
     ```

3. 分组与嵌套

```css
   #多个选择器合并查找，就是只要在这里面的选择都查找
   div,p,span{
       color: red;
   }
   ```

```css
   #span1,.ppp1,span{
       color: red;
   }
   ```

```css
   查找class含有c1的div
   div.c1 {  
       color: red;
   }
   ```

```css
   查找id是p1的p
   p#p1{ 
       color: red;
   }
   ```

```css
   查找含义c1样式值里面 id是span1的span标签
   .c1 span#span1{
       color: aquamarine;
   }
   ```

4. 属性选择器

```css
   [username]:hover {
       background-color: red;
   }
   [username]{
       background-color: aqua;
   }
   [username]:focus{
       background-color: pink;
   }
   [password='password']{
       background-color: aqua;
   }
   [password]:hover {
       background-color: pink;
   }
   div[divname='div1']{
       background: red;
   
   
   }
   [divname='div1']{
       background: red;
   
   
   }
   ```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194508708-119108187.png)

5. 伪类选择器
   a标签补充说明 针对没有点击过的网址默认是蓝色点击过的则为紫色

```css
   a:hover{
       color: red;
   }
   input:focus{
       background: pink;
   }
   
   ```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194514684-807528620.png)

## 选择器优先级

1. 选择器相同 导入方式不
   就近原则

```css
   <link rel="stylesheet" href="style.css">
   <style>
       a{
           color: pink;
       }
   </style>
   ```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194521153-154694632.png)

2. 选择器不同导入方式相同
   内联样式 > id选择器 > 类选择器 > 标签选择器

```css
   a{
       color: pink;
   }
   
   .a1{
       color: red;
   }
   
   #aa1{
   
       color: aqua;
   }
   ```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194526898-2090548197.png)

## css样式调节

字体样式

```css
.niubi{
            font-size: 48px;
            font-family: "Microsoft JhengHei Light";

/*字体粗细*/
            /*font-weight: lighter;*/

/*color: #006699;*/
            /*color: red;*/
            /*color: rgb(225,110,0);*/
            /*颜色透明的最后一个参数是透明度0-1的小数*/
            color: rgba(225,110,0,0.5);
            /*局中*/
            text-align: center;
            /*也是局中*/
            margin: 0 auto 0 auto;

/*常用于取消a标签下划线*//*但也可以用在其他方面line-through从中间线,overline底部线,underline顶部线*/
            text-decoration: underline;
            /*首行空多少*/
            text-indent: 24px;
        }
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194533319-1219470023.png)

取色器工具

1. pycharm
   ![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194539722-1558207676.png)

2. 截图工具
   微信截图，qq截图之类的

背景属性

```css
div{
    width: 800px;
    height: 800px;
    background-color: pink;
    /*background-image: url("https://img0.baidu.com/it/u=3194981343,487441191&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=417");*/
    /*background-repeat: no-repeat;*/

/*cover自动缩放填充*/
    /*contain横向填充*/
    /*background-size: cover;*/

/*图片位置*/
    /*background-position: center;*/

/*background-position-x: 100px;*/
    /*background-position-y: 50px;*/

background: url("https://img0.baidu.com/it/u=3194981343,487441191&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=417")
        no-repeat  100px 50px pink;
/*当有多个属性名相同的前缀 那么可以简写一次性完成*/
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194548326-1125156050.png)

## 边框border

```css
.div1{
    width: 200px;
    height: 200px;
    border-left-color: red;
    border-left-style: dotted;
    border-left-width: 5px;

border-right-width: 5px;
    border-right-style: solid;
    border-right-color: #b0ecdf;

border-bottom-color: pink;
    border-bottom-style: double;
    border-bottom-width: 5px;

border-top-color: black;
    border-top-style: solid;
    border-top-width: 5px;

}
.div2{
    width: 200px;
    height: 200px;
    border: 5px solid aquamarine;
    /*这一句等于上面好多句，常常用于四边都一样的情况*/
    border-radius: 50%;
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210426162-2090463044.png)

## 隐藏display

行内标签是无法设置长宽 只有块级可以设置

1. display:none 彻彻底底的隐藏标签（页面上不会显示 也不会保留标签的位置）
2. visability:hiddon 隐藏的不彻底，会保留原标签位置

```css
.div1{
    width: 200px;
    height: 200px;
    border: 5px solid black;
    visibility: hidden;
}

.div2{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    display: none;
}
.div3{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210437020-1490714084.png)

## 盒子模型

我们可以将标签看成一个盒子（快递盒）

1. 快递包里面的内容							content(内容)
2. 快递内容与外壳的距离                    padding(内边距，内填充)
3. 快递外壳的厚度                                   border(边框)
4. 快递盒子与快递盒子的距离                margin(外边距)

```css
/*    !*padding: 20px; 上下左右*!*/
/*    !*padding: 20px 40px;  上下   左右*!*/
/*    !*padding: 10px 20px 30px;上  左右  下*!*/
/*    !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致
```

针对标签的嵌套 水平方向可以局中

```css
margin 0 auto;
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210443280-1962952714.png)

## 浮动float

浮动就是用来作业面布局的

浮动的现象

float:left right

```css
.div1{
    /*width: 200px;*/
    /*height: 200px;*/
    /*border: 5px solid pink;*/
}

.div2{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    float: right;
}
.div3{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    float: left;
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210450153-1019679768.png)

解决浮动的影响

clear

解决浮动带来的影响终极方法

先提前写好样式类，谁塌陷了 就给谁添加clearfix样式类就可以了

```css
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210458102-1131868231.png)

ps:浏览器会优先展示文本内容（如果被挡住）

## 溢出overflow

```css
.div1 {
    width: 200px;
    height: 200px;
    border: 5px solid pink;
}

.div2 {
    width: 400px;
    height: 400px;
    border: 5px solid pink;
    /*float: right;*/
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210504663-1365552068.png)

解决溢出

```css
.div1 {
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    overflow: hidden;
}

.div2 {
    width: 400px;
    height: 400px;
    border: 5px solid pink;
    /*float: right;*/
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210511509-1401584830.png)

## 定位position

标签在默认情况下都是无法通过定位参数移动的

针对标签移动有四种状态

1. static静态（标签的默认状态 无法定位移动）
2. relative相对（基于原标签位置移动,但是会保留原标签位置）
3. absolute绝地（基于某个定位过的的标签移动）
4. fixed固定定位（基于浏览器窗口定位移动）

```css
.div1{
    width: 200px;
    height: 200px;
    position: relative;
    border: pink solid 5px;
    top:200px;
    left: 400px;

}

.div2{
    width: 200px;
    height: 200px;
    position: absolute;
    border: pink solid 5px;
    top: 200px;
    left: 200px;
}
.div4{
    width: 200px;
    height: 200px;
    border: pink solid 5px;
    right: 0;
}
.div5{
    width: 200px;
    height: 200px;
    border: pink solid 5px;
    position: fixed;
    right: 20px;
    bottom: 30px;
}

<div class="div1">我是第1div
    <div class="div2">我是第2div</div>

</div>
<div class="div5">我是第5div</div>
<div class="div4">我是第4div</div>
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210520036-2068863061.png)

## 图层z-idex

1. 谁的z-index大谁在上
2. 只有定了的元素，才能有z-index也就是，不管相对定位绝对定位，还是固定定位，都可以使用z-index,而不浮动元素不能使用z-index
3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果一样那么谁在html后面，谁在上面压着别人

```css
.div1 {
    width: 200px;
    height: 200px;
    background-color: #888c8e;

}
.div4 {
    width: 300px;
    height: 300px;
    background-color: greenyellow;
    position: fixed;
    z-index: 1;

}
.div5 {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: fixed;
    z-index: 2;
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210527184-883079638.png)

## 透明效果opacity

opacity可以透明元素所有可见，而rgba只能透明字体的

## 简易博客页面搭建

```html
<!DOCTYPE html>-->

<!--</html>
```

```css
/*通用样式*/

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #dfdcdc;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

/*.fexldflo:after {*/

/*    content: '';*/
/*    clear: both;*/

/*}*/

/*首页左边样式*/

.blog_left {
    background: #e4e4e4;
    width: 20%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    float: left;

}

.blog_head_avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 10px auto;
    overflow: hidden;
}

.blog_head_avatar > img {
    /*overflow: hidden;*/
    /*max-width: 100%;*/
    max-height: 100%;
    margin-left: -30px;
}

.blog_info, .blog_desc {
    font-size: 24px;
    font-weight: lighter;
    text-align: center;
    margin: 10px auto;
}

.blog_link a:hover, .blog_award a:hover {
    color: #b0ecdf;
}

.blog_link a, .blog_award a {
    color: black;
    line-height: 10px;
}

.blog_link ul > li, .blog_award ul > li {
    line-height: 40px;
}

.blog_link, .blog_award {
    font-size: 26px;
    color: black;
    text-align: center;
    margin: 35px auto;
}

/*首页右边样式*/

.blog_right {
    width: 80%;
    height: 1000px;
    float: right;
}

.box {
    margin: 30px 20px;
    background-color: white;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.8);
}

.div_title {
    border-left: 2px solid red;
    padding: 15px;
}

.div_title .title {
    font-size: 36px;
}

.div_title .data {
    float: right;
    font-weight: bolder;
    margin: 20px auto;

}
.div_context{
    margin: 5px auto;
    border-bottom:2px solid black;
    padding-bottom: 5px;
}
.div_context span{
    font-size: 24px;
    margin-left: 20px;
}

.div_foot span{
    font-size: 18px;
    margin-left: 20px;
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210538259-1533929723.png)

Last modification：December 2nd, 2022 at 09:06 pm

如果觉得我的文章对你有用，请随意赞赏

Comment here is closed

前端之css

abc • 2022 年 12 月 01 日

## 前端之css

基于form表单发送数据

```python
<label for="d1">username:
    <input type="text" id="d1">
    </label>
<label for="d1">username:</label>
    <input type="text" id="d1">
```

4. 标签的属性如果和属性值相等 那么可以简写

```python
<input type="file" multiple="multiple">
<input type="file" multiple>
```

5. 针对选择类型的标签可以提前设置默认选项

6. 下拉框与文件上传可以复选

```python
<input type="file" multiple>
```

## css叠层样式表

主要用来调节html标签的各种样式

页面都是由HTML构成的页面上有很多相同的HTML标签 但是相同的HTML标签在不同位置可能有不同的样式

标签的两大重要属性》》》区分标签

1. class属性
   分门别类 主要用于批量查找
2. id属性
   精确查找 主要用于点对点

写css流程

1. 先查找标签
2. 在想如何调整样式

1. css语法结构

```python
   选择器{
       样式名1:样式值1;
       样式名2:样式值2;
   }
   ```

2. css注释语法

```python
   /*注释语句*/
   ```

3. 引入css的多种方式

- head内sytle标签内部编写
   - head内link标签链接css样式(标准引入方式)
   - 标签内style属性内直接编写(不推荐)

## css选择器

1. css基本选择器

- 标签选择器(直接按照标签名查找标签)

```css
     div {
         color: #5affce;
     }
     ```

- 类标签选择器(按照标签的class值查找标签)

```css
     .c1{
         color: red;
     }
     ```

- id选择器（根据标签id值精准查找标签）

```css
     #span1{
         color: aqua;
     }
     ```

- 通用选择器(直接选择页面所有的标签)

```css
     *{
         background-color: #2f0099;
     }
     ```

2. css组合选择器

针对标签的上下层级以及嵌套有另外的说法

父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签

- 后代选择器

```css
     div span{
         color: aquamarine;
     }
     ```

- 儿子选择器（不能隔代选择）

```css
     div>p{
         color: red;
     }
     ```

- 毗邻选择器（在用一级标签）谁在前就从哪一个标签向下找不想上找（如果有多个相连，必须要按照顺序找，一个没找到，就不行）

```css
     div+p{
         color: #006699;
     }
     ```

- 弟弟选择器（小波浪号）只要是同级向下标签都能找到

```css
     div~p{
         color: red;
     }
     ```

3. 分组与嵌套

```css
   #多个选择器合并查找，就是只要在这里面的选择都查找
   div,p,span{
       color: red;
   }
   ```

```css
   #span1,.ppp1,span{
       color: red;
   }
   ```

```css
   查找class含有c1的div
   div.c1 {  
       color: red;
   }
   ```

```css
   查找id是p1的p
   p#p1{ 
       color: red;
   }
   ```

```css
   查找含义c1样式值里面 id是span1的span标签
   .c1 span#span1{
       color: aquamarine;
   }
   ```

4. 属性选择器

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194508708-119108187.png)

5. 伪类选择器
   a标签补充说明 针对没有点击过的网址默认是蓝色点击过的则为紫色

```css
   a:hover{
       color: red;
   }
   input:focus{
       background: pink;
   }
   
   ```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194514684-807528620.png)

## 选择器优先级

1. 选择器相同 导入方式不
   就近原则

```css
   <link rel="stylesheet" href="style.css">
   <style>
       a{
           color: pink;
       }
   </style>
   ```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194521153-154694632.png)

2. 选择器不同导入方式相同
   内联样式 > id选择器 > 类选择器 > 标签选择器

```css
   a{
       color: pink;
   }
   
   .a1{
       color: red;
   }
   
   #aa1{
   
       color: aqua;
   }
   ```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194526898-2090548197.png)

## css样式调节

字体样式

```css
.niubi{
            font-size: 48px;
            font-family: "Microsoft JhengHei Light";

/*字体粗细*/
            /*font-weight: lighter;*/

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194533319-1219470023.png)

取色器工具

1. pycharm
   ![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194539722-1558207676.png)

2. 截图工具
   微信截图，qq截图之类的

背景属性

/*cover自动缩放填充*/
    /*contain横向填充*/
    /*background-size: cover;*/

/*图片位置*/
    /*background-position: center;*/

/*background-position-x: 100px;*/
    /*background-position-y: 50px;*/

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221201194548326-1125156050.png)

## 边框border

```css
.div1{
    width: 200px;
    height: 200px;
    border-left-color: red;
    border-left-style: dotted;
    border-left-width: 5px;

border-right-width: 5px;
    border-right-style: solid;
    border-right-color: #b0ecdf;

border-bottom-color: pink;
    border-bottom-style: double;
    border-bottom-width: 5px;

border-top-color: black;
    border-top-style: solid;
    border-top-width: 5px;

}
.div2{
    width: 200px;
    height: 200px;
    border: 5px solid aquamarine;
    /*这一句等于上面好多句，常常用于四边都一样的情况*/
    border-radius: 50%;
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210426162-2090463044.png)

## 隐藏display

行内标签是无法设置长宽 只有块级可以设置

1. display:none 彻彻底底的隐藏标签（页面上不会显示 也不会保留标签的位置）
2. visability:hiddon 隐藏的不彻底，会保留原标签位置

```css
.div1{
    width: 200px;
    height: 200px;
    border: 5px solid black;
    visibility: hidden;
}

.div2{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    display: none;
}
.div3{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210437020-1490714084.png)

## 盒子模型

我们可以将标签看成一个盒子（快递盒）

针对标签的嵌套 水平方向可以局中

```css
margin 0 auto;
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210443280-1962952714.png)

## 浮动float

浮动就是用来作业面布局的

浮动的现象

float:left right

```css
.div1{
    /*width: 200px;*/
    /*height: 200px;*/
    /*border: 5px solid pink;*/
}

.div2{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    float: right;
}
.div3{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    float: left;
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210450153-1019679768.png)

解决浮动的影响

clear

解决浮动带来的影响终极方法

先提前写好样式类，谁塌陷了 就给谁添加clearfix样式类就可以了

```css
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210458102-1131868231.png)

ps:浏览器会优先展示文本内容（如果被挡住）

## 溢出overflow

```css
.div1 {
    width: 200px;
    height: 200px;
    border: 5px solid pink;
}

.div2 {
    width: 400px;
    height: 400px;
    border: 5px solid pink;
    /*float: right;*/
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210504663-1365552068.png)

解决溢出

```css
.div1 {
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    overflow: hidden;
}

.div2 {
    width: 400px;
    height: 400px;
    border: 5px solid pink;
    /*float: right;*/
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210511509-1401584830.png)

## 定位position

标签在默认情况下都是无法通过定位参数移动的

针对标签移动有四种状态

```css
.div1{
    width: 200px;
    height: 200px;
    position: relative;
    border: pink solid 5px;
    top:200px;
    left: 400px;

}

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210520036-2068863061.png)

## 图层z-idex

```css
.div1 {
    width: 200px;
    height: 200px;
    background-color: #888c8e;

}
.div4 {
    width: 300px;
    height: 300px;
    background-color: greenyellow;
    position: fixed;
    z-index: 1;

}
.div5 {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: fixed;
    z-index: 2;
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210527184-883079638.png)

## 透明效果opacity

opacity可以透明元素所有可见，而rgba只能透明字体的

## 简易博客页面搭建

<!--</html>
```

```css
/*通用样式*/

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #dfdcdc;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

/*.fexldflo:after {*/

/*    content: '';*/
/*    clear: both;*/

/*}*/

/*首页左边样式*/

.blog_left {
    background: #e4e4e4;
    width: 20%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    float: left;

}

.blog_head_avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 10px auto;
    overflow: hidden;
}

.blog_head_avatar > img {
    /*overflow: hidden;*/
    /*max-width: 100%;*/
    max-height: 100%;
    margin-left: -30px;
}

.blog_info, .blog_desc {
    font-size: 24px;
    font-weight: lighter;
    text-align: center;
    margin: 10px auto;
}

.blog_link a:hover, .blog_award a:hover {
    color: #b0ecdf;
}

.blog_link a, .blog_award a {
    color: black;
    line-height: 10px;
}

.blog_link ul > li, .blog_award ul > li {
    line-height: 40px;
}

.blog_link, .blog_award {
    font-size: 26px;
    color: black;
    text-align: center;
    margin: 35px auto;
}

/*首页右边样式*/

.blog_right {
    width: 80%;
    height: 1000px;
    float: right;
}

.box {
    margin: 30px 20px;
    background-color: white;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.8);
}

.div_title {
    border-left: 2px solid red;
    padding: 15px;
}

.div_title .title {
    font-size: 36px;
}

.div_title .data {
    float: right;
    font-weight: bolder;
    margin: 20px auto;

}
.div_context{
    margin: 5px auto;
    border-bottom:2px solid black;
    padding-bottom: 5px;
}
.div_context span{
    font-size: 24px;
    margin-left: 20px;
}

.div_foot span{
    font-size: 18px;
    margin-left: 20px;
}
```

![image](https://img2023.cnblogs.com/blog/2987368/202212/2987368-20221202210538259-1533929723.png)

前端之css

NETFLIX奈非/网飞 2020-7月最新奈非NETFLIX共享账号

校园网快速上线/下线

wifi密码

免费域名

typora markdown基础使用

BBS(仿博客园项目)

并发编程

drf APIView执行流程，Request对象源码分析，序列化器介绍与使用

此内容被密码保护

函数基础

前端之css