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、具体代码实现

<!DOCTYPE html>
<style type="text/css">
.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;
}
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div class="wrapper">
<img src="Test/Image/11.jpg" class="img" alt="图片"/>
<p class="content1">{最多两行20px #333 ，顶部对其图片，底部间距8px}</p>
<p class="content2">{12px #666 行高1.2}使用语义化的html标签完成以下布局，考虑模块化和扩展性。容器默认宽度320px,右侧。</p>
</div>
</body>
</html>

猜你喜欢