设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 0 6 - 美化字体
123下一页
返回列表 发新帖
楼主: 不二如是

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

[复制链接]
xl7613
发表于 2017-8-2 08:07:15 | 显示全部楼层
继续学习
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

哨子1122
发表于 2017-8-8 19:38:54 | 显示全部楼层
标签<style>就是用来修饰<body>中的样式或者添加一些图片进去的吗
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

易改乌江水
发表于 2018-1-20 22:41:21 | 显示全部楼层
交交作业
  1. <!DOCTYPE HTML>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>易改乌江水</title>
  6.                 <style type="text/css">
  7.                         html{
  8.                                                 height: 100%;
  9.                                                 color: #5599FF;
  10.                                                 font-family: sans-serif;
  11.                                         }
  12.                                 body{
  13.                                                 background: url(background.jpg);
  14.                                                 background-size: cover;
  15.                                                 background: url(background.jpg) center center;
  16.                                         }
  17.                                 #profile
  18.                                         {
  19.                                                 width: 100%;
  20.                                                 text-align: center;
  21.                                         }
  22.                                 #pic
  23.                                         {
  24.                                                 width: 100%;
  25.                                                 text-align: center;
  26.                                         }
  27.                                 #link
  28.                                         {

  30.                                         }
  31.                                 h1{
  32.                         font-size: 66px;
  33.                         margin-bottom: 22px;
  34.                   }
  35.                 </style>
  36.         </head>
  37.         <body>
  38.                 <div id ="profile">
  39.                         <h1>
  40.                         欢迎来到易改乌江水的个人网站
  41.                         </h1>
  42.                         <p>
  43.                         简介:一个热爱写诗的傻子
  44.                         </p>
  45.                 </div>
  46.                 <br/>
  47.                 <div id="link">
  48.                         <pre>
  49.                                 <a  href="http://mcbox.duowan.com">转到多玩我的世界盒子官网</a>
  50.                                 <a  href="http://www.mcbbs.net">转到MCBBS</a>
  51.                                 <hr />
  52.                         </pre>
  53.                 </div>       
  54.                 <div id="pic">
  55.                         <p>
  56.                                 <a  href="http://www.baidu.com.cn">
  57.                                         <img  src="baidu.png" width="121" height="75" />
  58.                                 </a>
  59.                                 <br/>
  60.                                 <hr />
  61.                         </p>
  62.                         <p>
  63.                                 <a href="https://www.yahoo.com/">
  64.                                         <img  src="yahoo.png" width="121" height="91" />
  65.                                 </a>
  66.                                 <br/>
  67.                                 <hr />
  68.                         </p>
  69.                         <p>
  70.                                 <a href="http://www.w3school.com.cn">
  71.                                         <img src="w3school.gif" width="365" height="49" />
  72.                                 </a>
  73.                                 <br/>
  74.                                 <hr />
  75.                         </p>
  76.                         <p>
  77.                                 <a href="bbs.fishc.com">
  78.                                         <img src="fishc.png" width="359" height="84" />
  79.                                 </a>
  80.                                 <br/>
  81.                                 <hr />
  82.                         </p>
  83.                         <p>
  84.                                 <a href="HTML2.html">
  85.                                         <img  src="1.jpg" width="330" height="220" />
  86.                                 </a>
  87.                                 <br/>
  88.                                 <hr />
  89.                         </p>
  90.                 </div>
  91.         </body>
  92. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ttyhtg
发表于 2018-2-1 23:04:26 | 显示全部楼层
看着果然好看多了。

360截图-190415125.jpg

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-2-2 07:51

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

jcx1117
发表于 2018-2-7 13:36:22 | 显示全部楼层
<!doctype html>
<html>
<head>
<title>LOVE JENNY</title>
<meta charset="UTF-8">
<style type=text/css>
html,body{
height:100%;
color:#FF0088;<!--设置粉色字体-->

}
body{
background:url(jenny_background.jpg) center center;<!--背景图片 居中-->;
background-size:cover;
margin:0;<!--养成初始的好习惯，取消内边距和外边距-->
padding:0;
position:relative;<!--设置相对位置-->
}
#heart{
width:100%;
text-align:center;<!--设置水平居中-->
position:absolute;<!--设置绝对位置-->
top:50%;
font-family:sans-serif;<!--系统自动选择最佳显示字体-->
}
h1{
font-size:66px;<!--字体放大-->
margin-bottom:22px;<!--控制与下面p之间的距离-->
}
p{
font-size:33px;
margin-bottom:22px;
}
a{
font-size:55px;
}
</style>
</head>
<body>
<div id="heart">
<h1>爱鱼儿！</h1>
<p>LOVE FISHER！爱生活！</p>
<a href="http://fish-jenny.lofter.com/">LOVE JENNY!</a>
</div>
</body>
</html>

之前都好好的，加了这节课调节代码后，显示又到顶端了，没有垂直居中效果了，何解？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

helingyuan
发表于 2018-2-9 03:55:28 | 显示全部楼层
越看越兴奋！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

夕颜梦雨
发表于 2018-3-7 21:52:25 | 显示全部楼层
本帖最后由 夕颜梦雨 于 2018-3-7 21:53 编辑

逗号很重要,总是忘了逗号
<!DOCTYPE html>
<html>
<head>
        <title>欢迎来到HTML世界</title>
        <style type="text/css">
                html,body{
                        height: 100%;
                        color: #FF0088;
                        font-family: sans-serif;
                }
                body{
                        background: url(0004素材.jpg) center center;
                        background-size: cover;
                        margin: 0;
                        padding: 0;
                        position: relative;
                }
                #container{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                }
                h1{
                        font-size: 66px;
                        margin-bottom: 22px;
                }
                p{
                        font-size: 33px;
                        margin-bottom: 22px;
                }
                a{
                        font-size: 55px;
                }
        </style>
</head>
<body>
        <div id="container">
                <h1>I love Fishc.com</h1>
                <p>我爱鱼C---www.fishc.com</p>
                <a href="#">传送门</a>
        </div>
</body>
</html>
3.png

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

likesunshine
发表于 2018-3-8 16:29:01 | 显示全部楼层
话说放大了好多
<!doctype html>
<html>
                <head>
                                <meta charset="utf-8">
                                <title>欢迎来到HTML世界</title>
                                <style type="text/css">
                                        html,body{
                                                height: 100%;
                                                color: #FF0088;
                                                font-family: sans-serif;
                                        }
                                        body{
                                                background: url(background.jpg);
                                                background-size:cover;
                                                margin: 0;
                                                padding: 0;
                                                position: relative;
                                        }
                                        #container{
                                                width: 100%;
                                                text-align: center;
                                                position: absolute;
                                                top: 50%;
                                                transform: translateY(-50%);
                                                        }
                                        h1{
                                                                font-size: 66px;
                                                                margin-bottom: 22px;
                                                                }
                                        p{
                                                                font-size: 33px;
                                                                margin-bottom: 55px;
                                                                }
                                        a{
                                                                font-size: 55px;
                                                                }                       
                                </style>
                </head>
                <body>
                                                <div        id="container">
                                                <h1>我爱鱼C</h1>               
                                                <p>WWW.FishC.com - 继续学习</p>
                                                <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
                                                </div>
                </body>
</html>
360截图20180308162854422.jpg

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

rock5442107
发表于 2018-5-26 11:54:23 | 显示全部楼层
006.jpg
跟着不二师兄学习
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

土耳其东木白
发表于 2018-5-29 11:29:38 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         color: #BBFFAA;
  10.                         font-family: cursive;
  11.                 }
  12.                 h1{
  13.                         font-size: 33px;
  14.                         margin-bottom: -20px;
  15.                 }
  16.                 p{
  17.                         font-size: 22px;
  18.                         margin-bottom: 22px;
  19.                 }
  20.                 a{
  21.                         font-size: 22px;
  22.                 }
  23.                 body{
  24.                         background: url(pic_02.png)center center;
  25.                         background-size: cover;
  26.                         margin: 0;
  27.                         padding:0;
  28.                         position: relative;
  29.                 }
  30.                 #container{
  31.                         width: 100%;
  32.                         text-align: center;
  33.                         position: absolute;
  34.                         top: 60%;
  35.                         transform: translateY(-50%);
  36.                 }
  37.                 #Gucci{
  38.                         width: 100%;
  39.                         text-align: center;
  40.                         position: absolute;
  41.                         top: 20%;
  42.                         transform: translateY(-50%);
  43.                 }
  44.                 #Prada{
  45.                         width: 100%;
  46.                         text-align: center;
  47.                         position: absolute;
  48.                         top: 40%;
  49.                         transform: translateY(-50%);                       
  50.                 }
  51.         </style>
  52. </head>
  53. <body>
  54.         <div id="container">
  55.                 <h1>我爱鱼C</h1>
  56.                 <p>WWW.FihsC.com - 让编程改变世界</p>
  57.                 <a >传送门</a>
  58.         </div>
  59.         <div id="Gucci">
  60.                 <h1>我爱Gucci</h1>
  61.                 <p>Gucci Gucci Parada Parada</p>
  62.                 <a >传送门</a>
  63.         </div>
  64.         <div id="Prada">
  65.                 <h1>脚踩Prada的女魔头</h1>
  66.                 <p>WWW.FihsC.com - 让编程改变世界</p>
  67.                 <a >传送门</a>
  68.         </div>
  69. </body>
  70. </html>


复制代码
pic_05.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Sert_My
发表于 2018-6-10 13:19:44 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>欢迎来到html世界</title>
  6.                 <style type="text/css">
  7.                         html,body{
  8.                                 height: 100%;
  9.                                 color: #FF0088;
  10.                                 font-family: sans-serif;
  11.                         }
  12.                         body {
  13.                                 background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528606019071&di=1e968ad4299ede9ae69c7e69fedff785&imgtype=0&src=http%3A%2F%2F4k.znds.com%2F20140314%2F4kznds3.jpg") center center;
  14.                                 background-size: cover;
  15.                                 margin: 0;
  16.                                 padding: 0;
  17.                                 position: relative;
  18.                         }
  19.                         #container{
  20.                                 width: 100%;
  21.                                 text-align: center;
  22.                                 position: absolute;
  23.                                 top: 50%;
  24.                                 transform: translateY(-50%);
  25.                         }
  26.                         h1{
  27.                                 font-size: 66px;
  28.                                 margin-bottom: 22px;
  29.                         }
  30.                         h1{
  31.                                 font-size: 33px;
  32.                                 margin-bottom: 22px;
  33.                         }
  34.                         a {
  35.                                 font-size: 55px;
  36.                         }
  37.                 </style>

  39.         </head>
  40.         <body>
  41.                 <div id="container">
  42.                         <h1>我爱鱼C</h1>
  43.                         <p>WWW.FihsC.com - 让编程改变世界</p>
  44.                         <a href="http://bbs.fishc.com">传送门</a>
  45.                 </div>
  46.         </body>
  47. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

STmove
发表于 2018-7-12 19:40:25 | 显示全部楼层
木有变成宋体，还是原来的雅黑
  1. <!DOCTYPE HTML>
  2. <!-- 0006美化字体，learned from 不二如是 -->
  3. <html>
  4. <head>
  5.     <meat charset="utf-8">
  6.     <title>welcome to the world of HTML</title>
  7.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8.     <meta name="keywords" content="STmove,test">
  9.     <meta name="description" content="学习测试">
  10.     <meta name="author" content="STmove">
  11.    
  12.     <style type="text/css">
  13.         html
  14.         {
  15.             height:100%;
  16.             font-family:sans-serif; /*没反应啊*/
  17.         }
  18.         body
  19.         {   
  20.             background:url("320980.jpg") center center;   /*设置背景图水平和垂直位置为居中 */
  21.             background-size:cover;  /*cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/
  22.             margin:0;
  23.             padding:0;
  24.             <!-- position:relative; -->  /*相对坐标*/
  25.         }
  26.         #container
  27.         {
  28.             width:100%;
  29.             text-align: center;   /*文字位置水平居中*/
  30.             position: absolute;  /*绝对坐标*/
  31.             top:50%;            /*距顶50%*/
  32.             transform:translateY(-50%);  /*transform:该属性允许我们对元素进行旋转、缩放、移动或倾斜。translateY(-50%)：沿Y轴整体上移一半*/
  33.         }
  34.         h1
  35.         {
  36.             color:#0bf;
  37.             font-size:66px;
  38.             margin-bottom:22px;  /*设置与下面P元素之间的距离*/
  39.         }
  40.         p
  41.         {
  42.             color:#afe;
  43.             font-size:33px;
  44.             margin-bottom:22px;
  45.         }
  46.         a
  47.         {
  48.             color:#fff;
  49.             font-size:50px;
  50.         }
  51.     </style>
  52. </head>

  54. <body>
  55.     <div id="container">
  56.         <h1>我爱鱼兮</h1>
  57.         <p>www.FishC.org-让编程改变世界</p>
  58.         <a href="http://www.FishC.org" target="_blank">JOIN US</a>
  59.     </div>
  60. </body>
  61. </html>
复制代码

微信截图_20180712193732.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-7-13 08:26

评分

参与人数 1荣誉 +5 鱼币 +5 收起 理由
不二如是 + 5 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

我爱鱼C！
发表于 2018-7-15 07:31:34 | 显示全部楼层
交作业喽:
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>欢迎来到HTML世界</title>
  6.                 <style type="text/css">
  7.                         html,body {
  8.                                 height: 100%;
  9.                                 color: #FF0088;
  10.                                 font-family: sans-serif;
  11.                         }
  12.                         body {
  13.                                 background: url("https://picsum.photos/1600/1200/?random") center center;
  14.                                 background-size: cover;
  15.                                 margin: 0;
  16.                                 padding: 0;
  17.                                 position: relative;
  18.                         }
  19.                         #container {
  20.                                 width: 100%;
  21.                                 text-align: center;
  22.                                 position: absolute;
  23.                                 top: 50%;
  24.                                 transform: translateY(-50%);
  25.                         }
  26.                         h1 {
  27.                                 font-size: 66px;
  28.                                 margin-bottom: 22px;
  29.                         }
  30.                         p {
  31.                                 font-size: 33px;
  32.                                 margin-bottom: 22px;
  33.                         }
  34.                         a {
  35.                                 font-size: 55px;
  36.                         }
  37.                 </style>
  38.         </head>
  39.         <body>
  40.                 <div id="container">
  41.                         <h1>我爱鱼Ｃ</h1>
  42.                         <p>www.fishc.com-让编程改变世界</p>
  43.                         <a >咻!</a>
  44.                 </div>
  45.         </body>
  46. </html>
复制代码

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-9-1 10:48

评分

参与人数 1鱼币 +3 收起 理由
不二如是 + 3 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

船到桥头自然沉
发表于 2018-9-1 10:45:13 | 显示全部楼层
字体改了没变化
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

soulwyb
发表于 2018-10-11 23:22:00 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <title>
  6.         XXX
  7.     </title>
  8.     <meta charset="utf-8">
  9.     <style type="text/css">
  10.         html {
  11.             height: 100%;
  12.             color: #FF0088;
  13.             /* font-family: sans-serif; */
  14.             font-family: sans-serif;
  15.         }
  16.         
  17.         body {
  18.             background: url(background.jpg) center center;
  19.             background-size: cover;
  20.             margin: 0;
  21.             padding: 0;
  22.             /*position: relative;*/
  23.         }
  24.         
  25.         #container {
  26.             width: 100%;
  27.             text-align: center;
  28.             position: absolute;
  29.             top: 50%;
  30.             transform: translateY(-50%);
  31.         }
  32.         
  33.         h1 {
  34.             font-size: 66px;
  35.             margin-bottom: 22px;
  36.         }
  37.         
  38.         p {
  39.             font-size: 33px;
  40.             margin-bottom: 22px;
  41.         }
  42.         
  43.         a {
  44.             font-size: 55px;
  45.         }
  46.     </style>
  47. </head>

  49. <body>
  50.     <div id="container">
  51.         <h1>我爱鱼C</h1>
  52.         <p>www.FishC.com - 让编程改变世界</p>
  53.         <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  54.     </div>
  55. </body>

  57. </html>
复制代码


好像没啥效果 WIN10的系统 火狐61.02
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

guohuo888meng@1
发表于 2019-2-11 13:45:37 | 显示全部楼层
交作业
  1. <!doctype html>
  2. <html>
  3.           <head>
  4.                 <meta charset="utf-8">
  5.                 <title>第一个网页</title>

  7.                 <style type="text/css">
  8.                         html,body{
  9.                                 height: 100%;
  10.                                 color:#ff0088;
  11.                                 font-family: sans-serif;
  12.                         }
  13.                         body{
  14.                                         background:url(background.jpg) center center;
  15.                                         background-size: cover;
  16.                                         margin: 0;
  17.                                         padding: 0;
  18.                                         position: relative;

  20.                         }
  21.                         #A{
  22.                                 width: 100%;
  23.                                 text-align: center;
  24.                                 position: absolute;
  25.                                 top: 50%;
  26.                                 transform: translateY(-50%);
  27.                            }
  28.             h1{
  29.                     font-size: 66px;
  30.                     margin-bottom: 22px;
  31.             }
  32.             p{
  33.                     font-size: 33px;
  34.                     margin-bottom: 22px;
  35.             }
  36.             a{
  37.                     font-size: 55px;

  39.             }
  40.                 </style>
  41.          </head>
  42.         <body >
  43.                 <DIV ID="A">
  44.                         <h1>我爱鱼C</h1>
  45.                         <P>FISHC.COM</P>
  46.                         <a >百度</a>

  48.                 </DIV>
  49.         </body>
  50. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

星海雪的钟爱
发表于 2019-2-20 15:32:45 | 显示全部楼层
交作业：
  1. font-size:更改字体大小
  2. margin-bottom:控制元素与下方元素的距离
复制代码
06.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

phszhuli
发表于 2019-3-26 09:21:16 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <style type="text/css">/*指定CSS的样式定义*/
  7.                 body{
  8.                         background: url(1.png)center center;/*图片加center center，就能保持一直显示中间位置，如果不加，当页面缩小到小于图片尺寸时，只能出现图片顶部、左侧的内容*/
  9.                         background-size: cover;/*不会产生平铺的效果，只会一张图放大缩小*/
  10.                         margin: 0;
  11.                         padding: 0;/*潜规则，提高自主控制*/
  12.                         position: relative;/*若设置containertop属性，container必须绝对定位，body相对定位*/

  14.                 }
  15.                
  16.                 html,body{/*为了确保照片自适应屏幕显示，需要给body以及body的父级（html）设置height属性，使之充满全屏。*/
  17.                         height: 100%; /* height如果不设置100%，就会出现重复
  18.                 */
  19.                         color: #ffffff;
  20.                         font-family:sans-serif;

  22.                 }
  23.                 #container{
  24.                         width: 100%;
  25.                         text-align: center;/*文字居中*/
  26.                         position: absolute;/*绝对定位*/
  27.                         top: 50%;
  28.                         transform: translateY(-50%);/*使container在Y轴方向上移动50%*/
  29.                 }
  30.                 h1{
  31.                         font-size: 55px;
  32.                         margin-bottom: 22px;/*控制行间距，h1标题与下面p之间的距离*/
  33.                 }
  34.                 p{
  35.                         font-size: 22px;
  36.                         margin-botton:22px;
  37.                 }
  38.                 a{
  39.                         font-size:33px;
  40.                 }
  41.         </style>
  42. </head>
  43. <body>
  44.         <div id="container"><!--div封装，id区块说明-->
  45. <h1>我爱鱼C</h1>
  46. <p>WWW.FishC.com - 让编程改变世界</p>
  47. <a >传送门</a>
  48. </div>
  49. </body>
  50. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

萌·小杨
发表于 2019-5-26 18:53:49 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>看什么看</title>
  6.                 <style type="text/css">
  7.                         html {
  8.                                 height: 100%;
  9.                                 color: #00ff00;
  10.                                 margin:0;
  11.                                 padding:0;
  12.                                 position: relative;
  13.                                 font-family: sans-serif;
  14.                         }
  15.                         body {
  16.                                 background: url("bg.jpg") center center;
  17.                                 background-size: cover;
  18.                         }
  19.                         #container {
  20.                                 width: 100%;
  21.                                 text-align: center;
  22.                                 position:absolute;
  23.                                 top:50%;
  24.                                 transform:translateY(-50%);
  25.                         }
  26.                         h1 {
  27.                                 font-size:66px;
  28.                                 margin-bottom: 22px;
  29.                         }
  30.                         a {
  31.                                 font-size:55px;
  32.                         }
  33.                 </style>
  34.         </head>
  35.         <body>
  36.                 <div id="container">
  37.                         <h1>老子哎FishC</h1>
  38.                         <p>草泥马</p>
  39.                         <a href="http://fishc.com.cn">传送！</a>
  40.                 </div>
  41.         </body>
  42. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Cloud1258
发表于 2019-8-21 00:02:10 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到html的世界</title>
  6.         <style type="text/css">
  7.              html,body{
  8.                  height: 100%;
  9.                  color: #ffffff;
  10.                  font-family: sans-serif;
  11.              }
  12.              body{
  13.                  background: url(link.jpg) center center;
  14.                  background-size: cover;
  15.                  margin: 0;
  16.                  padding:0;
  17.                  position: relative;
  18.              }
  19.              #container{
  20.                  width: 100%;
  21.                  text-align: center;
  22.                  position: absolute;
  23.                  top:50%;
  24.                  transform: translateY(-50%);
  25.              }
  26.              h1{
  27.                  font-size: 66px;
  28.                  margin-bottom: 22px;
  29.              }
  30.              p{
  31.                  font-size: 33px;
  32.                  margin-bottom: 22px;
  33.              }
  34.              a{
  35.                  font-size: 22px;
  36.              }
  37.         </style>
  38.     </head>
  39.     <body>
  40.         <div id="container">
  41.             <h1>我爱编程</h1>
  42.             <p>编程能静心</p>
  43.             <a href="https://cn.bing.com">必应</a>
  44.         </div>
  45.     </body>
  46. </html>
复制代码


想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

下一页 »
123下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-26 00:17

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表