html - 编码新手,需要帮助修复 html/css 线框
问题描述
我是编码新手,这是我在 Fullstack 课程中的第一周,我们有一些作业我已经做了一段时间了。我已经设法让我的线框看起来与家庭作业示例相似(我们应该让它看起来一样),我不确定这个 html/css 代码哪里出错了。
另外,除了发布我的大部分 CSS 之外,我不确定如何展示我正在做的工作,所以如果我做错了,我深表歉意。
:)
我已经在我试图在所有方面均匀对齐的内容周围放置了红色边框。我已经尝试更改填充、边距、浮动位置、宽度(我所知道的所有这些都会调整框,但我似乎仍然无法让“旁边”的内容与其余的线框对象对齐。
`````HTML```
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
``` </div>
`````````外部css```````````````````
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;}
article {
color:#777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color:#ebebeb;
background-color: #777;
}
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;
}
article {
color: #777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
<div class="layout">
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
</div>
这就是我想要做的 - https://gyazo.com/6f27f40e4f3e75831b5e4728387ea11f
这就是我到目前为止所做的 - https://gyazo.com/79299a16a0eb2208db98519005b3bf9d
解决方案
这只是一个快速编辑。您的链接标签也应该在标签上方
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div {
border: 1px solid #000000;
}
.aside1 {
width: 49%;
float: left;
height: 165px;
}
.aside2 {
width: 49%;
float: right;
height: 165px;
}
article {
background-color:green;
padding: 20px;
margin: 5px
}
footer {
width: 100%;
}
</style>
</head>
<body>
<header class="main-head">
<p>header</p>
</header>
<nav>nav</nav>
<section class="divCont">
<div class="aside1">
<p>Section</p>
<article>
Article
<div style="background-color:white; margin: 5px;">
H1,h2,H3
</div>
<div style="background-color:yellow;margin: 5px; ">
p
</div>
</article>
</div>
<div class="aside2">
Aside
</div>
</section>
<footer> Footer </footer>
</body>
</html>
推荐阅读
- r - 如何在 ggplot2 的单个图中同时使用堆栈和闪避
- postgresql - 在 Postgres 中意外创建重复的唯一约束
- bash - 启动 MySQL 服务器 > 将输出通过管道传输到文件
- java - gRPC 中服务器 IP 的解析
- php - 在 WooCommerce 中获取订单总额计算的订单费用和折扣金额
- azure-devops - 使用 Azure 数据工厂禁用 Azure Devops 版本的自动触发
- databricks - Databricks 连接不能从 intellj 工作?
- android - 华为推送工具包 API - 从通知的有效负载中读取数据 - onRemoteMessageReceived 不起作用
- exchangewebservices - EWS SyncFolderItems 返回带有重复 SyncState 的 ReadFlagChange 元素
- python - PIL ImageDraw.Draw() 在函数中使用时不起作用