html语义化面试题,html笔试题

(2015.3.31阿里笔试题)使用语义化的html标签及css完成以下布局：{最多两行 20px #333 ，顶部对其图片，底部间距8px},{12px #666 行高1.2}使用语义化的html标签完成以下布局，考虑模块化和扩展性。容器默认宽度320px,右侧。

容器默认宽度320px,图片100*100。hover时容器宽度变成400px

1、题目要求使用语义化的html标签，什么是语义化标签？

语义化标签，旨在让标签有自己的含义，根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码。

2、需要注意内容要求的意思，最多两行 ，20px

顶部内容最多出现两行，超过两行的隐藏，文自大小20px;

3、效果

鼠标经过时效果

4、具体代码实现

.wrapper {

width: 300px;

}

.wrapper:hover {

width:400px;

}

.wrapper .img {

width:100px;

height:100px;

float:left;

}

.content1 {

font-size:20px;

line-height:20px;

height:40px;

overflow:hidden; /*超过两行隐藏*/

color:#333;

margin-bottom:8px;

}

.content2 {

font-size:12px;

color:#666;

line-height:1.2em;

}

       

{最多两行20px #333 ，顶部对其图片，底部间距8px}

{12px #666 行高1.2}使用语义化的html标签完成以下布局，考虑模块化和扩展性。容器默认宽度320px,右侧。