css 图片排列

最新推荐文章于 2022-02-24 18:52:35 发布

蒋光明123

最新推荐文章于 2022-02-24 18:52:35 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sdfsdfytre/article/details/86975017

本文主要探讨CSS在图片排列方面的应用，通过实例讲解如何实现各种图片布局效果，适合前端开发者学习。

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage=""%><HTML> <head>  <title>ff</title>  <!--    首页   -->  <style type="text/css">  <!--   body{    margin: 0;    padding: 0;   }   #team{    width: 700px;    height: 200px;    float: left;    margin-left:10px;    border-style: solid;    background-color: #99FFFF;    border-width:1;     border-color:#A7C942;    }   ul{    display: block;    border-width: 1;    margin-left: 25px;    margin-top: 5px;   }   li{    padding-top:4px;     display:block;     width:80px;     line-height:22px;     text-align:center;    float:left;   }   ul li a{    color:black;     text-decoration:none;   }   ul li a:HOVER{    color:#A7C942;     text-decoration:underline;   }   li img{    border-color: #A7C942;    border-width: 1;    width: 65px;    height: 65px;   }  -->  </style> </head> <body>  <div id = "team">    <ul>             <li><a href="#" target="_blank"><img src="http://i1.itc.cn/20110409/9b2_cf2b4c23_1dfb_4ba3_8969_821c80fc5890_0.jpg" width="68" height="68" alt="广州恒大" /></a><br><span><a href="#" target="_blank">广州恒大</a></span></li>             <li><a href="#" target="_blank"><img src="http://i0.itc.cn/20090223/43f_85a51151_2f30_47a9_9f16_884ef2b7ccc6_0.jpg" width="68" height="68" alt="北京国安" /></a><br><span><a href="#" target="_blank">北京国安</a></span></li>             <li><a href="#" target="_blank"><img src="http://i2.itc.cn/20100322/8da_8a678a06_e5d8_4eb5_a7c4_0a09c547458d_2.jpg" width="68" height="68" alt="辽宁宏运" /></a><br><span><a href="#" target="_blank">辽宁宏运</a></span></li>             <li><a href="#" target="_blank"><img src="http://i1.itc.cn/20120305/9b2_57e7508b_2cfb_a888_0b59_9df32eaac106_1.jpg" width="68" height="68" alt="江苏舜天" /></a><br><span><a href="#" target="_blank">江苏舜天</a></span></li>             <li><a href="#" target="_blank"><img src="http://i1.itc.cn/20090223/43f_3f3ae62b_e920_4e57_a66c_79ddf3d0fd1c_0.jpg" width="68" height="68" alt="山东鲁能" /></a><br><span><a href="#" target="_blank">山东鲁能</a></span></li>             <li><a href="#" target="_blank"><img src="http://i1.itc.cn/20090224/43f_d0b88382_1ee2_4ba6_a9e3_42a22e418c27_0.jpg" width="68" height="68" alt="青岛中能" /></a><br><span><a href="#" target="_blank">青岛中能</a></span></li>             <li><a href="#" target="_blank"><img src="http://i4.itc.cn/20090224/43f_3c3ef7e9_86ca_4ad6_841a_282a0e023164_0.jpg" width="68" height="68" alt="长春亚泰" /></a><br><span><a href="#" target="_blank">长春亚泰</a></span></li>             <li><a href="#" target="_blank"><img src="http://i7.itc.cn/20090224/43f_933af317_b63d_4e92_af13_de6b13a732c3_0.jpg" width="68" height="68" alt="杭州绿城" /></a><br><span><a href="#" target="_blank">杭州绿城</a></span></li>             <li><a href="#" target="_blank"><img src="http://i2.itc.cn/20120305/9b2_222d62c6_c680_c72a_d97f_f3efdff11732_2.jpg" width="68" height="68" alt="贵州人和" /></a><br><span><a href="#" target="_blank">贵州人和</a></span></li>             <li><a href="#" target="_blank"><img src="http://i0.itc.cn/20120305/9b2_bfe22753_8490_584c_7aa1_e3b996030c7b_1.jpg" width="68" height="68" alt="天津泰达" /></a><br><span><a href="#" target="_blank">天津泰达</a></span></li>             <li><a href="#" target="_blank"><img src="http://i9.itc.cn/20090218/43f_b4490760_979e_4f5f_aacd_1722c69ba02f_0.jpg" width="68" height="68" alt="上海申花" /></a><br><span><a href="#" target="_blank">上海申花</a></span></li>             <li><a href="#" target="_blank"><img src="http://i1.itc.cn/20090218/43f_e3c26afe_5571_4aaf_b161_56602287076e_0.jpg" width="68" height="68" alt="大连实德" /></a><br><span><a href="#" target="_blank">大连实德</a></span></li>             <li><a href="#" target="_blank"><img src="http://i5.itc.cn/20090224/43f_87bdac13_d536_4742_83e6_413a961b4bfc_0.jpg" width="68" height="68" alt="河南建业" /></a><br><span><a href="#" target="_blank">河南建业</a></span></li>             <li><a href="#" target="_blank"><img src="http://i3.itc.cn/20100322/8da_9f9b5713_60c0_4b30_b0a8_dd692c78fc69_2.jpg" width="68" height="68" alt="上海申鑫" /></a><br><span><a href="#" target="_blank">上海申鑫</a></span></li>             <li><a href="#" target="_blank"><img src="http://i0.itc.cn/20120305/45d_3c0c3cf6_99dc_9d62_ac95_225dbe015535_1.jpg" width="68" height="68" alt="大连阿尔滨" /></a><br><span><a href="#" target="_blank">大连阿尔滨</a></span></li>             <li><a href="#" target="_blank"><img src="http://i2.itc.cn/20120305/45d_f7736144_3db6_4d18_fb97_77a12bb9a467_1.jpg" width="68" height="68" alt="广州富力" /></a><br><span><a href="#" target="_blank">广州富力</a></span></li>           </ul>  </div> </BODY></HTML>