如何制作宽屏页面之html简单方法

最新推荐文章于 2023-04-24 16:29:39 发布

clyao_123456

最新推荐文章于 2023-04-24 16:29:39 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/clyao_123456/article/details/49818301

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近要用一张大图来做一个页面，通过ps的切片之后，就没有想到什么办法处理，就百度一番结果做好了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*,html,body {
	margin:0px;
	padding:0px;
	background-color:#007ad8;
}
.content{
	margin:0px auto;
	width:100%;
	height:6094px;
	min-width:960px;
	position:relative;
	overflow:hidden;
}
.content .img1{
	position:absolute;
	top:0px; 
	left:50%; 
	margin-left:-960px; 
	height:309px;
	width:1920px; 
	overflow:hidden;
}
.content .img2{
	position:absolute; 
	top:309px;
	left:50%; 
	margin-left:-960px; 
	height:635px;
	width:1920px; 
	overflow:hidden;
}
.content .img3{
	position:absolute;
	top:994px;
	left:50%; 
	margin-left:-960px; 
	height:723px;
	width:1920px; 
	overflow:hidden;
}
.content .img4{
	position:absolute;
	top:1667px;
	left:50%; 
	margin-left:-960px; 
	height:206px;
	width:1920px; 
	overflow:hidden;
}
.content .img5{
	position:absolute;
	top:1873px;
	left:50%; 
	margin-left:-960px; 
	height:670px;
	width:1920px; 
	overflow:hidden;
}
.content .img6{
	position:absolute;
	top:2543px; 
	left:50%; 
	margin-left:-960px; 
	height:214px;
	width:1920px; 
	overflow:hidden;
}
.content .img7{
	position:absolute;
	top:2757px; 
	left:50%; 
	margin-left:-960px; 
	height:557px;
	width:1920px; 
	overflow:hidden;
}
.content .img8{
	position:absolute;
	top:3314px; 
	left:50%; 
	margin-left:-960px; 
	height:886px;
	width:1920px; 
	overflow:hidden;
}
.content .img9{
	position:absolute;
	top:4200px; 
	left:50%; 
	margin-left:-960px; 
	height:216px;
	width:1920px; 
	overflow:hidden;
}
.content .img10{
	position:absolute;
	top:4416px; 
	left:50%; 
	margin-left:-960px; 
	height:748px;
	width:1920px; 
	overflow:hidden;
}
.content .img11{
	position:absolute;
	top:5164px; 
	left:50%; 
	margin-left:-960px; 
	height:567px;
	width:1920px; 
	overflow:hidden;
}
.content .img12{
	position:absolute;
	top:5731px; 
	left:50%; 
	margin-left:-960px; 
	height:363px;
	width:1920px; 
	overflow:hidden;
}
</style>
</head>

<body>
<div class="content">
	<div class="img1">
		<img src="image/ssny01.jpg" />
	</div>
    <div class="img2">
		<img src="image/ssny02.jpg" />
	</div>
    <div class="img3">
		<img src="image/ssny03.jpg" />
	</div>
    <div class="img4">
		<img src="image/ssny04.jpg" />
	</div>
    <div class="img5">
		<img src="image/ssny05.jpg" />
	</div>
    <div class="img6">
		<img src="image/ssny06.jpg" />
	</div>
    <div class="img7">
		<img src="image/ssny07.jpg" />
	</div>
    <div class="img8">
		<img src="image/ssny08.jpg" />
	</div>
    <div class="img9">
		<img src="image/ssny09.jpg" />
	</div>
    <div class="img10">
		<img src="image/ssny10.jpg" />
	</div>
    <div class="img11">
		<img src="image/ssny11.jpg" />
	</div>
    <div class="img12">
		<img src="image/ssny12.jpg" />
	</div>
</div>
</body>
</html>

结果截图

clyao_123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何制作宽屏页面之html简单方法

最近要用一张大图来做一个页面，通过ps的切片之后，就没有想到什么办法处理，就百度一番结果做好了无标题文档*,html,body { margin:0px; padding:0px; background-color:#007ad8;}.content{ margin:0px auto; width:100%; height:6094px; min-width:96
复制链接

扫一扫