JS宣傳頁項目-綜合實戰

来源:https://www.cnblogs.com/chenyingying0/archive/2020/01/02/12141706.html
-Advertisement-
Play Games

按照國際慣例先放圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <!-- 基本樣式 --> <link rel="stylesheet" href="sty ...


按照國際慣例先放圖

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 基本樣式 -->
    <link rel="stylesheet" href="style.css">
    <!-- 動畫效果 -->
    <link rel="stylesheet" href="animate.css">
</head>
<body>
    <!-- 導航 -->
    <header class="header">
        <div class="header_wrap">
            <div class="header_logo">XX手機</div>
            <nav class="header_nav">
                <a href="javascript:;" class="header_nav_item header_nav_item_active">首頁</a>
                <a href="javascript:;" class="header_nav_item">外觀</a>
                <a href="javascript:;" class="header_nav_item">配置</a>
                <a href="javascript:;" class="header_nav_item">型號</a>
                <a href="javascript:;" class="header_nav_item">說明</a>
                <a href="javascript:;" class="header_nav_item header_nav_item_btn">立即購買</a>
                <div class="header_nav_tip"></div>
            </nav>
        </div>
    </header>
    <!-- 第一屏 -->
    <div class="screen_1">
        <h2 class="screen_1_heading screen_1_heading_animate_init"><b>XX手機</b> 讓你的生活更精彩</h2>
        <div class="screen_1_phone screen_1_phone_animate_init"></div>
        <div class="screen_1_shadow screen_1_shadow_animate_init"></div>
    </div>
    <!-- 第二屏 -->
    <div class="screen_2">
        <h2 class="screen_2_title">優美的設計，更令人著迷</h2>
        <h3 class="screen_2_subtitle">採用受歡迎的設計，讓它更加出色。<br>款式小巧、輕便手感更舒適。絢麗高清的顯示屏，整個外觀顯得格外精緻。</h3>
        <div class="screen_2_phone">
            <div class="screen_2_phone_point screen_2_phone_point1">高清攝像</div>
            <div class="screen_2_phone_point screen_2_phone_point2">超薄機身</div>
            <div class="screen_2_phone_point screen_2_phone_point3">大屏顯示</div>
        </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen_3">
        <div class="screen_3_wrap">
            <h2 class="screen_3_title">外形小巧，功能強大的手機</h2>
            <h3 class="screen_3_subtitle">採用受歡迎的設計，讓它更加出色。<br> 款式小巧、輕便手感更舒適。絢麗高清的顯示屏，整個外觀顯得格外精緻。</h3>
            <div class="screen_3_phone"></div>
            <div class="screen_3_feature">
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_big">5.7</div>
                    <div class="screen_3_feature_item_small">英寸大屏</div>
                </div>
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_big">1200</div>
                    <div class="screen_3_feature_item_small">萬像素</div>
                </div>
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_big">3D</div>
                    <div class="screen_3_feature_item_small">touch</div>
                </div>
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_big">A9</div>
                    <div class="screen_3_feature_item_small">處理器</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen_4">
        <div class="screen_4_wrap">
            <h2 class="screen_4_heading">豐富的手機型號</h2>
            <h3 class="screen_4_subheading">找到適合你的手機</h3>
            <div class="screen_4_type">
                <div class="screen_4_type_item screen_4_type_item_i_1">
                    <div class="screen_4_type_item_color">慕課紅</div>
                    <div class="screen_4_type_item_storage">16G/32G/64G</div>
                </div>
                <div class="screen_4_type_item screen_4_type_item_i_2">
                    <div class="screen_4_type_item_color">土豪金</div>
                    <div class="screen_4_type_item_storage">16G/32G/64G</div>
                </div>
                <div class="screen_4_type_item screen_4_type_item_i_3">
                    <div class="screen_4_type_item_color">太空灰</div>
                    <div class="screen_4_type_item_storage">16G/32G/64G</div>
                </div>
                <div class="screen_4_type_item screen_4_type_item_i_4">
                    <div class="screen_4_type_item_color">紳士黑</div>
                    <div class="screen_4_type_item_storage">16G/32G/64G</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen_5">
        <h2 class="screen_5_heading">游戲、學習、拍照、有這一部就夠了</h2>
        <h3 class="screen_5_subheading">看視頻、拍攝高清視頻與照片、視頻聊天、一機多功能，讓您生活更豐富精彩。</h3>
        <div class="screen_5_bg"></div>
    </div>
    <!-- 底部 -->
    <div class="screen_buy">
        <a class="screen_buy_btn" href="javascript:;">立即購買</a>
    </div>
    <footer class="footer">
        © 2019 test.com 京ICP備xxxxxxxx號
    </footer>
    <!-- 側導航 -->
    <div class="outline">
        <a href="javascript:;" class="outline_item outline_item_active">首頁</a>
        <a href="javascript:;" class="outline_item">外觀</a>
        <a href="javascript:;" class="outline_item">配置</a>
        <a href="javascript:;" class="outline_item">型號</a>
        <a href="javascript:;" class="outline_item">說明</a>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #fff; 
    font-size: 12px;
    font-family: "Microsoft Yahei","微軟雅黑"
}
a{
    text-decoration: none;
}
/*導航*/
header{
    background-color: #f7f7f7;
}
.header_wrap{
    height:80px;
    width:1200px;
    margin:0 auto;
    position: relative;
}
.header_logo{
    background:url(img/logo.png) no-repeat;
    width:150px;
    height:40px;
    line-height: 40px;
    text-indent:50px;
    position: absolute;
    top:50%;
    margin-top:-20px;
    font-size:20px;
}
.header_nav{
    position: absolute;
    right:25px;
    height:40px;
    line-height: 40px;
    top:50%;
    margin-top:-20px;
}
.header_nav_item{
    display: block;
    float: left;
    padding-left:48px;
    color:#292f35;
    font-size:14px;
    width:30px;
    text-align: center;
    position: relative;
}
.header_nav_item_active{
    color:#f01400;
}
/*.header_nav_item_active::after{
    content:' ';
    position: absolute;
    width:31px;
    height:2px;
    background-color: #f01400;
    top:35px;
    left:-1px;
}*/
.header_nav_item_btn{
    width:90px;
    background:#07111b;
    color:white;
    border-radius:5px;
    padding:0 5px;
    margin-left:48px;
}
/*第一屏*/
.screen_1{
    height: 800px;
    background-color: #e7e7e7;
    position: relative;
    overflow: hidden;
    background:url(img/bg-screen-1.png) no-repeat center;
    background-size: cover;
}
.screen_1_heading{
    font-weight: normal;
    margin: 0;
    padding: 0;
    font-size:46px;
    color: #4d555d;
    text-align: center;
    padding-top: 152px;
}
.screen_1_heading b{
    color: #f01400;
    font-weight: normal;
}
.screen_1_phone{
    width: 1375px;
    height: 305px;
    background:url(img/screen-1-phone.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -687px;
    bottom: 180px;
    z-index: 2;
}
.screen_1_shadow{
    width: 1233px;
    height: 411px;
    background:url(img/screen-1-shadow.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -616px;
    bottom: 30px;
    z-index: 1;
    opacity: .8;
}
/*第二屏*/
.screen_2{
    text-align: center;
    padding-top:56px;
    background:#fafafa;
}
.screen_2_title{
    color:#f01414;
    font-size:48px;
    font-weight:normal;
}
.screen_2_subtitle{
    color:#07111b;
    font-size:16px;
    font-weight:normal;
    margin-top:15px;
    line-height:2em;
    margin-bottom:40px;
}
.screen_2_phone{
    width:1200px;
    margin:0 auto;
    background:url(img/screen-2-phone.png) top center no-repeat;
    height:579px;
    overflow:hidden;
    position: relative;
}
.screen_2_phone_point{
    position: absolute;
    width: 230px;
    height: 48px;
    padding-right: 20px;
    line-height: 48px;
    background: url(img/icon-point-right.png) right no-repeat;
}
.screen_2_phone_point1{
    top: 146px;
    left: -56px;
}
.screen_2_phone_point2{
    background: url(img/icon-point-left.png) left no-repeat;
    top: 25px;
    right: 235px;
}
.screen_2_phone_point3{
    background: url(img/icon-point-left.png) left no-repeat;
    top: 319px;
    right: 135px;
}
/*第三屏*/
.screen_3{
    height:803px;
    background:url(img/bg-screen-3.png) no-repeat;
    overflow:hidden;
}
.screen_3_wrap{
    width:1200px;
    margin:0 auto;
    color:#fff;
    position: relative;
}
.screen_3_title{
    font-size:48px;
    padding-top:84px;
    font-weight:normal;
}
.screen_3_subtitle{
    font-size:16px;
    font-weight:normal;
    margin-top:34px;
    line-height:30px;
}
.screen_3_phone{
    width: 800px;
    background: url(img/screen-3-phone.png) top right no-repeat;
    height: 657px;
    position: absolute;
    right: 0;
    top: 200px;
    background-size: 90%;
}
.screen_3_feature{
    width:400px;
    position:absolute; 
    top:380px;
    left:0;
}
.screen_3_feature_item{
    width:176px;
    height:125px;
    border:1px solid #fff;
    border-radius:5px;
    text-align: center;
    padding-top:30px;
    margin-right:22px;
    float: left;
    margin-bottom:25px;
}
.screen_3_feature_item_big{
    font-size:48px;
}
.screen_3_feature_item_small{
    font-size:16px;
}
/*第四屏*/
.screen_4{
    background-color: #ffffff;
    height: 800px;
    position: relative;
    overflow: hidden;
}
.screen_4_wrap{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    position: relative;
}
.screen_4_heading{
    font-size:48px;
    line-height: 48px;
    color: #f01400;
    text-align: center;
    padding-top: 135px;
    font-weight:normal;
}
.screen_4_subheading{
    font-size:16px;
    color: #464a4f;
    text-align: center;
    padding-top: 29px;
    line-height: 28px;
    font-weight:normal;
}
.screen_4_type{
    width: 1260px;
    height: 270px;
    position: absolute;
    top: 304px;
    margin-left: 30px;
}
.screen_4_type_item{
    width: 220px;
    margin-right: 90px;
    height: 270px;
    float: left;
    position: relative;
    text-align: center;
    background-size: cover;
}
.screen_4_type_item_color{
    width: 100%;
    height: 14px;
    line-height: 14px;
    font: 14px;
    color: #2c3238;
    position: absolute;    
    bottom: -44px;
}
.screen_4_type_item_i_1{
    background: url('img/phone-1.png') no-repeat left top;
}
.screen_4_type_item_i_2{
    background: url('img/phone-2.png') no-repeat left top;
}
.screen_4_type_item_i_3{
    background: url('img/phone-3.png') no-repeat left top;
}
.screen_4_type_item_i_4{
    background: url('img/phone-4.png') no-repeat left top;
}
.screen_4_type_item_storage{
    width: 100%;
    height: 12px;
    line-height: 12px;
    font: 12px;
    color: #a4a9ae;
    position: absolute;    
    bottom: -66px;
}
/*第五屏*/
.screen_5{
    height: 800px;
    position: relative;
    overflow: hidden;
    background-color: #d9dde1;
}
.screen_5_heading{
    font-size:48px;
    line-height: 48px;
    color: #f01400;
    text-align: center;
    padding-top: 130px;
    font-weight:normal;
}
.screen_5_subheading{
    font-size:16px;
    color: #2c3137;
    text-align: center;
    padding-top: 25px;
    line-height: 28px;
    font-weight:normal;
}
.screen_5_bg{
    width: 1920px;
    height: 433px;
    background:url(img/bg-screen-5.png)  no-repeat center;    
    background-size: contain;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    bottom: -100px;
}
/*底部*/
.screen_buy{
    height: 80px;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: #2b333b url('img/bg-screen-buy.png') center no-repeat;
    text-align: center;
}
.screen_buy_btn{
    height: 80px;
    width: 240px;
    text-align: center;
    line-height: 80px;
    font-size: 24px;
    color: #fff;
    background-color: #f01414;
    display: inline-block;
    border-radius: 3px;
    transition: all .5s;
}
.screen_buy_btn:hover{
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}
.footer{
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    background-color: #07111b;
}
/*側導航*/
.outline{
    width:66px;
    position: fixed;
    right:0;
    top:50%;
    margin-top:-98px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
}
.outline_item{
    display: block;
    color:#93999f;
    font-size:12px;
    text-align: center;
    height:45px;
    line-height:45px;
    border-bottom:1px solid #c3c6c9;
    margin:0 20px;
}
.outline_item:last-child{
    border:none;
}
.outline_item_active{
    color:#f01400;
}
/*導航滑動門特效*/
.header_nav_tip{
    position: absolute;
    width:30px;
    height:2px;
    background-color:#f01400;
    bottom:0;
    left:0;
    margin-left:47px;
    transition:all 1s;
}

animate.css

/*第一屏*/
    /*screen_1_heading*/
    .screen_1_heading{
        transition: all 1s;
    }
    .screen_1_heading_animate_init{
        opacity: 0;
        transform:translate(0,100%);
    }
    .screen_1_heading_animate_done{
        opacity: 1;
        transform:translate(0,0);
    }
    /*screen_1_phone*/
    .screen_1_phone{
        transition: all 1s;
    }
    .screen_1_phone_animate_init{
        opacity: 0;
        transform:translate(0,-100%);
    }
    .screen_1_phone_animate_done{
        opacity: 1;
        transform:translate(0,0);
    }
    /*screen_1_shadow*/
    .screen_1_shadow{
        transition: all 1s;
    }
    .screen_1_shadow_animate_init{
        opacity: 0;
        transform:translate(0,-100%);
    }
    .screen_1_shadow_animate_done{
        opacity: 1;
        transform:translate(0,0);
    }

/*第二屏*/
    /*screen_2_title*/
    .screen_2_title{
        transition: all 1s;
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 獲取資料庫中用戶表所有列和列的數據類型
    獲取資料庫中，所有用戶表中每一列名和其數據類型。 SELECT OBJECT_NAME(c.OBJECT_ID) AS [Table_Name], c.[name] AS [Column_Name] ,t.[name] AS [Data_Type_Name] FROM sys.columns AS ...
  • 禁用或啟用資料庫所有觸發器
    禁用或啟用資料庫所有觸發器。 禁用： use Test Exec sp_msforeachtable "ALTER TABLE ? DISABLE TRIGGER all" GO 啟用： use Test Exec sp_msforeachtable "ALTER TABLE ? ENABLE TR ...
  • Android事件分發與責任鏈模式
    一、責任鏈模式 責任鏈模式是一種行為模式,為請求創建一個接收者的對象鏈.這樣就避免,一個請求鏈接多個接收者的情況.進行外部解耦.類似於單向鏈表結構。 優點： 1. 降低耦合度。它將請求的發送者和接收者解耦。 2. 簡化了對象。使得對象不需要知道鏈的結構。 3. 增強給對象指派職責的靈活性。通過改變鏈 ...
  • Android EditText不可編輯單行顯示能滑動查看內容
    遇到問題 有時為了節約界面控制項，可以界面的美觀，我們會使用單行顯示 singleLine，如果使用 Enable = false 輸入框文字呈現灰色，並且也無法操作。 想要實現的效果是，單行顯示，不能該表輸入框的值，如果文本超出輸入框的長度，可以通過左右拖動來查看文字 解決 android:sing ...
  • flex space-between最後一行對齊問題的解決方案
    背景 常見的一個圖文列表設計，通常是這樣的，兩端頂著容器，中間的間距平均分，如下圖的某東商品列表的設計： 列表是這樣自適應的，當視窗足夠放多少個商品就放多少個，然後各個商品項目之間的間距平均分。由於每個人的視窗都可能不同，因此所看到的間距或者每一行的個數都會不同。 方案 想到這種設計，我們學過fle ...
  • JS變數+作用域
    基本類型-棧記憶體 保存基本類型的變數保存的是值本身 引用類型-堆記憶體 保存引用類型的變數保存的並不是對象本身，而是一個指向該對象的引用地址 引用類型判斷對象是否相等 function equalObjs(a, b) { for (var p in a) { if (a[p] !== b[p]) re ...
  • my97日期控制項彈出位置顯示異常
    使用my97日期選擇控制項的時候，如果整個頁面是有滾動條的，根據觸發顯示日期的控制項的父控制項的position不同會顯示不同的情況 1、position不為fixed則滑動滾動條，顯示的日期層不會出現異常位移，如下圖 滾動條不動，正常顯示 滾動條沒去，正常顯示 2、position為fixed則滑動滾動 ...
  • 【uuid】- 唯一標識
    2020-01-02 UUID ，Universally Unique Identifier ，通用唯一標識符。 //定義一個生成 uuid 的方法const getUuid = () => { const s = [] // 定義一個十六進位字元串 const hexDigits = '01234 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類