Web前端大作業—個人網頁(html+css+javascript)

                        個人網頁設計

                        在這里插入圖片描述

                        • 第二屏 個人頁面

                        在這里插入圖片描述
                        在這里插入圖片描述

                        • 第三屏 輪播相冊

                        在這里插入圖片描述

                        • 第四屏 天氣查詢

                        在這里插入圖片描述

                        • 第五屏 微電影

                        在這里插入圖片描述

                        • index.html
                        <!DOCTYPE html>
                        <html lang="zh-CN">
                        
                        <head>
                            <meta charset="UTF-8" />
                            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                            <title>歡迎來到 Lilly Yu 主頁</title>
                            <link rel="shortcut icon" href="favicon.ico" />
                            <!-- ------------------------------------------------- -->
                            <link rel="stylesheet" href="css/base.css" />
                            <link rel="stylesheet" href="css/fullpage.min.css" />
                            <!-- 引入外部字體連接 -->
                            <link rel="stylesheet" href="//at.alicdn.com/t/font_2935587_97eo1d0furr.css" />
                            <!-- 引入animate -->
                            <link rel="stylesheet" href="./css/animate.min.css" />
                            <link rel="stylesheet" href="./css/style-1.css" />
                            <link rel="stylesheet" href="./css/style-2.css" />
                            <link rel="stylesheet" href="./css/style-3.css" />
                            <link rel="stylesheet" href="./css/style-4.css" />
                            <link rel="stylesheet" href="./css/style-5.css" />
                            <link rel="stylesheet" href="./css/jaliswall.css" />
                            <!-- ------------------------------------------------- -->
                            <script src="js/jQuery.mini.js"></script>
                            <script src="js/fullpage.min.js"></script>
                            <script src="js/jaliswall.js"></script>
                            <script src="js/index.js"></script>
                            <style>
                                /* 輪播圓點顏色 */
                                #fp-nav ul li a span {
                                    background-color: #fff !important;
                                }
                        
                                /* 左右滑塊的樣式 */
                                .fp-bottom ul {
                                    width: 100%;
                                    text-align: center;
                                }
                        
                                /* 三屏的圓點顏色 */
                                .fp-bottom ul li a span {
                                    background-color: rgb(255, 255, 255);
                                }
                        
                                body {
                                    background-image: linear-gradient(#48f1d5, #fff, #ffa4a4);
                                }
                            </style>
                        </head>
                        
                        <body>
                            <!-- 設置背景音樂 -->
                            <audio autoplay="autoplay" loop="loop" preload="auto" src="music/起風了(Cover 高橋優) - 買辣椒也用券.mp3">
                            </audio>
                        
                            <div id="dowebok">
                                <!-- <h3>第一屏</h3> -->
                                <div class="section sec1" id="section2">
                                    <!-- 背景圓點 -->
                                    <div class="sec1_circle1"></div>
                                    <div class="sec1_circle2"></div>
                                    <div class="sec1_circle3"></div>
                        
                                    <!-- 頭部 -->
                                    <nav>
                                        <ul>
                                            <li class="local_home">
                                                <a href="#page1">
                                                    <span class="local_hd">Home</span>
                                                    <span class="local_bd">主頁</span>
                                                </a>
                                            </li>
                                            <li class="local_home">
                                                <a href="#page2">
                                                    <span class="local_hd">Preson</span>
                                                    <span class="local_bd">簡介</span>
                                                </a>
                                            </li>
                                            <li class="local_home">
                                                <a href="#page3">
                                                    <span class="local_hd">Photo</span>
                                                    <span class="local_bd">照片集</span>
                                                </a>
                                            </li>
                                            <li class="local_home">
                                                <a href="#page4">
                                                    <span class="local_hd">Weather</span>
                                                    <span class="local_bd">天氣查詢</span>
                                                </a>
                                            </li>
                                            <li class="local_home">
                                                <a href="#page5 ">
                                                    <span class="local_hd">Video</span>
                                                    <span class="local_bd">視頻集</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                    <!-- 內容區域 -->
                                    <main>
                                        <div class="main_left">
                                            <div class="myPhoto current">
                                                <a href="#">
                                                    <img src="./img/myphoto.jpg" alt="" />
                                                    <h3>Lilly Yu</h3>
                                                    <p>唯有落葉🍂知秋意</p>
                                                </a>
                                            </div>
                                            <div>
                                                <a href="#">
                                                    <p></p>
                                                    <span>首頁</span>
                                                </a>
                                            </div>
                                            <div>
                                                <a href="#">
                                                    <p></p>
                                                    <span>關于</span>
                                                </a>
                                            </div>
                                            <div>
                                                <a href="#">
                                                    <p></p>
                                                    <span>電話</span>
                                                </a>
                                            </div>
                                            <div>
                                                <a href="#">
                                                    <p></p>
                                                    <span>郵箱</span>
                                                </a>
                                            </div>
                                            <div>
                                                <a href="#">
                                                    <p></p>
                                                    <span>微信</span>
                                                </a>
                                            </div>
                                            <div>
                                                <a href="#">
                                                    <p></p>
                                                    <span>更多</span>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="main_right">
                                            <div class="content hidden" style="display: block">
                                                <img src="./img/myphoto.jpg" alt="" / class="touxiang">
                                                <p>永遠相信美好的事情即將發生 ——</p>
                                                <p>弱能避開猛烈的狂喜,自然不會有悲痛襲來。——《人間失格》</p>
                                                <p>愛意隨風起,自然知秋意。</p>
                                            </div>
                        
                                            <div class="content hidden">
                                                <img src="./img/1-1.jpg" alt="" / class="touxiang">
                                                <p>在最黑暗的那段人生,是我自己把我自己拉出深淵</p>
                                                <p>沒有那個人,我就做那個人——中島美嘉</p>
                                            </div>
                        
                                            <div class="content hidden">
                                                <img src="./img/1-2.jpg" alt="" / class="touxiang">
                                                <p>生命是有關光的,在我熄滅以前</p>
                                                <p>能夠照亮你一點,就是我所有能做的的了</p>
                                                <p>我愛你,你要記得我——《云邊有個小賣部》</p>
                                            </div>
                        
                                            <div class="content hidden">
                                                <img src="./img/1-3.png" alt="" / class="touxiang">
                                                <p>帶我回家</p>
                                                <p>待我回家</p>
                                                <p>代我回家</p>
                                            </div>
                        
                                            <div class="content hidden">
                                                <img src="./img/1-4.jpg" alt="" / class="touxiang">
                                                <p>去年夏天,我遇到一個女孩,他的出現讓我放下了從前</p>
                                                <p>我真的很喜歡她,雖然和她沒有以后了</p>
                                                <p>但依舊祝她歲歲平安</p>
                                            </div>
                        
                                            <div class="content hidden">
                                                <img src="./img/1-5.jpg" alt="" / class="touxiang">
                                                <p>淺淺喜,靜靜愛</p>
                                                <p>深深懂得,淡淡釋懷</p>
                                                <p>望遠處是風景,看近處才是人生!</p>
                                            </div>
                        
                                            <div class="content hidden">
                                                <img src="./img/1-6.jpg" alt="" / class="touxiang">
                                                <p>你要咽的下這世間的不美好</p>
                                                <p>才配得上這世上一切的美好</p>
                                            </div>
                                        </div>
                                    </main>
                                </div>
                                <!-- <h3>第二屏</h3> -->
                                <div class="section sec2" id="section2">
                                    <!-- 背景小圓點 -->
                                    <div class="sec1_circle1"></div>
                                    <div class="sec1_circle2"></div>
                                    <div class="sec2_circle1"></div>
                                    <div class="sec2_circle2"></div>
                                    <div class="sec2_circle3"></div>
                                    <!-- 主題內容 -->
                                    <div class="sec2_main">
                                        <div class="sec2_main_head">
                                            <ul>
                                                <li class="current1">
                                                    <a href="#">個人資料</a>
                                                </li>
                                                <li><a href="#">個人圖片</a></li>
                                                <li><a href="#">個人日志</a></li>
                                                <li><a href="#">個人QQ</a></li>
                                                <li><a href="#">個人微信</a></li>
                                                <li><a href="#">個人收藏</a></li>
                                            </ul>
                                        </div>
                                        <div class="sec2_main_body">
                                            <div class="sec2_main_body_content hidden" style="display: block">
                                                <div class="sec2_main_body_content_left">
                                                    <p>💘</p>
                                                    <p>姓名:Lilly Yu</p>
                                                    <p>性別:女</p>
                                                    <p>生日:2002/03/19</p>
                                                    <p>愛好:羽毛球,吃雞,聽音樂</p>
                                                    <p>星座:白羊座</p>
                                                    <p>落葉🍂知秋意</p>
                                                    <p>愛意💕隨風起</p>
                                                    <p>💓</p>
                                                </div>
                                                <div class="sec2_main_body_content_right">
                                                    <img src="./img/1-4.jpg" alt="" />
                                                </div>
                                            </div>
                                            <div class="sec2_main_body_content hidden">
                                                <div class="sec2_main_body_content_left">
                                                    <p>💘</p>
                                                    <p>《起風了》</p>
                                                    <p>💓</p>
                                                </div>
                                                <div class="sec2_main_body_content_right">
                                                    <img src="./img/s-2.jpg" alt="" />
                                                </div>
                                            </div>
                                            <div class="sec2_main_body_content hidden">
                                                <div class="sec2_main_body_content_left">
                                                    <p>💘</p>
                                                    <p>這一路上走走停停</p>
                                                    <p>順著少年漂流的痕跡</p>
                                                    <p>邁出車站的前一刻</p>
                                                    <p>竟有些猶豫</p>
                                                    <p>不禁笑這近鄉情怯</p>
                                                    <p>仍無可避免,而長野的天</p>
                                                    <p>依舊那么暖,風吹起了從前💕</p>
                                                    <p>💓</p>
                                                </div>
                                                <div class="sec2_main_body_content_right">
                                                    <img src="./img/s-3.jpg" alt="" />
                                                </div>
                                            </div>
                                            <div class="sec2_main_body_content hidden">
                                                <div class="sec2_main_body_content_left">
                                                    <p>💘</p>
                                                    <p>QQ大號:5201314</p>
                                                    <p>QQ小號:6666</p>
                                                    <p>💓</p>
                                                </div>
                                                <div class="sec2_main_body_content_right">
                                                    <img src="./img/s-4.jpg" alt="" />
                                                </div>
                                            </div>
                                            <div class="sec2_main_body_content hidden">
                                                <div class="sec2_main_body_content_left">
                                                    <p>💘</p>
                                                    <p>落葉🍂知秋意</p>
                                                    <p>微信:哇哈哈</p>
                                                    <p>愛意💕隨風起</p>
                                                    <p>💓</p>
                                                </div>
                                                <div class="sec2_main_body_content_right">
                                                    <img src="./img/s-5.jpg" alt="" />
                                                </div>
                                            </div>
                                            <div class="sec2_main_body_content hidden">
                                                <div class="sec2_main_body_content_left">
                                                    <p>💘</p>
                                                    <p>愛意隨風起,自然知秋意。</p>
                                                    <p>💓</p>
                                                </div>
                                                <div class="sec2_main_body_content_right">
                                                    <img src="./img/1-1.jpg" alt="" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- <h3>第三屏</h3> -->
                                <div class="section sec3" id="section3">
                                    <div class="slide">
                                        <img src="./img/s-1.jpg" alt="" />
                                    </div>
                                    <div class="slide">
                                        <img src="./img/s-2.jpg" alt="" />
                                    </div>
                                    <div class="slide">
                                        <img src="./img/s-3.jpg" alt="" />
                                    </div>
                                    <div class="slide">
                                        <img src="./img/s-4.jpg" alt="" />
                                    </div>
                                    <div class="slide">
                                        <img src="./img/s-5.jpg" alt="" />
                                    </div>
                                </div>
                                <!-- <h3>第四屏</h3> -->
                                <div class="section sec4" id="section4">
                                    <!-- 背景小圓點 -->
                                    <div class="sec4_circle1"></div>
                                    <div class="sec4_circle2"></div>
                                    <div class="sec4_circle3"></div>
                                    <!-- 主題內容 -->
                                    <div class="sec4_main_box">
                                        <!-- 天氣板塊 -->
                                        <div id="sec4-app">
                                            <div class="sec4_title">
                                                <h2>天 氣 查 詢</h2>
                                            </div>
                                            <div class="sec4_search">
                                                <input type="text" name="" id="" placeholder="肇慶" @keyup.enter="searchEnter" v-model="city"
                                                    class="sec4_input" />
                                                <button @click="clickButton" class="sec4_button">搜索</button>
                                            </div>
                                            <div class="sec4_select">
                                                <a href="javascript:;" @click="changeCity('北京')">北京</a>
                                                <a href="javascript:;" @click="changeCity('上海')">上海</a>
                                                <a href="javascript:;" @click="changeCity('廣州')">廣州</a>
                                                <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
                                                <a href="javascript:;" @click="changeCity('廈門')">廈門</a>
                                            </div>
                                            <ul class="sec4_ul">
                                                <li v-for="item in weatherList" :key="index" class="sec4_li">
                                                    <div class="sec4_weather">
                                                        <div class="tianqi">{{item.type}}</div>
                                                        <div class="qiwen">{{item.low}}</div>
                                                        <div class="date">{{item.date}}</div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- <h3>第五屏</h3> -->
                                <div class="section sec5" id="section5">
                                    <video src="music/zwi.mp4" autoplay muted loop controls></video>
                                </div>
                            </div>
                            <!-- ------------------------------------------------- -->
                            <!-- 官網提供的 axios 在線地址 -->
                            <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
                            <!-- 引入在線axios地址 -->
                            <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
                            <!-- 開發環境版本,包含了有幫助的命令行警告 -->
                            <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
                            <script src="./js/vue.js"></script>
                        </body>
                        
                        </html>
                        

                        “相關推薦”對你有幫助么?

                        • 非常沒幫助
                        • 沒幫助
                        • 一般
                        • 有幫助
                        • 非常有幫助
                        提交
                        ??2022 CSDN 皮膚主題:游動-白 設計師:我叫白小胖 返回首頁

                        打賞作者

                        "wink

                        你的鼓勵將是我創作的最大動力

                        ¥2 ¥4 ¥6 ¥10 ¥20
                        輸入1-500的整數
                        余額支付 (余額:-- )
                        掃碼支付
                        掃碼支付:¥2
                        獲取中
                        掃碼支付

                        您的余額不足,請更換掃碼支付或充值

                        打賞作者

                        實付
                        使用余額支付
                        點擊重新獲取
                        掃碼支付
                        錢包余額 0

                        抵扣說明:

                        1.余額是錢包充值的虛擬貨幣,按照1:1的比例進行支付金額的抵扣。
                        2.余額無法直接購買下載,可以購買VIP、C幣套餐、付費專欄及課程。

                        余額充值
                        久久悠悠精品综合网