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

最新推荐文章于 2022-09-28 17:45:00 发布

shuangde800

最新推荐文章于 2022-09-28 17:45:00 发布

阅读量2.9k

点赞数 2

分类专栏： html&css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/shuangde800/article/details/11598665

版权

html&css 专栏收录该内容

10 篇文章

订阅专栏

本文出自 http://blog.youkuaiyun.com/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.youkuaiyun.com/shuangde800"> <img src="http://img4.douban.com/view/photo/photo/public/p616776018.jpg"/></a></td>
	            <td>  <a href="http://blog.youkuaiyun.com/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p1943390036.jpg"/></a></td>
	            <td>  <a href="http://blog.youkuaiyun.com/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p511146957.jpg"/></a></td>
	            
	        </tr>
	        
	        
	        <tr>
	        <td>  <a href="http://blog.youkuaiyun.com/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p510861057.jpg"/></a></td>
	        <td>  <a href="http://blog.youkuaiyun.com/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p897378146.jpg"/></a></td>
	        <td>  <a href="http://blog.youkuaiyun.com/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p492406974.jpg"/></a></td>
	            
	        </tr>
	        
	        <tr>
	        <td>  <a href="http://blog.youkuaiyun.com/shuangde800"> <img src="http://img4.douban.com/view/photo/photo/public/p456665648.jpg"/></a></td>
	        <td>  <a href="http://blog.youkuaiyun.com/shuangde800"> <img src="http://img5.douban.com/view/photo/photo/public/p455599589.jpg"/></a></td>
	        <td>  <a href="http://blog.youkuaiyun.com/shuangde800"> <img src="http://img3.douban.com/view/photo/photo/public/p457759533.jpg"/></a></td>
	            
	        </tr>
	       </tbody>
	    </table>
	    
	</body>
</html>

效果图：