2. 程式人生 > 其它 >基於HTML/CSS/JS微信公眾號展示頁面模板

基於HTML/CSS/JS微信公眾號展示頁面模板

阿新 • • 發佈：2021-02-01

技術標籤：HTML好玩的簡單專案htmljavascript

首先看一下成品
演示頁面

https://pai-daxing1.github.io/weixin/

在這裡插入圖片描述
專案結構：
在這裡插入圖片描述

HTML程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<
 
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>啦啦啦好像biu點什麼</title>
<meta name="author" content="海擁CSDN部落格" />
    <meta name="keywords" content="海擁CSDN部落格"
 
 />

<link rel="shortcut icon" href="https://wanghao221.github.io/favicon.ico" />

<link rel="stylesheet" href="style/css/jquery.fullPage.css" />
<link rel="stylesheet" href="style/css/base.css" />
<link rel="stylesheet"
 
 href="style/css/welcome.css" />
<link rel="stylesheet" href="style/css/jquery.bxslider.css">

<script src="style/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="style/js/jquery.fullPage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.bxslider.js"></script>

<script type="text/javascript" src="style/js/main.js"></script>

<script type="text/javascript">
$(document).ready(function() {
		my_section1.init();
  $('#welcome').fullpage({
	'verticalCentered': false,
	'css3': true,
	'sectionsColor': ['#6cbb52','#e89c38', '#40a3e1'],
	'navigation': true,
	'navigationPosition': 'right',
			//'easing' : 'easeInOutBounce',
			'afterRender' : function (index,anchorLink ) {
				$(".iphone_img").addClass('fadeInTop');
			},
			'afterSlideLoad':function(index ) {

			}
			,
	'afterLoad': function(anchorLink, index){
				if( index == 2) {
					$(".iphone_img").removeClass('fadeInTop');
				}
				if(index==3){
					my_section1.init();
				}
				if(index==1){
					my_section1.init();
				}
				if(index==2){
					my_section2.init();
				}

	},
	'onLeave': function(index, nextIndex, direction){
	  if( nextIndex  == 1 ) {
					$(".iphone_img").addClass('fadeInTop');
				}
				if(index==1){
					my_section1.anim();
				}
				if(index==3){
					my_section1.anim();
				}
				if(index==2){
					my_section2.anim();
				}
	}
  });
});
</script>
</head>
<body>

    <div id="welcome">
        <div class="section" id="section0">
           <div class="my_section">
                <div class="my_codoon fl">
                    <div class="text1_box">
                        <div class="text1 fl">公眾號：</div><div class="text3 fl">啦啦啦好像biu點什麼</div>
                        <div class="blank0"></div>
                    </div>
                    <p><div class="text2">全中國最大的微信公眾平臺！</div></p>
                    <div class="download_box">
                        <div class="left">
                            <div class="icon erweima"></div>
                        </div>
                        <div class="right">
                            <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI1ODIxNzI3OA==&scene=122&from=timeline&isappinstalled=0#wechat_redirect" class="item pc_download item_pc" style="margin-bottom:15px;">iPhone版下載</a>
                            <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI1ODIxNzI3OA==&scene=122&from=timeline&isappinstalled=0#wechat_redirect" class="item pc_download item_pc">Andriod版下載</a>
                            <a class="item mobile_download mobile_icon"><img src="style/images/now_download.png" alt="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI1ODIxNzI3OA==&scene=122&from=timeline&isappinstalled=0#wechat_redirect"></a>
                        </div>
                        <div class="blank10"></div>
                    </div>
                </div>
                <div class="iphone fr">
                    <div class="iphone_icon iphone_img">
                      <div id="iphone_slider_wrapper">
                        <div id="iphone_slider">
                          <ul id="iphone_slider_ul">
                            <li><img src="style/images/iphone1.png"></li>
                            <li><img src="style/images/iphone2.png"></li>
                            <li><img src="style/images/iphone3.png"></li>
                            <li><img src="style/images/iphone4.png"></li>
                            <li><img src="style/images/iphone5.png"></li>
                            <li><img src="style/images/iphone6.png"></li>
                          </ul>
                        </div>
                      </div>
                      <img class="iphone_xxoo" src="style/images/iphone_xxoo.png">
                    </div>
                </div>
                <div class="blank0"></div>
           </div>
        </div>
        <div class="section" id="section1">
            <div class="my_section ">
               <div class="rom_txt fr">
                    <h2 class="bigtit">那些事</h2>
                    <p class="notes">關注發展，分享精彩</p>
                    <div class="blank10"></div>
                    <ul class="clearfix">
                      <li>旅遊</li>
                      <li>景點</li>
                      <li>文化</li>
                      <li>黃金沙灘</li>
                      <li>旅遊攻略</li>
                      <li>旅遊網</li>
                    </ul>
                    <div><a class="rom_download mobile_icon" href="http://www.toutiao.com/m52334417813/"><img src="style/images/download.png" alt=""></a></div>
                </div>
                <div class="cod_rom fl">
                    <img src="style/images/rom1.png" alt="">
                    <img src="style/images/rom2.png" alt="">
                    <img src="style/images/rom3.png" alt="">
                    <img src="style/images/rom4.png" alt="">
                    <img src="style/images/rom5.png" alt="">
                    <img src="style/images/rom6.png" alt="">
                    <img src="style/images/rom7.png" alt="">
                    <img src="style/images/rom8.png" alt="">
                    <img src="style/images/rom9.png" alt="">
                    <img src="style/images/rom10.png" alt="">
                </div>
                <div class="blank0"></div>
            </div>
        </div>
        <div class="section" id="section2">
            <div class="my_section">
                  <div class="rom_txt fl souhuan">
                    <h2 class="bigtit">那些事</h2>
                    <p class="notes">掌控生活，旅遊資訊，吃喝玩樂</p>
                    <ul class="clearfix">
                      <li>旅遊景點</li>
                      <li>旅遊攻略</li>
                      <li>媽祖文化</li>
                      <li>酒店</li>
                      <li>風景</li>
                      <li>莆田</li>
                    </ul>
                    <div><a class="rom_download mobile_icon" id="buy" href="http://kuaibao.qq.com/s/MEDIANEWSLIST?chlid=5371135&from=singlemessage&isappinstalled=1"><img src="style/images/buy_smartband.png" alt=""></a></div>
                </div>
                <div class="shouhuanImg  fr">
                    <img src="style/images/shouhuan.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="fixed head">
        <div class="head_content">
            <div class="icon logo logo_blue fl" style="width: 193px; height: 46px"></div>
            <div class="fr login_box">
               
                <a href="#" class="">微訊號</a>
                <span class="">|</span>
                <a href="#" class="">wh1836360</a>
                
            </div>
        </div>
        <div class="line"></div>
    </div>
    <div class="fixed bottom">
        <div class="bottom_content">
            <a href="/about/aboutus/">關於我們</a>
          <span>|</span>
            <a href="/about/ad/">廣告合作</a>
            <label class="bottom_tips">
                <span>|</span>
                <a href="/about/copyright/">免責宣告</a>
                <span>|</span>
                <a href="/about/contact/">聯絡我們</a>
            </label>
            <br />
            <p>Copyright © 1999-2021  那些事  來源:<a href="https://blog.csdn.net/qq_44273429/" target="_blank">海擁CSDN</a></p>
        </div>
    </div>

</body>
</html>

部分CSS程式碼：

body,html {
    font-family: "微軟雅黑";
    font-size: 14px;
}
.fixed {
    position: fixed
}
html {
    width: 100%;
    height: 100%;
}
.icon {
    background: url(img/icon.png) no-repeat;
    overflow: hidden;
}
.iphone_icon {
    background: url(img/iphone.png) no-repeat;
}
.download_box .item_pc {
    text-align: center!important;
    border: 1px solid #fff;
}

.head {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 57px;
    padding-top: 10px;
    border-bottom: 1px solid rgba(48, 48, 48,0.14);
    overflow: hidden;
}
.head .head_content {
    width: 74%;
    max-width: 1000px;
    height: 57px;
    margin: 0 auto;
}

.head .login_box,
.head .login_box a {
    color: #fff;
    margin-right: 10px;
    font-size: 105%;
}
.head .login_box {
    margin-top: 2%;
    margin-right: 3%;
}
.head .login_box span {
    margin-right: 10px;
}
.head .logo {
    width: 113px;
    height: 46px;
    background: url(img/logo.png) no-repeat;
}
.head .logo_blue {

}
.head .logo_green {
    background-position: -11px -61px;
}

.bottom {
    width: 100%;
    bottom: 10px;
}
.bottom .bottom_content {
    width: 74%;
    max-width: 1045px;
    margin: 0 auto;
}
.bottom a,
.bottom span {
    float: left;
    margin-right: 5px;
    color: #000000;
    font-size: 10px;
    opacity: .4;
}
.bottom p {
    font-size: 12px;
    opacity: .4;
}
.my_section {
    width: 74%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 64px;
    position: relative;
    transform:scale(1);
    -webkit-transform:scale(1);
　　-moz-transform-origin:top left;
}

完整程式碼已打包上傳

方法一：CSDN資源下載：https://download.csdn.net/download/qq_44273429/14978410

方法二：關注作者公眾號啦啦啦好想biu點什麼回覆微信公眾號展示頁面模板免費獲取
在這裡插入圖片描述

後面我還會持續更新類似免費好玩的H5小遊戲、Java小遊戲、好玩、實用的專案和軟體等等

相關內容

最後，不要忘了❤或

相關推薦

基於HTML/CSS/JS微信公眾號展示頁面模板

技術標籤：HTML好玩的簡單專案htmljavascript 首先看一下成品 演示頁面 https://pai-daxing1.github.io/weixin/

ECS實踐訓練營Day3--基於雲伺服器構建微信公眾號管理系統

ECS實踐訓練營Day3--基於雲伺服器構建微信公眾號管理系統 實驗環境：Centos 7.7 64位

node.js 微信公眾號驗證URL例項

技術標籤：微信小程式nodejs 微信公眾號驗證URL地址及簽名，官方有例項程式碼，寫得囉嗦：

使用Java實現微信公眾號推送模板訊息（保證能用）

背景： 　　還是那個業務背景，面向微信公眾號開發，指定針對使用者傳送訊息，胖友們，我研究了一天了，程式碼粘過去，用不了你錘死我

微信公眾號，傳送模板訊息

sendMessage(){ var that = this; this.$axios({ method:\"GET\", url:\"/wxApi/cgi-bin/token?grant_type=client_credential&appid=wx97ae314497d666cc&secret=c908c74358240912dfe995474b3da54d\"

微信公眾號H5頁面vue仿QQ微信列表左滑刪除效果

技術標籤：vue.jscss3vue.jsjavascript 仿QQ微信列表左滑刪除效果 效果 1.實現思路 通過兩個事件touchstart，touchend，結合css樣式

微信公眾號開發之模板訊息

歡迎留言、轉發 微信極速開發系列文章：點選這裡 最近有點小感冒，文章的更新進度延誤了一些，希望此係列文章對你研究微信公眾開發有幫助。前幾篇文章介紹了微信支付。公眾號支付、微信掃碼支付、刷卡支付、微信買

Flask微信公眾號開發之模板訊息（四）

Flask Flask的全域性物件主要有request、g以及Flask()例項——基本上命名為app。request即請求報文相關資料，g可以理解為主要給開發者使用的基於一次請求的全域性資料，它們在一次請求結束時會被銷燬。而app = Flas

微信公眾號H5頁面呼叫微信掃一掃功能

微信公眾號H5頁面呼叫微信掃一掃功能需要通過微信JSSDK（呼叫其他介面也是一樣的方法），且需要前後端配合，具體步驟如下：

簡單使用Java實現微信公眾號推送模板訊息

原文連結: https://blog.csdn.net/qq_41936224/article/details/108076005 以下例子是簡單的使用Java程式碼實現微信公眾號推送模板訊息，不包含跳轉到小程式網頁程式碼

基於springboot微信公眾號開發(微信自動回覆)

效果圖 1.準備工作 申請微信訂閱號(個人只能申請訂閱號,而且沒什麼功能,也無法認證),申請完畢,點選 開發=>基本配置,如下圖:

基於Django專案的Python版微信公眾號支付-Native支付方式

本文詳細講解Python語言進行公眾號開發時，參考開發者文件進行Native支付（模式二），並給出具體的程式碼：

基於Django專案的Python版微信公眾號支付-JSAPI支付方式

本文詳細講解Python語言進行公眾號開發時，參考開發者文件進行JSAPI支付，並給出具體的程式碼：

基於PHP的微信公眾號的開發流程詳解

微信公眾號開發分傻瓜模式和開發者模式兩種，前者不要考慮呼叫某些介面，只要根據後臺提示傻瓜式操作即可，適用於非專業開發人員。

Class 3 基於ECS構建微信公眾號管理系統

Class 3 基於ECS構建微信公眾號管理系統 1.開通雲伺服器和安裝環境 之前已完成均跳過

基於Python採集爬取微信公眾號歷史資料

鯤之鵬的技術人員將在本文介紹一種通過模擬操作微信App的方式採集指定公眾號的所有歷史資料的方法。

微信公眾號開發之vue專案引入JS-SDK

技術標籤：微信公眾號vue前端 目前有看到的庫有weixin-jsapi、weixin-js-sdk 1.weixin-js-sdk

基於 vue-cli4+vant 搭建 H5 通用架子(支援微信公眾號)

基於 vue-cli4+vant 搭建 H5 通用架子(支援微信公眾號) 已經上傳vue3.0+ts分支 如果有優化建議和bug請提issue

Java實現微信公眾號自定義選單的建立方法示例

本文例項講述了Java實現微信公眾號自定義選單的建立方法。分享給大家供大家參考，具體如下：

Java實現的微信公眾號獲取微信使用者資訊示例

本文例項講述了Java實現的微信公眾號獲取微信使用者資訊。分享給大家供大家參考，具體如下：