个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我正在创建自己的网站。使用无序列表制作我自己的标题 + 导航栏。
我遇到的问题是标题没有延伸到浏览器的边缘。唯一可行的方法是在 css“header”中使用。
position:absolute;
我不希望使用绝对定位，但希望将标题保持在最顶部。
这是由于浏览器默认设置导致标题沿“填充”吗？ (CSS 重置可以修复它吗？)
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="certscss.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h2>My website!</h2>
<ul>
<li> <a href="aboutme.html">About Me </a></li>
<li> <a href="accomplishments.html">Accomplishments </a></li>
<li class="activemenutab"> <a href="certs.html">Certifications and Skills </a></li>
<li> <a href="extra.html">Extracirriculars </a></li>
<li> <a href="portfolio.html">Portfolio </a></li>
<li> <a href="contact.html">Contact </a></li>
</ul>
</header>
<h3>Certifications and Skills</h3>
<footer>
© Mywebsite 2015
</footer>
</body>
</html>
CSS:
@charset "UTF-8";
html {
background-color:#B5B5B5
}
header {
left:0;
right:0;
margin:0;
top:0;
}
h2 {
background-color:#000000;
color:#d9d9d9;
text-align:center;
font-size: 2.8em;
margin:0;
}
ul {
list-style-type:none; /* takes symbols away from unordered list */
margin:0; /* shifts ul up against h2, and shifts it up in the header box */
background-color:#d9d9d9;
font-family:Baskerville, serif;
text-transform:uppercase;
left:0;
right:0;
text-align:center; /* centers nav bar */
font-size:0; /* this takes away the default white spaces at the end of the <li>...have to resize font in li */
}
li {
display:inline-block; /* makes nav go horizontal */
font-size:14px; /* size of navbar text ... !important has to be in px because ul has font size = 0*/
}
li:hover {
background:#000000; /* changes tab to black */
color:#E09635; /* changes text to color */
transition-duration: 0.3s; /* response time on navbar icon hover */
transition-timing-function: ease;
transition-delay: 0; /* zero delay to have transtion occur */
}
a {
text-decoration:none; /*removes underline from a links */
color:inherit; /* takes color from parent, in this case, li */
display:block; /* makes the a box relatable to li */
padding: 10px; /* creates padding around a box for navbar and adds to clickable region because of anchor */
}
.activemenutab { /* this is the class used to make the one you are on highlighted ... needs to be swithched in html */
background-color:#EDEDED;
color:#E09635;
}
/* ---------- body below */
h3 {
text-align:center;
font-family:Baskerville, serif;
text-transform:uppercase;
font-size:30px;
font-weight: 600;
letter-spacing: 0.2em;
word-spacing: 0.5em;
}
/* ---------- footer below */
footer {
text-align:center;
background-color:#000000;
color:#EDEDED;
left:0;
right:0;
bottom:0;
margin:0;
position:absolute;
padding:.2em;
}
结论!:如何让我的标题扩展到浏览器的边缘(在顶部、左侧和右侧)，类似于我的页脚，而不使用绝对定位。提前致谢。
最佳答案
关于css - 页眉未延伸到浏览器的顶部/侧边。不能使用绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29886307/
26
4
0
我想要做的是在每个框的蓝色标题之后获取红色文本。 看来我必须添加另一个 div？我已经添加并修改了 .card-indus img 的位置，但结果永远不是我想要的。 你知道为什么即使我将 positi
所以我一直在努力掌握绝对和相对定位的诀窍。关于这个主题有很多教程和问题，我已尽力理解它们。除了这一点，我大部分时间都很好。我正在创建一个页面，其中有较小的缩略图图像，用户可以选择单击并展开图像。为此，
下面是我正在处理的代码。如您所见，有一个“#parent”div 和一个“#child”div。 '#child' div 有一个未定义的高度，这是因为有时，'#child' 的高度小于或长于它的父级
我目前正在创建一个看起来有点像这样的固定 header 。 https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568 Logo 始终位于左侧，小按钮始终位于
我怎样才能得到一个绝对定位的子 div，当它放在父 div 的范围之外时不显示？ https://jsfiddle.net/knp9ebys/9/ .papa { background:red;
如果我对 CSS 显得相当“菜鸟”，我深表歉意。我一直在尝试设置以下... #0 { width: 100%; height: y; border: 1px solid black; } #
很长一段时间以来，我一直在摆弄一个特定的布局问题，但我显然采用了错误的方式。 以下是分解为基本组成部分的方法: SOME HEADER
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。 例如: http://www.site.com/app_1/default.aspx ===> http:
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。 例如: http://www.site.com/app_1/default.aspx ===> http:
我想知道是否有一个库在某处提供受新类型保护的 FilePath 类型。我找到了我想要的http://hackage.haskell.org/package/darcs-2.8.4/docs/src/D
如果我尝试使用以下方式连接到我的嵌入式数据库: private static String url = "jdbc:sqlite:~/hr4413/pkg/sqlite/Models_R_US.db"
所以我是 django 的新手，我一直在研究 PHP CodeIgniter，其中将绝对 URL 放入 href 我通过调用 URL 帮助程序使用了一个名为 base_url 的函数 它给出的输出类
我有一个小问题。 我在其他 div 中有一些图像元素的容器 div。像这样的东西: 我需要将容器垂直居中，但我不能使用顶部:-healfHeight； mar
我有一个带有 inline-block css 位置的列表(div)。里面有一个 relative 定位的 ul 是隐藏的。所以我试图通过添加一些类将这个 div 转换为 absolute 。通常，当
我正在尝试设置一个卡住列，唯一需要解决的问题是同一行上其他 td 的高度不会扩展以匹配绝对定位 td 的高度。由于卡住标题中的文本是任意的，它可以跨越多行。 如果它不是绝对定位的，那么这将迫使同一行中
这个问题在这里已经有了答案: Centering text vertically and horizontally in a div (1 个回答) 关闭 5 年前。
当它的位置绝对时，我试图使一个框宽度为 100%？ 下图是我想要做的 https://i.imgur.com/qMaT361.gif float .box1 { position:re
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
我有 3 个 div，都是 positioned: absolute，但是我想要填充窗口宽度的 div 只会适应其中文本的长度。我希望黄色 div #help 填充窗口的其余部分。 我知道这听起来很菜
这个问题在这里已经有了答案: Retrieve the position (X,Y) of an HTML element (32 个答案) 关闭 8 年前。 有时候，当我请求某个对象的.posit
我是一名优秀的程序员,十分优秀！