开发网页给女朋友表白，技术人是怎么做的
文章目录
今天想开发一个网站，也算给女朋友一个小小的浪漫，平时在一起也比较忙，也算是平日里的一点小romantic，和大家分享只想和大家关心设计和技术，感谢大家的支持。
确定布局
首先确定一下，我要开发分为几个部分的网站，这样看起来比较有层次感。
其次，把主界面设计成浅灰色，再把每一个标签设计成白底的时候，再用box-shadow设置相应的投影，可以做出卡片嵌入的效果。
导航栏设计
首先确定的是，做个跟随吸附的效果，导航栏肯定要用sticky，在css里面设计，我们用div…sticky{}就可以，设置好各方面的position和margin，代码如下：
div.sticky{
position: sticky;
top: 0;
background:azure;
text-align: center;
}
这是吸附的效果。
会一直跟随你的滚动。
侧面导航栏设计
侧面导航栏设计为贯穿整个界面的导航栏，所以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:"黑体";
}
这样显示出来的是这样的：
设计出来是这样的。
主体部分设计
主体部分分为三个部分，分别用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;
}
这样做出来的效果是这样。
插入视频
只需要用< video>标签，我设计的代码如下：
<video width=100% height=100% controls="controls" <!--autoplay="autoplay"-->>
<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>
效果如下：
看了一下封面，有我的脸，我就不展示了，我们还是回归正题。
效果肯定没问题！放心！
图卡片堆积布局
布局的时候我们采用很多个图片卡布满我们的屏幕，所以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" <!--autoplay="autoplay"-->>
<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也可以控制透明度，做出若隐若现的效果。
这是效果对比。这样可以做出动态变化的效果！
图片pop说明
鼠标在图片上面的时候，就会跳出一个动态的推栏，这样的交互性也很好。来看看！
以上就是动态的效果展示！
<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的结合，来看看效果。
这个图片，因为有隐私，我就截取了一半给大家讲解一下。
点击打开之后是这样的效果。
点击了之后，我们可以看到构建了这样的模型，把图片更加扩大化了。构建了一个单独的页面来呈现。
背景音乐
只需要在网上找到相应的外部链接，载入进Html，也就是一个iframe，我设计的是在底部进行出现播放器，大家可以根据自己的需求，自行设计！
效果如图！
细碎功能
在这个页面，也就是首页的地方点击一下，可以进入导航栏，我们的思路是用a标签，加上href=“#1”，再用name=“1”，就可以定位到你想要的标签位置。
<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" >
点击之后，就可以直接向下跳转。
完整代码【无素材】
<!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" <!--autoplay="autoplay"-->>
<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>
流程展示
视频链接
开发网页给女朋友表白，技术人是怎么做的
效果展示
好了，就谈到这里。感谢大家的支持，也希望大家有时间多陪陪自己的家人，心想事成，都能如愿实现自己的梦想。
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
