[Codecademy] HTML&CSS 第六课:Clickable Photo Page



本文出自   http://blog.csdn.net/shuangde800


[Codecademy] HTML && CSS课程学习目录


------------------------------------------------------------------------------------------------


这节课是练习课,在上一节课我们已经学了关于表格的一些东西,表格的功能不仅如此,还可以更强大。


这里会先用到了CSS文件,所以在工程中包含一个新文件stylesheet.css。 CSS的内容会在下一节课里学习,这里先不去讲它。

css文件stylesheet.css:
img {
	width:100px;
	height:100px;
}

table, td {
	border: 1px #70b8ff dashed;
}

表格里也可以放置图片,而且这个图片也可以设置成带超链接的,只要在<img>外面包围着<a>标签即可。
<!DOCTYPE html>> 
<html>
	<head>
    </a>
		<link type="text/css" rel="stylesheet" href="stylesheet.css" />
		<title>My Photo Page</title>
	</head>
	
	<body>
	    <table>
	    <thead colspan='3'>
	        <th>Shuangde</th>
	    </thead>
	    
	    <tbody>
	        <tr>
	       
	            <td>  <a href="http://blog.csdn.net/shuangde800"> <img src="http://img4.douban.com/view/photo/photo/public/p616776018.jpg"/></a></td>
	            <td>  <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p1943390036.jpg"/></a></td>
	            <td>  <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p511146957.jpg"/></a></td>
	            
	        </tr>
	        
	        
	        <tr>
	        <td>  <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p510861057.jpg"/></a></td>
	        <td>  <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p897378146.jpg"/></a></td>
	        <td>  <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p492406974.jpg"/></a></td>
	            
	        </tr>
	        
	        <tr>
	        <td>  <a href="http://blog.csdn.net/shuangde800"> <img src="http://img4.douban.com/view/photo/photo/public/p456665648.jpg"/></a></td>
	        <td>  <a href="http://blog.csdn.net/shuangde800"> <img src="http://img5.douban.com/view/photo/photo/public/p455599589.jpg"/></a></td>
	        <td>  <a href="http://blog.csdn.net/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p457759533.jpg"/></a></td>
	            
	        </tr>
	       </tbody>
	    </table>
	    
	</body>
</html>

效果图:
[Codecademy] HTML&CSS 第六课:Clickable Photo Page_第1张图片




你可能感兴趣的:(html,css)