热门标签
热门文章
- 1Unity Build Android/编译为Android Apk的具体流程2019.2.17f1版本_trying to add file "i:/unity build/android/buscar/
- 2Axure RP手机移动端数据可视化大数据交互原型模板及元件库_手机移动端交互原型组件模板库 v3
- 3Python3.11竟还有这么多性能提升！_python 3.11的重大改进
- 4基于python四川成都二手房数据爬虫采集系统设计与实现(django框架)
- 5Linux的防火墙权限深度学习_journal has been rotated since
- 6SpringBoot整合Elasticsearch(最新最全，高效安装到使用)
- 7《视觉SLAM十四讲》ch5学习记录_slam14讲安装opencv
- 8你知道python中的列表和元组都有哪些区别吗？_python中的列表和元组有什么区别?
- 9亚马逊云科技大语言模型加速OCR应用场景发展_aws ocr
- 10android 同时点击,android 控件同时监听单击和双击实例
当前位置: article > 正文
HTML5七夕情人节表白网页制作【我喜欢你H5】HTML+CSS+JavaScript
作者：从前慢现在也慢 | 2024-02-20 18:52:33
赞
踩
我喜欢你h5
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
一、网页介绍
1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新婚快乐❤️</title>
<script>
//判断客户端设备，选择写入meta
function init_viewport(){
if(navigator.userAgent.indexOf('Android') != -1){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth;
var phoneScale = parseInt(width)/500;
document.write('<meta name="viewport" content="width=500, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">');
}
}else if(navigator.userAgent.indexOf('iPhone') != -1){
var phoneScale = parseInt(window.screen.width)/500;
document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale +', maximum-scale='+phoneScale+', user-scalable=0" /> '); //0.75 0.82
}else{
document.write('<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> '); //0.75 0.82
}
}
init_viewport();
</script>
<style>
* {
padding: 0px;
margin: 0px;
-webkit-box-sizing: border-box;
}
body {
background-color: white;
}
a {
color: white;
text-decoration: none;
}
#div_container { /*最外层div，用于居中兼容PC和移动*/
width: 500px;
margin: 0px auto;
position: relative;
/*background-color: #FAFAFA;*/
font-size: 1em;
}
.div_pure_words { /*文字部分的最外层，用于定位*/
position: relative;
display: none;
}
.div_pure_words_bg { /*背景设置在这里*/
background-repeat: repeat;
background-size: 100%;
background-attachment: fixed;
width: 500px;
min-height: 500px;
}
.div_pure_words_height {
visibility: hidden;
padding: 30px;
text-align: justify; /*为了使文字两端对齐 */
white-space: pre-wrap; /*保留换行效果*/
font-size: 1.1em;
font-family: "Microsoft YaHei","Arial";
color: white;
}
.div_pw_typed {
position: absolute;
left: 0;
right: 0; /*4个方向定位使div充满整个画画*/
top: 0;
bottom: 0; /*4个方向定位使div充满整个画画*/
width: 500px;
background:rgba(255,255,255,0.8); /*半透明效果*/
padding: 30px;
text-align: justify; /*为了使文字两端对齐 */
}
#span_pw_typed {
width:100%; /*为了使文字两端对齐 */
white-space:pre-wrap; /*保留换行效果*/
font-size: 1.1em;
font-family: "Microsoft YaHei","Arial";
}
#div_start_bg{
width: 100%; height: 100%;
position: absolute;
left: 0px; top: 0px;
z-index: 44;
background-color: white;
}
</style>
<!-- 按钮部分的样式 -->
<link type="text/css" rel="stylesheet" href="css/theme_public_btn.css">
<!-- 按需加载，选择此片头时方才加载 -->
<link type="text/css" rel="stylesheet" href="css/start_onlyyou.css">
</head>
<body>
<div id="div_container"> <!-- 最外层div，用于居中兼容PC和移动 -->
<div id="div_start_bg"></div> <!-- 用于遮挡主题，作为片头的背景 -->
<!-- 按需加载，选择此片头时方才加载 -->
<!-- 按需加载，选择此片头时方才加载 -->
<div id="div_onlyyou"><!-- 用于设置背景 -->
<div id="div_oy_inner"><!-- 用于存放content -->
<div class="div_oy_text">
<h1></h1>
<img class="img_oy_text" src="">
<p class="p_oy_text"></p>
<ul id="ul_oy_benefit">
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
</ul>
</div>
<ul id="ul_oy_btn">
<li onclick="oy_go_next()">誓言 ❤</li>
<li onclick="oy_show_benefit()">祝福 ✖</li>
</ul>
<div id="div_oy_note" onclick="oy_hide_note()">
<img src="images/emoji_kelian.jpg" alt=""><br>
请查看若思相对你们说的心里话
<div id="div_oy_note_close">✖</div>
</div>
<div id="div_oy_yes">
<img src="images/emoji_bixin.jpg" alt=""><br>
太好了！哈哈~
</div>
</div>
</div>
<!-- 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 -->
<!-- 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 -->
<!-- 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 -->
<!-- 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 -->
<!-- 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 以上是动画和视频片头 -->
<div class="div_pure_words"> <!-- 文字部分的最外层，用于定位 -->
<div class="div_pure_words_bg"><!-- 背景设置在这里 -->
<div class="div_pure_words_height">
<!-- 正文的内容复制到这里面，撑开整个文档的高度 -->
</div>
</div>
<div class="div_pw_typed"> <!-- 正文部分，绝对定位 -->
<span id="span_pw_typed"></span>
</div>
</div>
<div id='div_btn_container'> <!-- 按钮部分的最外层，处于文档流之中 -->
<div id="div_btn_inner"> <!-- 按钮部分内层，用于定位 -->
<div class='div_music_tips'></div>
<div class="div_btn" id="div_music" onclick="music_switch()"> <!-- 音乐按钮部分 -->
<img id='img_music' src='images/music_note_big.png' style='-webkit-animation:music_play_rotate 1s linear infinite'>
<audio id="audio_music" src="./01.mp3" autoplay="autoplay" loop="loop">
<source type="audio/mpeg"/>
<!-- 您的浏览器不支持播放音乐 -->
</audio>
</div>
<div class='div_record_tips'></div>
<div class="div_btn" id="div_record" onclick="record_switch()"> <!-- 录音按钮部分 -->
语音
<audio id="audio_record" loop="loop">
<source type="audio/mpeg"/>
<!-- 您的浏览器不支持播放音乐 -->
</audio>
</div>
<!-- 只在提交状态显示 只在提交状态显示 只在提交状态显示 只在提交状态显示 -->
<div class="div_btn" id='div_support'>
<!-- <a href="https://www.gwents.com/tag/%E8%A1%A8%E7%99%BD%E6%BA%90%E7%A0%81"><span>更多</span></a> -->
</div>
<!-- 只在提交状态显示 只在提交状态显示 只在提交状态显示 只在提交状态显示 -->
<!-- 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 -->
<!-- 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 -->
</div>
</div>
</div>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/typed.min.js"></script>
<script src="js/support_upload_as.js"></script>
<script src="js/jweixin-1.2.0.js"></script>
<script>
var window_height=$(window).height();
console.log('window_height ->'+window_height);
var theme='pure_words';
console.log('theme ->'+theme);
var theme_content={"pure_words_content":"\u9047\u89c1\u4f60\u662f\u6211\u6240\u6709\u7f8e\u597d\u6545\u4e8b\u7684\u5f00\u59cb\uff0c\u6240\u4ee5\uff0c\u8bf7\u522b\u653e\u5f00\u6211\u7684\u624b\uff0c\u4e5f\u522b\u7f3a\u5e2d\u6211\u7684\u5c06\u6765\uff0c\u56e0\u4e3a\u4e00\u8f88\u5b50\u548c\u4f60\u5728\u4e00\u8d77\u624d\u53eb\u5c06\u6765\ud83d\udc95","typed_bool":"typed_y","cursor_char":"cursor_heart","bg_style_pure_words":"bg_opacity","bg_img":"3.jpg","simple_page_content":"","video_page_content":""};
console.log(theme_content);
var music_json={"music_select":"m_online","m_online_id":"7","m_online_url":"http://music.163.com/song/media/outer/url?id=1396568325.mp3","m_upload_name":"null","m_upload_url":"null"};
console.log(music_json);
var record_json={"record_bool":"r_false","r_wechat_time":"null","r_wechat_url":"null","r_wechat_amr":"null"};
console.log(record_json);
var signPackage={"appid":"wx47f716bdd7699533","timestamp":1581680313,"nonceStr":"sCOFuLAhrZrcoo8t","url":"http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdnn2pi","signature":"dcd2bceecb6173f8962220309bf9b36229ff7236","rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VHINcjHJVwMsFjJyfreRy7Cirs1niLvtMUWlkXLIkXzDjXhEIIg2D4CYYPfKu6MV8w&noncestr=sCOFuLAhrZrcoo8t×tamp=1581680313&url=http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdnn2pi"};
var main_title='我喜欢你❤️';
// console.log(main_title);
if(main_title=='' || main_title=='null'){ //允许标题为空
document.title='慢慢喜欢你';
}
// console.log("");
var pure_words_content=theme_content['pure_words_content'];
var str_cursorChar;
var typed_bool;
var interval_pw_height;
var height_div_pw=$(".div_pure_words_height").height();
function init_pure_words(){
//允许内容为空时直接展示，不设置为随机内容，用于空主题
if(typeof(pure_words_content)=='undefined'){ //处理全新作品
var array_str_temp=[];
random_text_array(array_str_temp,12); //获取随机的模板文字
// array_str_temp.push('你现在看到的只是案例，文字是可以自定义哒，6000字以下');
pure_words_content=array_str_temp.join('\r\r');
}
$(".div_pure_words_height").html(pure_words_content+'22222'); //初始化复制内容，撑开文档高度
// 初始化设置div的bg图片 初始化设置div的bg图片
if(typeof(theme_content['bg_style_pure_words'])!='undefined' && theme_content['bg_style_pure_words']=='bg_opacity'){
if(typeof(theme_content['bg_img'])!='undefined' && theme_content['bg_img']!=''){
$(".div_pure_words_bg").css({"background-image": "url("+theme_content['bg_img']+")"});
}
}
//以下是打字效果的js
if(typeof(theme_content['cursor_char'])!='undefined' && theme_content['cursor_char']!=''){
switch(theme_content['cursor_char']){ //设置打字光标的样式
case 'cursor_heart':
str_cursorChar='❤';
break;
case 'cursor_sub':
str_cursorChar='_';
break;
case 'cursor_music':
str_cursorChar='♫';
break;
case 'cursor_star':
str_cursorChar='★';
break;
case 'cursor_sun':
str_cursorChar='☀';
break;
default:
str_cursorChar='|';
}
}else{ //处理全新作品，默认显示打字效果
str_cursorChar='❤';
}
//判断用户有没有选择打字效果
if(typeof(theme_content['typed_bool'])!='undefined' && theme_content['typed_bool']!=''){
typed_bool= theme_content['typed_bool']=='typed_y' ? true : false;
}else{
typed_bool=false; //默认显示打字效果
}
// console.log(typed_bool);
display_pure_words();
$(".div_pure_words").fadeIn();
interval_pw_height=setInterval(function(){
console.log('div_pure_words_height -> '+$('.div_pure_words_height').height());
var least_height_div_pw=$('.div_pure_words_height').height();
if(least_height_div_pw>height_div_pw){
height_div_pw=least_height_div_pw;
}else{
clearInterval(interval_pw_height);
$(".div_pure_words_height").height(least_height_div_pw+100);
if($(".div_pure_words_height").height()<window_height){
$(".div_pure_words_height").height(window_height); //不能小于窗口的高度
console.log('let us be high as window');
}
}
},100);
}
function display_pure_words(){
if(typed_bool){
console.log(pure_words_content,'pure_words_contentpure_words_content')
var typed_pure_words = new Typed('#span_pw_typed', {
strings: ['我的姐姐和姐夫，在未来你们冷暖有相知，喜忧有分享；天长地久，相濡以沫'], //输入内容, 支持html标签
typeSpeed: 120, //打字速度
cursorChar: str_cursorChar,//替换光标的样式
contentType: 'html', //值为html时，将打印的文本标签直接解析html标签
onComplete: function(abc){
// console.log(abc);
console.log('finished typing words');
// console.log($('#span_pw_typed').height()-$(".div_pure_words_height").height());
},
});
}else{
//如果不需要打字效果就直接显示
$("#span_pw_typed").html('我的姐姐和姐夫，在未来你们冷暖有相知，喜忧有分享；天长地久，相濡以沫').fadeIn();
}
init_attachment();
}
function random_text_array(temp_array,length){ //获取随机的模板文字
console.log('random_text_array');
var random_array=[];
while(random_array.length<length){
// var random_num=Math.floor(Math.random()*(array_as_pics.length-0))+0;
var random_num=Math.floor(Math.random()*(array_as_words_love.length)); //随机取值
if(random_array.indexOf(random_num)==-1){
random_array.push(random_num);
}
}
// console.log(random_array);
for(var i=0; i<length; i++){
temp_array.push(array_as_words_love[random_array[i]]); //获取随机的模板文字
}
}
</script>
<!-- 按需加载，选择此片头时方才加载 -->
<script>
var start_content={"chase_title":"\u505a\u6211\u5973\u670b\u53cb\u597d\u4e0d\u597d\ud83d\udc95","chase_text":"\u627f\u8499\u4f60\u7684\u51fa\u73b0\uff0c\u591f\u6211\u559c\u6b22\u597d\u591a\u5e74\uff0c\u6211\u5e0c\u671b\uff0c\u4ee5\u540e\u4f60\u80fd\u7528\u6211\u7684\u540d\u5b57\u62d2\u7edd\u6240\u6709\u4eba\ud83d\udc95","chase_benefit":["\u4f60\u662f\u6211\u62d4\u6389\u6c27\u6c14\u7f50\u90fd\u60f3\u543b\u7684\u4eba","\u4f60\u662f\u6211\u8dd1\u5b8c8000\u7c73\u8fd8\u60f3\u62e5\u62b1\u7684\u4eba","\u4f60\u662f\u6211\u81ea\u7f5a\u4e09\u676f\u90fd\u4e0d\u80af\u5f00\u53e3\u7684\u79d8\u5bc6","\u4f60\u662f\u6211\u8d74\u6c64\u8e48\u706b\u90fd\u4e0d\u80af\u653e\u4e0b\u7684\u6267\u7740","\u4f60\u662f\u6211\u7535\u91cf\u53ea\u52691%\u4e5f\u60f3\u56de\u4fe1\u606f\u7684\u4eba","\u4f60\u662f\u6211\u7a77\u6781\u4e00\u751f\u4e0d\u60f3\u9192\u6765\u7684\u68a6"],"bg_style":"bg_custom","bg_img":"2.jpg","img_bool":"img_true","img_src":"1.gif"}; //可能为null
console.log(start_content);
var start_id;
$(function(){
//此事件为触发互动创意
start_id='onlyyou'; //可能为null
init_start(start_id);
});
function init_start(start_id){
console.log('init_start ->'+start_id);
switch(start_id){
case 'loveformat':
$('.div_loveformat').show();
init_loveformat();
break;
case 'hearttree':
$('#div_hearttree').show();
init_hearttree();
break;
case 'courage':
$('#div_courage').show();
init_courage();
break;
case 'birthdaycake':
$('#div_dbcake').show();
init_birthdaycake();
break;
case 'intersect':
$('#div_intersect').show();
init_intersect();
break;
case 'onlyyou':
$('#div_onlyyou').show();
init_onlyyou();
break;
default:
init_theme();
}
}
//开始动画主体部分
function init_theme(){
console.log('init_theme');
$('#div_start_bg').fadeOut();
init_pure_words();
}
</script>
<!-- 按需加载，选择此片头时方才加载 -->
<script src="js/start_onlyyou.js"></script>
<script>
var attachment='null'; //可能为null
var attached_content={"bool_save":false}; //可能为null
console.log(attached_content);
function init_attachment(){ //开始attachment
console.log('init_attachment ->'+attachment);
switch(attachment){
case 'timer':
init_at_timer();
break;
default:
return;
}
}
</script>
<script src='js/jweixin-1.2.0.js'></script>
<script src='js/theme_common.js'></script> <!-- 音乐控制和微信设置等公共部分js外部引入 -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
2.CSS代码
#div_onlyyou {
position:relative;
width: 100%;
z-index:666;
background-size: 100%;
background-repeat: repeat;
display: none;
}
#div_oy_inner {
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
width: 100%;
min-height:400px;
padding: 12% 10% 0% 10%;
background: rgba(255,255,255,.8);
text-align: center;
}
.div_oy_text {
font-weight: 300;
text-align: left;
font-size: 1.1em;
margin: 0px auto 60px auto;
}
.div_oy_text h1 {
font-size: 1.8em;
margin: 14px 0;
}
.div_oy_text p {
margin: 14px 0;
}
.div_oy_text img {
width: 100%;
border-radius: 5px;
}
#ul_oy_benefit li {
display: none;
margin: 14px 0;
}
#ul_oy_benefit, #ul_oy_btn {
list-style: none;
}
#ul_oy_btn li {
background-color: rgba(0,0,0,0.6);
display: inline;
margin: 20px 40px;
padding: 10px 15px;
font-size: 1.4em;
border: 1px solid white;
border-radius: 5px;
color: white;
}
#div_oy_note, #div_oy_yes {
position: relative;
margin: -60px auto;
padding: 5% 0;
width: 100%;
height: 180px;
text-align: center;
background-color: white;
border-radius: 5px;
display: none;
color: gray;
font-size: 1.4em;
}
#div_oy_note_close {
width: 40px; height: 40px;
position: absolute;
right: 20px;
top: 20px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
三、精彩专栏
看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/120618
推荐阅读
相关标签
