Html+Css网页设计(一)
2022/6/8 23:20:28
本文主要是介绍Html+Css网页设计(一),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Html+Css网页设计
首页
index.html
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>WCB cofe</title> <meta name="description" content="提供综合咖啡与健康有机食物的咖啡店" /> <link rel="icon" type="image/png" href="images/favicon.png"/> <link href="https://unpkg.com/ress/dist/ress.min.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <div id="home" class="big-bg"> <header class="page-header wrapper"> <h1> <a href="index.html"><img src="images/logo.svg" alt="WCB cafe 首页" class="logo" /></a> </h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div class="home-content wrapper"> <h2 class="page-title">We'll Make Your Day</h2> <p>想不想待在时尚咖啡店裡放鬆身心?用无人工添加物的食材让身体由内而外焕然一新。</p> <a class="button" href="menu.html">菜单介绍</a> </div><!-- /.home-content --> </div> <!-- / #home --> </body> </html>
style.css
代码清单:css/style.css
@charset "UTF-8"; /* 公共部分 ---------------------------------------*/ html { font-size: 100%; /* 根据浏览器预设的文字大小,设置相对值*/ } body { font-family: "Yu Gothic Medium", YuGothic, sans-serif; line-height: 1.7; /* 行高 */ color: #432; } a { text-decoration: none; /* 去掉底部的下划线 */ } img { max-width: 100%; /* 宽度为父元素的100% */ } /* HEADER ------------------------------- */ .logo { width: 210px; margin-top: 14px; } .main-nav { display: flex; font-size: 1.25rem; text-transform: uppercase; /* 英文字母全部大写*/ margin-top: 36px; list-style: none; /* 无列表图标*/ } .main-nav li { margin-left: 36px; } .main-nav a { color: #432; } .page-header { display: flex; justify-content: space-between; /* 水平对齐方式:左右对齐 */ } .wrapper { max-width: 1100px; /* 设定最大宽度 */ margin: 0 auto; /* 居中对齐 */ padding: 0 4%; /* 设定内侧留白空间,以配合窄界面*/ } .home-content { text-align: center; margin-top: 10%; } .home-content p { font-size: 1.125rem; margin: 10px 0 42px; } /*标题*/ .page-title { font-size: 5rem; font-family: 'Philosopher', serif; text-transform: uppercase; font-weight: normal; } /* 按钮 */ .button { font-size: 1.375rem; background: #0bd; color: #fff; border-radius: 5px; padding: 18px 32px; } .button:hover { background: #0090aa; } .big-bg { background-size: cover; /* 图片铺面界面 */ background-position: center top; background-repeat: no-repeat; } #home { background-image: url(../images/main-bg.jpg); min-height: 100vh; } #home .page-title { text-transform: none; }
资源
logo:
网站图标:
首页背景:
资源网站
网站图标制作:https://realfavicongenerator.net
这篇关于Html+Css网页设计(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01前端项目部署入门:新手必读指南
- 2024-11-01富文本编辑器学习:从入门到初步掌握
- 2024-11-01前端项目部署学习:从入门到实践
- 2024-11-01动态主题处理:WordPress新手指南
- 2024-11-01前端项目部署指南:从零开始的部署教程
- 2024-11-01Element-Plus入门指南:轻松开始你的前端项目
- 2024-11-01TagsView标签栏导航入门教程
- 2024-11-01富文本编辑器课程:新手入门教程
- 2024-10-31前端项目部署课程:从入门到实践指南
- 2024-10-31用Angular实现服务器端渲染以提升SEO效果