[分享]css两张图片页面布局

CSS是一种网页样式设计语言，可以用来美化和布局网页。其中，最基本的是页面布局。下面就为大家介绍一种基于CSS的两张图片布局。在HTML文件中，使用两个img标签插入两张不同的图片。为了更好的布局，我...

CSS是一种网页样式设计语言，可以用来美化和布局网页。其中，最基本的是页面布局。下面就为大家介绍一种基于CSS的两张图片布局。

在HTML文件中，使用两个img标签插入两张不同的图片。为了更好的布局，我们给每个img标签加上一个类名。比如，第一个图片的类名为"left-picture"，第二个图片的类名为"right-picture"

<img src="picture1.jpg" class="left-picture">
<img src="picture2.jpg" class="right-picture"> 

接下来，在CSS文件中定义这两个类名的样式。首先，我们去除图片的边框和外边距：

.left-picture, .right-picture{
    border:none;
    margin:0;
} 

然后，我们设置图片的宽度和高度。可以根据图片大小和页面布局需求来自定义宽度和高度值。这里，我们将这两张图片的宽度都设置为50%：

.left-picture, .right-picture{
    border:none;
    margin:0;
    width:50%;
    height:auto; /*自适应高度*/
} 

最后，我们布局这两张图片，让它们并排显示。我们可以使用float属性设置这两张图片的排列方式。具体来说，左侧图片浮动到左侧，右侧图片浮动到右侧：

.left-picture{
    float:left;
}

.right-picture{
    float:right;
} 

这样，我们就完成了基于CSS的两张图片布局。整个布局代码如下：

HTML代码：

<img src="picture1.jpg" class="left-picture">
<img src="picture2.jpg" class="right-picture">

CSS代码：

.left-picture, .right-picture{
    border:none;
    margin:0;
    width:50%;
    height:auto; /*自适应高度*/
}

.left-picture{
    float:left;
}

.right-picture{
    float:right;
} 

通过以上代码，两张图片将会完美地排列在页面中，为网站带来美观的视觉效果。