<!doctype html><!-- 模板 全世界 声明文档类型 网页 -->
<!--整个网页 标签-->
<html>
<head><!-- 网页头部 浏览器 搜索引擎（百度） 开发者（协同性） -->
<meta charset="UTF-8"> <!-- 国际编码 -->
<meta name="Keywords" content="练习"><!-- 关键词 -->
<meta name="Description" content="视频练习"><!--描述-->
<!--标题-->
<title>练习</title>
<!--css样式 层叠样式表 修饰网页-->
<style>
/*给所有的标签清除内外边距*/
*{
margin: 0;/*外边距*/
padding: 0;/*内边距*/
}
div{
overflow: hidden;/*超出隐藏*/
width: 1180px;/*宽度*/
height: 145px;/*高度 px像素/单位*/
/*背景颜色*/
margin: 100px auto;/*外边距 盒子以外的距离 上下 左右（自动居中）*/
padding-top: 20px;/*内边距 内容到盒子之间的距离*/
padding-left: 20px;
}
ul{
width: 3000px;
list-style: none;/*去掉小圆点*/
}
li{
display: inline-block;/*以行内元素形式排列 以块级元素样式显示*/
/*float: left;/*浮动 让元素横拍显示*/
overflow: hidden;/*超出隐藏*/
width: 185px;
height: 125px;
margin-right: 10px;/*距离右边的外边距*/
/*border: 1px solid red;/*边框线*/
transition: .5s cubic-bezier(.29,1.21,.52,1.47);/*贝塞尔曲线过渡 1s*/
}
/*当鼠标划过ul的时候 将li缩小*/
ul:hover li{
width: 107px;
}
/*当鼠标划过li的时候 规定放大*/
ul li:hover{
width: 575px;
}
</style>
</head>
<body><!-- 网页身体 展示内容 -->
<!--
div
容器 长方形
ulli
一列没有顺序的以小黑圆点开头的无序列表 块级元素（block）（默认占据一行）
行内元素 -->
<div>
<ul>
<li><img src='img/1.jpg'></li>
<li><img src='img/2.jpg'></li>
<li><img src='img/3.png'></li>
<li><img src='img/4.jpg'></li>
<li><img src='img/5.jpg'></li>
<li><img src='img/6.jpg'></li>
</ul>
</div>
</body>
</html>
