开发网页给女朋友表白，技术人是怎么做的

今天药忘吃喽~ 2022-11-13 01:54 250阅读 0赞

# 开发网页给女朋友表白，技术人是怎么做的 #

### 文章目录 ###

*  开发网页给女朋友表白，技术人是怎么做的
 *  确定布局
 *   *  导航栏设计
     *  侧面导航栏设计
     *  主体部分设计
     *  插入视频
     *  图卡片堆积布局
     *  细节添加
     *   *  图片若隐若现效果
         *  图片pop说明
         *  图像模型的构建
     *  背景音乐
     *  细碎功能
     *  完整代码【无素材】
     *  流程展示
     *  视频链接
     *  效果展示

--------------------

![在这里插入图片描述][20210324223928102.gif]

--------------------

> 今天想开发一个网站，也算给女朋友一个小小的浪漫，平时在一起也比较忙，也算是平日里的一点小romantic，和大家分享只想和大家关心设计和技术，感谢大家的支持。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70_pic_center]

# 确定布局 #

> 首先确定一下，我要开发分为几个部分的网站，这样看起来比较有层次感。  
> 其次，把主界面设计成浅灰色，再把每一个标签设计成白底的时候，再用box-shadow设置相应的投影，可以做出卡片嵌入的效果。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70]

## 导航栏设计 ##

> 首先确定的是，做个跟随吸附的效果，导航栏肯定要用sticky，在css里面设计，我们用div…sticky\{\}就可以，设置好各方面的position和margin，代码如下：

div.sticky{ 
    				
    				position: sticky;
    				top: 0;
    				background:azure;
    				text-align: center;
    		   }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 2]

> 这是吸附的效果。  
> 会一直跟随你的滚动。

## 侧面导航栏设计 ##

> 侧面导航栏设计为贯穿整个界面的导航栏，所以css属性就要设计为这样：

.side-leader ul{ 
    				
    				list-style-type: 0;
    				margin-top: 10px;
    				padding: 0;
    				width: 7%;
    				height: 190%;
    				background-color:#333 ;
    				box-shadow: 0px 0px 1px 0px #888888;
    				position:absolute;
    				overflow: auto;
    				border-radius: 25px;
    				float: left;
    				z-index: 4;
    				
    				
    				
    			}
    			
    			.side-leader ul li a{ 
    				display: block;
    				color:white;
    				padding: 8px 16px;
    				text-decoration: none;
    				font-family:"黑体";
    				
    			}

> 这样显示出来的是这样的：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 3]

> 设计出来是这样的。

## 主体部分设计 ##

> 主体部分分为三个部分，分别用column设置width分开就好。

body{ 
    				margin: 0;
    				font-family: Arial;
    				padding: 10px;
    				background: #f1f1f1;
    			}
    			
    			.clearfix { 
    			  overflow: auto;
    			}
    			.shadow_box{ 
    				box-shadow: 0px 3px 10px 1px #888888;
    			}
    .leftcolumn{ 
    				
    			    float: left;
    			    width: 8%;
    				
    			}
    			.midcolumn {    
    			  float: left;
    			  width: 50%;
    			}
    			
    			/* 右列 */
    			.rightcolumn { 
    			  float: left;
    			  width: 42%;
    			  background-color: #f1f1f1;
    			  padding-left: 20px;
    			}
    			.avercolumn{ 
    			  float: left;
    			  width: 50%;
    			  background-color: #f1f1f1;
    			  
    			  
    				
    			}
    			.aver_column{ 
    			  float: left;
    			  width: 49%;
    			  background-color: #f1f1f1;
    			  margin-left: 1%;
    			  
    				
    			}
    			.aver2column{ 
    			  float: left;
    			  width: 68%;
    			  background-color: #f1f1f1;
    			  
    				
    			}
    			.aver3column{ 
    			  margin-left: 2%;
    			  width: 27%;
    			  
    			  background-color: #f1f1f1;
    			  padding-left: 20px;
    			  box-shadow:2px 2px 10px 0px #888888 ;
    			  
    			  
    			  display: inline-block;
    			}

> 这样做出来的效果是这样。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 4]

## 插入视频 ##

> 只需要用< video>标签，我设计的代码如下：

> 效果如下：  
> **看了一下封面，有我的脸，我就不展示了，我们还是回归正题。**  
> 效果肯定没问题！放心！

## 图卡片堆积布局 ##

> 布局的时候我们采用很多个图片卡布满我们的屏幕，所以float和position，display等等属性一定要设置好。

<div style="">
    			<div class="leftcolumn">
    				<p></p>
    			</div>
    			<div class="midcolumn">
    				<div class="card">
    					<h2>一夜星空</h2>
    					<h5>不抵你的一份温柔，温婉而动心</h5>
    					<div class="fakeimg1 imgall" style="height:300px;"></div>
    				</div>
    				<div class="avercolumn card">
    					<h2>一起吃饭鸭</h2>
    					<h5>呐~给你吃肉肉</h5>
    					<div class="" style="height:300px;text-align: center; box-shadow:1px 3px 15px 1px #888888 ;" >
    						<img class="imgall" src="img/u=1174583361,3094642430&fm=26&gp=0.jpg"/ style="height: 100%;">
    					</div>
    					
    					
    				</div>
    				<div class="aver_column card">
    					<h2>总是那么聪明可爱，让我动心</h2>
    					<h5>记得你喜欢红星软香酥，把你做成月饼了吧？</h5>
    					<div class="container" style="height:300px;text-align: center;">
    						<img class="imgall image" src="img/u=140318467,4274089430&fm=26&gp=0 (1).jpg" style="height: 300px;text-align: center;"/>
    						<div class="overlay">
    						    <div class="" style="">
    						    <h3 style="padding-top: 50%;font-family: '微软雅黑';">就不给你吃，休想哈哈哈，呐~不哭哭哦~我们一起恰恰哈~</h3>
    						    </div>
    						  </div>
    					</div>
    				</div>
    				<div class="card" style="float: left;width: 100%; margin-top: 1%;height: 100%;margin-right: 1%;">
    					<video width=100% height=100% controls="controls" >
    					  <source src="/i/movie.ogg" type="video/ogg" />
    					  <source src="img/LOVE2.mp4" type="video/mp4" />
    					  <source src="/i/movie.webm" type="video/webm" />
    					  <object data="/i/movie.mp4" width="320" height="240">
    					    <embed width=100% height=100% src="img/LOVE2.mp4" />
    					  </object>
    					</video>
    				</div>
    				
    				<div class="card" style="float: left;width: 100%;margin-top: 1%;height: 100%;margin-right: 1%;">
    					<h4 class="" style="font-family: '楷体';">
    						为你写诗，写下爱你曾不悔,百转千回，灯火阑珊永相随<br>
    						<br>
    						锦瑟余音，不及我望穿欲归，斗转星移，潜溘余思念霖辉
    						
    					</h4>
    				</div>
    				
    					
    				</div>
    				
    				
    			</div>
    			<div class="rightcolumn">
    				<div class="card">
    					<h2>一片绿意</h2>
    					<h5>不得你的一阵活泼，机灵又可爱</h5>
    					<div class="" style="height:300px;">
    						<img class="imgall" src="img/u=204147185,388269054&fm=26&gp=0.jpg" style="height: 100%;width: 100%;">
    					</div>
    				</div>
    				<div class="aver2column card">
    					<h2>一生相伴</h2>
    					<h5>就算吃冰淇淋也要一起，但是不要蛋黄味儿的啦</h5>
    					<div class="container" style="height:300px;text-align: center;">
    						<img src="img/扫描全能王 2020-07-26 00.24.08_168.jpg" class="imgall" style="width: 100%;height: 100%;">
    						<div class="overlay">
    						    <div class="" style="">
    						    <h3 style="padding-top: 50%;font-family: '微软雅黑';">一起恰恰冰淇淋呀，鸭鸭宝宝，蛋黄味的不好吃，下次不买了呜呜呜</h3>
    						    </div>
    						  </div>
    					</div>
    					
    					
    					
    				</div>
    				<div class="aver2column card " style="text-align: center;">
    					<img src="img/扫描全能王 2021-03-24 10.46_48.jpg" id="myImg" style="height:100%;widows: 100%; width: 100%;"/>
    				</div>
    				
    				
    				
    				
    				
    				<div id="myModal" class="modal" style="z-index: 12;">
    				  <span class="close">×</span>
    				  <img class="modal-content" id="img01">
    				  <div id="caption"></div>
    				</div>
    				
    				<script> // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } </script>
    				
    				
    				<div class="aver3column card" style="height: 1190px; ">
    					<h2>我此生的胶带</h2>
    					<h5>上面刻着的，只有两个，你一个，我一个</h5>
    					<div class="imgall" style="height:200px; text-align: center; ">
    						<img src="img/扫描全能王 2021-03-24 10.46_57.jpg"/ style="height: 100%;width: 100%;">
    			
    						<img src="img/扫描全能王 2020-07-25 23.53.14_52.jpg" style="height: 100%;width: 100%;margin-top: 5px;">
    						<img src="img/IMG_20190512_132556.jpg" style="height: 100%;width: 100%;margin-top: 5px;">
    						<img src="img/IMG_20190401_162150.jpg" style="height: 100%;width: 100%;margin-top: 5px;">
    						<img src="img/IMG_20200721_114659.jpg" style="height: 100%;width: 100%;margin-top: 5px;">
    					</div>
    				</div>
    				<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=28912659&auto=1&height=66"></iframe>
    				</div>
    			</div>
    			<div style="padding-bottom: 1000px;">
    				<p>
    					
    				</p>
    			</div>
    			
    			
    			
    			
    		</div>

## 细节添加 ##

### 图片若隐若现效果 ###

> 我们要给图片加上若隐若现的效果。用hover控制图片的opacity，或者用rgb（，，，，0.9），这个0.9也可以控制透明度，做出若隐若现的效果。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 6]

> 这是效果对比。这样可以做出动态变化的效果！

### 图片pop说明 ###

> 鼠标在图片上面的时候，就会跳出一个动态的推栏，这样的交互性也很好。来看看！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 9]

> 以上就是动态的效果展示！

<div class="container" style="height:300px;text-align: center;">
    						<img src="img/扫描全能王 2020-07-26 00.24.08_168.jpg" class="imgall" style="width: 100%;height: 100%;">
    						<div class="overlay">
    						    <div class="" style="">
    						    <h3 style="padding-top: 50%;font-family: '微软雅黑';">一起恰恰冰淇淋呀，鸭鸭宝宝，蛋黄味的不好吃，下次不买了呜呜呜</h3>
    						    </div>
    						  </div>
    					</div>

### 图像模型的构建 ###

> 经常有些图片点击可以打开他的大图展示，我们来看看如何设计的。

<div class="aver2column card " style="text-align: center;">
    					<img src="img/扫描全能王 2021-03-24 10.46_48.jpg" id="myImg" style="height:100%;widows: 100%; width: 100%;"/>
    				</div>
    				
    				
    				
    				
    				
    				<div id="myModal" class="modal" style="z-index: 12;">
    				  <span class="close">×</span>
    				  <img class="modal-content" id="img01">
    				  <div id="caption"></div>
    				</div>
    				
    				<script> // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } </script>

> 主要是js和html的结合，来看看效果。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 10]  
> 这个图片，因为有隐私，我就截取了一半给大家讲解一下。  
> 点击打开之后是这样的效果。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 11]

> 点击了之后，我们可以看到构建了这样的模型，把图片更加扩大化了。构建了一个单独的页面来呈现。

## 背景音乐 ##

> 只需要在网上找到相应的外部链接，载入进Html，也就是一个iframe，我设计的是在底部进行出现播放器，大家可以根据自己的需求，自行设计！

![在这里插入图片描述][2021032516381782.png]

> 效果如图！

## 细碎功能 ##

> 在这个页面，也就是首页的地方点击一下，可以进入导航栏，我们的思路是用a标签，加上href=“\#1”，再用name=“1”，就可以定位到你想要的标签位置。

> 点击之后，就可以直接向下跳转。

## 完整代码【无素材】 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<style> * { box-sizing: border-box; } body{ margin: 0; font-family: Arial; padding: 10px; background: #f1f1f1; } .clearfix { overflow: auto; } .shadow_box{ box-shadow: 0px 3px 10px 1px #888888; } .up-leader { background-color: #333; list-style-type: none; text-align: center; position:sticky; margin: 0; padding: 0; border-radius: 10px; z-index: 10; } .up-leader li:not(.dropdown) { display: inline-block; font-size: 20px; padding: 20px; z-index: 10; } .up-leader li a, .dropbtn{ display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .up-leader li.dropdown{ display: inline-block; font-size: 20px; padding: 20px; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } div.dropdown-content a { color:#000000; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1;} .dropdown:hover .dropdown-content { display:block; } div.sticky{ position: sticky; top: 0; background:azure; text-align: center; } .img1{ float:left; clear:both; position:static; display: flex; justify-content: center; opacity: 0.8; overflow: auto; } .side-leader ul{ list-style-type: 0; margin-top: 10px; padding: 0; width: 7%; height: 190%; background-color:#333 ; box-shadow: 0px 0px 1px 0px #888888; position:absolute; overflow: auto; border-radius: 25px; float: left; z-index: 4; } .side-leader ul li a{ display: block; color:white; padding: 8px 16px; text-decoration: none; font-family:"黑体"; } li:hover{ background-color: #555; color: white; } .leftcolumn{ float: left; width: 8%; } .midcolumn { float: left; width: 50%; } /* 右列 */ .rightcolumn { float: left; width: 42%; background-color: #f1f1f1; padding-left: 20px; } .avercolumn{ float: left; width: 50%; background-color: #f1f1f1; } .aver_column{ float: left; width: 49%; background-color: #f1f1f1; margin-left: 1%; } .aver2column{ float: left; width: 68%; background-color: #f1f1f1; } .aver3column{ margin-left: 2%; width: 27%; background-color: #f1f1f1; padding-left: 20px; box-shadow:2px 2px 10px 0px #888888 ; display: inline-block; } /* 伪图像 */ .fakeimg1 { /*background-color: #aaa;*/ width: 852px; background: url(img/6.jpg); box-shadow:1px 3px 15px 1px #888888 ; padding: 20px; } .fakeimg2{ background: url(img/5.jpg); box-shadow:1px 3px 15px 1px #888888 ; } .imgall{ box-shadow:1px 3px 15px 1px #888888; } .imgall:hover{ opacity: 0.7; transition: 0.5s ease; } /* 为文章添加卡片效果 */ .card { background-color: white; padding: 20px; margin-top: 20px; /*box-shadow: 0px 0px 1px 0px #888888;*/ } /* 清除列之后的浮动 */ .row:after { content: ""; display: table; clear: both; } /* 页脚 */ .footer { margin: 20%; text-align: center; background: white; } #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover { opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 1500px; z-index: 12; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from { transform: scale(0.1)} to { transform: scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } .container { position: relative; left: 60px; float: inherit; text-align: center; width:71%; z-index:0; } .image { display: block; height: auto; } .overlay { text-align: center; position: absolute; bottom: 0; left: 0; right: 0; background-color:#888888; opacity: 0.7; overflow: hidden; width: 0; height: 100%; transition: 0.5s ease; } .container:hover .overlay { width: 100%; } .text{ text-align: center; top: 50%; font-family: "微软雅黑"; } </style>
    		<title>爱你，不需要标题</title>
    	</head>
    	
    	
    	<body>
    		
    		
    		<div class=" clearfix shadow_box">
    			<a href="#1">
    			<img class="img1" src="img/下载.jpg" width=1920px height=900px>
    			
    			</a>
    		</div>
    		<div class="sticky" style="z-index: 10;">
    			<a name="1" >
    			<ul class="up-leader" >
    			  <li><a href="" >I</a></li>
    			  <li><a href="#news">Love</a></li>
    			  <li><a href="">you</a></li>
    			  <li class="dropdown">
    			  	<a class="dropbtn" href="index.html">Our World</a>
    			  	 <div class="dropdown-content">
    			        <a href="">别找啦，找就是想你</a>
    			      	<a href="#">别翻啦，翻就是爱你</a>
    			      	<a href="#">别打啦，打我就是打你</a>
    			    </div>
    			  </li>
    			</ul>
    			</a>
    			</div>
    			<div class=" side-leader ">
    			<ul >
    				<li><a href="https://blog.csdn.net/XRTONY?spm=1000.2115.3001.5343">参观君君</a></li>
    				<li><a href="index.html">记得吃饭</a></li>
    				<li><a href="index.html">给我做面</a></li>
    				<li><a href="index.html">给你炒菜</a></li>
    				<li><a href="index.html">不怕有我</a></li>
    			</ul>
    			
    		  </div>
    		<div style="">
    			<div class="leftcolumn">
    				<p></p>
    			</div>
    			<div class="midcolumn">
    				<div class="card">
    					<h2>一夜星空</h2>
    					<h5>不抵你的一份温柔，温婉而动心</h5>
    					<div class="fakeimg1 imgall" style="height:300px;"></div>
    				</div>
    				<div class="avercolumn card">
    					<h2>一起吃饭鸭</h2>
    					<h5>呐~给你吃肉肉</h5>
    					<div class="" style="height:300px;text-align: center; box-shadow:1px 3px 15px 1px #888888 ;" >
    						<img class="imgall" src="img/u=1174583361,3094642430&fm=26&gp=0.jpg"/ style="height: 100%;">
    					</div>
    					
    					
    				</div>
    				<div class="aver_column card">
    					<h2>总是那么聪明可爱，让我动心</h2>
    					<h5>记得你喜欢红星软香酥，把你做成月饼了吧？</h5>
    					<div class="container" style="height:300px;text-align: center;">
    						<img class="imgall image" src="img/u=140318467,4274089430&fm=26&gp=0 (1).jpg" style="height: 300px;text-align: center;"/>
    						<div class="overlay">
    						    <div class="" style="">
    						    <h3 style="padding-top: 50%;font-family: '微软雅黑';">就不给你吃，休想哈哈哈，呐~不哭哭哦~我们一起恰恰哈~</h3>
    						    </div>
    						  </div>
    					</div>
    				</div>
    				<div class="card" style="float: left;width: 100%; margin-top: 1%;height: 100%;margin-right: 1%;">
    					<video width=100% height=100% controls="controls" >
    					  <source src="/i/movie.ogg" type="video/ogg" />
    					  <source src="img/LOVE2.mp4" type="video/mp4" />
    					  <source src="/i/movie.webm" type="video/webm" />
    					  <object data="/i/movie.mp4" width="320" height="240">
    					    <embed width=100% height=100% src="img/LOVE2.mp4" />
    					  </object>
    					</video>
    				</div>
    				
    				<div class="card" style="float: left;width: 100%;margin-top: 1%;height: 100%;margin-right: 1%;">
    					<h4 class="" style="font-family: '楷体';">
    						为你写诗，写下爱你曾不悔,百转千回，灯火阑珊永相随<br>
    						<br>
    						锦瑟余音，不及我望穿欲归，斗转星移，潜溘余思念霖辉
    						
    					</h4>
    				</div>
    				
    					
    				</div>
    				
    				
    			</div>
    			<div class="rightcolumn">
    				<div class="card">
    					<h2>一片绿意</h2>
    					<h5>不得你的一阵活泼，机灵又可爱</h5>
    					<div class="" style="height:300px;">
    						<img class="imgall" src="img/u=204147185,388269054&fm=26&gp=0.jpg" style="height: 100%;width: 100%;">
    					</div>
    				</div>
    				<div class="aver2column card">
    					<h2>一生相伴</h2>
    					<h5>就算吃冰淇淋也要一起，但是不要蛋黄味儿的啦</h5>
    					<div class="container" style="height:300px;text-align: center;">
    						<img src="img/扫描全能王 2020-07-26 00.24.08_168.jpg" class="imgall" style="width: 100%;height: 100%;">
    						<div class="overlay">
    						    <div class="" style="">
    						    <h3 style="padding-top: 50%;font-family: '微软雅黑';">一起恰恰冰淇淋呀，鸭鸭宝宝，蛋黄味的不好吃，下次不买了呜呜呜</h3>
    						    </div>
    						  </div>
    					</div>
    					
    					
    					
    				</div>
    				<div class="aver2column card " style="text-align: center;">
    					<img src="img/扫描全能王 2021-03-24 10.46_48.jpg" id="myImg" style="height:100%;widows: 100%; width: 100%;"/>
    				</div>
    				
    				
    				
    				
    				
    				<div id="myModal" class="modal" style="z-index: 12;">
    				  <span class="close">×</span>
    				  <img class="modal-content" id="img01">
    				  <div id="caption"></div>
    				</div>
    				
    				<script> // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } </script>
    				
    				
    				<div class="aver3column card" style="height: 1190px; ">
    					<h2>我此生的胶带</h2>
    					<h5>上面刻着的，只有两个，你一个，我一个</h5>
    					<div class="imgall" style="height:200px; text-align: center; ">
    						<img src="img/扫描全能王 2021-03-24 10.46_57.jpg"/ style="height: 100%;width: 100%;">
    			
    						<img src="img/扫描全能王 2020-07-25 23.53.14_52.jpg" style="height: 100%;width: 100%;margin-top: 5px;">
    						<img src="img/IMG_20190512_132556.jpg" style="height: 100%;width: 100%;margin-top: 5px;">
    						<img src="img/IMG_20190401_162150.jpg" style="height: 100%;width: 100%;margin-top: 5px;">
    						<img src="img/IMG_20200721_114659.jpg" style="height: 100%;width: 100%;margin-top: 5px;">
    					</div>
    				</div>
    				<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=28912659&auto=1&height=66"></iframe>
    				</div>
    			</div>
    			<div style="padding-bottom: 1000px;">
    				<p>
    					
    				</p>
    			</div>
    			
    		</div>
    	</body>
    </html>

--------------------

## 流程展示 ##

Thu 2506:0012:0006:00Fri 2606:0012:0006:00Sat 2706:0012:0006:00Mar 28确定布局 顶部侧面导航栏设计 主体部分设计图 插入视频和背景音乐 细节部分修饰添加总体规划送给小仙女的网页设计流程图

## 视频链接 ##

开发网页给女朋友表白，技术人是怎么做的

## 效果展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 14]

> ### 好了，就谈到这里。感谢大家的支持，也希望大家有时间多陪陪自己的家人，心想事成，都能如愿实现自己的梦想。 ###
> 
> ###  ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70_pic_center 1]

[20210324223928102.gif]: /images/20221022/966022c0bd8e4f28ae2ede561ef1fb74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/9ab1a38309d74db3a31f48f947b1a778.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70]: /images/20221022/c372c0ed61204e7c92717aade17d8967.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/6be9ffaa482e41a0a117ac4eb050b33f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/f96484b37b48481cbfedc2331c9883f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/b73558a73161472c979375c47b6d3187.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/b5c47f23645141209c9ad07c6d4d8f13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/aba53a96d0264c6bb0b10107379fa262.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/34d956980a964db0bc90cad7ec9660e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 7]: /images/20221022/89f01f17eaed42ff970267ec5b19a00d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 8]: /images/20221022/b90e49af3a6c43f3905a11510363bc7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 9]: /images/20221022/4c97745249a54b9d8df12b62cfa9c173.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 10]: /images/20221022/10ab48991ba94399b8ebd0f95d53538e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 11]: /images/20221022/0683e538366b422b84c7be341ca575a1.png
[2021032516381782.png]: /images/20221022/33eda312803a45e294c3e3122a80e6c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 12]: /images/20221022/a91e91d86fe5414f8d26d0b67e39f2ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 13]: /images/20221022/bd3fd73a0fd748d2837961964f2b6bc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70 14]: /images/20221022/622013067f5046fb95a2f17ea0d6d023.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/8df680f905554fe6ae5ea094e424500d.png