英文:
Horizontal Naviation Bar with customized h1 text
问题
以下是您要翻译的部分：
"All I want is to put the icon in the left and let it be horizontally aligned with the title." = "我只想把图标放在左边，并让它与标题水平对齐。"
"Here is the CodePen: https://codepen.io/mrlima/pen/WNgoGew" = "这是CodePen链接：https://codepen.io/mrlima/pen/WNgoGew"
"I'm really new to front-end coding, I'm much better with Javascript Algorthims, please, be patient with me because English is my second language." = "我真的很新手前端编码，我在JavaScript算法方面更擅长，请谅解我，因为英语是我的第二语言。"
/*HTML*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Poise Idiomas</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/e424189c9b.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="topnav">
<h1 id="title">
<i style="float:left;" class="fa-solid fa-bars"></i>
<span class="green">P</span><span class="yellow">O</span><span class="blue">I</span><span class="yellow">S</span><span class="green">E</span>
<span class="fancy-canada-flag">Idiomas</span><span class="fancy" style="font-size:30pt;">.com</span>
</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>
/*CSS*/
@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Tilt+Warp&display=swap");
:root {
--bg-color: rgba(20, 20, 20, 1);
}
html, body {
background-color: var(--bg-color);
color: white;
font-family: "Tilt Warp", cursive;
margin:0px;
padding:2px;
}
h1 {
margin: 0px;
padding: 0px;
}
::selection{
background: transparent;
color: #d12628;
}
.topnav{
/* display:inline; */
}
#title {
text-align:center;
font-size: 6rem;
color: #ef233c;
}
/* ------------------------------------------------------- */
.blue {color: #002776;}
.yellow {color: #ffdf00;}
.green {color: #009c3b;}
.white {color: #ffffff;}
.fancy{font-family: "Lobster";color:#d12628;}
.fancy-canada-flag {
font-family: "Lobster";
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Flag_of_Canada_(Pantone).svg/800px-Flag_of_Canada_(Pantone).svg.png');
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/*No Javascript code written.*/
英文:
All I want is to put the icon in the left and let it be horizontally aligned with the title.
Here is the CodePen: https://codepen.io/mrlima/pen/WNgoGew
I'm really new to front-end coding, I'm much better with Javascript Algorthims, please, be patient with me because English is my second language.
/*HTML*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Poise Idiomas</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/e424189c9b.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="topnav">
<h1 id="title">
<i style="float:left;"class="fa-solid fa-bars"></i>
<span class="green">P</span><span class="yellow">O</span><span class="blue">I</span><span class="yellow">S</span><span class="green">E</span>
<span class="fancy-canada-flag">Idiomas</span><span class="fancy" style="font-size:30pt;">.com</span>
</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>
/*CSS*/
@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Tilt+Warp&display=swap");
:root {
--bg-color: rgba(20, 20, 20, 1);
}
html, body {
background-color: var(--bg-color);
color: white;
font-family: "Tilt Warp", cursive;
margin:0px;
padding:2px;
}
h1 {
margin: 0px;
padding: 0px;
}
::selection{
background: transparent;
color: #d12628;
}
.topnav{
/* display:inline; */
}
#title {
text-align:center;
font-size: 6rem;
color: #ef233c;
}
/* ------------------------------------------------------- */
.blue {color: #002776;}
.yellow {color: #ffdf00;}
.green {color: #009c3b;}
.white {color: #ffffff;}
.fancy{font-family: "Lobster";color:#d12628;}
.fancy-canada-flag {
font-family: "Lobster";
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Flag_of_Canada_(Pantone).svg/800px-Flag_of_Canada_(Pantone).svg.png');
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/*No Javascript code written.*/
答案1
得分: 1
以下是翻译好的内容：
第一件我想提到的事情是不要使用浮动（float），而是使用 flex 布局。
移除<i>标签中的浮动部分，将这些内容添加到 CSS 中。
#title {
display: flex;
align-items: center;
text-align: center;
font-size: 6rem;
color: #ef233c;
}
.title_container {
flex-grow: 1;
}
以下是 HTML 部分：
<h1 id="title">
<i class="fa-solid fa-bars"></i>
<div class="title_container">
<span class="green">P</span><span class="yellow">O</span><span class="blue">I</span><span class="yellow">S</span><span class="green">E</span>
<span class="fancy-canada-flag">Idiomas</span><span class="fancy" style="font-size: 30pt;">.com</span>
</div>
</h1>
请查看我为此编写的 示例代码。
1: https://codepen.io/Niloofar_araz/pen/MWqbjbE
英文:
The first thing that I want to mention is to not use float and use flex instead.
remove the float part in the <i> tag. add a div around the spans and add these to the CSS.
#title {
display: flex;
align-items: center;
text-align:center;
font-size: 6rem;
color: #ef233c;
}
.title_container{
flex-grow: 1;
}
and here is the HTML part
<h1 id="title">
<i class="fa-solid fa-bars"></i>
<div class="title_container">
<span class="green">P</span><span class="yellow">O</span><span
class="blue">I</span><span class="yellow">S</span><span
class="green">E</span>
<span class="fancy-canada-flag">Idiomas</span><span class="fancy"
style="font-size:30pt;">.com</span>
</div>
</h1>
look at the pen that I wrote for it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论