gpt4 book ai didi

css - 使用伪元素重新设计无序列表

转载 作者:行者123 更新时间:2023-11-28 10:40:08 26 4
gpt4 key购买 nike

我正在尝试使用 CSS 中的伪元素创建自定义列表。

当我添加这个“position: absolute; top: 6px; left: 0px;”时,我的箭头图像完全消失了。当我删除上面的代码行时,我的箭头图像出现在每个列表项的文本上方。

我希望我的自定义箭头出现在每个列表项的下一个旁边。我该如何解决这个问题?

这是我的代码。

  <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Web Page</title>
<style type="text/css">
body { font-family: Arial; font-size: 16px; background-color: #f8e6ae; color: #888; }
.page { background-color: #fff; padding: 20px 30px 30px 50px; margin: 100px; }
.page h1 {
color: #fff;
font-size: 1.3em; font-weight: normal;
text-transform: uppercase;
background-color: #d60000;
position: relative;
margin: 0px -70px 20px -50px;
padding: 18px 0px 16px 50px;


}

.page h1:after {
content: '';
display: block; height: 40px; width: 40px;
background: url(images/fold.gif) no-repeat 0 0;
position: absolute; right: 0px; bottom: -40px;



}


.page p { line-height: 1.2em; }
.page a { color: #1badd2; text-decoration: none; }
.page ul { margin: 0; padding:0; }

.page li { display: block; position: relative;
padding: 2px 0px 8px 35px;
}
.page li:before {
content: '';
display: block;
background: url(images/arrow.png) no-repeat 0 0;
height: 12px; width 30px;
position: absolute; top: 6px; left: 0px;
background-size: 20px 8px;
}




</style>
</head>
<body>
<div class="page">

<h1>My Web Page</h1>

<p>Lorem ipsum dolor sit amet consectetur adi pisicing elit sed do eiusmod tempor incid idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citation ull amco laboris nisi ut aliquip ex ea commodo consequat elit sed do.</p>

<ul>
<li><a href="http://goo.gl/4mkQQH">Automating Web Graphics</a></li>
<li><a href="http://goo.gl/jc62NJ">Slice Tool</a></li>
<li><a href="http://goo.gl/WzAb1X">Smart Objects</a></li>
<li><a href="http://goo.gl/6SwVuo">Layer Comps</a></li>
</ul>
</div>
</body>
</html>

.

最佳答案

我在前面的代码行中缺少 width 属性的冒号。

关于css - 使用伪元素重新设计无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23172370/

26 4 0
文章推荐: html - 如何在父
中平均分配相同大小的
文章推荐: ios - 渲染 MTIImage
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com