gpt4 book ai didi

html - 使用 UIKit 的目录页面

转载 作者:行者123 更新时间:2023-11-28 15:12:49 25 4
gpt4 key购买 nike

我正在使用 UIKit 开发一个页面,其中内容表 float 在右侧,文本位于内容表周围的左侧(屏幕截图如下)。到目前为止,我已经成功开发了该页面。但是,我很难让这个页面响应所有设备。我希望我的目录堆叠在顶部,而文章应该在小型设备的下方,在大型设备上,右侧的目录和左侧的文本。以下是我正在处理的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<div class="uk-container uk-padding uk-margin-medium-bottom ">
<article class="uk-article">
<div class="uk-width-xxlarge uk-margin-auto uk-text-center">
<h1 class="uk-article-title">Security </h1>
</div>

<div class="toc uk-float-right uk-margin-left uk-margin-bottom uk-margin-top ">
<h4 style="margin:0px">
<b>Contents</b>
</h4>
<hr>

<!-- Table of content list starts from here -->
<ul class="listOfContent">
<li>
<a href="#introduction">Introduction</a>
<ul>
<a href="#overview" class="uk-scroll"><li>Overview</li></a>
</ul>
</li>

<!--Introduction finsih here -->
<li>Contents</li>
<li><a href="#infra">Infrastructure Security</a>
<ul>
<li>Datacenters
<ul>
<li>Availability and Resiliency</li>
</ul>
</li>
<li> Configuration Management
<ul>
<li>Patching Policy</li>
<li>Server Authentication</li>
</ul>
</li>
<li>Monitoring</li>
<li>Automated Scanning
<ul>
<li>Vulnerablity Scanning</li>
<li>Intrusion Detection</li>
<li>Data Leak Scanning</li>
</ul>
</li>
</ul>
</li>
<!--Infrastructure Secuirty finish here -->
<li>Data Security
<ul>
<li>Privacy</li>
<li>Data Sovereignty
<ul>
<li>Leaving the Org</li>
</ul>
<li>Support Access</li>
</li>
</ul>
</li>
<!--Data Secuirty list close here -->

<li>Web Application Secuirty
<ul>
<li>Change Management
<ul>
<li>CI/CD</li>
<li>Testing</li>
</ul>
</li>
<li>User Authentication
<ul>
<li>Password Storage</li>
<li>Password Requirements</li>
<li>Google Authentication Support
<ul>
<li>Two/Multi-factor Authentication</li>
</ul>
</li>
</ul>
</li>
<li>Encryption
<ul>
<li>HTTPS/TLS</li>
<li>Encryption in Transit</li>
<li>Encryption at Rest</li>
</ul>
</li>
</ul>
</li>
<!--Web application list finishes here -->

<li>Network Secuirty
<ul>
<li>Firewalls</li>
<li>Network Flow Monitoring</li>
</ul>
</li>
<!-- Network finsihes here -->
<li>Backups and Business Continuity</li>
<ul>
<li>Database Backups
<ul>
<li>Ppint In Time Recovery via Automated Backups</li>
<li> Cross Region Copied Snapshots</li>
</ul>

</li>
<li>Other Backups</li>
</ul>
</ul>
</div>
<!--Start of the article -->
<div class=" uk-align-center uk-flex-first@l uk-flex-first@m uk-flex-last@s ">
<div>
<span class="anchor" id="introduction"></span>
<!-- <div class="introduction"> -->
<h3 >Introduction</h3>
<p class="uk-article-lead"> This Company is a SaaS platform used to collect and analyse customer feedback and survey. development team is based in Germany<br/> <br/>
This is a collection of topics that describe how we run securely. They're intended as a high-level introduction to how we deal with security, in order to help you with your decision making process. More details are available on request - just ask your sales representative.
</p>
</div>
<!--Overview div -->
<div>
<h3>Overview</h3>

<p> As a very high-level summary:
<ul>
<li>The Company has strong application, network and infrastructure-level security controls in place to ensure your data is safely stored and processed
<br/><br/></li>
<li>Comaony serves multiple tenants from the same application codebase, but uses effective isolation techniques to keep tenant data separate
<br/><br/></li>
<li>Comopany observes privacy laws, which are broadly compatible with many other jurisdictions (for example, we support the rights of access and rectification for data subjects)
<br/>
<br/></li>
<li>Company is hosted on AWS, in multiple regions, using VPC
You'll find more information on each of these points in the detailed chapters documents below. <br/></br></li>
</ul>
</p>
</div>

<!--divider style="overflow: hidden;" -->
<hr style="overflow: hidden;">

<!-- Infrastructure Div -->

<div>
<span class="anchor" id="infra"></span>
<h3>Infrastructure Security</h3>
<h5 id="datacenters" style="margin-bottom:0px;"><b>Datacenters </b></h5>
<p>
Company's products are hosted with the world’s leading data centre provider, Amazon Web Services (AWS). Access to these datacenters is strictly controlled and monitored by 24x7 on-site security staff, biometric scanning and video surveillance.
AWS maintains multiple certifications for its data centres, including ISO 27001 compliance, PCI Certification, and SOC reports. For more information about their certification and compliance, please visit the AWS Security website and the AWS Compliance website.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- </div> -->
<br/>
</div>
</article>
</div>
</body>
</html>

SCREEN SHOT

最佳答案

我已经编辑了你的代码,还有一些html错误,所以一定要检查你的代码。

您可以通过 !important 规则覆盖 TOC 的行为,但它可能会导致问题,或者在某些情况下不会起作用,因为 UIKit 中还有其他规则使用 !important,因此最好创建您自己的自定义类并将此行为应用于它。

我创建了一个 .custom-toc 类,它基本上复制了 .uk-float-right.uk-margin-left 当屏幕宽度小于 X 时,删除这些规则..

对于此代码段,我已将 max-width 设置为 768px,因此在预览时,TOC 位于顶部,当您单击“整页”时,您将看到 TOC正确的..

/* assign a lower value, something between 480 and 568 should be fine */
.custom-toc {
float: right;
margin-left: 20px;
}
@media (max-width: 768px) {
.custom-toc {
float: none;
margin-left: 0;
}
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />

<div class="uk-container uk-padding uk-margin-medium-bottom ">
<article class="uk-article">
<div class="uk-width-xxlarge uk-margin-auto uk-text-center">
<h1 class="uk-article-title">Security </h1>
</div>

<div class="toc custom-toc uk-margin-bottom uk-margin-top ">
<h4 style="margin:0px">
<b>Contents</b>
</h4>
<hr>

<!-- Table of content list starts from here -->
<ul class="listOfContent">
<li>
<a href="#introduction">Introduction</a>
<ul>
<a href="#overview" class="uk-scroll">
<li>Overview</li>
</a>
</ul>
</li>

<!--Introduction finsih here -->
<li>Contents</li>
<li><a href="#infra">Infrastructure Security</a>
<ul>
<li>Datacenters
<ul>
<li>Availability and Resiliency</li>
</ul>
</li>
<li> Configuration Management
<ul>
<li>Patching Policy</li>
<li>Server Authentication</li>
</ul>
</li>
<li>Monitoring</li>
<li>Automated Scanning
<ul>
<li>Vulnerablity Scanning</li>
<li>Intrusion Detection</li>
<li>Data Leak Scanning</li>
</ul>
</li>
</ul>
</li>
<!--Infrastructure Secuirty finish here -->
<li>Data Security
<ul>
<li>Privacy</li>
<li>Data Sovereignty
<ul>
<li>Leaving the Org</li>
<li>Support Access</li>
</ul>
</li>
</ul>
</li>
<!--Data Secuirty list close here -->

<li>Web Application Secuirty
<ul>
<li>Change Management
<ul>
<li>CI/CD</li>
<li>Testing</li>
</ul>
</li>
<li>User Authentication
<ul>
<li>Password Storage</li>
<li>Password Requirements</li>
<li>Google Authentication Support
<ul>
<li>Two/Multi-factor Authentication</li>
</ul>
</li>
</ul>
</li>
<li>Encryption
<ul>
<li>HTTPS/TLS</li>
<li>Encryption in Transit</li>
<li>Encryption at Rest</li>
</ul>
</li>
</ul>
</li>
<!--Web application list finishes here -->

<li>Network Secuirty
<ul>
<li>Firewalls</li>
<li>Network Flow Monitoring</li>
</ul>
</li>
<!-- Network finsihes here -->
<li>Backups and Business Continuity</li>
<ul>
<li>Database Backups
<ul>
<li>Ppint In Time Recovery via Automated Backups</li>
<li> Cross Region Copied Snapshots</li>
</ul>

</li>
<li>Other Backups</li>
</ul>
</ul>
</div>
<!--Start of the article -->
<div class=" uk-align-center uk-flex-first@l uk-flex-first@m uk-flex-last@s ">
<div>
<span class="anchor" id="introduction"></span>
<!-- <div class="introduction"> -->
<h3>Introduction</h3>
<p class="uk-article-lead"> This Company is a SaaS platform used to collect and analyse customer feedback and survey. development team is based in Germany<br/> <br/> This is a collection of topics that describe how we run securely. They're intended as a high-level introduction
to how we deal with security, in order to help you with your decision making process. More details are available on request - just ask your sales representative.
</p>
</div>
<!--Overview div -->
<div>
<h3>Overview</h3>

<p> As a very high-level summary: </p>
<ul>
<li>The Company has strong application, network and infrastructure-level security controls in place to ensure your data is safely stored and processed
</li>
<li>Comaony serves multiple tenants from the same application codebase, but uses effective isolation techniques to keep tenant data separate
</li>
<li>Comopany observes privacy laws, which are broadly compatible with many other jurisdictions (for example, we support the rights of access and rectification for data subjects)
</li>
<li>Company is hosted on AWS, in multiple regions, using VPC You'll find more information on each of these points in the detailed chapters documents below.
</li>
</ul>
</div>

<!--divider style="overflow: hidden;" -->
<hr style="overflow: hidden;">

<!-- Infrastructure Div -->

<div>
<span class="anchor" id="infra"></span>
<h3>Infrastructure Security</h3>
<h5 id="datacenters" style="margin-bottom:0px;"><b>Datacenters </b></h5>
<p>
Company's products are hosted with the world’s leading data centre provider, Amazon Web Services (AWS). Access to these datacenters is strictly controlled and monitored by 24x7 on-site security staff, biometric scanning and video surveillance. AWS maintains
multiple certifications for its data centres, including ISO 27001 compliance, PCI Certification, and SOC reports. For more information about their certification and compliance, please visit the AWS Security website and the AWS Compliance website.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- </div> -->
<br/>
</div>
</article>
</div>

或者如果你只想使用 UIKit 类,你可以使用 .uk-align-right@s.uk-align-right@m 这将适用该类仅在指定宽度上并且它也结合了 float 和边距(但有时很难对其进行微调,所以我更喜欢自定义类,@s 的 640px 介于移动设备和平板电脑之间......)。这里我使用 @m 只是为了在代码片段中更好地演示行为,在您的代码中,您应该使用 @s

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />

<div class="uk-container uk-padding uk-margin-medium-bottom ">
<article class="uk-article">
<div class="uk-width-xxlarge uk-margin-auto uk-text-center">
<h1 class="uk-article-title">Security </h1>
</div>

<div class="toc uk-align-right@s uk-margin-bottom uk-margin-top">
<h4 style="margin:0px">
<b>Contents</b>
</h4>
<hr>

<!-- Table of content list starts from here -->
<ul class="listOfContent">
<li>
<a href="#introduction">Introduction</a>
<ul>
<a href="#overview" class="uk-scroll">
<li>Overview</li>
</a>
</ul>
</li>

<!--Introduction finsih here -->
<li>Contents</li>
<li><a href="#infra">Infrastructure Security</a>
<ul>
<li>Datacenters
<ul>
<li>Availability and Resiliency</li>
</ul>
</li>
<li> Configuration Management
<ul>
<li>Patching Policy</li>
<li>Server Authentication</li>
</ul>
</li>
<li>Monitoring</li>
<li>Automated Scanning
<ul>
<li>Vulnerablity Scanning</li>
<li>Intrusion Detection</li>
<li>Data Leak Scanning</li>
</ul>
</li>
</ul>
</li>
<!--Infrastructure Secuirty finish here -->
<li>Data Security
<ul>
<li>Privacy</li>
<li>Data Sovereignty
<ul>
<li>Leaving the Org</li>
<li>Support Access</li>
</ul>
</li>
</ul>
</li>
<!--Data Secuirty list close here -->

<li>Web Application Secuirty
<ul>
<li>Change Management
<ul>
<li>CI/CD</li>
<li>Testing</li>
</ul>
</li>
<li>User Authentication
<ul>
<li>Password Storage</li>
<li>Password Requirements</li>
<li>Google Authentication Support
<ul>
<li>Two/Multi-factor Authentication</li>
</ul>
</li>
</ul>
</li>
<li>Encryption
<ul>
<li>HTTPS/TLS</li>
<li>Encryption in Transit</li>
<li>Encryption at Rest</li>
</ul>
</li>
</ul>
</li>
<!--Web application list finishes here -->

<li>Network Secuirty
<ul>
<li>Firewalls</li>
<li>Network Flow Monitoring</li>
</ul>
</li>
<!-- Network finsihes here -->
<li>Backups and Business Continuity</li>
<ul>
<li>Database Backups
<ul>
<li>Ppint In Time Recovery via Automated Backups</li>
<li> Cross Region Copied Snapshots</li>
</ul>

</li>
<li>Other Backups</li>
</ul>
</ul>
</div>
<!--Start of the article -->
<div class=" uk-align-center uk-flex-first@l uk-flex-first@m uk-flex-last@s ">
<div>
<span class="anchor" id="introduction"></span>
<!-- <div class="introduction"> -->
<h3>Introduction</h3>
<p class="uk-article-lead"> This Company is a SaaS platform used to collect and analyse customer feedback and survey. development team is based in Germany<br/> <br/> This is a collection of topics that describe how we run securely. They're intended as a high-level introduction
to how we deal with security, in order to help you with your decision making process. More details are available on request - just ask your sales representative.
</p>
</div>
<!--Overview div -->
<div>
<h3>Overview</h3>

<p> As a very high-level summary: </p>
<ul>
<li>The Company has strong application, network and infrastructure-level security controls in place to ensure your data is safely stored and processed
</li>
<li>Comaony serves multiple tenants from the same application codebase, but uses effective isolation techniques to keep tenant data separate
</li>
<li>Comopany observes privacy laws, which are broadly compatible with many other jurisdictions (for example, we support the rights of access and rectification for data subjects)
</li>
<li>Company is hosted on AWS, in multiple regions, using VPC You'll find more information on each of these points in the detailed chapters documents below.
</li>
</ul>
</div>

<!--divider style="overflow: hidden;" -->
<hr style="overflow: hidden;">

<!-- Infrastructure Div -->

<div>
<span class="anchor" id="infra"></span>
<h3>Infrastructure Security</h3>
<h5 id="datacenters" style="margin-bottom:0px;"><b>Datacenters </b></h5>
<p>
Company's products are hosted with the world’s leading data centre provider, Amazon Web Services (AWS). Access to these datacenters is strictly controlled and monitored by 24x7 on-site security staff, biometric scanning and video surveillance. AWS maintains
multiple certifications for its data centres, including ISO 27001 compliance, PCI Certification, and SOC reports. For more information about their certification and compliance, please visit the AWS Security website and the AWS Compliance website.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- </div> -->
<br/>
</div>
</article>
</div>

关于html - 使用 UIKit 的目录页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48016662/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com