个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
设计响应式网站时一切顺利，直到我决定开始设计我的 header 样式我选择的设计 font-family , font-size及其 letter-spacing根据我的喜好，当我将它的大小调整到移动设备时，当它小于 600px 时，一切都变得有点奇怪.
为什么我的标题现在从我的 <body></body> 中伸出来了？以一种奇怪的方式，即使我的<div class = "header></div>还在<body></body>里面标签。 查看屏幕截图如有任何帮助，我们将不胜感激。
这是我的 HTML 和 CSS
*{
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* The header section */
.header {
background-color: #ccccff;
text-align: center;
padding: 80px;
}
.header h1 {
font-size: 68px;
font-family: "Lucida Console", Monaco, monospace;
letter-spacing: 10px;
}
/* The main content section */
.content {
padding: 10px;
background: #e6e6e6;
}
.content h2 {
text-align: center;
}
.content p {
margin: 30px;
}
/* Three equal columns */
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* This is the footer section */
footer {
width: 100%;
height: 100%;
padding: 50px;
text-align: center;
background: lightgreen;
}
/* Responsive design starts here */
@media only screen and (max-width: 768px) {
.column {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<title>Title Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- This is a header -->
<div class="header">
<h1>Website Title</h1>
<p>Dolor sed veniam minim eiusmod sint labore elit lilamco dolor in in dolor clipa occaecat do.</p>
</div>
<!-- This is the main content -->
<div class="content">
<!-- About section -->
<h2>About</h2>
<p>
Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim. Sed ut lilamco veniam est esse tempor in anim excepteur lilamco excepteur deserunt ad. Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad velit clipa aliqua id sunt clipa nlila aliqua laboris.
</p>
<!-- 3 column responsive layout -->
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>
Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
</p>
<ul>
<li>Skill 1</li>
<li>Skill 2</li>
<li>Skill 3</li>
<li>Skill 4</li>
<li>Skill 5</li>
</ul>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>
Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
</p>
<ul>
<li>Skill 1</li>
<li>Skill 2</li>
<li>Skill 3</li>
<li>Skill 4</li>
<li>Skill 5</li>
</ul>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>
Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
</p>
<ul>
<li>Skill 1</li>
<li>Skill 2</li>
<li>Skill 3</li>
<li>Skill 4</li>
<li>Skill 5</li>
</ul>
</div>
</div>
</div>
<!-- This is the footer -->
<div class="footer">
<footer>
Person Name © 2019
</footer>
</div>
</body>
</html>最佳答案
类型太大，无法在提供的空间中呈现。您有几个选择:减小字体大小，或使用 word-break: break-word 告诉浏览器在单词边界之前拆分文本。
关于html - h1 标题标题没有响应我的网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59368506/
25
4
0
我尝试在安装了多类型 MFC 库的 visual studio 2015 MFC 上运行以前编写的 MFC c++ 代码。 但是，我这里仍然有 12 个关于缺少函数的错误: IntelliSense:
我正在学习 OOP 并且有疑问。假设我有一个包含 ClassB.h 的文件 ClassA.h，并且在某些时候我的 ClassB.h 需要包含 ClassA .h。 这会产生一个错误，我想我明白为什么会
我开始使用 CUDA 进行编程，在一些示例中我找到了包含文件 cuda.h、cuda_runtime.h 和 cuda_runtime_api.h 包含在代码中。有人可以向我解释一下这些文件之间的区别
我有一些生成正则表达式的代码。那么下面的表达式实际上是: ^(?:\s*((exclude|include|hide|show|protect|risk|dir-merge|merge)),\s*((
我一直在查看一些源代码，以更好地了解我们使用的这款游戏的核心，并编写更可靠、更快速的插件。然后我发现了这段奇怪的代码...... public void setMaxH(double amount)
通常我们会使用标准类型作为 std::unordered_map 的键和值.但现在我需要自定义我自己的键和值类。 键类在block_cache_key.h 中定义如下: #ifndef BLOCK_C
例如，我想要两个头文件，它们可以依赖于另一个头文件中的函数。 //Header1.h file #include Header2.h void h1(){ //... func1(); } v
我正在研究来自 Sedgewick 的 Shell 排序 Algorithms in C part 1-4在第 172 页。 我使用 size (数组的长度)，而不是 l和 r (开始和结束)；所以我
我在 macOS BigSur 上通过 VMWare 使用 Ubuntu 20.04.2 LTS。我安装了最新版本的 tcl、tcl-dev、tk 和 tk-dev - 版本 8.6。我想编译 Arc
我用我的 glu 和 gl 头文件构建了一个 OpenGL 程序，默认包含在 windows 7 专业版中。现在，我买了一本描述 OpenGL 游戏开发的书。这本书的作者说，我必须在我的项目中包含 g
我想在 token 中保留特殊字符，同时仍对特殊字符进行 token 化。说我有话 "H&R Blocks" 我想将其标记为 "H", "R", "H&R", "Blocks" 我读了http://w
关于 hash 作为 trans 参数的另一个问题。在下面的代码中，简单地使用 hash 会给出不正确的结果，但是将其替换为 keys 和 values 会使其正确。怎么了？ my @alph1 =
我已经编写了一个 C 程序，它获取屏幕像素的 RGB 值 (0-255)，并知道其位置 (x,y)。它可以在 Linux 中运行，但是当我尝试在 Visual Studio (Windows) 中编译
我已经使用 Windows 7 专业版中默认包含的 glu 和 gl 头文件构建了一个 OpenGL 程序。现在，我买了一本描述 OpenGL 游戏开发的书。这本书的作者说，我必须将glew head
#include using namespace std; #include //#include int main() { initscr();
h:messages h:form 内的组件还显示与外部组件相关的消息。 如何限制它只显示与包含 h:form 内的组件相关的消息？ 我不喜欢用单独的h:message来使我的代码膨胀。每个输入组件的
我下载了示例代码和 cpp 文件，其中包含 list.h、queue.h 和 vector.h 等头文件，如果我尝试构建，我会收到“ fatal error :没有这样的文件或目录编译终止”我想我应该
我有一个编译成功的桌面项目，但是在我向项目添加新配置以支持 Windows Mobile 平台后，我收到以下错误: error C2146: syntax error : missing ';' be
有很多关于这个错误的帖子，但我无法解决它，我希望你能拿出解决方案。我在 Ubuntu 机器上。 ~/graphmap2$ 在这个文件夹中，我下载了 zlib。可以看图 经过一番谷歌搜索后，我还注意到没
是否可以在 Visual C++ 中使用以下 header : 图.h dos.h bios.h 最佳答案 据我所知，无法在 Visual C++ 中使用它， 与此同时，我希望您关注 Open Wat
我是一名优秀的程序员,十分优秀！