網頁設計成品_前端響應式
主題：租房網站，共6個html頁面，包含首頁，登錄注冊，租房新聞，租房精選，租房詳情，數據可視化頁面（可以修改內容）
采用技術：html+css+bootstrap，使用div+css布局
軟件：Dw HBuilder Vscode等等均可打開
部分代碼展示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>租房網</title><link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/index.css"><link rel="shortcut icon" href="bitbug_favicon.ico" />
</head><body><div class="container-fluid"><div class="row"><header class=" header col-md-12"><nav class="navbar navbar-expand-lg navbar-light bg-light header col-md-12"><span>租房網</span><a class="navbar-brand huawei_logo" href="#"><img src="images/logo.png" alt=""></a><button class="navbar-toggler btn2" type="button" data-toggle="collapse" data-target="#navbarScroll"aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarScroll"><ul class=" navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll offset-md-2" style="max-height: 100px;"><li class="nav-item li"><a class="nav-link" href="#" style="border-bottom: 1px solid orange;">首頁 <span class="sr-only">(current)</span></a></li><li class="nav-item li"><a class="nav-link" href="housenews.html">租房新聞</a></li><!-- <li class="nav-item dropdown li"> --><!-- <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">Link</a> --><!-- <ul class="dropdown-menu offset-md-2"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul> --><!-- </li> --><li class="nav-item li"><a class="nav-link" href="RentalPicks.html">租房精選</a></li><li class="nav-item li"><a class="nav-link" href="homeEchar.html">租房可視化</a></li><li class="nav-item li"><a class="nav-link" href="loginAndRegister.html">登錄</a></li><li class="nav-item li"><a class="nav-link" href="loginAndRegister.html">注冊</a></li></ul><form class="d-flex"><input class="form-control mr-2" type="search" placeholder="查詢" aria-label="Search"><button class="btn btn-outline-success" type="submit">?</button></form></div></nav><div class="banner col-sm-12"><div class="row"><!-- 左邊按鈕 --><div class="banner_prev"></div><!-- 右邊按鈕 --><div class="banner_next"></div><!-- 中間按鈕 --><!-- 了解更多 --><div class="more"><a href="#">了解更多</a></div></div><ul class="banner_middle "><li class="banner_middle_active" data-id="1"></li><li data-id="2"></li></ul></div></header><!-- /* 導航欄縮小時點擊切換 成白板*/ --><div class="div"></div><!-- 推薦信息 開始 --><div class="content col-md-12"><!-- <div class="row"></div> --><div class="content_box col-md-10"><div class="row"><h3 class="col-md-2 offset-md-5 tj">房屋推薦</h3><div class="content_box_left col-md-8 content_Mtop"><a href="hoursDetail.html"><img src="images/70b.jpg" alt=""><div class="content_box_left_hover"><p>海景房</p><p>領包入住</p><p>1000元/月</p><div>了解更多 <span>></span></div></div></a></div><div class="content_box_right col-md-4 content_Mtop"><a href="#"><img src="images/600x450c (1).jpg" alt=""></a><div class="content_box_left_hover"><p>單人公寓</p></p><p>家居齊全</p><p>600元/月</p><div>了解更多 <span>></span></div></div></div><!-- <div class="col-md-3">1</div> --><div class="content_box_left col-md-4 content_Mtop"><a href="#"><img src="images/600x450c.jpg" alt=""><div class="content_box_left_hover"><p>經濟房</p><p>價格實惠</p><p>300元/月</p><div>了解更多 <span>></span></div></div></a></div><div class="content_box_right col-md-8 content_Mtop"><a href="#"><img src="images/content_bottom_right2.jpg" alt=""><div class="content_box_left_hover"><p>市中心</p><p>交通便利</p><p>1500元/月</p><div>了解更多 <span>></span></div></div></a></div><div class="content_box_bottom col-md-12"><div class="row"><div class="col-md-4 content_box_bottom_left content_Mtop"><a href="javaScript:;"><img src="images/banner1.jpg" alt=""><div class="content_box_left_hover"><p>家庭套房</p><p>其樂融融</p><p>2500元/月</p><div>了解更多 <span>></span></div></div></a></div><div class="col-md-4 content_box_bottom_middle content_Mtop"><a href="javaScript:;"><img src="images/bca1c481-a7ae-4d22-9011-3858e2303833.jpg" alt=""><div class="content_box_left_hover"><p>情侶公寓</p><p>水電八折</p><p>800元/月</p><div>了解更多 <span>></span></div></div></a></div><div class="col-md-4 content_box_bottom_right content_Mtop"><a href="javaScript:;"><img src="images/fz.jpg" alt=""><div class="content_box_left_hover"><p>合租公寓</p><p>環境優美</p><p>1200元/月</p><div>了解更多 <span>></span></div></div></a></div></div></div></div></div></div></div></div><script src="js/jquery.min.js"></script><script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script><script src="js/index.js"></script><script>$(function () {// 鼠標經過圖片顯示文字$('.content_box_left_hover').on('mouseenter', function () {$(this).addClass('content_active')// $(this).show(1000)})$('.content_box_left_hover').on('mouseleave', function () {$(this).removeClass('content_active')})})</script>
</body></html>?
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>房屋可視化</title><link rel="stylesheet" href="../zufan/css/homeEchar.css"><link rel="stylesheet" href="../zufan/css/style.css"><!-- 引入boostrap --><link rel="stylesheet" href="../zufan/css/bootstrap.min.css"><script src="../zufan/js/echarts.min.js"></script><link rel="shortcut icon" href="bitbug_favicon.ico" />
</head><body><div class="quan container-fluid"><!-- <div class="row"> --><div class="nav"><div class="nav_left col-md-3 col-xs-12"><div class="row"><div class="nav_logo"><a href="index.html" style="color: aliceblue;"><!-- 這里放lo，o --><!-- <img src="images/logo_color_wt.png" alt=""> -->返回首頁</a><img src="" alt=""></div><div class="nav_date"><!-- 2 --><svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><path fill="#7AE0FF"d="M309.935797 885.784114 177.499744 1004.040223l32.482861-365.364754c0.770649-9.209257 1.502766-18.457047 3.891778-26.125006 2.427545-7.667959 4.932154-13.794619 9.132192-18.457047 0 0 8.554205-7.667959 22.657085-21.501111l41.037066-39.881093 50.747245 53.714245L309.935797 885.784114zM656.650842 901.158564l56.064724 61.420736-66.776747 61.420736L194.569622 1024.000036l138.17739-122.841472L656.650842 901.158564zM690.636469 552.671026c-16.954281 16.877216-30.363576 21.501111-65.659306 21.501111L360.95277 574.172137 305.042175 514.292699l43.695806-44.504987c5.625739-6.126661 12.869841-10.750555 20.268072-13.833152 7.398232-3.044064 13.409295-4.585362 21.077254-4.585362l24.583707 0 265.604224 0 55.872062 59.91797L690.636469 552.671026zM382.877738 122.841472 326.967143 62.923502 392.048462 0l313.191808 0c30.671835 0 45.198572 7.667959 62.26845 27.627771l20.576332 24.583707-78.259419 70.629993L382.877738 122.841472zM725.431277 142.762752l79.762185-70.629993 27.242447 30.710368c3.352324 3.082597 7.089972 10.750555 11.097348 21.501111 1.926623 4.623895 2.35048 9.24779 2.735804 13.833152 0.539454 6.126661-0.038532 16.877216-0.385325 30.710368l-21.578176 227.187364c-2.19635 27.666304-7.359699 38.416859-27.126849 58.338139l-42.578365 39.919625-55.756465-58.338139L725.431277 142.762752z" /></svg><!-- 0 --><svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><path fill="#7AE0FF"d="M305.52383 887.325414l-78.41355 69.088695-23.620396-24.583707c-11.945062-13.833152-19.266228-27.627772-20.499267-41.460923-0.385325-4.585362 0.577987-10.750555 0.192662-15.297385l27.396577-300.938487 65.351047-59.879438L333.382797 574.133606 305.52383 887.325414zM344.133352 451.330666l-68.202448 62.962034-54.639024-62.962034 22.695617-267.10699c3.005532-18.457047 3.583518-29.16907 4.585362-35.334263 1.849558-13.79462 8.592738-24.583707 21.462578-35.29573l41.306794-36.837029 59.609711 67.547397L344.133352 451.330666zM627.578104 901.158566l66.314358 73.674057-34.139757 30.7489c-14.141412 13.756087-30.633303 18.418514-59.802373 18.418514L329.760746 1024.000039c-29.16907 0-46.58574-6.165193-58.415204-18.418514l-27.280979-30.7489 82.613587-73.674057L627.578104 901.158566zM393.686092 122.841472 329.568083 56.835374l29.554394-30.7489C377.463927 7.667959 395.22739 0 418.231266 0l280.940142 0c21.501111 0 42.385702 10.750555 56.026192 26.086473l24.044253 29.207602-80.070445 67.547397L393.686092 122.841472zM680.329037 574.133606l68.279513-61.382204 54.523426 61.382204-22.811214 265.604224c-1.310104 19.959813-3.313791 32.251666-2.928467 36.875561-1.849558 13.756087-8.746868 23.003877-23.003877 35.257198l-44.504988 35.29573-56.026192-61.382204L680.329037 574.133606zM719.478013 144.304051 799.394329 75.215356l18.765306 21.501111c13.64049 15.335918 20.961656 29.16907 22.310292 44.504988 0.539454 6.165193 1.078909 12.291854 0.077065 18.418514l-25.123162 291.690698-69.859344 61.459269-52.982128-61.459269L719.478013 144.304051z" /></svg><!-- 2 --><svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><path fill="#7AE0FF"d="M309.935797 885.784114 177.499744 1004.040223l32.482861-365.364754c0.770649-9.209257 1.502766-18.457047 3.891778-26.125006 2.427545-7.667959 4.932154-13.794619 9.132192-18.457047 0 0 8.554205-7.667959 22.657085-21.501111l41.037066-39.881093 50.747245 53.714245L309.935797 885.784114zM656.650842 901.158564l56.064724 61.420736-66.776747 61.420736L194.569622 1024.000036l138.17739-122.841472L656.650842 901.158564zM690.636469 552.671026c-16.954281 16.877216-30.363576 21.501111-65.659306 21.501111L360.95277 574.172137 305.042175 514.292699l43.695806-44.504987c5.625739-6.126661 12.869841-10.750555 20.268072-13.833152 7.398232-3.044064 13.409295-4.585362 21.077254-4.585362l24.583707 0 265.604224 0 55.872062 59.91797L690.636469 552.671026zM382.877738 122.841472 326.967143 62.923502 392.048462 0l313.191808 0c30.671835 0 45.198572 7.667959 62.26845 27.627771l20.576332 24.583707-78.259419 70.629993L382.877738 122.841472zM725.431277 142.762752l79.762185-70.629993 27.242447 30.710368c3.352324 3.082597 7.089972 10.750555 11.097348 21.501111 1.926623 4.623895 2.35048 9.24779 2.735804 13.833152 0.539454 6.126661-0.038532 16.877216-0.385325 30.710368l-21.578176 227.187364c-2.19635 27.666304-7.359699 38.416859-27.126849 58.338139l-42.578365 39.919625-55.756465-58.338139L725.431277 142.762752z" /></svg><!-- 3 --><svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><path fill="#7AE0FF"d="M606.286201 901.158566l63.000567 70.629993-32.636991 30.710368c-17.069878 15.297385-36.490237 21.501111-71.785967 21.501111L265.505153 1024.000039 209.594558 964.120601l77.373173-62.962034L606.286201 901.158566zM645.242515 451.330666l58.993191 59.91797L634.491959 574.133606 316.714788 574.133606l-60.804217-62.923502 71.51624-59.91797L645.242515 451.292134zM355.516972 122.841472l-57.413361-59.91797L366.267528 0l302.441253 0c13.833152 0 23.158007 1.502766 26.240603 1.502766 10.904685 1.541298 27.203914 12.291854 40.805872 27.704836l20.576332 24.545175-81.457614 69.088695L355.516972 122.841472zM652.987538 592.55212l69.589617-64.4648 27.011252 27.627772c15.297385 16.877216 20.961656 29.16907 22.464422 46.084818 0.693584 7.667959 1.348636 15.297385 0.462389 23.003877l-22.002033 239.517751c-2.19635 27.627772-8.7854 39.919625-30.093849 59.879438l-35.681055 30.710368-57.952815-66.044631L652.987538 592.55212zM693.215423 139.680156l80.031913-67.547397 20.306605 21.501111c11.983594 13.833152 19.304761 27.666304 20.653397 43.002222 0.539454 6.126661-0.038532 16.877216-1.541298 35.29573l-20.422202 222.602003c-2.04222 29.16907-7.244102 39.919625-24.198383 56.796841l-45.352702 42.963689-57.336296-58.33814L693.215423 139.680156z" /></svg><span>年</span><!-- 1 --><svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><path fill="#7AE0FF"d="M416.116778 121.565204 358.155952 66.84561 426.75564 0l220.289268 0L513.315556 121.565204 416.116778 121.565204zM496.194233 568.168615l64.977136-56.24488L617.759438 568.168615 582.410961 963.217398l-66.082967 60.782602L460.883889 963.217398 496.194233 568.168615zM533.563713 144.330081l132.280331-120.001787L628.360168 446.641543l-67.188799 65.320325-54.338274-65.320325L533.563713 144.330081z" /></svg><!-- 1 --><svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><path fill="#7AE0FF"d="M416.116778 121.565204 358.155952 66.84561 426.75564 0l220.289268 0L513.315556 121.565204 416.116778 121.565204zM496.194233 568.168615l64.977136-56.24488L617.759438 568.168615 582.410961 963.217398l-66.082967 60.782602L460.883889 963.217398 496.194233 568.168615zM533.563713 144.330081l132.280331-120.001787L628.360168 446.641543l-67.188799 65.320325-54.338274-65.320325L533.563713 144.330081z" /></svg><span>月</span><!-- 0 --><svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><path fill="#7AE0FF"d="M305.52383 887.325414l-78.41355 69.088695-23.620396-24.583707c-11.945062-13.833152-19.266228-27.627772-20.499267-41.460923-0.385325-4.585362 0.577987-10.750555 0.192662-15.297385l27.396577-300.938487 65.351047-59.879438L333.382797 574.133606 305.52383 887.325414zM344.133352 451.330666l-68.202448 62.962034-54.639024-62.962034 22.695617-267.10699c3.005532-18.457047 3.583518-29.16907 4.585362-35.334263 1.849558-13.79462 8.592738-24.583707 21.462578-35.29573l41.306794-36.837029 59.609711 67.547397L344.133352 451.330666zM627.578104 901.158566l66.314358 73.674057-34.139757 30.7489c-14.141412 13.756087-30.633303 18.418514-59.802373 18.418514L329.760746 1024.000039c-29.16907 0-46.58574-6.165193-58.415204-18.418514l-27.280979-30.7489 82.613587-73.674057L627.578104 901.158566zM393.686092 122.841472 329.568083 56.835374l29.554394-30.7489C377.463927 7.667959 395.22739 0 418.231266 0l280.940142 0c21.501111 0 42.385702 10.750555 56.026192 26.086473l24.044253 29.207602-80.070445 67.547397L393.686092 122.841472zM680.329037 574.133606l68.279513-61.382204 54.523426 61.382204-22.811214 265.604224c-1.310104 19.959813-3.313791 32.251666-2.928467 36.875561-1.849558 13.756087-8.746868 23.003877-23.003877 35.257198l-44.504988 35.29573-56.026192-61.382204L680.329037 574.133606zM719.478013 144.304051 799.394329 75.215356l18.765306 21.501111c13.64049 15.335918 20.961656 29.16907 22.310292 44.504988 0.539454 6.165193 1.078909 12.291854 0.077065 18.418514l-25.123162 291.690698-69.859344 61.459269-52.982128-61.459269L719.478013 144.304051z" /></svg><!-- 3 --><svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><path fill="#7AE0FF"d="M606.286201 901.158566l63.000567 70.629993-32.636991 30.710368c-17.069878 15.297385-36.490237 21.501111-71.785967 21.501111L265.505153 1024.000039 209.594558 964.120601l77.373173-62.962034L606.286201 901.158566zM645.242515 451.330666l58.993191 59.91797L634.491959 574.133606 316.714788 574.133606l-60.804217-62.923502 71.51624-59.91797L645.242515 451.292134zM355.516972 122.841472l-57.413361-59.91797L366.267528 0l302.441253 0c13.833152 0 23.158007 1.502766 26.240603 1.502766 10.904685 1.541298 27.203914 12.291854 40.805872 27.704836l20.576332 24.545175-81.457614 69.088695L355.516972 122.841472zM652.987538 592.55212l69.589617-64.4648 27.011252 27.627772c15.297385 16.877216 20.961656 29.16907 22.464422 46.084818 0.693584 7.667959 1.348636 15.297385 0.462389 23.003877l-22.002033 239.517751c-2.19635 27.627772-8.7854 39.919625-30.093849 59.879438l-35.681055 30.710368-57.952815-66.044631L652.987538 592.55212zM693.215423 139.680156l80.031913-67.547397 20.306605 21.501111c11.983594 13.833152 19.304761 27.666304 20.653397 43.002222 0.539454 6.126661-0.038532 16.877216-1.541298 35.29573l-20.422202 222.602003c-2.04222 29.16907-7.244102 39.919625-24.198383 56.796841l-45.352702 42.963689-57.336296-58.33814L693.215423 139.680156z" /></svg><span>日 星期四</span></div></div></div><div class="nav_middle col-md-6 col-xs-12"><h1>租房網可視化系統</h1></div><div class="nav_right col-md-3 col-xs-12"><div class="row"><div class="nav_crop"><a href="#" class="navright_a1"><span class="navright_span1">朝向</span></span><span class="navright_span2">舒適</span></a></div><div class="nav_area"><a href="#" class="navright_a1"><span class="navright_span1">面積</span><span class="navright_span2">200<span>m</span></span></a></div><div class="nav_address"><a href="#"><span><svg t="1701350552596" class="icon" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg" p-id="7246" width="16" height="16"><pathd="M522.94144 456.192m-240.128 0a240.128 240.128 0 1 0 480.256 0 240.128 240.128 0 1 0-480.256 0Z"fill="#7AE0FF" p-id="7247"></path><pathd="M517.09952 345.6c55.296 0 100.352 45.056 100.352 100.352s-45.056 100.352-100.352 100.352-100.352-45.056-100.352-100.352c0-26.624 10.752-51.712 29.184-70.656 18.944-18.944 44.544-29.696 71.168-29.696m0-60.416c-89.088 0-161.28 72.704-161.28 161.792 0 89.088 72.704 161.28 161.792 161.28 89.088 0 161.28-72.704 161.28-161.792 0-43.008-16.896-83.968-47.616-114.176-30.208-30.208-71.168-47.104-114.176-47.104z"fill="#7AE0FF" p-id="7248"></path><pathd="M794.09152 160.768c-147.968-152.576-391.68-156.672-544.256-9.216l-9.216 9.216c-152.576 157.696-152.576 408.064 0 566.272l276.48 283.136 276.48-283.136c153.088-157.696 153.088-408.576 0.512-566.272z m-41.984 526.336l-235.008 241.664-235.008-241.664c-130.048-133.632-130.048-346.624 0-480.256 125.952-130.048 333.312-133.12 462.848-7.168 2.56 2.048 4.608 4.608 7.168 7.168 130.048 133.632 130.048 346.624 0 480.256z"fill="#7AE0FF" p-id="7249"></path></svg>海南</span></a></div><div class="nav_weather"><a href="#"><span><!-- 2 --><svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><path fill="#7AE0FF"d="M309.935797 885.784114 177.499744 1004.040223l32.482861-365.364754c0.770649-9.209257 1.502766-18.457047 3.891778-26.125006 2.427545-7.667959 4.932154-13.794619 9.132192-18.457047 0 0 8.554205-7.667959 22.657085-21.501111l41.037066-39.881093 50.747245 53.714245L309.935797 885.784114zM656.650842 901.158564l56.064724 61.420736-66.776747 61.420736L194.569622 1024.000036l138.17739-122.841472L656.650842 901.158564zM690.636469 552.671026c-16.954281 16.877216-30.363576 21.501111-65.659306 21.501111L360.95277 574.172137 305.042175 514.292699l43.695806-44.504987c5.625739-6.126661 12.869841-10.750555 20.268072-13.833152 7.398232-3.044064 13.409295-4.585362 21.077254-4.585362l24.583707 0 265.604224 0 55.872062 59.91797L690.636469 552.671026zM382.877738 122.841472 326.967143 62.923502 392.048462 0l313.191808 0c30.671835 0 45.198572 7.667959 62.26845 27.627771l20.576332 24.583707-78.259419 70.629993L382.877738 122.841472zM725.431277 142.762752l79.762185-70.629993 27.242447 30.710368c3.352324 3.082597 7.089972 10.750555 11.097348 21.501111 1.926623 4.623895 2.35048 9.24779 2.735804 13.833152 0.539454 6.126661-0.038532 16.877216-0.385325 30.710368l-21.578176 227.187364c-2.19635 27.666304-7.359699 38.416859-27.126849 58.338139l-42.578365 39.919625-55.756465-58.338139L725.431277 142.762752z" /></svg><!-- 4 --><svg class="icon" width="10px" height="10px" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg"><path fill="#7AE0FF"d="M323.634639 438.182194l-63.990551 60.248634L231.371831 468.306511c-14.854274-15.04326-23.849993-31.636203-25.172892-46.679463-0.52916-5.971947 0.037797-16.555145 0.226783-31.636203L236.625633 63.234608 303.375374 0l53.70973 63.234608L323.634639 438.182194zM647.064729 451.713569l55.108224 61.76052-73.175255 58.736749L380.557126 572.210837c-13.569172 0-22.602687 0-27.251735-1.511885-13.531375 0-30.766868-7.52163-38.968847-15.04326l-38.175107-40.631921 68.261627-63.272405L647.064729 451.751366zM738.533798 963.751366l-65.502436 60.248634-54.957035-60.248634 33.563856-373.511295 64.255131-57.224863 56.204341 57.224863L738.533798 963.751366zM784.41952 438.182194l-65.502436 60.248634-53.596338-61.76052 32.20316-371.923815L764.160256 0l53.860918 64.746493L784.41952 438.182194z" /></svg>°c 晴</span><svg t="1701350192438" class="icon" viewBox="0 0 1024 1024" version="1.1"xmlns="http://www.w3.org/2000/svg" p-id="5989" width="20" height="20"><pathd="M501.48 493.55m-233.03 0a233.03 233.03 0 1 0 466.06 0 233.03 233.03 0 1 0-466.06 0Z"fill="#eeb173" p-id="5990"></path><pathd="M501.52 185.35H478.9c-8.28 0-15-6.72-15-15V87.59c0-8.28 6.72-15 15-15h22.62c8.28 0 15 6.72 15 15v82.76c0 8.28-6.72 15-15 15zM281.37 262.76l-16 16c-5.86 5.86-15.36 5.86-21.21 0l-58.52-58.52c-5.86-5.86-5.86-15.36 0-21.21l16-16c5.86-5.86 15.36-5.86 21.21 0l58.52 58.52c5.86 5.86 5.86 15.35 0 21.21zM185.76 478.48v22.62c0 8.28-6.72 15-15 15H88c-8.28 0-15-6.72-15-15v-22.62c0-8.28 6.72-15 15-15h82.76c8.28 0 15 6.72 15 15zM270.69 698.63l16 16c5.86 5.86 5.86 15.36 0 21.21l-58.52 58.52c-5.86 5.86-15.36 5.86-21.21 0l-16-16c-5.86-5.86-5.86-15.36 0-21.21l58.52-58.52c5.85-5.86 15.35-5.86 21.21 0zM486.41 794.24h22.62c8.28 0 15 6.72 15 15V892c0 8.28-6.72 15-15 15h-22.62c-8.28 0-15-6.72-15-15v-82.76c0-8.28 6.72-15 15-15zM706.56 709.31l16-16c5.86-5.86 15.36-5.86 21.21 0l58.52 58.52c5.86 5.86 5.86 15.36 0 21.21l-16 16c-5.86 5.86-15.36 5.86-21.21 0l-58.52-58.52c-5.86-5.85-5.86-15.35 0-21.21zM802.17 493.59v-22.62c0-8.28 6.72-15 15-15h82.76c8.28 0 15 6.72 15 15v22.62c0 8.28-6.72 15-15 15h-82.76c-8.28 0-15-6.72-15-15zM717.24 273.44l-16-16c-5.86-5.86-5.86-15.36 0-21.21l58.52-58.52c5.86-5.86 15.36-5.86 21.21 0l16 16c5.86 5.86 5.86 15.36 0 21.21l-58.52 58.52c-5.86 5.86-15.35 5.86-21.21 0z"fill="#eeb173" p-id="5991"></path></svg></a></div></div></div></div><div class="main"><div class="main_left col-md-3 col-xs-12"><!-- 邊框盒子 --><div class="main_left1"><div class="m_l_smvideo"></div></div><div class="main_left"><div class="m_l_checkout"><!-- 區塊標題 --><p class="smtitle_p">房屋銷售量</p><div class="smtitle_p_ech"></div></div></div><div class="main_left3"><!-- 歷史溫度 --><div class="m_l_temp"><!-- 區塊標題 --><p class="smtitle_p">全國溫度</p><div class="lisi_ech"></div></div></div></div><!-- 主體中間 --><div class="main_middle col-md-6 col-xs-12"><!-- 氣象預警內容 --><div class="main_point"><p>租房預警：房屋出現空缺，請及時補充。。。。。。</p></div><div class="main_middle1"><div class="main_smvideo"><div class="main_ech"></div><p class="main_smvideo_p">環境優雅<br>適合居住<br>價格便宜，適合打工人</p></div></div><p>正在查看：<span>北京房屋出租</span><span>12:34:23</span></p><div class="main_middle2"><!-- 常規數值檢測 --><div class="m_m_checkout"><!-- 區塊標題 --><p class="smtitle_p">常規數值檢測</p><div class="changgui_ech"></div></div></div></div><!-- 主體右邊 --><div class="main_right col-md-3 col-xs-12"><div class="main_right"><div class="main_right1"><div class="m_r_smvideo"><!-- 區塊標題 --><p class="smtitle_p">環境數值</p><div class="right_ech"></div></div></div><div class="main_right2"><!-- 逐年產量 --><div class="m_r_yield"><!-- 區塊標題 --><p class="smtitle_p">居住人數</p><div class="m_r_ech"></div></div></div><div class="main_right3"><div class="m_r_value"><!-- 區塊標題 --><p class="smtitle_p">居住指數</p><div class="mr_ech"></div></div></div></div></div></div><!-- </div> --></div><script src="../zufan/js/homeEchar.js"></script>
</body></html>?
// 獲取頁面中所有的輸入框元素const inputs = document.querySelectorAll('.input-field')// 獲取頁面中所有的切換按鈕元素const toggle_btn = document.querySelectorAll('.toggle')// 獲取頁面中的main元素const main = document.querySelector('main')// 獲取頁面中所有的小圓點元素const bullets = document.querySelectorAll('.bullets span')// 獲取頁面中所有的圖片元素const images = document.querySelectorAll('.image')// 為所有輸入框元素添加獲取焦點和失去焦點的事件監聽器inputs.forEach(inp => {inp.addEventListener('focus', () => {inp.classList.add('active')})inp.addEventListener('blur', () => {if (inp.value != '') returninp.classList.remove('active')})})// 為所有切換按鈕元素添加點擊事件監聽器toggle_btn.forEach(btn => {btn.addEventListener('click', () => {main.classList.toggle('sign-up-mode')})})// 定義moveSlider函數，用于實現圖片輪播和文本滑動的效果function moveSlider() {// 獲取當前點擊的小圓點的索引值let index = this.dataset.value;// 根據索引值獲取對應的圖片元素let currentImg = document.querySelector(`.img-${index}`)// 將其他圖片元素的show類名移除，將當前圖片元素添加show類名images.forEach(img => {img.classList.remove('show')})currentImg.classList.add('show')// 獲取文本滑動元素const textSlider = document.querySelector('.text-group')// 將文本滑動元素的transform屬性設置為當前索引值對應的位置textSlider.style.transform = `translateY(${-(index - 1) * 2.2}rem)`// 將其他小圓點的active類名移除，將當前小圓點添加active類名bullets.forEach(bullet => {bullet.classList.remove('active')})this.classList.add('active')}// 為所有小圓點元素添加點擊事件監聽器bullets.forEach(bullet => {bullet.addEventListener('click', moveSlider)})
let div = document.querySelector('.div')
// 響應式布局縮小時點擊切換
function nav() {const btn = document.querySelector('header nav button')let flag = truebtn.addEventListener('click', function () {if (flag) {div.style.display = 'block'div.style.right = 0 + 'px'flag = !flagdisableScroll()// document.querySelector('.btn2').style.left = 50 + 'px'}// right: 920px;// width: 935px;else {div.style.right = 920 + 'px'div.style.display = 'none'flag = !flagenableScroll()}})
}
nav()
// 當窗口寬度大于953px時，執行相應的操作
window.addEventListener('resize', function () {if (window.innerWidth >= 953) {div.style.right = 1250 + 'px'div.style.display = 'none'enableScroll() //當頁面縮小時點擊按鈕一次 ，當頁面大于953時 恢復頁面滑動}
});// 禁止頁面滑動
function disableScroll() {// 獲取當前滾動位置var scrollTop = window.pageYOffset || document.documentElement.scrollTop;var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;// 使用 CSS 設置頁面為固定定位，并設置滾動位置document.body.style.position = 'fixed';document.body.style.top = -scrollTop + 'px';document.body.style.left = -scrollLeft + 'px';document.body.style.width = '100%'; // 保持寬度不變，避免頁面抖動// 添加一個類來標記頁面被禁止滾動document.body.classList.add('no-scroll');
}// 恢復頁面滑動
function enableScroll() {// 移除禁止滾動的類document.body.classList.remove('no-scroll');// 獲取之前保存的滾動位置var top = parseFloat(document.body.style.top) || 0;var left = parseFloat(document.body.style.left) || 0;// 使用 CSS 清除固定定位，并恢復滾動位置document.body.style.position = '';document.body.style.top = '';document.body.style.left = '';document.body.style.width = ''; // 恢復寬度// 恢復滾動位置window.scrollTo(-left, -top);
}// 輪播圖
lunbotu()
function lunbotu() {const banner = document.querySelector('.banner')const arr = ['banner1.jpg','banner2.jpg',]const banner_prev = document.querySelector('.banner_prev')const banner_next = document.querySelector('.banner_next')const bn_active = document.querySelector('.banner_middle_active')const ul = document.querySelector('.banner_middle')let i = 0// 點擊 左邊按鈕banner_prev.addEventListener('click', Reduce)// 點擊 右邊按鈕banner_next.addEventListener('click', Add)// 鼠標經過 暫停banner.addEventListener('mouseenter', function () {clearInterval(n)})// 鼠標離開 開啟banner.addEventListener('mouseleave', function () {n = setInterval(Add, 1000)})let n = setInterval(Add, 1000)// 加加function Add() {if (i === arr.length - 1) {i = -1}i++shu(i)}// 減減function Reduce() {if (i === 0) {i = arr.length}i--shu(i)}// 點擊中間按鈕，完成圖片輪播效果ul.addEventListener('click', function (e) {if (e.target.tagName === 'LI') {const banner_middle_active = document.querySelector('.banner_middle_active ')let li = document.querySelector(`.banner_middle li:nth-child(${+e.target.dataset.id})`)banner.style.backgroundImage = `url(./images/${arr[+e.target.dataset.id - 1]})`ul.querySelector('.banner_middle_active').classList.remove('banner_middle_active')li.classList.add('banner_middle_active')}})// 重復代碼function shu(i) {banner.style.backgroundImage = `url(./images/${arr[i]})`let li = document.querySelector(`.banner_middle li:nth-child(${i + 1})`)ul.querySelector('.banner_middle_active').classList.remove('banner_middle_active')li.classList.add('banner_middle_active')}
}?
?如有需要請私聊筆者
 關閉窗口不生效的處理方案)
