Html 如何在CSS中设置li、span和a元素的样式

很抱歉出现任何格式问题，或者如果不允许出现类似问题，请第一次在此处发布。这个项目提交如图所示，因为我无法让它在作业到期日前正确查看。我真的希望得到一些解释或指导，因为我对HTML/CSS非常感兴趣，并且希望了解我做错的所有事情，不幸的是，没有针对这些项目发布解决方案。我的代码和项目步骤发布在下面。 我在问题6-9中特别挣扎

输出与我的输出

1）记住，所有渐变都被视为背景图像（因此可以在渐变中使用背景重复等）

2）滚动div元素包含两个球体（左浮动和右浮动）。 a） 每个球体的宽度为15个像素，高度为30个像素，边界半径为50%，径向渐变颜色为白色（中间）然后为棕褐色

b） 为确保球体位于线性渐变之上，您需要调整线性渐变，使其不会超出球体。也就是说，卷轴必须具有30像素的高度和640像素的宽度

梯度是这样的：

i） 背景图像是一个l线性梯度，先是棕褐色，然后是古色白，然后是棕褐色

ii）其背景位置为中心

iii）它不会重复

iv）背景尺寸设置为小于元素尺寸，例如，背景尺寸的高度为20像素，宽度为620像素，因此背景尺寸将位于两个球体后面

3）没有标记的ul元素的填充为0，然后需要向上移动。为此，ul元素必须使用相对位置，然后具有-5像素的top属性。我将ul元素设置为600像素，这样它比顶部和底部的卷轴略窄。为了使卷轴居中，所有内容的边距都是自动的

4）ul元素必须看起来像一个旧卷轴，因此您需要使用棕褐色、仿古白色、四种白色的线性渐变，然后返回到仿古白色，然后是棕褐色。此外，ul元素具有3像素左右边框、脊线样式和棕褐色颜色

5）每个li元素使用14像素的行高和字体大小，文本阴影为黑色，偏移量为0，模糊度为10像素。左右边距为20像素，顶部和底部填充为4像素

6）现在，我们将研究我们的li元素，在跨度和元素之间有点，就像普通目录中的点一样。也就是说，我们将对li元素的背景应用以下内容：

a） 右侧线性渐变的背景图像：两种透明颜色，一种黑色，然后是两种透明颜色

b） 背景宽度为4像素，高度为1像素

c） 背景仅在x方向重复

d） 背景居中

7）在每个li元素中，我们有一个跨度元素和一个锚定（a）元素，它们分别浮动在左侧和右侧。它们都是内联块显示，没有下划线。要隐藏这些元素中的点，我们需要用相同的颜色重新着色这些点。也就是说，它们将具有与点类似的样式：

a） 背景宽度为4像素，高度为1像素

b） 背景仅在x方向重复

c） 背景居中

d） 它们都是线性渐变，比如线性渐变（向右，#ffffff，#ffffff）

e） 此外，由于卷轴有不同的颜色，我们按以下顺序定义颜色：

i） #e4ccad（教程1）

ii）#fcf2e4（教程2）

iii）白色用于教程3-6

iv）#fbf1e3（教程7）

v） #e2cbab（教程8）

8）每个li元素都有一个背景色为棕褐色的悬停（li:hover）；悬停中所有子元素的背景图像将覆盖线性渐变，如上图所示：线性渐变（向右，棕褐色，棕褐色）-因此点也隐藏在那里

9）最后，最后一个滚动元素有一个相对位置，顶部移动了几个像素（-12像素）

@charset“utf-8”；
/*
日期：20年10月31日
*/
/*体型*/
身体{
宽度：600px；
位置：相对位置；
}
/*卷轴样式*/
分区卷轴{
高度：30px；
宽度：640px；
背景图像：线性梯度（棕褐色、仿古白色、棕褐色）；
背景位置：中心；
背景重复：无重复；
背景尺寸：620px 30px；
}
/*球体样式*/
第1部分{
显示：块；
浮动：对；
宽度：15px；
高度：30px；
边界半径：50%；
背景图像：径向梯度（白色，棕褐色）；
}
第2部分{
显示：块；
浮动：左；
宽度：15px；
高度：30px；
边界半径：50%；
背景图像：径向梯度（白色，棕褐色）；
}
/*ul样式*/
保险商实验室{
列表样式类型：无；
填充：0；
位置：相对位置；
顶部：-5px；
保证金：自动；
背景尺寸：600px；
背景图像：线性渐变（棕褐色、仿古白色、白色、白色、白色、白色、仿古白色、棕褐色）；
边缘样式：脊；
右边框宽度：3px；
左边框宽度：3px；
边框颜色：棕褐色；
}
/*列出样式*/
ulli{
线高：14px；
字体大小：14px；
文本阴影：0,0,10px，暗金色；
左边距：20px；
右边距：20px；
填充：4px；
背景图像：线性渐变（向右，transp
ul{
list-style-type:none;
}

li{
display:block;
}

ul li a:hover{
color:#332419;
display:block;
text-decoration:none;
}

li:hover{
background-color:#ead6b7;
}