个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
所以基本上我是在努力实现 this design , 但是 this是我到目前为止得到的。
如您所见，它有很多错误，但我不知道如何修复它们...
侧边栏不会粘在页面底部，
我无法将 padding 添加到边栏，因为如果我这样做它会移动，
另外，为了让菜单和 Logo 保留在那里，我做错了什么。
代码如下:
* {
font-family: Arial;
}
body {
background: url(bg.jpg) no-repeat;
background-size: 100%;
height: auto;
width: 850px;
margin: 0 auto;
background-attachment: scroll;
background-position: center;
}
header {
background: #343843;
color: white;
height: 80px;
}
header a {
color: #24272e;
background: aqua;
text-decoration: none;
padding: 60px 40.5px;
}
nav {
background: #24272e;
color: white;
height: 30px;
width: 675px;
float: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 5px 10px;
margin-left: -10;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 14px;
font-weight: bold;
padding: 5px 10px;
}
section {
background: #ffffff;
color: darkgray;
width: 675px;
float: right;
}
article {
background: #fff;
color: #000;
}
aside {
background: #343843;
float: left;
width: 175px;
height: 100%;
display: inline-block;
margin-top: -30px;
}
footer {
background: #20232a;
position: relative;
margin-top: -65px;
clear: both;
width: 100%;
}<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<a href="index.html" class="logo">Condominios</a>
</header>
<nav>
<ul>
<li><a href="index.html" tittle="home">Home</a>
</li>
</ul>
</nav>
<section>
<article>
<h2>Titilo de contenido</h2>
<p>Contenido</p>
</article>
</section>
<aside>
<h3>Titulo de contenido</h3>
<p>contenido</p>
</aside>
<footer>
Creado
</footer>
</body>
</html>最佳答案
将 height:100% 添加到您的 html、body，并进行一些调整...
html,
body {
height: 100%
}
body {
background: url(bg.jpg) no-repeat;
background-size: 100%;
background-attachment: scroll;
background-position: center;
width: 850px;
margin: 0 auto;
font-family: Arial
}
header {
background: #343843;
color: white;
height: 80px;
}
header a {
color: #24272e;
background: aqua;
text-decoration: none;
padding: 60px 40.5px;
}
nav {
background: #24272e;
color: white;
height: 30px;
width: 675px;
float: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 5px 10px;
margin-left: -10;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 14px;
font-weight: bold;
padding: 5px 10px;
}
section {
background: #ffffff;
color: darkgray;
width: 675px;
float: right;
height: 100%;
background: red
}
article {
background: #fff;
color: #000;
}
aside {
background: #343843;
float: left;
width: 175px;
height: 100%;
display: inline-block;
margin-top: -30px;
height: calc(100% + 30px)
}
footer {
background: #20232a;
position: relative;
margin-top: -65px;
clear: both;
width: 100%;
}<header>
<a href="index.html" class="logo">Condominios</a>
</header>
<nav>
<ul>
<li><a href="index.html" tittle="home">Home</a>
</li>
</ul>
</nav>
<section>
<article>
<h2>Titilo de contenido</h2>
<p>Contenido</p>
</article>
</section>
<aside>
<h3>Titulo de contenido</h3>
<p>contenido</p>
</aside>
<footer>
Creado
</footer>关于html - 侧边栏不贴底等错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36453449/
24
4
0
我在获取附加 Bootstrap 导航栏以在页面滚动时正确调整其宽度时遇到问题。 我希望导航栏在页面滚动时保持其包含元素内部的宽度，或者占据页面的整个宽度(从左到右开始) 我做错了什么，或者我需要做什
所以我正在尝试创建一个布局，其中我有一个带有卡片的页面，右侧有一张摘要卡片，在我滚动时会 float 。一种典型的词缀对象，以前在 bootstrap 中见过。到目前为止，这是我的尝试: 出于某种原因
我是一名优秀的程序员,十分优秀！