|
发表于 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"><!--div封装,id区块说明-->
- <h1>我爱鱼C</h1>
- <p>WWW.FishC.com - 让编程改变世界</p>
- <a >传送门</a>
- </div>
- </body>
- </html>
复制代码 |
|