逐步使用 HTML 和 CSS 制作网站
逐步使用 HTML 和 CSS 制作网站
在本文中，我将尝试使用 HTML 和 CSS 语言制作网站。我们网站的主题是瑜伽。我们将为瑜伽课程创建一个网站。我们网站的最终情况如下。
在 HTML 部分，
我在我的网站上添加了一个导航栏。我添加了将切换到其他部分和徽标的标题。
我在按钮内添加了文本以及欢迎您访问该站点的文本。
我把我网站主页上的所有内容都放到了section标签的英雄类中。
我将导航栏以外的部分添加到 div 标签中的 hero-area 类中。
我将 hero-area 类的按钮部分放入按钮类中，以便在 CSS 中对其进行编辑。
HTML 文件，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>瑜伽网站</title> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Edu+VIC+WA+NT+Beginner&family=Kaushan+Script&family=Montserrat:[[email protected]](/cdn-cgi/l/email-protection)&family=Orbitron&family=PT+Serif:ital,[[email protected]](/cdn-cgi/l/email-protection),400;0,700;1,400&family=Poppins:[[email protected]](/cdn-cgi/l/email-protection);300;400;600&family=Quicksand:[[email protected]](/cdn-cgi/l/email-protection)&display=swap" rel="stylesheet"> </head> <body> <section class="hero"> <nav> <div class="logo"> <img id="logo" src="image/logo.png" alt="标识"> <h3>瑜伽</h3> </div> <ul> <li><a href="#home">家</a></li> <li><a href="#classes">课程</a></li> <li><a href="#schedule">日程</a></li> <li><a href="#about">关于</a></li> <li><a href="#blog">博客</a></li> <li><a href="#contact">接触</a></li> </ul> </nav> <div class="hero-area"> <h1>欢迎来到瑜伽</h1> <div class="button"><a href="#about">为了更多</a></div> </div> </section> </body> </html>
在里面 CSS 部分 ,
我将网站的字体添加到正文部分。我用了 谷歌字体 这里。我添加了边距并设置了文本颜色。
我想在我网站主页的背景中放置一张图片。我用了 pexels.com 为了这。我已将图像居中，使其覆盖整个主页。我不想把确切的图像放在这里。这就是我添加线性渐变的原因。
我使用导航栏部分的 flex 功能编辑了徽标和其他标题。
在导航栏中，我将徽标放在左侧，将标题放在右侧，这将切换到其他部分。
我试图以一种有节制的方式设置 ul 部分中的标题。在这里，我使文本看起来更大并更改了颜色以显示悬停在列表上时的差异。
我尝试将 hero-area 部分设置在页面中间。我在这里设置了标题的属性。我更改了字体属性。
我在按钮内设置了文本的样式。我设置了按钮悬停时将发生的更改。
CSS 文件，
身体 { 字体家族：“蒙特塞拉特”，无衬线； 边距：0； 颜色：#080806ff； } 。英雄 { 背景图像：线性渐变（rgba（175、174、174、0.75），rgba（175、174、174、0.75）），url（“图像/pexels-yan-krukov-8436725.jpg”）； 高度：100vh； 背景位置：中心； 背景重复：不重复； 背景尺寸：封面； } 导航{ 显示：弯曲； justify-content: 之间的空格； 右边距：10px； 左边距：10px； } ＃标识 { 填充：8px； 向左飘浮; 高度：50px； } .logo h3 { 向左飘浮; 字体粗细：较轻 } ul { 显示：弯曲； justify-content：空间环绕； 列表样式类型：无； } 李{ 浮动：对； }
李一{ 显示：块； 填充：8px； 文字装饰：无； 颜色：继承； 文本对齐：居中； 左边距：10px； } 李一：悬停{ 字体大小：更大； 白颜色; } .英雄区{ 边距顶部：150px； } .英雄区域 h1 { 文本对齐：居中； 字体大小：90px； 边距底部：40px； 字体粗细：较轻； } 。按钮 { 显示：块； 左边距：自动； 边距右：自动； 高度：40px； 宽度：180px； 边框半径：50px； 边框：1px 实心#080806ff； } .按钮一个{ 文字装饰：无； 颜色：继承； 字体大小：20px； 显示：弯曲； 证明内容：中心； 文本对齐：居中； 边距顶部：6px； } .按钮：悬停{ 白颜色; 背景颜色：#080806ff； 字体大小：大； }
这就是我的文章。我希望它有用。谢谢你的时间。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
