- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
尝试将我的网站扩展到移动设备,不允许我使用任何类型的框架。
我想在移动设备上以 block 的形式预览它?我该怎么做,因为我的文本会与我的图像混合,导航栏链接会变得困惑并在彼此之上滑动?
当屏幕变小时,我阅读了带有响应式导航栏的内容,使其成为汉堡菜单。
视口(viewport)设置为: <meta name="viewport" content="width=device-width, initial-scale=1">
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
font-family: Camingo, sans-serif;
}
.bg {
/* The image used */
background-image: url("https://jackdijkema.000webhostapp.com/pics/skrrrt.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.AboutMe {
/* The image used */
background-color: white;
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.Hoofdnav {
font-family: Camingo, sans-serif;
font-size: 25px;
width: 100%;
position: absolute;
bottom: 100px;
font-weight: 300;
}
.Hoofdnav li {
display: inline-block;
width: 33.3%;
text-align: center;
}
.Hoofdnav ul {
letter-spacing: 4px;
list-style-type: none;
margin: 0 auto;
width: 30%;
}
.Hoofdnav a {
color: white;
text-decoration: none;
}
.Hoofdnav a:hover {
font-weight: bold;
text-outline: white 2px;
}
.AboutMe h1 {
font-family: Camingo;
text-align: center;
font-size: 20px;
font-weight: 700;
margin-top: 3% ;
text-transform: uppercase;
/* text-decoration: underline;*/
position:absolute;
margin-left: 25%;
}
.AboutMe p {
font-family: Camingo, sa;
text-align: left;
margin-top: -18% ;
margin-left: 25%;
font-size: 19px;s
}
.AboutMe img {
margin-top: 1.5%;
margin-left: 5%;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Jack Dijkema</title>
<link href="CSS/main.css" rel="stylesheet" />
<link rel="stylesheet" href="CSS/header.css" />
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/pics/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/pics/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/pics/favicon-16x16.png">
<link rel="manifest" href="/pics/site.webmanifest">
<link rel="mask-icon" href="/pics/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/pics/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/pics/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="bg"></div>
<hr>
<div class="AboutMe">
<h1>ABOUT</h1>
<img src="https://jackdijkema.000webhostapp.com/pics/rsz_150982648_370567113534046_8331947271073836645_n%20(1).jpg" alt="Picture of Jack Dijkema About me section">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet hendrerit turpis.<br> Mauris commodo
est ex, ac convallis tellus feugiat ac.<br>
Praesent sit amet arcu quis elit pulvinar rhoncus.<br> Proin viverra lacinia ante, at interdum magna posuere eget.
Cras rhoncus a neque ac scelerisque.<br> Pellentesque habitant morbi tristique senectus.
</p>
</div>
<div class="myProjects">
<footer>
Jack Dijkema Copyright 2019 -
</footer>
</div>
<nav class="Hoofdnav">
<ul>
<li><a href="index.html">AboutMe</a></li><li><a href="index.html">Projects</a></li><li><a rel="noopener" target="_blank" href="pdf/Jack%20Dijkema%20CV.pdf">CV</a></li>
</ul>
</nav>
</body>
</html>
I also uploaded the whole website to:
https://jackdijkema.000webhostapp.com/
If u scale it to mobile device everything gets messed up.
最佳答案
我建议通读此 wiki on W3Schools.
基本上您需要做的是查看 CSS 中的媒体查询,因为它允许您在屏幕处于特定大小时设置不同的样式。
您还可以查看此 example of a responsive header.使用媒体查询可以在不使用 Bootstrap 或框架的情况下进行响应式设计。
关于html - 使我的网站能够扩展到移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55485343/
如何将浮点 10 字节十六进制字符串(Delphi 中的扩展数据类型)转换为 C# 数据类型? 例如:00 00 00 00 00 00 00 80 ff 3f 在 Delphi 1 最佳答案 涉及同
我正在阅读 this page上面写着 If one of the strings has an encoding prefix and the other doesn't, the one that
我有以下代码(作为示例),我想对其进行调整,以使功能区扩展到整个 xrange,如 geom_hline()做。功能区指示哪些值在可接受的范围内。在我的实际应用程序中,有时没有上限或下限,因此 hli
去年,斯科特·格思里 stated “如果您想要对执行的 SQL 进行绝对控制,您实际上可以覆盖 LINQ to SQL 使用的原始 SQL”,但我找不到描述可扩展性方法的文档。 我想修改以下 LIN
我尝试在我的应用中创建一个抽屉导航。我有 3 个当前选项(查看、声明、报告),当然这 3 个 Activity 已扩展到 fragment。在View 中,它有一个next 按钮,该按钮将转到另一个页
很抱歉,如果我的问题被重复,但我无法(或不知道如何谷歌)找到答案。我想使用 rxlifecycle-navi 库来将 rxjava 绑定(bind)到生命周期,所以我需要扩展 NaviActivity
有这个html: aaa 做的时候: $('#hi1').sayHi(); 我想收到一条“嗨”提醒 有人知道这是怎么做到的吗? 最佳答案 了解更多关于jQuery plugin authoring
我有一个 UIImageView 和一个 UITextView。当点击 UITextView 时,我需要 UITextView 在 UIImageView 上展开。我不知道该怎么做。 从这里 为此 最
以下语句: URLClassLoader ucl = (URLClassLoader) ClassLoader.getSystemClassLoader(); Class uclc = ucl.get
以下语句: URLClassLoader ucl = (URLClassLoader) ClassLoader.getSystemClassLoader(); Class uclc = ucl.get
$的意思是什么!在 shell 或 shell 脚本中?我正在尝试理解具有以下内容的脚本。 local@usr> a=1 local@usr> echo $a 1 local@usr> echo $!
我正在 GWT 中设计一个简单的应用程序,并且在客户端有不同的 View 。每个 View 都从 SimplePanel 扩展而来,并将根据需要添加到 RootPanel。 我的第一个 View 是
我尝试在 SQL Azure 选项卡中从 S2 扩展到 S3,但 S3 似乎不可用,尽管它已被引入。另外,我还有大量可用的 DTU,即 1900 左右。是否无法扩展到 S3?我是否需要导出数据库,然后
我有一个带有 JS、html 和 css 的自定义视频播放器。我的问题的关键是我没有预料到将其从一个视频扩展到两个视频,我希望重构它,以便我可以在一个页面上播放多个视频。我尝试将所有内容重写为 for
我当前正在开发的应用程序需要可扩展的实时通信。我们一直在研究并尝试 Firebase 实时数据库和 firestore。看来Firebase实时数据库更加成熟并且经过测试,而firestore仍处于测
当 pod 被 daemonset 控制时,pod 会出现一些错误,状态会是 CrashLoopBackOff ,我想删除这些 Pod 但不想删除 DaemonSet。 所以我想把daemonset缩
我有 Jframe 表单并创建了从中绘制图形的类,为此我需要将该 void 类扩展为 jframe 表单 package grafiktest; import java.awt.Color; impo
在布局和尺寸策略方面,我从来都不是太出色,所以这可能是一个简单的答案,但就是这样。 当我向 QTabWIdget 添加新选项卡并将小部件设置为 QSplitter 时,拆分器将使用给定的全部空间量。但
我在将我的 S4 对象转换回列表时遇到了一些问题。例如,以下嵌套的 S4 类: setClass("nssItem", representation(value = "numeric
在阅读了 DDD 的一些页面后,我了解了存储库模式,然后在应用程序中成功使用了它(我真的很喜欢它);然后我注意到 EntityManager 是 generic-repository-like,但是当
我是一名优秀的程序员,十分优秀!