將HTML預覽分成多頁
[英]Divide HTML preview into multiple pages
問題描述
實際上，我正在嘗試創建表單實時預覽。 此預覽基於 HTML 文件。 我將通過 HTML FORM 和使用 jquery 從用戶那里獲取輸入，我會將輸入值放入 HTML 頁面元素以進行預覽。 但我正面臨這個問題。 問題如下：
問題：在HTML PREVIEW PAGE上粘貼所有內容后，頁面變長。 我想將 HTML 切成部分並像所附圖像一樣顯示。 此圖像還包括分頁，這將使用戶在單個 HTML 預覽的不同切片之間移動。
我的 html 頁面代碼附在下面，我需要將此 html 分成兩部分並隱藏第二部分，當我們點擊查看第二部分時，第一部分將隱藏，第二部分將顯示。 我需要這個設計，就像我之前附上的圖片一樣。
<div style="max-width: 1140px; margin:40px auto 40px auto;padding: 0; margin: 0; background: #f2f2f2; font-size: 1rem; line-height: 1.5rem; color: #746873;">
<header style="border: solid 1px #121212; padding: 1.8rem 0 4.1rem 0;text-align: center; margin-bottom: 3rem;">
<h1 id="name" style="font-size: 4.6rem;line-height: 1rem;font-weight: 400; letter-spacing: 1px;color: #000; text-transform:uppercase;"><span id="fnameH">Bianca</span> <span id="lnameH">Cruz</span></h1>
<h2 id="jobtitleH" style="font-size: 2rem;line-height: 0rem; letter-spacing: .29rem; text-transform:uppercase;">Executive managing director</h2>
</header>
<section style="display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;">
<div style="width: 25%; padding-right: 3rem; position: relative; float: left; box-sizing: border-box;">
<h3 id="contactH" style="font-size: 2rem; line-height: 2.2rem; text-transform: uppercase; margin:0 0 20px 0; letter-spacing: .20rem;">Contact</h3>
<div style="display: flex; clear: both; margin-top: 1rem; margin-bottom: 1rem;">
<div style="font-size: 25px; width: 20%; float: left; margin-top: 3px;">
<img id="addresslabelH" src="http://localhost/proresume/public/assets/images/location-icon.png" width="30" alt="location" />
</div>
<div style="width: 80%; float: right;">
<p id="addressH" style="margin:0">3120 Fairmont Ave. Rushville MO Missouri </p>
</div>
</div>
<div style="display: flex; clear: both; margin-top: 1rem; margin-bottom: 1rem;">
<div style="font-size: 25px; width: 20%; float: left; margin-top: 3px;">
<img id="emaillabelH" src="http://localhost/proresume/public/assets/images/email-icon.png" width="30" alt="email" />
</div>
<div style="width: 80%; float: right;">
<p style="margin:0"><a id="emailH" style="color:#746873; text-decoration:none;" href="mailto:biancacruz@mail.com">biancacruz@mail.com</a> </p>
</div>
</div>
<div style="display: flex; clear: both; margin-top: 1rem; margin-bottom: 1rem;">
<div style="font-size: 25px; width: 20%; float: left; margin-top: 3px;">
<img id="phoneNumberlabelH" src="http://localhost/proresume/public/assets/images/phone-icon.png" width="30" alt="phone" />
</div>
<div style="width: 80%; float: right;">
<p id="phoneNumberH" style="margin:0">660-235-9645 </p>
</div>
</div>
<div style="display: flex; clear: both; margin-top: 1rem; margin-bottom: 1rem;">
<div style="font-size: 25px; width: 20%; float: left; margin-top: 3px;">
<img id="sociallabelH1" src="http://localhost/proresume/public/assets/images/url-icon.png" width="30" alt="url" />
</div>
<div style="width: 80%; float: right;" id="socialx">
<div id="socialdlH1" class="socialdlH">
<a id="sociallinkH1" href="" style="color: #746873; text-decoration:none;">linkedin.com/biancacruz</a>
</div>
</div>
</div>
<div id="eduex">
<div class="eduDeH">
<h3 data-xtr-key="Education" style="font-size: 2rem; line-height: 2.2rem; text-transform: uppercase; margin:40px 0 20px 0; letter-spacing: .20rem;">Education</h3>
<p style="color: #000; font-weight:600; margin:15px 0 0 0;">
<span id="edustartH1">2010</span> - <span id="eduendH1">2017</span> <span id="degreenameH1">Master of Business</span>
</p>
<p id="edudescriptionH1" style="margin:5px 0 0 0;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
</p>
<p style="color: #000; font-weight:600; margin:15px 0 0 0;">
<span id="edustartH2">2010</span> - <span id="eduendH2">2017</span> <span id="degreenameH2">BA of Commerce</span>
</p>
<p id="edudescriptionH2" style="margin:5px 0 0 0;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
</p>
</div>
</div>
<h3 data-xtr-key="Languages" style="font-size: 2rem; line-height: 2.2rem; text-transform: uppercase; margin:40px 0 20px 0; letter-spacing: .20rem; border-bottom: solid 1px #dedede; padding: 0px 0 8px 0;">Languages</h3>
<p id="languagesnameH1" style="color:#000;font-weight:600; margin:0;">
Language (native)
</p>
<div id="languagesProBarH1" style="background: #b3b3b3; justify-content: flex-start; align-items: center; position: relative; display: flex; height: 15px; width: 100%; margin-top: 4px; margin-bottom: 15px;">
<span id="languagesProBarValH1" style="box-shadow: 0 10px 40px -10px #8d899b; background: #8d899b; height: 15px; width:100%;"></span>
</div>
<p id="languagesnameH2" style="color:#000;font-weight:600; margin:0;">
Some Language (C1)
</p>
<div id="languagesProBarH2" style="background: #b3b3b3; justify-content: flex-start; align-items: center; position: relative; display: flex; height: 15px; width: 100%; margin-top: 4px; margin-bottom: 15px;">
<span id="languagesProBarValH2" style="box-shadow: 0 10px 40px -10px #8d899b; background: #8d899b; height: 15px; width:80%;"></span>
</div>
<p id="languagesnameH3" style="color:#000;font-weight:600; margin:0;">
One More Language (B1)
</p>
<div id="languagesProBarH3" style="background: #b3b3b3; justify-content: flex-start; align-items: center; position: relative; display: flex; height: 15px; width: 100%; margin-top: 4px; margin-bottom: 15px;">
<span id="languagesProBarValH3" style="box-shadow: 0 10px 40px -10px #8d899b; background: #8d899b; height: 15px; width:60%;"></span>
</div>
</div>
<div style="width: 75%; position: relative; float: left; box-sizing: border-box; border-left: solid 1px #121212;">
<div style="position: relative;padding-left: 4rem;padding-bottom: 2.4rem;">
<span id="timelineLevel01H" style="position: absolute;top: -1px;left: -30px;background: #8d899b;width: 60px; height: 60px;border-radius: 50%; color: #fff;font-size: 30px; font-weight: 600;text-align: center;line-height: 60px;display: block;">01</span>
<h4 data-xtr-key="Objective" style="margin:0;font-size: 2rem;line-height: 2.4rem; text-transform:uppercase; padding: 0px 0 8px 0;border-bottom: solid 1px #dedede;margin-bottom: 1.3rem;">Professional profile</h4>
<p id="objectiveH">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
</p>
</div>
<div style="position: relative;padding-left: 4rem;padding-bottom: 2.4rem;">
<span id="timelineLevel02H" style="position: absolute;top: -1px;left: -30px;background: #8d899b;width: 60px; height: 60px;border-radius: 50%; color: #fff;font-size: 30px; font-weight: 600;text-align: center;line-height: 60px;display: block;">02</span>
<h4 data-xtr-key="Professional Experience" style="margin:0;font-size: 2rem;line-height: 2.4rem; text-transform:uppercase; padding: 0px 0 8px 0;border-bottom: solid 1px #dedede;margin-bottom: 1.3rem;">Work experience</h4>
<div id="workex">
<div id="workexpH1" class="workexpH">
<p style="color: #000; font-weight:600; margin:25px 0 0 0;">
<span id="jobstartH1">2010</span> - <span <span id="jobuptoH1">2017</span>
<span id="employernameH1">Company Name</span> / <span id="jobtitleH1">Position</span>
</p>
<div id="jobdescriptionH1">
<p style="margin:5px 0 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</p>
<ul style="margin: 7px 0 0 0;">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Duis autem vel eum iriure dolor in hendrerit in</li>
<li>Ut wisi enim ad minim veniam nisl ut aliquip ex</li>
<li>Quis nostrud exerci tation ullamcorper suscipit</li>
</ul>
</div>
</div>
<div id="workExLevel02">
<p style="color: #000; font-weight:600; margin:25px 0 0 0;">
<span id="jobstartH2">2009</span> - <span id="jobuptoH2">2010</span>
<span id="employernameH2">Company Name</span> / <span id="jobtitleH2">Position</span>
</p>
<div id="jobdescriptionH2">
<p style="margin:5px 0 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<ul style="margin: 7px 0 0 0;">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Duis autem vel eum iriure dolor in hendrerit in</li>
</ul>
</div>
</div>
<div id="workExLevel03">
<p style="color: #000; font-weight:600; margin:25px 0 0 0;">
<span id="jobstartH3">2008</span> - <span id="jobuptoH3">2009</span>
<span id="employernameH3">Company Name</span> / <span id="jobtitleH3">Position</span>
</p>
<div id="jobdescriptionH3">
<p style="margin:5px 0 0 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
</div>
</div>
<div style="position: relative;padding-left: 4rem;padding-bottom: 2.4rem;">
<span id="timelineLevel03H" style="position: absolute;top: -1px;left: -30px;background: #8d899b;width: 60px; height: 60px;border-radius: 50%; color: #fff;font-size: 30px; font-weight: 600;text-align: center;line-height: 60px;display: block;">03</span>
<h4 data-xtr-key="Skills" style="margin:0;font-size: 2rem;line-height: 2.4rem; text-transform:uppercase; padding: 0px 0 8px 0;border-bottom: solid 1px #dedede;margin-bottom: 1.3rem;">Professional skills</h4>
<div style="display:block; clear:both">
<div style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style=" text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_1" style="padding: 30px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">Communi-<br/>cation</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
<div id="skilllevelH_2" style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style=" text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_2" style="padding: 30px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">Team work</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
<div id="skilllevelH_3" style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style=" text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_3" style="padding: 30px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">work ethic</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
<div id="skilllevelH_4" style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style="text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_4" style="padding: 30px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">Problem solving</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
<div id="skilllevelH_5" style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style=" text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_5" style="padding: 30px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">Time managing</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
<div id="skilllevelH_6" style="font-size:20px; margin:5px; position:relative; padding:0; width:5em; height:5em; float:left; border-radius:50%; line-height:5em; background:#8e8a9c; background:-moz-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:-webkit-linear-gradient(left,#8e8a9c 0%,#e1deda 100%); background:linear-gradient(to right,#8e8a9c 0%,#e1deda 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8e8a9c',endColorstr='#e1deda',GradientType=1)">
<div style="text-align: center; display: block; border-radius: 50%; width: 4.3em; height: 4.3em; background-color: #f2f2f2; margin:6px auto 0 auto;">
<span id="skillnameH_6" style="padding: 36px 10px 20px 10px; font-size: .8rem; line-height: 1rem; text-transform: uppercase;width: 5em; text-align: center; display: block; color: #010101; font-weight: 500;">flexible</span>
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);">
<div style="border-radius: 50%; width: 5em; height: 5em; position: absolute; clip: rect(0,5em,5em,2.5em);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
1 個解決方案
解決方案1
0 2020-07-26 19:03:52
高拉夫
您可以使用 Bootstrap 選項卡，因為您沒有提供代碼片段，我將無法對其進行自定義以適合您的應用程序，但您可以對其進行編輯並添加一些 JS 以在單擊時切換選項卡
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min:js"></script> </head> <body> <div class="container"> <h3>Tabs</h3> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> </ul> <br> <p><strong>Note.</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.</p> </div> </body> </html>
我想在canvas html標簽中顯示多個頁面預覽
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.