HTML+CSS模板:搜索结果列表
HTML+CSS模板:搜索结果列表
提问于 2018-07-03 23:09:01
我正在尝试为我一直在处理的常见HTML + CSS任务开发一些模板。其中之一是来自客户端或服务器端的一般搜索结果列表。
到目前为止，我使用的是以下可重用代码，这些代码似乎运行良好，没有任何明显的错误：
[Dummy Title] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis accumsan felis. Maecenas vel libero mi. Suspendisse potenti. Sed tempus ex eu diam imperdiet mattis ac ut orci. Sed non lectus libero. Suspendisse vitae nunc a quam mattis congue id eget tortor. Vivamus id arcu eros. Duis eu risus semper, dapibus quam in, tristique magna. Duis semper tempus dolor eget elementum. Duis arcu ipsum, suscipit a egestas quis, lobortis sit amet purus.
dummy notes 1
• dummy notes 2
• dummy notes 3
dummy notes 4
• dummy notes 5
• dummy notes 6
/* Query List */
ul.query-list {list-style-type: none; min-width: 340px;}
ul.query-list li {height: 5.7em; margin: 10px 0; font-size: 12px;}
ul.query-list li a {text-decoration: none; display: flex; height: 100%;}
ul.query-list li a:hover {background-color: #fafafa; opacity: 0.7;}
ul.query-list li a:hover .title-container {text-decoration: underline;}
ul.query-list .image-container {flex-shrink: 0; height: 100%; width: 5.7em; margin-right: 5px;}
ul.query-list .text-container {display: flex; flex-direction: column; height: 100%;}
ul.query-list .title-container {overflow: hidden; margin-bottom: 0.2em;}
ul.query-list .title-container .no-title {color: darkgray; font-weight: bold;}
ul.query-list .notes-container {flex-shrink: 0; flex-grow: 0; height: 1.1em; overflow: hidden;}
ul.query-list .notes-container p {color: darkgray; text-align: left;}
.query-list p, h3 {margin: 0; line-height: 1.1em; font-size: 12px; text-align: left; font-family: arial;}
.query-list span {white-space: nowrap}
/* General Definitions */
.icon-img {max-width: 100%; max-height: 100%; display: block;}
h3 {color: darkblue;}该守则的一些主要特点是：
- 文本内容最多有5行(标题+注释)，与文本内容的数量无关。
- 除了标题行的数目之外，注释总是会立即下垂(没有可变的差距)。
- 标题行的最大数目根据包括或删除的注释行数自动调整。
Interested in:
- 可以简化吗？在我看来，有一个，和
flexbox的巢穴对于这么简单的任务来说太复杂了…… - 有任何标准术语或其他最佳做法吗？
- 有什么想法来改善它的设计和外观(没有
JS)？
回答 1
Code Review用户
回答已采纳
发布于 2018-07-04 23:56:28
如果对结果进行了排序(通常按相关性排序)，则应该使用ol而不是ul。
如果使用标题元素(article -h6)，最好使用分段内容元素( aside、nav、section)。在一般情况下，请使用section。如果结果是文章(如博客文章)或页面，请与article一起使用。
这是一个可用性问题，但通常只有标题是链接的，而不是所有的东西。这可以使您的用户更容易在描述中标记文本，并在触摸设备上滚动，而不会意外打开链接。
img必须有一个alt属性。该值取决于您在这里显示的图像类型。如果它只是一个图标，表示它是一个搜索结果，则该值应该为空。
Title
notes 1
notes 2相关:我对用于搜索引擎结果列表的HTML的回答
页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://codereview.stackexchange.com/questions/197759
复制相关文章
相似问题
腾讯云开发者
