CSS 图片横向排列实现代码
1星 7 浏览量
2020-09-05
21:55:07
上传
评论 1
收藏 33KB PDF 举报 
CSS 图片横向排列实现代码图片横向排列实现代码
一个CSS布局实例，介绍的是一个横向排列的图片列表，这也是大家在从事网页布局时候最常见的一种布局实
例，有必要掌握，本代码已经过了优化，个别细节你需根据你的网站主CSS风格进行调整，才能完美搭配。
<meta http-
equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>CSS 图片列表，横
向</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
font-size:12px;
text-decoration:none;
}
#products {
width:560px;
margin:50px auto;
}
#products li {
width:110px;
height:154px;
float:left;
margin-left:30px;
display:inline;
}
#products li a {
display:block;
}
#products li a img {
border:1px solid #666;
padding:1px;
}
#products li span a {
width:110px;
height:30px;
line-height:24px;
text-align:center;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>
<ul id="products">
<li><img
src="data:image/png;bas
e64,/9j/4AAQSkZJRgAB
AgEASABIAAD/7RSSUG
hvdG9zaG9wIDMuMAA4
QklNA+0AAAAAABAAS
AAAAAEAAgBIAAAAAQ
ACOEJJTQQNAAAAAA
AEAAAAHjhCSU0EGQA
AAAAABAAAAB44QklN
A/MAAAAAAAkAAAAAA
AAAAAEAOEJJTQQKAA
AAAAABAAA4QklNJxAA
AAAAAAoAAQAAAAAA
AAACOEJJTQP1AAAAA
运行代码
复制代码
保存代码
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
资源评论
請你喝杯Java2022-10-30服了 骗人 #毫无价值
