想要做一个一个页面实现上下分页的效果

微悠凉风 · 发表于 2020-4-22 08:27:03

本帖最后由微悠凉风于 2020-4-22 10:57 编辑

QQ截图20200421200942.png

参考的edge 的样式，
QQ截图20200421201220.png

想要实现的就是初始进入的时候是一个简约的首部，内容需要通过下滑来调出或者点击下拉的按钮，
基本上就是参照 edge 的新建标签页的样式
QQ截图20200421201049.png

但是自己在布局的时候，首部的 div 和主体的div 位置重合，滚动条都无法出现，，edge的布局应该是和响应式方面的布局有关，但是理不清出头绪，请大佬指点

永恒的蓝色梦想 · 发表于 2020-4-22 14:44:52

是不是可以参考一下网页源代码？

<!DOCTYPE html>
<html lang="zh-cn" dir="ltr" >
<head data-info="f:msnallexpusers,muidflt10cf,muidflt11cf,muidflt12cf,muidflt27cf,muidflt29cf,retroaa-tt,muidflt57cf,muidflt258cf,pneedge1cf,compliancehp1cf,starthz1cf,msnapp1cf,anaheim1cf,jslltelemetry,1s-bing-news;" data-client-settings="{"env":"prod", "aid":"385A76D2447945A78E1B7F150386A354", "static_page":"false", "queryparams":"?locale=zh-cn&dsp=0&sp=%E7%99%BE%E5%BA%A6", "apptype":"edgeChromium", "cbid":"1", "pagetype":"ntp", "configRootUrl":"https://assets.msn.com/config/v1/", "configIndexDocId":"cms/api/amp/experienceConfigIndex/BBViXsS", "feedBaseDomain":"", "deviceFormFactor":"desktop", "pageGenTime":"2020-04-22T06:44:22Z", "featureFlags":{}, "market":{}, "locale":{"language":"zh", "script":"", "market":"cn"}, "v":"20200410.1", "os":"windows", "browser":{"browserType":"edgeChromium", "version":"81", "ismobile":"false"}, "domain":"ntp.msn.cn", "geo_country":"CN", "geo_countryname":"China", "geo_subdivision":"Hebei", "geo_zip":"061100", "geo_city":"Huanghua", "geo_lat":"38.3714", "geo_long":"117.33"}">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script type="text/javascript" nonce="+86ZiUAOpr3Kxir8HJHQaGY55X2xDQfZMbov6hgby2I=">
if(matchMedia("(prefers-color-scheme:dark)").matches){const s=document.createElement("style");document.head.appendChild(s);s.type="text/css";s.appendChild(document.createTextNode("body{background:#242424}"));}
</script>
<script type="text/javascript" nonce="+86ZiUAOpr3Kxir8HJHQaGY55X2xDQfZMbov6hgby2I=">
const _clientSettings = JSON.parse(document.head.dataset.clientSettings);
const _webWorkerBundle = "/bundles/v1/edgeChromium/latest/web-worker.e5b2c6381746147031a7.js";
const _authCookieName = "aace";
!function(e,t,o){const n=t,i=o,r="weaSpartanHomeLocation",a="weaPeregrineHomeLocation",c="weaDetectLocation",d="weaPeregrineDetectLocation";let s=null,l=document.head.dataset.info;function g(e){if(!s){const e=document.cookie.split("; ");s={};const t=e&&e.length;for(let o=0;o<t;o++){const t=e[o].split("=");s[t[0].toLocaleLowerCase()]=decodeURIComponent(t[1])}}const t=e.toLocaleLowerCase(),o=s[t];return o&&encodeURIComponent(o)}function p(e,t,o){return e?t+"="+(o||e)+"&":""}function u(e,t){return p(e.env,"env")+p(e.aid,"aid")+p(e.apptype,"apptype")+p(e.pagetype,"pagetype")+p(e.audienceMode,"audienceMode")+p(e.configIndexDocId,"configIndexDocId")+p(e.deviceFormFactor,"deviceFormFactor")+p(e.domain,"domain")+p(e.feedBaseDomain||location.origin,"feedBaseDomain")+p(e.configRootUrl,"configRootUrl")+p(function(e,t){try{const o=parseInt(e),n=parseInt(JSON.parse(localStorage.getItem(`cbid_${t||""}`)));let i;if(o&&!isNaN(o)&&n&&!isNaN(n)&&(i=o>n?o:n),i=i||o||n)return window._cbid=i.toString()}catch(e){console.log("Error getting highest CBID: "+e)}}(e.cbid,e.apptype),"cbid")+p(e.os,"os")+p(JSON.stringify(e.locale),"locale")+p(e.geo_lat,"lat")+p(e.geo_long,"long")+("dhp"===e.pagetype||"ntp"===e.pagetype?p(g(r),r)+p(g(c),c):p(g(a),a)+p(g(d),d))+p(JSON.stringify(e.featureFlags),"featureFlags")+p(JSON.stringify(e.browser),"browser")+p(t,"dataInfo")}let w=n+"#"+p(document.getElementsByTagName("html")[0].getAttribute("lang"),"lang")+(p(g(i),"aace","1")+p(g("muid"),"muid")+p(g("child"),"child"))+function(){let t,o;if(document.querySelector("[manifest]")){let n=JSON.parse(localStorage.getItem("ac_shd"));if(n){let i=n[e.pagetype];i&&i.clientSettings&&i.info&&(t=i.clientSettings,o=i.info)}}return t&&o||(t=e,o=l),u(t,o)}()+p(performance.timeOrigin,"mainTimeOrigin")+function(){let e=location.search;return e&&e.length?e.substring(1,e.length):""}();window.webWorker=new Worker(w,{name:"web-worker"}),window.webWorkerErrors=[],window.webWorker.onerror=function(e){window.webWorkerErrors.push(e)},window.chrome&&(window.webWorker&&chrome&&chrome.ntpSettingsPrivate&&"function"==typeof chrome.ntpSettingsPrivate.getPref&&chrome.ntpSettingsPrivate.getPref("ntp.news_feed_display",function(e){e&&e.value&&window.webWorker.postMessage({id:"FeedDisplaySetting",type:"command",payload:e.value})}),l&&l.includes("prg-enterpriseblended-t")&&"enterprise"===e.audienceMode&&"edgeChromium"===e.apptype&&new Promise(e=>{window.chrome&&window.chrome.authPrivate?window.chrome.authPrivate.getPrimaryAccountInfo(t=>{t||e("");const o={account_id:t.account_id,account_type:t.account_type,client_id:"d7b530a4-7680-4c23-a8bf-c52c121d2e87",scope_or_resource:"f920ab6b-8a48-4438-9255-1650179a3a0f"};window.chrome.authPrivate.acquireAccessTokenSilently(o,t=>{t.is_success?e(t.access_token):e("")})}):e("")}).then(e=>{window.webWorker.postMessage({id:"FetchMyFeed",type:"command",payload:e})}))}(_clientSettings,_webWorkerBundle,_authCookieName);
</script>
<script nonce="+86ZiUAOpr3Kxir8HJHQaGY55X2xDQfZMbov6hgby2I=">
function getCookieConsentRequired(){return false;}
!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";let o,r;function i(){if(!o){const e=document.head.getAttribute("data-client-settings");e&&(o=JSON.parse(e))}return o}n.r(t);const c={mmx:"emmx",edge:"spartan",edgeChromium:"anaheim",hybrid:"spartan"};function a(e,t,n){try{const o=function(e,t,n){const o=i();if(o){n=n||{};const{env:i,apptype:a,pagetype:u,pageGenTime:l,v:s}=o;n.pageGenTime=l,n.build=s,r="prod"===i?"otf.msn.com":"udc.amp-test.com";const f=c[a],p=a+"-"+u,g=document.getElementsByTagName("html")[0].getAttribute("lang");let d="";try{!(getCookieConsentRequired&&"function"==typeof getCookieConsentRequired&&getCookieConsentRequired())&&getCookie&&"function"==typeof getCookie&&(d=getCookie("muid"))}catch(e){console.log("error fetching muid.")}return{evt:"app_error","pg.n":"default","pg.p":f,"pg.t":u,aid:o.aid,muid:d,mkt:g,errId:e,errMsg:t,errSource:p,pb:JSON.stringify(n)}}return null}(t,e,n);if(o){const e="https://"+r+"/c.gif"+function(e){return"?"+Object.keys(e).map(function(t){return t+"="+encodeURIComponent(e[t])}).join("&")}(o),t=new XMLHttpRequest;t.open("GET",e),t.send()}else console.log("missing parameters in data-client-settings. "+e)}catch(t){console.log("error logging the app error. "+e)}}function u(e,t,n,o,r){const c={source:t,customMessage:"JS Exception. "+e,line:n,column:o};try{a(e,20203,c)}finally{if(r&&"SyntaxError"===r.name){const e=["vendors","common","microsoft","experience","web-worker"];for(const n of e)if(t.includes(n)){const e=i(),t=e&&e.bco||0,n=void 0,o=navigator&&navigator.cookieEnabled;if(t<3&&!n&&o){const e=new Date;e.setTime(e.getTime()+2592e6),document.cookie=`bco=${t+1}; expires=${e.toUTCString()}; path=/`,setTimeout(location.reload,200)}else l(19002,c);break}}}}function l(e,t){try{a("Navigating to local ntp on JS Exception.",e,t)}finally{setTimeout(()=>{location.replace("chrome-search://local-ntp/local-ntp.html")},200)}}globalThis.onErrorHandler=e=>{const t="Error when loading bundle: "+e;try{a(t,20202,{})}finally{l(19003,{customMessage:t})}},globalThis.onerror=u}]);
</script>
<link rel='dns-prefetch' href='//img-s-msn-com.akamaized.net' crossorigin='use-credentials'><link rel='dns-prefetch' href='//assets.msn.com' crossorigin='use-credentials'><link rel='dns-prefetch' href='//assets.msn.com' crossorigin='anonymous'><link rel='dns-prefetch' href='//api.msn.com' crossorigin='use-credentials'><link rel='dns-prefetch' href='//c.msn.com' crossorigin='use-credentials'><link rel='dns-prefetch' href='//c.bing.com' crossorigin='use-credentials'><link rel='dns-prefetch' href='//sb.scorecardresearch.com' crossorigin='use-credentials'><link rel='dns-prefetch' href='//otf.msn.com' crossorigin='use-credentials'>
<link rel='preconnect' href='//img-s-msn-com.akamaized.net' crossorigin='use-credentials'><link rel='preconnect' href='//assets.msn.com' crossorigin='use-credentials'><link rel='preconnect' href='//assets.msn.com' crossorigin='anonymous'><link rel='preconnect' href='//api.msn.com' crossorigin='use-credentials'><link rel='preconnect' href='//c.msn.com' crossorigin='use-credentials'><link rel='preconnect' href='//c.bing.com' crossorigin='use-credentials'><link rel='preconnect' href='//sb.scorecardresearch.com' crossorigin='use-credentials'><link rel='preconnect' href='//otf.msn.com' crossorigin='use-credentials'>
<link rel='icon' href='https://assets.msn.com/statics/icons/ntp-favicon.png' type='image/png' crossorigin='anonymous' sizes='32x32'>
</head>
<body>
<div id="root" data-config-indexdocid="cms/api/amp/experienceConfigIndex/BBViXsS"></div>
<script nonce="+86ZiUAOpr3Kxir8HJHQaGY55X2xDQfZMbov6hgby2I=">
!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";t.r(n);var r;function o(e,n,t,r){return new(t||(t=Promise))(function(o,i){function u(e){try{c(r.next(e))}catch(e){i(e)}}function _(e){try{c(r.throw(e))}catch(e){i(e)}}function c(e){e.done?o(e.value):new t(function(n){n(e.value)}).then(u,_)}c((r=r.apply(e,n||[])).next())})}!function(e){e[e.NTP_ALL_TILES_LOADED=11]="NTP_ALL_TILES_LOADED",e[e.NTP_ALL_TILES_RECEIVED=12]="NTP_ALL_TILES_RECEIVED",e[e.NTP_SHORTCUT_CUSTOMIZED=39]="NTP_SHORTCUT_CUSTOMIZED",e[e.NTP_CUSTOMIZE_ADD_SHORTCUT_CLICKED=44]="NTP_CUSTOMIZE_ADD_SHORTCUT_CLICKED",e[e.NTP_CUSTOMIZE_SHORTCUT_REMOVE=53]="NTP_CUSTOMIZE_SHORTCUT_REMOVE",e[e.NTP_CUSTOMIZE_SHORTCUT_CANCEL=54]="NTP_CUSTOMIZE_SHORTCUT_CANCEL",e[e.NTP_CUSTOMIZE_SHORTCUT_DONE=55]="NTP_CUSTOMIZE_SHORTCUT_DONE",e[e.NTP_CUSTOMIZE_SHORTCUT_ADD=58]="NTP_CUSTOMIZE_SHORTCUT_ADD",e[e.NTP_CUSTOMIZE_SHORTCUT_UPDATE=59]="NTP_CUSTOMIZE_SHORTCUT_UPDATE",e[e.NTP_BACKGROUND_IMAGE_LOADED=60]="NTP_BACKGROUND_IMAGE_LOADED",e[e.NTP_VISUALLY_READY=62]="NTP_VISUALLY_READY"}(r||(r={}));const i={logEvent:function(e){const n=window.chrome,t=n&&n.embeddedSearch&&n.embeddedSearch.newTabPage;t&&t.logEvent(e)}};function u(e){return new Promise(n=>{let t=window.chrome;if(t){const r=t.ntpSettingsPrivate;if(r&&"function"==typeof r.getPref)return void r.getPref(e,t=>{n(t&&t.key===e?t.value:null)})}n(null)})}const _="ntp.show_image_of_day";const c="undefined"!=typeof window?window.location.href:"",T=`lastKnown_${c}`,l=`timestamp_${c}`;let a;function f(){if(a)return a;if(!window||!window.localStorage)return null;const e=window.localStorage.getItem(l);if(!e)return null;const n=parseInt(e);if(!n)return null;if((new Date).getTime()>=n)return null;const t=window.localStorage.getItem(T);if(!t)return null;try{a=JSON.parse(t)}catch(e){return null}return a&&a.dom&&a.batch_css||(a=null),a}!function(){o(this,void 0,void 0,function*(){(yield function(){return o(this,void 0,void 0,function*(){if("true"===new URL(window.location.href).searchParams.get("cache"))return!0;const e=yield u("ntp.news_feed_display");return e&&"always"!==e})}())&&function(){const e=document.getElementById("root");if(!e)return console.error("RenderCache Error: Root node is null."),!1;window.renderCacheEnabled=!0;const n=f();if(!n)return!1;const t=document.getElementsByTagName("head")[0],r=document.createElement("style");return r.innerHTML=n.batch_css,t.appendChild(r),e.innerHTML=n.dom,window.needsHydrate=!0,n.markers&&n.markers.length&&n.markers.forEach(e=>{window.performance.mark(e)}),!0}()&&(i.logEvent(r.NTP_ALL_TILES_LOADED),u(_).then(e=>{e&&i.logEvent(r.NTP_BACKGROUND_IMAGE_LOADED),i.logEvent(r.NTP_VISUALLY_READY)}))})}()}]);
</script>
<script src='https://assets.msn.cn/bundles/v1/edgeChromium/latest/vendors.cddf9e612e8707b79f9b.js?v1' type="text/javascript" onerror="onErrorHandler(this.src)" nonce="+86ZiUAOpr3Kxir8HJHQaGY55X2xDQfZMbov6hgby2I=" async crossorigin="anonymous"></script>
<script src='https://assets.msn.cn/bundles/v1/edgeChromium/latest/microsoft.8da0edb3e659de6da0e9.js?v1' type="text/javascript" onerror="onErrorHandler(this.src)" nonce="+86ZiUAOpr3Kxir8HJHQaGY55X2xDQfZMbov6hgby2I=" async crossorigin="anonymous"></script>
<script src='https://assets.msn.cn/bundles/v1/edgeChromium/latest/common.e2467c56282fa206ef93.js?v1' type="text/javascript" onerror="onErrorHandler(this.src)" nonce="+86ZiUAOpr3Kxir8HJHQaGY55X2xDQfZMbov6hgby2I=" async crossorigin="anonymous"></script>
<script src='https://assets.msn.cn/bundles/v1/edgeChromium/latest/experience.95bfbe7c1a9a704c5e5f.js?v1' type="text/javascript" onerror="onErrorHandler(this.src)" nonce="+86ZiUAOpr3Kxir8HJHQaGY55X2xDQfZMbov6hgby2I=" async crossorigin="anonymous"></script>
</body>
</html>

复制代码

weiter · 发表于 2020-4-22 16:02:34

永恒的蓝色梦想发表于 2020-4-22 14:44
是不是可以参考一下网页源代码？

！这么长的吗？？？

weiter · 发表于 2020-4-22 16:03:53

永恒的蓝色梦想发表于 2020-4-22 14:44
是不是可以参考一下网页源代码？

你这想法我跟他说过，他看晕了……（我也晕）
原贴

wp231957 · 发表于 2020-4-22 16:22:47

weiter 发表于 2020-4-22 16:03
你这想法我跟他说过，他看晕了……（我也晕）
原贴

这是发重复贴子的理由吗

weiter · 发表于 2020-4-22 16:53:31

wp231957 发表于 2020-4-22 16:22
这是发重复贴子的理由吗

也许不是

倒戈卸甲 · 发表于 2020-4-22 17:08:39

不会。问就是Bootstrap框架上复制粘贴

微悠凉风 · 发表于 2020-4-22 20:21:16

谢谢各位提供的方法，
论坛用的少，规则很多方面不清楚，一般都是比较光棍的直接提问题，然后大家给回了。
白嫖的不好意思了，设个悬赏，没想太多，
重复贴问题，请指教一下，怎么删除

陈尚涵 · 发表于 2020-5-16 13:23:27

CSS+HTML+JS就能做出来。JS的思路是这样的：

如果用户滚动或下拉滚动条，那就将这个图片的位置进行改变~本人已经做过不少这样的网页了

陈尚涵 · 发表于 2020-7-12 13:03:25

滚动条的话弄个CSS不就出现了

账号		自动登录	找回密码
密码			立即注册

[技术交流] 想要做一个一个页面实现上下分页的效果