html中div布局及其图片插入链接

html中div布局及其图片插入链接

简单介绍一下html中div布局及其图片的链接

打开软件，新建html文件，如图，分析图片的构成部分，是由五张图片，五行字组成。建立五个div布局，每个div包含一张图片一段字。字和图片都有超链接

建立一个div包含五张图片，设置属性margin ：0 auto；上下边界为0，左右相等。建立div5个，放置图片和字。

*{padding: 0;margin: 0;}

.news{width: 1080px;height: 200px;margin: 0 auto;}

.left_1{width: 200px;height: 150px;float: left;padding: 10px;}

.left_2{width: 200px;height: 150px;float: left;margin-top: 10px;}

.center{width: 200px;height: 150px;float: left;padding: 10px;}

.right_1{width: 200px;height: 150px;float: left;margin-top: 10px;}

.right_2{width: 200px;height: 150px;float: left;padding: 10px;}

给图片添加超链接

图片和字都加超链接。运行看一下效果。

所有代码，细节自行添加