背景样式：

head：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    h1{
        background-color: red;      /*设置背景颜色*/
        background-color: rgb(90, 10, 50);
        background-color: #FFFFFF;
    }

    body{
        /* height: 1000px; */
        background-image: url('img/a.jpg');
        background-repeat: no-repeat;       /*设置图片平铺方式*/
        /* background-position: 100px 100px;        设置图片背景的位置*/
        /* background-attachment: fixed;        设置背景图的滚动方式*/

        /* background: red url('img/a.jpg') 200px 200px no-repeat;      复合属性*/
        background-size: cover;     /*设置背景图大小*/
    }
</style>

body：

<h1>商品分类</h1>
<ul>
    <li>电脑 手机 图书</li>
    <li>电脑 手机 图书</li>
    <li>电脑 手机 图书</li>
    <li>电脑 手机 图书</li>
    <li>电脑 手机 图书</li>
</ul>

文本样式：

head：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    h1{
        color: red;
        font: italic bolder 60px '华文彩云';    /*字体复合属性*/
    }
    ul{
        color: royalblue;
        font-style: italic;
    }

    h1,ul{
        text-align: center;     /*设置文本的对齐方式*/
    }
    p{
        text-indent: 2em;       /*设置段落缩进*/
        line-height: 2em;       /*设置段落行高*/

        font-family: '幼圆';        /*设置字体类型*/
        font-size: 20px;        /*设置字体粗细*/
    }
    span{
        text-decoration: overline dotted red;
        font-weight: bolder;
    }
    a:hover{
        text-decoration: none;
    }
</style>

body：

<h1>商品分类</h1>
<ul>
    <li>电脑 手机 图书</li>
    <li>电脑 手机 图书</li>
    <li>电脑 手机 图书</li>
    <li>电脑 手机 图书</li>
    <li>电脑 手机 图书</li>
</ul>

<p>马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
    马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
    马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
    马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
</p>
<p>马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
    马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
    马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
    马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
</p>
<p>马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
    马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
    马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
    马上要过<a href="">元旦</a>跟<span>圣诞节</span>了，<span>钱准备好了吗</span>？
</p>