Heim > Web-Frontend > HTML-Tutorial > 关于图片布局排版,有点小疑问!_html/css_WEB-ITnose

关于图片布局排版,有点小疑问!_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:22:29
Original
1244 Leute haben es durchsucht

CSS 布局

   
类似这种排版布局,用DIV+CSS如何写?我的方法太麻烦了,表格的话不想用~有木有合适的方法...

回复讨论(解决方案)

你可以参考一些大型网站

有关于 css的布局部分好好看看``~

有关于 css的布局部分好好看看``~
我会布局,就是很麻烦,图片下面要文字和价格。。。

<style type="text/css"> <!-- body{font-size:13px;}#products li { 	float:left; 	margin-left:5px; 	display:inline; 	border:solid 1px blue;} #products li a img { 	border:1px solid #666; 	padding:1px; 	width:121;	height:158;} #products span {display:block; text-align:center;padding:0.3em;height:13px;}--> </style>         <ul id="products" style="border:solid 1px red;width:750px">  <li> 	<a href="#"><img  src="141044911.gif"  alt="关于图片布局排版,有点小疑问!_html/css_WEB-ITnose" ></a> 	<span><a href="#">品名</a></span>  	<span>规格</span>  	<span>会员价:20元</span>  </li>  <li> 	<a href="#"><img  src="141044911.gif"  alt="关于图片布局排版,有点小疑问!_html/css_WEB-ITnose" ></a> 	<span><a href="#">品名</a></span>  	<span>规格</span>  	<span>会员价:20元</span>  </li>  <li> 	<a href="#"><img  src="141044911.gif"  alt="关于图片布局排版,有点小疑问!_html/css_WEB-ITnose" ></a> 	<span><a href="#">品名</a></span>  	<span>会员价:20元</span>  	<span></span>  </li>  <li> 	<a href="#"><img  src="141044911.gif"  alt="关于图片布局排版,有点小疑问!_html/css_WEB-ITnose" ></a> 	<span><a href="#">品名</a></span>  	<span>规格</span>  	<span>会员价:20元</span>  </li>  <li> 	<a href="#"><img  src="141044911.gif"  alt="关于图片布局排版,有点小疑问!_html/css_WEB-ITnose" ></a> 	<span><a href="#">品名</a></span>  	<span>规格</span>  	<span>会员价:20元</span>  </li>   </ul> 
Nach dem Login kopieren


自己换个图片,看效果


有关于 css的布局部分好好看看``~
我会布局,就是很麻烦,图片下面要文字和价格。。。
一样啊, 那就是一个小div的布局, 慢慢写吧, 写好你就懂了~

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage