用 CSS 实现倾斜的背景颜色

们在设计网站的时候，有时候为了体现出别具一格的风格，往往会设计出一些特殊的风格。这里就举一个比较常见的例子 —— 倾斜的背景颜色。

在CSS中，没有某一个属性能够直接实现倾斜的背景颜色，而是需要通过一些“手段”来实现。最常想到的方案就是在内容的底部放置一个div，给这个div设定一个背景颜色，然后让这个div倾斜一个角度，从而实现倾斜的背景颜色。比如像下图所示的案例：

那么下面就来用一个基本的实例来解释并实现倾斜背景的效果：

首先要说明一下，页面导航条是固定在页面顶部的，导航条不会随着页面的滚动而移动。这个效果的实现非常简单，就是利用了 position 这个属性的 fixed 值来实现的。

我下面的代码实例中，HTML用来给页面上添加元素，而在 CSS 部分需要精细化的设定属性的参数值，而且需要若干个HTML标签的CSS来配合，从而实现倾斜背景的效果。所以我在CSS代码部分用了比较多的注释来描述这些属性的效果和目的，大家在阅读的时候可以将 CSS 结合着 HTML 一起来理解。或者可以直接拿我的这个实例作为一个模板来使用。

HTML

<!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>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="navbar-bg">
        <ul class="navbar">
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item sign">
                <a href="https://www.baidu.com">Sign</a>
            </li>
        </ul>
    </div>

    <div class="box-bg">
        <div class="box">
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
        </div>
    </div>

    <div class="content">
        <h1>This is content</h1>
    </div>

    <div class="footer">
        <div class="footer-bg">
            <ul class="list">
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

为了让导航条和其他元素都能够与页面的两边留出距离，我在实际内容标签的外围又包裹了一层div，主要在这个包裹的div里设定左右内间距，从而实现两边留白的效果。这些外围包裹的 div 的 class 名称一般都会有一个后缀 "-bg"。

在实际内容的排列时，我采用了更加方便灵活的弹性布局，这样会相对的减少HTML和CSS的代码量。

另外，如果想要实现倾斜的背景颜色，那么这些带有 bg 后缀的 div 就是需要倾斜的标签。倾斜这些 div 其实很简单，只需要设定一个 transform: skew(0deg, -9deg) 这样的CSS代码即可，但是我们可以想象一下，原本是长方形的 div 按照 Y 轴逆时针旋转了一个弧度（-9deg）后，它会变成一个平行四边形，这个平行四边形是左边低右边高。这样就会露出它后面的白色的 body 的部分。所以这种玩法麻烦的地方就是如何通过多个 CSS 属性的配合来遮住露出的白色的body部分。下面就来看一下这个HTML对应的 CSS 代码部分。

在大家阅读 CSS 的代码之前，我给出一个原理图来解释一下其中的原理：

当外围的 div 倾斜了之后，就需要把内容部分的div的上部的内间距增大，以此来遮住平行四边形的左侧露出的白色区域。这是页面上部区域的原理。

那么页面底部也同样需要实现这样倾斜背景颜色的设计，这样才能将风格一致，产生美感。原理还是这个原理图所示的逻辑，不同的地方在于，底部最外围的 div 不倾斜，而是需要两个属性，height 和 overflow-y，并且这个 div 不能带有背景颜色。它们的作用是当它里面的内容超出这个 div 的区域时就不显示，这样就会让上图中蓝色的平行西变形的左下角区域被红色的框线裁剪掉，从而让这个div 乖乖的呆在页面的底部。而这个 div 里面一层的 div 需要让它倾斜，而且还带有一个背景颜色。这样组合出来的效果就是一个看似是左右两边是竖线，下部是横线，只有上部是斜线的带有背景颜色的四边形，这个四边形里面是实际的页面内容。

最终的样子在这篇 CSS 代码的最后展示出来了。

CSS

TMl 的标签可以分为单个标签和成对标签。

单个标签：html4 规定单个标签要有一个 / 表示结尾， html5 则不用

<!--单个标签-->
<meta>
<!--成对标签 -->
<div></div>

以下是HTMl中常用的一些标签

div 标签

div 标签主要用来将相关的内容组合到一块，就像菜市场把各个蔬菜分成不同种类区分摆放是一个道理。

div 是最常见也是比较重要的标签，网页布局中经常使用的一类标签。通常布局被称为 DIV + CSS 布局

<div>
  div 就是一个分类的存储箱子
</div>

p标签

p标签表示段落，在网页文字中应用的比较多

<!--段落和段落间会换行-->
<p>第一段</p>
<p>第二段</p>

H-标题标签

h标签分为六个

标签	语义
h1	一级标题
h2	二级标题
h3	三级标题
h4	四级标题
h5	五级标题
h6	六级标题

引用标题标签后，字体会加粗、字号一会变大

ul 无序标签

无序标签是没有显示顺序的列表，无序列表前面通常会有一个“小点”，这个小点可以用type属性控制。其中有三个展示方式（不过这种方式比较固定，不够灵活和美观，已经被CSS的效果代替），如下：

值（type属性）	描述
disc	默认值，实心圆
circle	空心圆
square	实心方框

举例:

<!--ul标签内部只能放置li标签-->
<!--li标签内部可以放其他的标签-->
<ul type=">
    <li>无序列表元素1</li> <!--列表项-->
    <li>无序列表元素2</li>
</ul>




实心圆
<ul type="disc">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>
空心圆
<ul type="circle">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>
实心方框
<ul type="square">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>

ol 有序标签

ol 前面的标签是有序的，可以是数字、字母、罗马数字等。同样控制这些样式使用的是type属性。

type属性值	意义
a	小写英文字母编号
A	大写英文字母编号
i	小写罗马数字编号
I	大写罗马数字编号
1	数字编号（默认）

设置start属性，表示从哪个编号开始
加 reversed 表示倒叙排列

有序列表, 从2开始
<ol start="2">
  <li>元素1</li>
  <li>元素2</li>
</ol>


小写字母表示
<ol type="a">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>


倒叙
<ol reversed>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>

dl 自定义列表

dl标签表示自定义列表

dt表示数据项，dd表示数据定义， dd是dt标签的解释

<dl>
    <dt>西红柿</dt>
    <dd>红、酸</dd>
    <dt>黄瓜</dt>
    <dd>绿、涩</dd>
  </dl>

img标签

img 用来插入图片，包括但不限于以下图片格式

图片格式	备注
.jpg、.jpeg	通常用于照片，是一种有损压缩格式
.png	通常用于logo、背景，支持透明和半透明。便携式网络图像
.svg	矢量图片

<!-- src(source)属性， 图片地址，可以为相对路径，也可以为绝对路径-->
<!-- alt 如果遇到图片无法加载的情况，网页上会展示 alt的 值 -->
<!-- width 和 height 表示 宽和高， 如果只设置一个， 那么另外一个就会跟着成比例缩放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">

a 标签

用a标签来制作超级链接

<!-- href 属性 表示 其他页面的链接，支持相对路径和绝对路径，还可以链接到其它网站 -->
<!--target 属性表示 打开其他链接的方式-->
<!-- title 属性表示 链接的标题， 当鼠标移动到链接上，会展示出来-->
<a href="http://www.baidu.com" target="blank" title="文字标题">百度</a>






<!--也可以用a标签作为锚点 锚点可以是本页面的锚点，也可以是其他页面的锚点-->
<h1 id="title">头部标题</h1>
... 此处省略一些代码
<a href="#title">返回标题</a>




<!--下载链接，指向 doc， zip， zip等文件格式时，a标签将成为自动下载链接-->
<a href="./download/halou.zip">发邮件</a>
<!-- mailto:前缀的链接是邮件链接，系统将自动打开email相关软件-->
<a href="mailto:halouworld@126.com">发邮件</a>
<!-- tel: 前缀链接是电话链接，系统将自动打开拨号键-->
<a href="tel:11111111111">打开拨号键盘</a>

audio标签

audio标签用来插入音频标签

<!--添加 controls 后才会显示 播放控件-->
<!--常用音频格式 mp3 和 ogg格式-->
<!--autoplay 自动播放属性-->
<!--loop 属性表示循环播放-->
<audio controls src="./video/demo.mp3">
       您的浏览器不支持 audio标签，请升级
</audio>




<audio controls src="./video/demo.mp3" autoplay loop>
     您的浏览器不支持 audio标签，请升级
</audio>

video标签

video 标签用于插入一段视频

<!--有的视频不能播放 ，详见 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 显示视频播放控件  -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->
<!-- 常见的 视频格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
    您的浏览器不支持 video标签，请升级
</video>

其它区块标签

以前的区块标签只有div，现在为了更好的方便搜索引擎抓取网站，因此有了以下语义更加明确的区块标签

<section>	文档的区域，比div语义上还要大一点
<header>	页头
<main>	网页核心部分
<footer>	页脚

其他的语义标签

span 标记文本标记区域，没有特殊效果，结合CSS使用

b 标签加粗文章（可以使用CSS实现同样效果）

u 加下换线文字

br 换行

i 倾斜文字（可以使用CSS实现同样效果）

strong 代表特别重要的文字

em 需要强调的文字，有一定的倾斜，也可以用其配置CSS做表情文字

mark 高亮文字

figure 和 figcaption 。figure - 一段独立的内容 figcaption- figure 内部元素的说明性内容

表单

表单用来收集信息并且可以完成和后端的数据传输

表单中大致可以分为三种标签

form标签，标识表单区域，内部的元素都可能被表单提取信息
input 标签，标识输入、点击等需要和用户交互的场景
datalist 下拉框，支持搜索，通常和input一块使用

一些表单的示例

<!--action 表示要提交到后端的网址-->
<!--method 表示表单提交的方式，通常有 get 、 post 、put、delete等-->


<form action="/save" meththo="post"></form>


<!--<form> 标签中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在没任何输入值的情况下，作为提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>


<!---单选按钮，name相等，表示选择了一个，另一个就不能选择了-->
<!--checked 表示默认被选中-->
<!-- value 属性表示要提交到后端服务器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio"  name="radio_group">




<label>
    <input type="radio" name="sex"> 男
</label>
<label> 
    <input type="radio" name="sex"> 女
</label>




<!--html4 中的标签 通过for 属性 和 其他标签的id属性进行绑定-->


<input type="radio" name="sex" id="nan"> 
<label for="nan">男</label>


<input type="radio" name="sex"   id="nv">
<label for="nv">女</label>


<!--复选框 type="checkbox" 同一组的的复选框，name值应该相同 ，复选框也有value值， 用于向服务器提交数据-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 篮球


<!--密码框-->
<input type="password" placeholder="请输入密码">


<!-- 下拉菜单 -->
<select>
  <option value="alipay">支付宝</option>
  <option value="wxpay">微信支付</option>
</select>


<!--多文本框 rows 和  clos 分别用于设置 行数 和 列数-->
<textarea rows="3" cols="5"></textarea>


<!--三种按钮 submit 提交按钮  button 普通按钮 可以简写为  <button></button> reset 按钮 重置按钮-->
<input type="button" value="普通按钮">
    <input type="reset" value="重置按钮"> 
    <input type="submit" value="提交表单">




<!--像 email 和 url 等格式，如果点击提交按钮，不符合格式，会有提示-->
<form>
    日期空间: <input type="date">  <br/>
    时间空间: <input type="time">  <br/>
    日期时间空间 <input type="datetime-local">  <br/>


    文件:<input type="file"> <br/>  <br/>
    数字控件: <input type="number"> <br/>
    拖拽条: <input type="range"> <br/>
    搜索框: <input type="search"> <br/>
    网址控件: <input type="url"> <br/>
    邮箱控件: <input type="email" >
    <input type="submit" value="提交">
</form>




<!-- datalist 备选项示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陕西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山东"></option>
</datalist>

表格

可以用html渲染表格

table 标签表示表格

tr 表示行
td 表示单元格
caption 表格的标题，通常放在表格的第一行
th 表示列标题

<!--表格示例-->
<table border="1">
  <caption>我是标题</caption>
  <tr>
      <th>第一列标题</th>
      <th>第二列标题</th>
  </tr>
  <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
  </tr>
  <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
  </tr>
</table>

单元格的合并, clospan 用来设置td 或者th的列跨度， rowspan属性用来设置td或者th的行跨度

<!--跨列示例-->
<table border="1">
    <caption>我是标题</caption>
    <tr>
        <th>第一列标题</th>
        <th>第二列标题</th>
    </tr>
    <tr>
        <td colspan="2">跨两行</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>


<!--跨行示例-->
<table border="1">
        <caption>我是标题</caption>
        <tr>
            <th>第一列标题</th>
            <th>第二列标题</th>
        </tr>
        <tr>
            <td rowspan="2">第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
  </table>

表格的其他标签， thead 定义表头， tbody 定义表格的主题内容， tfoot 标签定义表格底部，通常用来汇总等

/一、html

//a、HTML语法规范

//a.1基本语法概述

1、HTML标签是由尖括号包围的关键字，例如,

2、HTML标签通常是成对出现的，例如和,我们成为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。

3、有些特殊的标签是单个标签（极少情况），例如

，我们称为单标签

//a.2标签关系

双标签关系可以分为两类：包含关系和并列关系。

//b、HTML基本结构标签

//b.1第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上写的。

HTML页面也称为HTML文档

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容，基本都是放到body里面的

必须是.html或.htm,浏览器的作用是读取HTML文档，并以网页的形式显示出它们。

此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。

//c、开发工具vscode

1、<!DOCTYPE>标签
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>这句代码的意思是：当前页面采用的是HTML5来显示页面。

2、lang语言

用来定义当前文档显示的语言：

a、en定义语言为英语

b、zh-CN定义语言为中文

简单来说定义为en就是英文网页，定义为zh-CN就是中文网页

其实对于文档显示来说，定义成en的文档也可以显示中文，定义zh-CN的文档也可以显示英文

这个属性对于浏览器和搜索引擎（百度、谷歌等）还是有作用的

3、charset字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字

在标签内，通过标签的charset属性来规定HTML文档应该使用哪种字符编码。

charset常用的值：GB2312、BIG5、GBK和UTF-8,其中UTF-8也称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面语法是必须写的代码，否则可能引起乱码的情况，一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"UTF-8",不要写成"utf-8"或"UTF8"。

//d、HTML常用标签

//d.1标签语义

学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是指标签的含义，即这个标签是用来干嘛的

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

//d.2标题标签

(重要)

为了使网页更具有语义，我们经常会在页面中用到标题标签，HTML提供了6个等级的网页标题集

特点：

1、加了标题的文字会变得更加粗，字号也会依次变大。

2、一个标题独占一行。

//d.3段落和换行标签（重要）

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干段落。

<p>我是一个段落标签</p>标签语义：可以把HTML文档分割为若干段落。

特点：
1、文本在一个段落中会根据浏览器窗口的大小自动换行。
2、段落和段落之间保有一个较大的空隙。

在HTML中，一个段落中的文字从左到右依次排列，直到浏览器的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用换行标签

<br />

单词break的缩写，意为打断，换行。

特点：

1、单标签

2、

标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

//d.4文本格式标签

在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式标签，使文字以特殊的方式显示

标签语义：突出重要性，比普通文字更重要。

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐使用<strong></strong>标签加粗，语义更强烈
倾斜	<em><em> 或者<i><i>	更加推荐使用<em><em>标签，语义更加强烈
删除线	<del><del>或者<s><s>	更加推荐使用<del><del>标签，语义更加强烈
下划线	<ins><ins>或者<u><u>	更加推荐<ins><ins>标签，语义更加强烈

//d.5<div>和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容。

<div>这是头部</div>
<span>今日价格</span>

div是division的缩写，表示分割，分区，span意为跨度，跨距。

特点：

1、<div>标签用来布局，但是现在一行只能放一个<div>，大盒子。

2、<span>标签用来布局，一行上可以有多个<span>,小盒子

//d.6图像标签和路径（重点）

1、图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。

<img src="图像url"/>

单词image的缩写，意为图像

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

在线咨询

上一篇：Web中固定面板怎么做？用CSS3 calc函数一行就搞定
下一篇：零基础教你学前端-3.HTML基本格式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商