0 0 0 6 - 美化字体

phszhuli · 发表于 2019-3-26 09:21:16

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">/*指定CSS的样式定义*/
body{
background: url(1.png)center center;/*图片加center center，就能保持一直显示中间位置，如果不加，当页面缩小到小于图片尺寸时，只能出现图片顶部、左侧的内容*/
background-size: cover;/*不会产生平铺的效果，只会一张图放大缩小*/
margin: 0;
padding: 0;/*潜规则，提高自主控制*/
position: relative;/*若设置containertop属性，container必须绝对定位，body相对定位*/
}
html,body{/*为了确保照片自适应屏幕显示，需要给body以及body的父级（html）设置height属性，使之充满全屏。*/
height: 100%; /* height如果不设置100%，就会出现重复
*/
color: #ffffff;
font-family:sans-serif;
}
#container{
width: 100%;
text-align: center;/*文字居中*/
position: absolute;/*绝对定位*/
top: 50%;
transform: translateY(-50%);/*使container在Y轴方向上移动50%*/
}
h1{
font-size: 55px;
margin-bottom: 22px;/*控制行间距，h1标题与下面p之间的距离*/
}
p{
font-size: 22px;
margin-botton:22px;
}
a{
font-size:33px;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 0 6 - 美化字体