得分
这个题目8分我得了5分
分析
- 关于HTML语义:article用在非常大段的完整的描述内容上。header是表示非常完整的整页的头部,不是具体某一两个标题头。对于一个文字列表的标题,级别h3~h6之间,通常是h3, h4(概率更大)。链接,一定要使用元素。
- 还是关于HTML语义:dl>dt+dd这里也是不合适的,虽然也是列表,但是这个是“定义列表(define list)>定义标题+定义描述”,这个一般用在对特定描述的解释上。比方说JS API解释。
- 就是关于链接的区域,应该wrap整个列表。为了和移动端的交互体验保持一致(方便胡萝卜一样的粗的手指可以精准点击)。a元素里面是可以放置块状元素的。比较好的HTML语义结构应该是:section>h4+ul>li>a
- 多行打点:display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 多行打点 overflow:hidden不是必需的,和单行ellipsis不一样。然后可能有些小伙伴不知道的是:Firefox目前也支持了-webkit-box打点。
CSS
.ui-content{
width: 300px;
font-size: 12px;
border: 1px solid #e6dfc6;
}
.ui-title{
font-size: inherit;
color: #737063;
margin: 0;
padding: 1em 1.2em;
background: #f7f1d5;
}
.ui-list{
list-style: none;
margin: 0;
padding: 0;
background: #fff8dc;
}
.ui-item{
border-top:1px solid #ede7cd;
padding: 1em 1.2em;
line-height: 1.4;
}
.ui-link{
display: block;
display: -webkit-box;
text-decoration: none;
color: #0077cc;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-height: 2.8em;
}
.ui-item[type]{
padding-left:2.7em;
background-position: 1em 1em;
background-repeat: no-repeat;
background-size: 1.2em 1.2em;
}
.ui-item[type="msg"]{
background-image:url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M892.3 925.3c-15.5 0-30.5-6.5-41.4-18.6L759.7 805l-.6-.8c-2.7-3.3-6.6-5.2-10.9-5.2H232.1C146.6 799 77 729.5 77 643.9V233.6c0-85.5 69.6-155.1 155.1-155.1h559c85.5 0 155.1 69.6 155.1 155.1v453.8c0 27.7 1.4 125.3 2.2 181.1.3 23.5-13.6 44.3-35.5 52.9-6.7 2.6-13.7 3.9-20.6 3.9zm-15.9-55.8s0 .1 0 0c0 .1 0 0 0 0zm-61.9-111.2l61.3 68.3c-.8-58-1.6-117.8-1.6-139.1V233.6c0-22.1-8.7-42.9-24.4-58.7-15.8-15.8-36.6-24.4-58.7-24.4h-559c-22.1 0-42.9 8.7-58.7 24.4-15.8 15.8-24.4 36.6-24.4 58.7v410.3c0 22.1 8.7 42.9 24.4 58.7 15.8 15.8 36.6 24.4 58.7 24.4h516.1c25.8 0 49.9 11.4 66.3 31.3z' fill='%2346a2d9'/%3E%3Cpath d='M763.5 373.6H274c-19.9 0-36-16.1-36-36s16.1-36 36-36h489.4c19.9 0 36 16.1 36 36s-16.1 36-35.9 36zM590.1 550.2H274c-19.9 0-36-16.1-36-36s16.1-36 36-36h316c19.9 0 36 16.1 36 36 .1 19.8-16 36-35.9 36z' fill='%2346a2d9'/%3E%3C/svg%3E")
}
.ui-item[type="exp"]{
background-image:url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M810.07 932.907V659.669h91.05V1024H78.677V659.67h90.88v273.237H810.07zm-549.334-91.051h458.197v-91.179H260.736v91.179zm11.05-207.019l447.147 93.398 19.243-88.32-447.061-93.312-19.328 88.234zm57.985-215.722l414.08 193.28 38.528-83.2-414.123-193.28-38.485 82.602v.598zm115.84-204.16l350.592 292.48 57.984-69.12-350.55-292.395-57.6 68.992-.426.043zM672.043 0l-74.496 55.21 273.28 367.105 74.496-55.211L671.957 0h.086z' fill='%2352575c'/%3E%3C/svg%3E")
}
HTML
<section class="ui-content">
<h4 class="ui-title">标题</h4>
<ul class="ui-list">
<li class="ui-item" type="msg"><a class="ui-link" href="#">恭喜我们29个最老的测试版网站-他们现在不再是测试版了!</a></li>
<li class="ui-item" type="msg"><a class="ui-link" href="#">《独角兽动物园》35;7:Nicolas访谈</a></li>
<li class="ui-item" type="exp"><a class="ui-link" href="#">减少需要重新审查的封闭问题数量的建议</a></li>
<li class="ui-item" type="exp"><a class="ui-link" href="#">实验:在接下来的30天内(直到2019-09-07),以3票为基准关闭和重新打开提出的问题</a></li>
</ul>
</section>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)