底部的 Git 按钮和链接“10 分钟阅读”和图像位于同一位置（前两个在其中，第三个是其自身）。
当我尝试调整内容时，按钮和链接的左侧会出现间隙。我不知道这一切放到这个网站上会是什么样子，因为这是我第一次使用它，所以我真的很抱歉。
这是我使用 Html 和 CSS 的第三天，所以请怜悯。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>Practice #1</title>
</head>
<body>
<header>
<img
class="logo"
src="https://shapingthefuture.co.il/wp-content/uploads/2016/12/envato-logo-small.svg"
alt="logo"
/>
<div class="header-right">
<button href="#" class="sign-in">Sign in</button>
<button href="#" class="get-started">Get started</button>
</div>
</header>
<nav>
<h1>Quick Code</h1>
<a href="#" class="nav-link">📚 Top courses</a>
<a href="#" class="nav-link">✍ Submit article</a>
<a href="#" class="nav-link">🌏 Web dev</a>
<a href="#" class="nav-link">📱 Mobile dev</a>
<a href="#" class="nav-link">💻 Programming</a>
<a href="#" class="nav-link quick">Quick code</a>
</nav>
<article>
<p class="free-story">
You have <strong>1</strong> free member-only story left this month.
<a href="#" class="for-medium"
>Sign up for Medium and get an extra one</a
>
</p>
<div class="in-article">
<h2>10 Reasons Why You Should Switch to Linux</h2>
<p class="ten-things">10 Things Linux Can Do That Windows Can't</p>
<div class="samul-social">
<div class="samuel">
<img class="samuel-img"
src="https://www.kindpng.com/picc/m/171-1712282_profile-icon-png-profile-icon-vector-png-transparent.png"/
alt="samuel-martins">
<div class="to-name">
<p>Samuel Martins</p>
<button class="follow">Follow</button>
</div>
<p class="date">Nov 17 · 6 min read</p>
</div>
<div class="social">
<a href="https://twitter.com/" target="_blank"
><img
class="icon"
src="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-0902F48837-seeklogo.com.png"
alt="twitter-logo"
/></a>
<a href="https://rs.linkedin.com/" target="_blank"
><img
class="icon"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/640px-LinkedIn_logo_initials.png"
alt="linkedin-logo"
/></a>
<a href="facebook.com" target="_blank">
<img class="icon"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/800px-Facebook_Logo_%282019%29.png"/
alt="facebook-logo"/>
</a>
<a href="index.html">
<img
class="icon"
src="https://static.vecteezy.com/system/resources/thumbnails/005/200/965/small/bookmark-black-color-icon-vector.jpg"
/></a>
</div>
</div>
<img
class="main-image"
src="https://www.uveta.io/categories/blog/windows-vs-linux-appservice-whats-the-difference/windows_linux.png"
alt="main-picture"
/>
<p class="counting">
This is going to be a pretty straight forward article. I am aware that
it might get a lot of negative comments from Windows users just from
reading the title alone. I believe these are the reasons why everyone
should try using the Linux system.
</p>
<p class="dots">⋅ ⋅ ⋅</p>
<h3>1. You can download the source for Linux</h3>
<p class="counting">
I believe in transparency when it comes to the digital world. You can
go over to
<a
href="https://github.com/torvalds/linux"
class="link-in-article"
target="_blank"
>https://github.com/torvalds/linux</a
>
and download over 800k commits for Linux. You will be able to see
everything that has ever been done on Linux all the way back from its
inception. Why would anyone even care about the source code? Well, the
reason you are going to want to care is that there are people who are
constantly looking at the source for things like bugs and security
issues, and various other matters.
</p>
<p class="counting">
You can see the ins and outs of the system you are using. With
Windows, everything is completely closed, which means you are putting
a hundred percent of your trust into Microsoft developers to check
their own stuff and make sure it is okay. Even if you do not care
about the source, know that there are a lot of people who do care, and
they make your experience better as a result. In addition to the Linux
kernel being open source, almost all software that you will install
for your system comes from official repositories, which are also open
source.
</p>
<h3>2. You can install updates without rebooting your machine</h3>
<p class="counting">
This is a game-changer for cloud environments. If you have a windows
server, you have to upgrade your software then reboot the system
again. This will result in your users experiencing downtime. With
Linux, you can update almost anything without a reboot, and for
kernels version 4.0 and beyond, you can even update the kernel itself.
Isn’t that amazing? I have never liked the Windows prompt for a reboot
every time I install or update a piece of software.
</p>
<h3>
3. You can plug devices in without worrying about finding and
downloading drivers
</h3>
<p class="counting">
The only time it is not true is with highly specialized devices. How
is that possible? The whole point of the Linux kernel is to connect
hardware to software. In the Linux kernel, there have been over 16,000
unique developers across 1400 companies working on Linux writing their
drivers into Linux. That way, when people use Linux, it is just
automatically there. When you look at windows, you have to download
and install drivers every time you hook something into your computer.
</p>
<h3>4. You can run Linux from a pen drive, CD DVD, or any medium</h3>
<p class="counting">
I cannot stress the importance of this. I mean, imagine having your
whole system on a thumb-drive. You can take your work literally
anywhere without the risk of losing it. Of course, it works best if
you have persistence configured during installation into the drive.
For developers, this can be useful in situations where you are
required on-site but cannot carry your laptop. Hackers use this trick
all the to boot Kali live or with persistence because that is
basically all they need half the time. Another advantage with this
trick is that you can install multiple distributions in one
thumb-drive so that you can boot into whichever one you wish at any
given time.
</p>
<h3>5. You can run the Linux for a long time without rebooting</h3>
<p class="counting">
This is possible without degradation of performance because Linux is
ultra-stable. It has way less memory fragmentation, and it simply does
not become slower over time. You will still be able to make changes on
the fly without the need to reboot. You are just simply not going to
find that kind of up-time on any Windows system. The advantage is that
you can run a production server for a long time while making any
changes without system reboot and, therefore, no downtime.
</p>
<h3>6. You could run the Linux on almost any hardware</h3>
<p class="counting">
When I say any hardware, I am referring to both different types of
hardware, as well as hardware from various date ranges. There are
fully functional Linux installs that are, in some cases, less than
32MB in size. This means that you can go into that closet, dust off
that old computer from 1993, and breathe new life into it by
installing an appropriate Linux system with respect to your space. You
cannot do that with windows. As Windows gets newer, it becomes more
resource-intensive, and the minimum requirements go up. Linux has a
wide range of distributions from which you can pick one that you need
for your particular application. You can
<a
href="https://blog.coursesity.com/best-kali-linux-tutorials/"
class="link-in-article"
target="_blank"
>learn Linux</a
>
to develop your website at low costs, as it can run almost any of the
major languages.
</p>
<h3>
7. You can fix broken Linux installs with a live CD DVD or pen drive
</h3>
<p class="counting">
This is not for Linux alone. You can even fix broken windows installs
with Linux in some cases. The reason this is possible is that the
Linux kernel runs entirely in memory. So you can use a CD or pen
driver DVD to load that kernel into memory, and then go into a chroot
environment on your broken system, and then you can use that broken
system as if it were functioning. From there, you can take whatever
action you need to get that system working again. On windows, you have
to go through the windows system repair wizard. If that does not work,
you will be required to re-install windows.
</p>
<h3>
8. You can update all of your software often with a single command
</h3>
<p class="counting">
In a Debian system, it is so easy to update your software and even
upgrade the entire system if you wish. You need only type apt-get
update or apt-get update && apt-get upgrade. On windows, you either
use the built-in updater for the software, or you go back to the site
to download a newer version, which may cost you. As a developer, I
cannot stress the importance of using updated software.
</p>
<h3>9. You can move a hard drive from one Linux machine to another</h3>
<p class="counting">
So, the motherboard from my laptop died about a week ago, and I did
not have enough money to get a new one or an entirely new laptop. I
had to take my hard drive from the broken laptop and use it on a
different laptop. Guess what? It worked without re-installation. I
never lost my data, and I am actually using the other laptop to write
this article. This is largely made possible by the fact that all the
drivers in Linux are built-in. Moving a hard drive from one machine to
another does not affect it. It simply sees all your new hardware and
re-acclimate to work like it was in the previous machine. On windows,
not only will it probably not work, but windows will see that you have
different hardware, and then, suddenly, your copy of Windows becomes
non-genuine.
</p>
<h3>
10. You can install software without worrying about viruses and
malware
</h3>
<p class="counting">
Now, this is not to say that Linux is virus and malware proof. It is
just to say that it is a lot harder for viruses and malware to get on
your system. That is due to two things. Number one, it is harder to
escalate privileges on Linux for just a normal user. Number two, most
of the software that you download for Linux comes from official
repositories, and those are guaranteed. Additionally, software on
Linux does not autorun as they do on windows. This also implies that
there is no antivirus software needed on Linux, and of course, that
saves you money.
</p>
<p class="dots">⋅ ⋅ ⋅</p>
<p class="counting">
I am not trying to convince you to switch. You will not lose anything
by trying it out. Every single reason is basically a comparison to
Windows. I have used windows before and I slowly grew apart from it
when I discovered Linux. I have never been worried about not having a
legal copy of Linux nor the need to buy Linux software. Everything
about Linux is open-source. Don’t worry about not knowing how to use
Linux at first. There is a huge community to guide you. In case you
are wondering where Linux is used in the real world, check out another
article I wrote on the different places Linux is used.
</p>
<a
class="what-is-used-for"
href="https://samuel-martins.medium.com/what-is-linux-used-for-6714041a9a0b"
target="_blank"
>
<div class="used-for-text">
<p class="what-is">What Is Linux Used For?</p>
<p class="linux-is">
Linux Is Taking Over. It Is Just a Matter of Time
</p>
<p class="samuel-martins">samuel.martins.medium.com</p>
</div>
<img src="25719.png"/ alt="linux image" class="used-for-image">
</a>
</div>
</article>
<div class="developer-box">
<p class="sign-for-developer">Sign up for Developer Updates</p>
<p class="by-quick-code">By Quick Code</p>
<p class="receive-updates">
Receive weekly updates about new posts on programming, development, data
science, web development and more
<a href="https://medium.com/quick-code/newsletters/developer-updates" class="receive-updates-link"
>Take a look.</a
>
<br />
<div class="email">
<input type="text" placeholder="Your email" class="input-email"/>
<button class="get-this-newsletter">✉ Get this newsletter</button>
</div>
<p class="by-sign-in">By signing up, you will create a Medium account if you don’t already have one. Review our <a href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=newsletter_v3_promo--------------------------newsletter_v3_promo-----------" class="privacy-policy">Privacy Policy</a> for more information about our privacy practices.</p>
</p>
</div>
<div class="after-box">
<div class="content">
<div class="more-from-quick-code">
<div class="more-and-follow">
<a href="https://medium.com/quick-code" class="more-from" target="_blank">More from Quick Code
</a>
<button class="follow-two">Follow</button>
</div>
<p class="find-the-best-tutorials">Find the best tutorials and courses for the web, mobile, chatbot, AR/VR development, <br> database management, data science, web design and cryptocurrency. Practice in<br> JavaScript, Java, Python, R, Android, Swift, Objective-C, React, Node Js, Ember,<br> C++, SQL & more.</p>
</div>
<div class="top-10-git-gui-clients">
</div>
<div class="theme-all"></div>
<a href="https://medium.com/quick-code/top-10-git-gui-clients-for-developers-b56d702579a6" class="top-ten-git-gui-clients">
<div class="theme-up">
<img src="https://miro.medium.com/fit/c/176/176/1*1wwrri468OAME5L00uD-jA.jpeg" alt="Theme Selection"/ class="theme-logo">
<p class="theme-selection">Theme Selection</p>
<p class="mid-dot"> · </p>
<p class="theme-date">Nov 10, 2020</p>
</div>
<div class="theme-middle">
<div class="theme-text">
<div class="theme-text-up">
<p class="theme-h">Top 10+ Git GUI Clients For Developers 👨💻</p>
<p class="theme-par">Hey there.!!🙋♂️ Are you looking for the top git GUI client to make it easy to manage your project? Then you are in right place..!! First of all, Git is a popular version control system that helps developers, writers, or anyone...</p>
</div>
<div class="theme-bot">
<div class="theme-bot-left">
<a href="https://medium.com/tag/git" target="_blank"><button>Git</button></a>
<a href="https://medium.com/quick-code/top-10-git-gui-clients-for-developers-b56d702579a6?source=post_page-----e037aa748504----0----------------------------"
target="_blank">10 min read</a>
</div>
<img src="bookmark-icon-12326.png"class="theme-bot-right" />
</div>
</div>
<img src="https://miro.medium.com/fit/c/101/101/1*Mi1xLQIarZQaBNYReu8Z0g.png"/ class="theme-pic">
</div>
</a>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
width: 1400px;
margin: auto;
}
button {
cursor: pointer;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 10px;
}
.logo {
width: 60px;
}
.sign-in {
font-size: 22px;
padding: 14px 19px;
border: 0;
background-color: white;
color: #7a6efe;
margin-right: 10px;
}
.sign-in:hover {
background-color: #7a6efe;
color: white;
border-radius: 5px;
}
.get-started {
font-size: 22px;
padding: 12px 17px;
border: 2px #7a6efe solid;
background-color: white;
color: #7a6efe;
margin-right: 10px;
border-radius: 5px;
}
.get-started:hover {
background-color: #7a6efe;
color: white;
}
nav {
background-color: #7a6efe;
display: grid;
align-items: center;
font-size: 20px;
grid-template-columns: repeat(8, 1fr);
height: 50px;
margin-bottom: 20px;
}
h1 {
color: white;
font-size: 25px;
padding-left: 20px;
}
.nav-link {
display: grid;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
color: white;
text-align: center;
height: 50px;
align-items: center;
}
.nav-link:hover {
background-color: white;
color: #7a6efe;
}
.quick {
grid-column: 7 / 8;
}
article {
width: 800px;
margin: auto;
}
.free-story {
background-color: #f4f4f4;
align-self: center;
font-size: 18px;
text-align: center;
margin-bottom: 70px;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 5px;
}
.for-medium {
color: black;
}
.for.medium:visited {
color: black;
}
.in-article {
width: 776px;
margin: auto;
}
h2 {
font-size: 55px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
margin-bottom: 20px;
}
.ten-things {
font-size: 30px;
color: #999999;
margin-bottom: 20px;
}
.samuel {
display: grid;
grid-template-columns: 50px 1fr;
column-gap: 10px;
row-gap: 0px;
align-items: center;
font-size: 14px;
}
.samuel-img {
width: 50px;
height: auto;
grid-row: 1 / 3;
}
.to-name {
display: flex;
align-items: center;
gap: 5px;
}
.date {
grid-column: 2 / 3;
padding-bottom: 6px;
}
.follow {
background-color: white;
border-radius: 5px;
border: #7a6efe 1px solid;
padding: 3px 8px;
color: #7a6efe;
}
.follow:hover {
background-color: #7a6efe;
color: white;
}
.samul-social {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.social {
display: flex;
gap: 10px;
}
.icon {
width: 30px;
}
.main-image {
width: 100%;
margin-bottom: 20px;
}
.counting {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
margin-bottom: 30px;
line-height: 1.5;
}
h3 {
margin-bottom: 10px;
font-weight: 800;
}
.link-in-article {
color: black;
}
.link-in-article:visited {
color: black;
}
.dots {
font-size: 50px;
text-align: center;
margin-bottom: 30px;
}
.what-is-used-for {
display: flex;
height: 200px;
justify-content: space-between;
border: 1px rgb(204, 204, 204) solid;
text-decoration: none;
align-items: center;
margin-bottom: 60px;
margin-top: 60px;
}
.used-for-text {
color: black;
text-decoration: none;
margin-left: 15px;
}
.used-for-image {
border-left: 1px rgb(204, 204, 204) solid;
height: 199px;
}
.what-is {
color: black;
font-size: 22px;
font-weight: bold;
margin-bottom: 7px;
}
.linux-is {
color: #999999;
font-size: 22px;
margin-bottom: 10px;
}
.samuel-martins {
color: #999999;
}
.developer-box {
width: 776px;
margin: auto;
background-color: #f5f5f5;
border-top: #7a6efe 5px solid;
padding: 45px;
margin-bottom: 60px;
}
.sign-for-developer {
font-size: 26px;
font-weight: bold;
margin-bottom: 10px;
}
.by-quick-code {
font-size: 13px;
margin-bottom: 15px;
}
.receive-updates {
margin-bottom: 15px;
font-size: 18px;
line-height: 1.4;
}
.receive-updates-link {
color: black;
text-decoration: none;
position: relative;
}
.receive-updates-link:after {
content: "";
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}
.email {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
align-items: center;
font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.input-email {
border: 0;
border-bottom: 1px solid rgb(168, 168, 168);
background-color: #f1f1f1;
width: 350px;
font-size: 17px;
letter-spacing: 0.5px;
color: rgb(168, 168, 168);
padding-bottom: 5px;
}
.input-email:focus {
outline: none;
color: rgb(80, 80, 80);
border-bottom: 1px solid rgb(80, 80, 80);
}
.get-this-newsletter {
background-color: #7a6efe;
color: white;
border: 0;
padding: 10px 20px;
font-size: 20px;
border-radius: 30px;
font-weight: normal;
}
.get-this-newsletter:hover {
background-color: #6f61ff;
}
.by-sign-in {
font-size: 14px;
line-height: 1.4;
}
.privacy-policy {
color: black;
}
.privacy-policy:visited {
color: black;
}
.after-box {
width: 1200px;
margin: auto;
background-color: #f5f5f5;
}
.content {
width: 776px;
margin: auto;
background-color: #f5f5f5;
}
.more-from-quick-code {
margin-bottom: 30px;
}
.more-and-follow {
display: flex;
padding-top: 45px;
padding-bottom: 12px;
justify-content: space-between;
align-items: center;
}
.more-from {
color: black;
text-decoration: none;
font-weight: bold;
font-size: 22px;
}
.more-from:visited {
color: black;
}
.follow-two {
background-color: #7a6efe;
color: white;
border: 0;
padding: 10px 20px;
font-size: 17px;
border-radius: 30px;
font-weight: normal;
}
.follow-two:hover {
background-color: #6f61ff;
}
.find-the-best-tutorials {
line-height: 1.4;
color: #7e7e7e;
}
.top-ten-git-gui-clients {
text-decoration: none;
color: black;
}
.theme-up {
display: flex;
align-items: center;
text-decoration: none;
color: black;
font-size: 15px;
margin-bottom: 10px;
}
.theme-logo {
width: 25px;
border-radius: 30px;
}
.theme-selection {
text-decoration: none;
margin-left: 10px;
}
.mid-dot {
font-weight: bold;
margin-left: 10px;
}
.theme-date {
margin-left: 10px;
color: #7e7e7e;
}
.theme-middle {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
}
.theme-h {
font-size: 25px;
font-weight: 750;
margin-bottom: 5px;
}
.theme-par {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 17px;
line-height: 1.5;
}
.theme-pic {
width: 130px;
height: 130px;
}
.theme-text {
display: grid;
margin-right: 50px;
}
.theme-bot {
display: flex;
justify-content: space-between;
}
.theme-bot-left {
display: flex;
margin-left: 0;
}
运行代码，您可以在“themebot”div 中看到隐藏的锚标记。 您可以简单地将显示设置为无或将位置设置为绝对。但你应该找出为什么锚标签会出现，如果它是无意的。
.top-ten-git-gui-clients {
display: none;
}
要实现您想要的布局，您可以使用Flexbox。以下是帮助您入门的基本设置：
.theme-bot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.theme-bot-left {
display: flex;
gap: 10px;
}
.git-button {
background-color: #333;
color: white;
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.read-link {
text-decoration: none;
color: blue;
}
.theme-bot-right {
max-width: 40px;
height: auto;
}