标签：main 网页 text Html background font margin Css size
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
标签：main,网页,text,Html,background,font,margin,Css,size 来源： https://www.cnblogs.com/easy5weikai/p/16357477.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。