- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试为作业制作作品集,当我尝试缩小页面窗口时,文本会重叠,使一切变得困惑。我曾经用 min-width 解决过这个问题,但这次我似乎无法解决。
我不明白为什么它一直这样做,我是 HTML/CSS 的“新手”,缺乏解决这个问题的经验,如果有人能帮助我解决这个问题,我将不胜感激。
谢谢。
HTML
<head>
<title>CPD Portfolio - Home</title>
<meta charset="UTF-8">
<meta name="description" content="CPD Portfolio">
<meta name="author" content="Ashley Tanner-Mortell">
<meta name="viewport" content="width=device-width, inital=scale=1">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<ul>
<li><a class="active" href="home_page.html">Home</a></li>
<li><a href="university.html">University</a></li>
<li><a href="sports.html">Sports</a></li>
<li><a href="student_mentor.html">Student Mentor</a></li>
</ul>
<div id="gradient">
<div class="container">
<img src="images/ntu1.jpg" style="width:100%; height:600px; object-fit:cover; border-style: solid; text-align: center;">
<div class="centered" style="top:15%">CPD Portfolio</div>
<div class="centered" style="top:20%;">_______________</div>
<div class="centered" style="top:30%; font-size:6vh;">Ashley Tanner-Mortell</div>
</div>
</div>
</body>
<footer>
<p>Footer Details</p>
</footer>
</html>
CSS
body,html{
margin: 0;
min-width:500px;
}
footer {
float: left;
background-color: grey;
padding: 0;
width: 100%;
text-align: center;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(to right, silver, lightgrey);
}
li {
list-style-type: none;
float: left;
}
li a {
list-style-type: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
list-style-type: none;
background-color: #E1E1DC;
}
.active {
background-color: #00628B;
}
.container {
margin: 0;
color: white;
font-size: 8vh; /*The vh is viewported by the height, use this for the scaling of text.*/
}
.centered {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
#gradient {
height: 1300px;
background-color: grey; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, silver, white); /* Standard syntax (must be last) */
}
.box1, .box2{
border-style: solid;
border-width: 1px;
background-color: #F5F5F5;
}
.box1{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box2{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box3{
float: center;
width: 90%;
}
最佳答案
给你,只需替换下面的代码 HTML 和 CSS - 请参阅我的评论以了解更改后的代码。
CSS
body,html{
margin: 0;
min-width:500px;
}
footer {
float: left;
background-color: grey;
padding: 0;
width: 100%;
text-align: center;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(to right, silver, lightgrey);
}
li {
list-style-type: none;
float: left;
}
li a {
list-style-type: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
list-style-type: none;
background-color: #E1E1DC;
}
.active {
background-color: #00628B;
}
.container {
margin: 0;
color: white;
font-size: 8vh; /*The vh is viewported by the height, use this for the scaling of text.*/
}
.centered {
position: absolute;
top: 10px;
left: 0;
right:0;
/* transform: translate(-50%, -50%); */
}
#gradient {
height: 1300px;
background-color: grey; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, silver, white); /* Standard syntax (must be last) */
}
.box1, .box2{
border-style: solid;
border-width: 1px;
background-color: #F5F5F5;
}
.box1{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box2{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box3{
float: center;
width: 90%;
}
/* added css for portfolio section */
.portfolioSection{
padding-top: 100px;
text-align: center
}
/* added css for portfolio heading */
.portfolioHead{
border-bottom:1px solid #000;
display: inline-block;
}
HTML
<ul>
<li><a class="active" href="home_page.html">Home</a></li>
<li><a href="university.html">University</a></li>
<li><a href="sports.html">Sports</a></li>
<li><a href="student_mentor.html">Student Mentor</a></li>
</ul>
<div id="gradient">
<div class="container">
<img src="images/ntu1.jpg" style="width:100%; height:600px; object-fit:cover; border-style: solid; text-align: center;">
<!-- wrapped your divisions with parent devision for better control through out screens -->
<div class="centered portfolioSection">
<!-- added class to control heading styles -->
<div class="portfolioHead">CPD Portfolio</div>
<div style="font-size:6vh;">Ashley Tanner-Mortell</div>
</div>
</div>
</div>
</body>
<footer>
<p>Footer Details</p>
</footer>
还建议您完成这个 - https://www.w3.org/还有 youtube 一些关于 HTML 和 CSS 的免费教程,因为我可以在你的 css 和 html 中看到许多基本问题。 :)
关于html - 当我缩放页面时,文本一直相互重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59020561/
这个问题已经有答案了: Resolve build errors due to circular dependency amongst classes (12 个回答) 已关闭 3 个月前。 如何允许
让 2 个 Swing 部件做同样的工作是很常见的。例如,我们可以在工具栏中使用一个 button 作为“保存”按钮,而 JMenuItem (文件保存...)也可以做同样的事情。 我的问题是: 有没
我使用 fragment 已经有一段时间了,但我经常遇到一个让我烦恼的问题。 fragment 有时会相互吸引。现在,我设法为此隔离了一个用例,它是这样的: Add fragment A(也使用 ad
我正在使用具有相互 SSL 安全性的 WCF 服务,我想检查一下我对何时使用什么证书的理解。 这是正确的吗? 客户端将客户端公共(public)证书交给服务器 服务器将服务器公共(public)证书交
假设您有一个相互 SSL 服务,除了 SSL 之外,它还有应用程序身份验证。因此,客户端提供证书(以及服务器),但客户端请求(例如 REST 请求)还包含后端应用程序服务器用于验证的用户名/密码。 就
有人让 Android uiautomator 可以同时在多个设备上运行,但做不同的事情吗? 我的意思是,我希望我的测试同时启动设备和应用程序,然后设备 A 执行设备 B 必须使用react的操作。这
我目前正在尝试在客户端和服务器之间实现双向 TLS 身份验证。我遇到了一个 SSL 错误,它的描述性不强。 StackOverflow 也没有太多与之相关的问题,因为大多数时候它是互联网上的单向 TL
这里是新手。我正在做我的第一个元素,我想为不同的人(普通人、 worker 、农民等)提供 slider ,但我不知道如何放置多个 slider 以及如何让它们全部工作。我从 W3schools 获取
我创建了一张翻转卡片,但卡片内的所有 div 似乎都浮在彼此之上。我希望 div 彼此相邻。 我看了很多问题,但似乎找不到答案。我尝试了多种显示:内联;职位:相对;向左飘浮;清除:两者;但我似乎无法让
我正在使用此控件来安排时间。我有一个单选按钮列表,然后是多个内容 Pane 。根据内容,我想在正确的控件中淡入淡出。但出于某种原因,在 div 上放置一个 float 并设置 z-index 并不能使
有什么方法可以解密双向 SSL(客户端和服务器,两种方式)? 我找到了这个链接:https://www.wireshark.org/lists/wireshark-users/201001/msg00
我正在开发一个 Web 应用程序,安全性是我们在此应用程序中的主要关注点之一。我正在查看不同的 API 安全方法(在 OWASP 中提到),无法理解相互 SSL 身份验证和基于 token 的身份验证
我正在尝试使用分配给 kube-dns 服务的集群 IP 从 dnstools pod ping kube-dns 服务。 ping 请求超时。在同一个 dnstools pod 中,我尝试使用暴露的
过去几天我一直在研究这个问题,但我一无所获。 场景是: 现场的 iOS 应用程序将调用我的 REST 服务 (.NET)。我的 REST 服务将使用相互 SSL 握手调用 Apache Web 服务。
我正在尝试向 java swing 应用程序添加 3 个 JSlider,以便三个 slider 的总值(value)总和为 100。每个 slider 都是一个概率, slider A 是将值添加到
我们正在使用 java 客户端(openJDK 1.8.0) 调用需要相互身份验证的 api。为此,我们使用 Java 标准 JKS 文件作为 keystore 和信任库(包含信任证书和身份证书/私钥
有人告诉我使用双向身份验证连接到客户的服务器。服务器身份验证工作顺利,但我们在获取客户端身份验证方面遇到了巨大的麻烦。让我试着解释一下我们的麻烦。 前段时间我公司在 GeoTrust 购买了一个证书,
正在试用 PAW 并且非常喜欢它。我唯一无法正常工作的是使用 HTTPS 相互身份验证。我需要与之交互的一些 API 需要相互验证的 https。 如何告诉 PAW 使用证书进行身份验证?该证书已经在
我们有一个在 Jboss EAP 5.1 中部署并使用 Spring 2.5 已经运行了一年多的 CXF webservice 我们现有的客户证书管理策略如下: 对于非 PROD,证书名为“NAME-
我正在创建一个将调用 API 的 Windows 服务。对于这个过程,我正在尝试建立相互(双向)SSL 身份验证。因为我是新手。我尝试实现一个简单的客户端和服务器项目,它们将相互进行身份验证。 我已经
我是一名优秀的程序员,十分优秀!