个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我将我的页面分成“部分”，但无法摆脱每个部分上方和下方的空白区域。任何提示都会很棒!!
亮黄色只是为了表明它发生在下面的下一部分。
我已经尝试移除所有部分以及正文的填充和边距，但那条白色间距的小条仍然存在。我还尝试将部分更改为 div 以及将我的 img 放入 href 或另一个 div。不知道为什么我会收到这个!
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fun Project | Kay Larson</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="header__left-side">
<img class="logo-placeholder" src="logo-placeholder.jpeg">
<span class="header__titles">
<h1>KAYLA LARSON</h1>
<h2>web designer</h2>
</span>
</div>
<div class="header__right-side">
</div>
<div class="header__social-icons">
<a href="https://www.facebook.com/kayla.larson.710">
<img src="icons/facebook-logo-button.svg" class="img__fb">
</a>
<a href="https://www.linkedin.com/in/kaylalarson4/">
<img src="icons/linkedin-button.svg" class="img__linkedin">
</a>
<a href="https://twitter.com/Kay60372608">
<img src="icons/twitter.svg" class="img__twitter">
</a>
</div>
</header>
<a href="#">
<img src="images/Kayla Larson - F.jpg" class="img__self">
</a>
<section class="section__top-get-started">
<h2 class="h__get-started">Creating Things. <br> Happy Mind.</h2>
<h3 class="h3__get-started">The ways creating can improve your life.</h3>
<button class="btn__get-started">Let's Start</button>
</section>
<section class="section__about-me">
<h2>Who I Am</h2>
<h3>I'm Kay, a Web Developer.</h3>
<p class="section__body-para">I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.
This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.</p>
<button class="btn__contact-me">Contact Me</button>
</section>
<section class="section__more-info">
<h2>For More Information</h2>
<form class="form__subscribe">
<h4>Subscribe</h4>
<input type="test" name="Subscribe" placeholder="Enter your email here">
<button class="btn__submit">Submit</button>
</form>
</section>
<script src="main.js"></script>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
a {
text-decoration: none;
}
.header__left-side {
display: flex;
}
.logo-placeholder {
height: 75px;
margin: 30px 10px 10px;
width: 100px;
}
.header__titles {
margin: 30px 0px 10px;
}
h1 {
font-family: "Playfair Display", serif;
font-size: 1em;
font-weight: 300;
margin-bottom: 0;
}
h2 {
font-family: "Lato", sans-serif;
font-size: 1em;
font-weight: lighter;
letter-spacing: 2px;
margin-top: 2px;
}
.img__fb,
.img__linkedin,
.img__twitter {
height: 20px;
margin: 0 10px 10px;
}
.img__self {
width: 100%;
}
.section__top-get-started {
background-color: #fdf9ba;
display: flex;
flex-direction: column;
}
.h__get-started {
position: relative;
margin: 45px 0px 5px;
left: 20px;
width: 280px;
line-height: 1.3em;
font-size: 2em;
text-align: center !important;
}
.h3__get-started {
width: 280px;
font-family: "Garamond", sans-serif;
font-weight: 100;
position: relative;
margin: 0px 0px 18px;
left: 20px;
grid-area: 2 / 1 / 3 / 2;
line-height: 1.6em;
font-size: 1em;
text-align: center;
}
.btn__get-started {
height: 45px;
min-height: 19px;
width: 104px;
position: relative;
margin: 0px 0px 36px 0;
left: 108px;
color: #fff;
background-color: grey;
}
最佳答案
我想知道那些边框是不是来自图像本身
<img src="images/Kayla Larson - F.jpg" class="img__self">
如果你能提供图片，它会更容易看到。
关于html - 如何修复背景颜色 CSS/HTML 部分中的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55873782/
26
4
0
我将一个 div 设置为 100% 宽度，当以 1024 分辨率查看页面时，宽度应从 100% 变为 1000px，我让它与@media 查询一起正常工作，并且在 FF、safari chrome 上
希望有人能帮助我，我已经被困了几天了。 将我的 Domino 服务器更新到 9.01 Fix 3 后，我在 javascript 控制台上不断收到错误消息: TypeError: this.edito
我们正在使用一个基于RMI的java应用程序。当我们运行应用程序时，即使应用程序处于理想阶段，内存使用量仍然不断增加。我们主要使用Vector和散列图数据结构。如何最大限度地减少java内存使用/修复
概述 Internet Download Manager (IDM)是最流行的 Windows 下载管理器。如果你平时工作中使用过IDM,您会惊叹 IDM 下载文件的速度有多快。IDM
当我打开 brave 浏览器时，会打开一个窗口(如下所示)。它并没有真正干扰浏览器的处理。但令人担忧的是为什么这种情况一直发生...... Error On Opening Brave Browser
这是我今天在求职面试中被问到的一个问题: 看下面的代码: int n=20; for (int i =0; i
我不小心删除了/opt/local/bin/perl5.8.9 ，这似乎是 macports 编译的 perl 的主要二进制文件。 现在我有很多取决于 perl5 的端口，但不想卸载并重新安装所有端口
>>>flip fix (0 :: Int) (\a b -> putStrLn "abc") Output: "abc" 这是使用翻转修复的简化版本。 我在一些 YouTube 视频中看到了这种使用
这个问题已经有答案了: How can I fix 'android.os.NetworkOnMainThreadException'? (64 个回答) 已关闭 3 年前。 我在 Android 应
def main(): cash = float(input("How much money: ")) coins = 0 def changeCounter(n): whil
前一周我遇到了类似的问题，查询需要永远运行。在编写此查询时，我尝试应用从其他查询中学到的一些知识，但执行起来需要很长时间。 运行查询的两个单独部分时，每个部分需要 2 分钟才能完成，这是可以接受的，但
下午，我的 CSS 有问题。第三个下拉菜单放错了，我没有解决办法。 这是我想要的: 之前: http://i53.tinypic.com/2qu85z8.png 之后: http://i51.tiny
更新方法: override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingS
我知道这是一个很多人都遇到过的问题，但我不熟悉 Less 并且是 Bootstrap 的新手，我正在寻找一种全 CSS 解决方案来防止我的导航栏折叠到 768 像素以下:
在我的布局中，我创建了以下 jsfiddle 托管的可调整大小的粘性页脚。但是，在调整大小时它与内容重叠。有没有办法让它在所有浏览器上都能响应？ http://jsfiddle.net/9aLc0mg
我想要实现的目标 racer-offset 是为了让用户可以设置图像可以以 px 为单位移动多远。偏移量管理偏移量。 Speed-racer 告诉我们图像在滚动过程中移动的速度。我的问题是它不会停止。
我有一个简单的自动换行函数，它接受一个长字符串作为输入，然后将该字符串分成更小的字符串，并将它们添加到一个数组中，以便稍后输出。现在最后一两个字没有输出。这是主要问题。但是，我还想改进功能。我知道这有
我试图在使用每个 slider 之前禁用“下一步”按钮，我不确定为什么在单击不再是 class="not-clicked"的同一个 slider 时取消禁用该按钮. JSFiddle: (这里看起来有
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 8 年前。 如何让程序输出所有信息？ IT
On this page ，在“生活”下有一个带有自动生成的子菜单的菜单。子菜单存在一些问题(它会闪烁并改变大小——如果你滚动它就会看到)。我需要以某种方式覆盖它当前正在读取的 css 并使其统一。
我是一名优秀的程序员,十分优秀！