码迷,mamicode.com
首页 > Web开发 > 详细

html+css表白墙

时间:2015-02-26 10:00:54      阅读:1047      评论:0      收藏:0      [点我收藏+]

标签:图片   css   html5   html   editplus   

<strong><strong><!doctype html>
<html lang="en">
 <head>
  <meta charset="GB2312">
  <meta name="Generator" content="EditPlus庐">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
		*{margin:0px;padding:0px;}
		.box_mod{width:830px;margin:120px auto;position:relative;}
		.box_top{width:830px;height:10px;background:url("img/1.png") no-repeat;}
		.box_bottom{width:830px;height:57px;background:url("img/1.png") no-repeat;}
		.box_title{width:274px;height:57px;background:url("img/3.png") no-repeat;position:absolute;
			top:-25px;left:50%;margin-left:-137px}
		.box_robat{width:78px;height:110px;background:url("img/2.png") no-repeat;position:absolute;
			top:-50px;right:-35px;}
		.box_content{width:830px;height:640px;}
		.box_content .slides_content{width:790px;height:560px;background:#ffedb2;padding:55px 20px 25px 8px;
			overflow:hidden;}
		.box_content .slides_content .slides{width:1000px ;height:540px;}
		.box_content .slides_content .slides ul{width:900px ;height:540px;}
		.box_content .slides_content .slides li {list-style:none; width:255px;height:163px;
			background:url("img/4.png") no-repeat;display:inline-block;margin:5px 3px;}
		.love_box{font-size:14px;color:#e3444c;padding:12px 20px;}
		.Love_send{margin:5px 0px 0px 20px; line-height:20px;}
		.Love_text{margin-top:25px;min-height:54px;}
		.Love_from{margin-top:10px ;float:right;}
  </style>
 </head>
 <body>
  <div class="box_mod">
	<div class="box_top"></div>
	<h2 class="box_title"></h2>
	<div class="box_robat"></div>
		<div class="box_content">
			<div class="slides_content">
				<div class="slides">
					<ul>
						<li>
							<div class="love_box">
								<div class="Love_send">To:晓宇</div>
								<div class="Love_text">如果爱你是错的话,我不想对;
								如果对是等于没有你的话,
								我宁愿一辈子的错!</div>
								<div class="Love_from">WANGQI</div>
							</div>
						</li>
						<li>
							<div class="love_box">
								<div class="Love_send">To:晓宇</div>
								<div class="Love_text">Love You
									希望你天天开心
									这个礼物做出来的晚了,对不起
									我爱你!--王琪</div>
								<div class="Love_from">WANGQI</div>
							</div>
						</li>
						<li>
						<div class="love_box">
								<div class="Love_send">To:晓宇</div>
								<div class="Love_text">我是你夏天里的雪糕,冬天里的棉袄
								黑暗里的灯泡,饥饿时的面包!
								我好想对你说"我爱你"!!</div>
								<div class="Love_from">WANGQI</div>
							</div>
						</li>
						<li>
						<div class="love_box">
								<div class="Love_send">To:晓宇</div>
								<div class="Love_text">遇见你,是我一生的幸运;
								爱上你,是我一生的快乐;
								没有你,无法感受心灵的震撼。</div>
								<div class="Love_from">WANGQI</div>
							</div>
						</li>
						<li>
						<div class="love_box">
							<div class="Love_send">To:晓宇</div>
								<div class="Love_text">情书是我写的,玫瑰是我送的,
								照片是我拿的,电话是我打的,
								信息是我发的!</div>
								<div class="Love_from">WANGQI</div>
							</div>
						</li>
						<li>
							<div class="love_box">
							<div class="Love_send">To:晓宇</div>
								<div class="Love_text">想你想你好想你,找个画家画下你,
								把你贴在杯子里,
								天天喝水亲亲你!</div>
								<div class="Love_from">WANGQI</div>
							</div>
						</li>
						<li>
							<div class="love_box">
							<div class="Love_send">To:晓宇</div>
								<div class="Love_text">把你的名字刻在腕上、写进心里、
								让你保持离我心底最近的距离、无所不在、无处不有`
								`今生注定不能改变 “我爱你”</div>
								<div class="Love_from">WANGQI</div>
							</div>
						</li>
						<li>
							<div class="love_box">
							<div class="Love_send">To:晓宇</div>
								<div class="Love_text">或许 这些 让你感到惊讶 、但我只想说、 
								  我会等你、  会陪你 直到你已不需要我的那一天。  
								   否则   我会一直等下去</div>
								<div class="Love_from">WANGQI</div>
							</div>
						</li>
						<li>
							<div class="love_box">
							<div class="Love_send">To:晓宇</div>
								<div class="Love_text">、爱,从来就是一件千回百转的事。
								不曾被离弃,不曾受伤害,怎懂得爱人? 
								爱,原来是一种经历,但愿人长久。</div>
								<div class="Love_from">WANGQI</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="slides_nav"></div>
			</div>
		</div>
	<div class="box_bottom"></div>
  </div>
 </body>
</html>
</strong></strong>
技术分享

html+css表白墙

标签:图片   css   html5   html   editplus   

原文地址:http://blog.csdn.net/u012651389/article/details/43941355

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!