HTML第七章上机练习2

最新推荐文章于 2021-05-14 13:28:52 发布

原创

最新推荐文章于 2021-05-14 13:28:52 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

这是一个HTML页面示例，展示了北大青鸟的视频宣传列表。页面包含四个精彩视频，每个视频有标题、时长和点击量。视频缩略图周围有不同状态的边框效果，列表项使用了CSS样式进行美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>北大青鸟视频宣传列表</title>
<style type="text/css">
body{  
    line-height:20px;   
    font-size:12px;
	background-color:#999;} 
	 

.sll {
	font-weight: bold;
	background-color:#036;
	width:600px;
	height:50px;
	color:#FFF;
	font-size: 36px;
	text-indent: 2em;
	padding:7px;
}
.bbb {float: left;
	
	list-style-type: none;

}

.abc {
	width:600px;
	heigth:600px;
	background-color:#999;
}


.c li{ float:left;
width:260px;
height:260px;}



.c li a img{border:2px #FFF solid;}
.c li a:hover img{border:2px #F93 solid;}
.c span{
	background-image: url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon-02.jpg);
	background-repeat: no-repeat;
	background-position: 10px 5px;
	height: 25px;
	p