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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 0 7 - 优化传送门
123下一页
返回列表 发新帖
楼主: 不二如是

[庖丁解牛] 0 0 0 7 - 优化传送门

[复制链接]
xl7613
发表于 2017-8-2 12:32:58 | 显示全部楼层
学习学习
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ttyhtg
发表于 2018-2-2 23:56:35 | 显示全部楼层
每一次都自以为一模一样的代码，结果预览却不一样，反复检查，总会发现有某个字母打错了，或者少了一个符号，照抄前一节的代码都能抄错。。。。粗心要不得
360截图-279804375.jpg
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

夕颜梦雨
发表于 2018-3-8 17:30:43 | 显示全部楼层
本帖最后由 夕颜梦雨 于 2018-3-8 17:33 编辑
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>欢迎来到HTML世界</title>
  5.         <style type="text/css">
  6.                 html,body{
  7.                         height: 100%;
  8.                         color: #FF0088;
  9.                         font-family: sans-serif;
  10.                 }
  11.                 body{
  12.                         background: url(0004素材.jpg) center center;
  13.                         background-size: cover;
  14.                         margin: 0;
  15.                         padding: 0;
  16.                         position: relative;
  17.                 }
  18.                 #container{
  19.                         width: 100%;
  20.                         text-align: center;
  21.                         position: absolute;
  22.                         top: 50%;
  23.                         transform: translateY(-50%);
  24.                 }
  25.                 h1{
  26.                         font-size: 66px;
  27.                         margin-bottom: 22px;
  28.                 }
  29.                 p{
  30.                         font-size: 33px;
  31.                         margin-bottom: 22px;
  32.                 }
  33.                 a{
  34.                         font-size: 55px;
  35.                         color: #FFF;
  36.                         border:1px solid #3FF;
  37.                         background-color: #3FF;
  38.                         border-radius: 10px;
  39.                         padding: 10px 66px;
  40.                         text-decoration: none;
  41.                 }
  42.         </style>
  43. </head>
  44. <body>
  45.         <div id="container">
  46.                 <h1>热爱鱼,热爱生活</h1>
  47.                 <p>www.fishc.com---让编程改变世界</p>
  48.                 <a href="#">传送门</a>
  49.         </div>
  50. </body>
  51. </html>
复制代码

QQ图片20180308173142.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

rock5442107
发表于 2018-5-26 12:04:15 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meata charset="UTF-8">
  5.         <title>歡迎來到HTML世界</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         color: #00FF00;
  10.                         font-family: sans-serif;
  11.                 }
  12.                 body{
  13.                         background: url(KED08.jpg);
  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.                         background: #000000;
  37.                         color:#FFFFFF;
  38.                         border:1px solid #0000FF;
  39.                         border-radius: 10px;
  40.                         padding:10px 66px;
  41.                         text-decoration: none;
  42.                 }
  43.         </style>
  44. </head>

  46. <body>
  47.         <div id="container">
  48.                 <h1>我愛魚C</h1>
  49.                 <p>WWW.FishC.com - 讓編程改變世界</p>
  50.                 <a >傳送門</a>
  51.         </div>
  52. </body>
  53. </html>
复制代码

007.jpg
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

土耳其东木白
发表于 2018-5-29 14:08:48 | 显示全部楼层
  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: #FA3;
  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: 33px;
  22.                         color: #fff;
  23.                         background: #0F0;
  24.                         border: 5px solid #0f0;
  25.                         border-radius: 10px;
  26.                         padding: 1px 11px;
  27.                         text-decoration: none;
  28.                 }
  29.                 body{
  30.                         background: url(pic_02.png)center center;
  31.                         background-size: cover;
  32.                         margin: 0;
  33.                         padding:0;
  34.                         position: relative;
  35.                 }
  36.                 #container{
  37.                         width: 100%;
  38.                         text-align: center;
  39.                         position: absolute;
  40.                         top: 60%;
  41.                         transform: translateY(-50%);
  42.                 }
  43.                 #Gucci{
  44.                         width: 100%;
  45.                         text-align: center;
  46.                         position: absolute;
  47.                         top: 20%;
  48.                         transform: translateY(-50%);
  49.                 }
  50.                 #Prada{
  51.                         width: 100%;
  52.                         text-align: center;
  53.                         position: absolute;
  54.                         top: 40%;
  55.                         transform: translateY(-50%);                       
  56.                 }
  57.         </style>
  58. </head>
  59. <body>
  60.         <div id="container">
  61.                 <h1>我爱鱼C</h1>
  62.                 <p>WWW.FihsC.com - 让编程改变世界</p>
  63.                 <a >传送门</a>
  64.         </div>
  65.         <div id="Gucci">
  66.                 <h1>I love Gucci</h1>
  67.                 <p>Gucci Gucci Parada Parada</p>
  68.                 <a >传送门</a>
  69.         </div>
  70.         <div id="Prada">
  71.                 <h1>脚踩Prada的女魔头</h1>
  72.                 <p>WWW.FihsC.com - 让编程改变世界</p>
  73.                 <a >传送门</a>
  74.         </div>
  75. </body>
  76. </html>


复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

凌乱大帅比
发表于 2018-6-6 13:50:39 | 显示全部楼层
F:\学习\1.pngF:\学习\2.pngF:\学习\3.png
我都按教程做了，但为什么这个链接就是不居中呢，（先不管边框，我在其他字体上做了）
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

凌乱大帅比
发表于 2018-6-6 13:51:20 | 显示全部楼层
凌乱大帅比 发表于 2018-6-6 13:50
我都按教程做了，但为什么这个链接就是不居中呢，（先不管边框，我在其他字体上做了）

F:\学习\1.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

凌乱大帅比
发表于 2018-6-6 13:51:51 | 显示全部楼层
凌乱大帅比 发表于 2018-6-6 13:50
我都按教程做了，但为什么这个链接就是不居中呢，（先不管边框，我在其他字体上做了）

这个图怎么发啊.....
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

STmove
发表于 2018-7-12 20:05:53 | 显示全部楼层
  1. <!DOCTYPE HTML>
  2. <!-- 0007优化链接，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:#2df;
  43.             font-size:33px;
  44.             margin-bottom:22px;
  45.         }
  46.         a
  47.         {
  48.             color:#fff;
  49.             background:“”;
  50.             font-size:50px;
  51.             border:4px solid #eee; /*加上2px的框线，实线(虚线是dotted)，颜色*/
  52.             border-radius: 16px;      /*圆角6px*/
  53.             padding:6px 66px;      /*内边距：上下  左右*/
  54.             text-decoration:none;   /*文字下划线：None*/
  55.         }
  56.     </style>
  57. </head>

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

微信截图_20180712200439.png

点评

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

评分

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

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

我爱鱼C！
发表于 2018-7-15 07:43:58 | 显示全部楼层
交作业喽:
  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;

  37.                         }
  38.                         a {
  39.                                 background: #33ffff;
  40.                                 color: #fff;
  41.                                 border: 1px solid #33ffff;
  42.                                 border-radius: 10px;
  43.                                 padding: 10px 66px;
  44.                                 text-decoration: none;
  45.                         }
  46.                 </style>
  47.         </head>
  48.         <body>
  49.                 <div id="container">
  50.                         <h1>我爱鱼Ｃ</h1>
  51.                         <p>www.fishc.com-让编程改变世界</p>
  52.                         <a >咻!</a>
  53.                 </div>
  54.         </body>
  55. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

aiqinghuilaidao
发表于 2018-9-14 13:06:21 | 显示全部楼层
wangguohui 发表于 2017-6-22 16:58

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>我的第一个html</title>
        <style type="text/css">
                html{
                        height: 100%;
                        color: #FF0088;
                        font-family: sans-serif;
                }
       
                body{
                        background: url(7.jpg) center center;
                        background-size: cover;
                        margin: 0;
                        padding: 0;
                        position: relative;
                }
                h1{
                        font-size: 66px;
                        margin-bottom: 22px;
                }
                a{
                        font-size: 55px;
                        background: #33FFFF;
                        color: #888888;
                        border: 1px solid #888888;
                        border-radius: 10px;
                        padding:10px 66px;
                        text-decoration: none;
                }
                #container{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top:50%;
                        transform: translateY(+50%);
                }
        </style>
</head>
<body>
         <div id="container">
                <h1>我爱鱼C</h1>
                <p>WWW.FihsC.com - 让编程改变世界</p>
                <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
        </div>
</body>
</html>
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

soulwyb
发表于 2018-10-11 23:35:14 | 显示全部楼层
  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.             color: rgb(243, 211, 107);
  46.             border: 1px solid #33ffff;
  47.             border-radius: 10px;
  48.             padding: 10px 66px;
  49.             text-decoration: none;
  50.             background: #33ffff
  51.         }
  52.     </style>
  53. </head>

  55. <body>
  56.     <div id="container">
  57.         <h1>我爱鱼C</h1>
  58.         <p>www.FishC.com - 让编程改变世界</p>
  59.         <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  60.     </div>
  61. </body>

  63. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

757722417
发表于 2018-11-18 14:42:16 | 显示全部楼层
wangguohui 发表于 2017-6-22 16:58

text-transform: translateY(-50%);
这句代码错了，是transform:translateY(-50%);
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

星海雪的钟爱
发表于 2019-2-20 15:41:51 | 显示全部楼层
交作业
  1. border:用于设置边框
  2. text-decoration:用于设置辅助线条的位置、颜色
  3. padding:用于设置内边距
复制代码
07.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

phszhuli
发表于 2019-3-26 10:00:28 | 显示全部楼层
  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.                         background: #66B0A7;
  41.                         color:#fff;
  42.                         /*border: 5px double #ffffff;/*宽度。样式。颜色*/
  43.                         border-radius: 10px;
  44.                         padding: 10px 66px;/*上下两侧10px，左右两侧66px*/
  45.                         text-decoration: none;/*定义无边框*/
  46.                 }
  47.         </style>
  48. </head>
  49. <body>
  50.         <div id="container"><!--div封装，id区块说明-->
  51. <h1>我爱鱼C</h1>
  52. <p>WWW.FishC.com - 让编程改变世界</p>
  53. <a >传送门</a>
  54. </div>
  55. </body>
  56. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

萌·小杨
发表于 2019-5-26 18:57:08 | 显示全部楼层
  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.                                 color:#fff;
  33.                                 border: 1px solid #33ffff;
  34.                                 border-radius: 25px;
  35.                                 background:#33ffff;
  36.                                 padding:10px 60px;
  37.                                 text-decoration: none;
  38.                         }
  39.                 </style>
  40.         </head>
  41.         <body>
  42.                 <div id="container">
  43.                         <h1>老子哎FishC</h1>
  44.                         <p>草泥马</p>
  45.                         <a href="http://fishc.com.cn">传送！</a>
  46.                 </div>
  47.         </body>
  48. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 2019-10-26 08:34:22 | 显示全部楼层
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>让编程改变世界</title>
                <style text="text/css">
                        html,body {
                                color: pink;
                                height: 100%;
                                font-family: sans-serif;
                        }
                        h1 {
                                font-size: 66px;
                                margin-bottom: 22px;
                        }
                        body {
                                background-size: cover;
                                background: url(003.jpg) center center;
                                margin: 0;
                                padding: 0;
                                position: relative;
                        }
                        #container {
                                position: absolute;
                                text-align: center;
                                width: 100%;
                                top: 50%;
                                <!-- container 这个div移到页面50% 下方，
                                想要真正实现内容也居中，则需要Y轴偏移-50%即可； -->
                                transform: translateY(-50%);
                                <!-- border: 1px solid red; -->
                        }
                        p {
                                font-size: 33px;
                                margin-bottom: 22px;
                        }
                       
                        a {
                                font-size: 55px;
                                border:1px solid gray;
                                border-radius: 10px;  <!-- 四边圆角 -->
                                margin:10px 33px;
                                color:white;
                                <!-- background:#33ffff; -->
                                text-decoration:none;
                        }
                </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>
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ricia
发表于 2020-2-21 17:25:26 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>基础美化</title>
  7.     <style type="text/css"> /*指定CSS的样式定义*/
  8.         html,body{
  9.             height: 100%;
  10.             width: 100%;
  11.             color: pink;
  12.             font-family: sans-serif; /*系统默认最佳显示字体*/
  13.         }

  15.         body {
  16.             background: url("../img/ilovefishc.jpg") center center; /*设置背景图水平和垂直位置为居中 */
  17.             background-size: cover; /*背景图像扩展完全覆盖背景区域*/
  18.             margin: 0; /*初始化外边距*/
  19.             padding: 0; /*初始化内边距，提高自主控制*/
  20.             position: relative; /*相对定位*/
  21.         }

  23.         #container {
  24.             width: 100%; /*横向扩充满屏*/
  25.             text-align: center; /*文字水平居中*/
  26.             position: absolute; /*绝对定位*/
  27.             top: 50%; /*距离顶端50%*/
  28.             transform: translateY(-50%); /*自身沿Y轴整体上移一半*/
  29.         }

  31.         h1 {
  32.             font-size: 66px; /*字体大小*/
  33.             margin-bottom: 22px; /*控制h1标题与下面p之间的距离*/
  34.         }

  36.         p {
  37.             font-size: 33px;
  38.             margin-bottom: 22px;
  39.         }

  41.         a {
  42.             font-size: 55px;
  43.             background: #3ff; /*背景颜色*/
  44.             color: #fff; /*字体颜色*/
  45.             border: 1px solid #3ff; /*1px的实心边框*/
  46.             border-radius: 10px; /*圆角边框*/
  47.             padding: 10px 66px; /*上下两侧10px，左右两侧，66px*/
  48.             text-decoration: none; /*none就是去掉链接下划线*/
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <div id="container">
  54.         <h1>我爱鱼C</h1>
  55.         <p>WWW.FishC.com - 让编程改变世界</p>
  56.         <a href="http://www.ilovefishc.com">传送门</a>
  57.     </div>
  58. </body>
  59. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

酒醉三分醒
发表于 2020-4-17 11:14:36 | 显示全部楼层
本帖最后由 酒醉三分醒 于 2020-4-17 11:16 编辑
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <style type="text/css">
  7.                 html{
  8.                         height: 100%;
  9.                         color: #FFFFFF;
  10.                 }
  11.                 body{
  12.                         background: url(stars.jpg) center center;
  13.                         background-size: cover;
  14.                         margin: 0;
  15.                         padding: 0;
  16.                         font-family: Sans - serif;
  17.                 }
  18.                 h1{
  19.                         font-size: 66px;
  20.                         margin-bottom: 22px;
  21.                 }
  22.                 p{
  23.                         font-size: 33px;
  24.                         margin-bottom: 22px;
  25.                 }
  26.                 a{
  27.                         color: #444444;
  28.                         font-size: 55px;
  29.                         border: 1px solid #DDDDDD;
  30.                         border-radius: 10px;
  31.                         font-size: 20px;
  32.                         background:#DDDDDD;
  33.                         text-decoration: none;
  34.                         padding: 10px 15px
  35.                        
  36.                 }
  37.         #container{
  38.                         width: 100%;
  39.                         text-align: center;
  40.                         position: absolute;
  41.                         top: 50%;
  42.                         transform: translateY(-50%);
  43.                 }
  44.         </style>
  45. </head>
  46. <body>
  47.         <div id="container">
  48.                 <h1>我爱鱼C</h1>
  49.                 <p>让编程改变世界</p>
  50.                 <a href="https://fishc.com.cn">传送门</a>
  51.         </div>
  52. </html>
复制代码

QQ图片20200417111625.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

huanghuiyv
发表于 2020-8-15 16:27:45 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>TEST! TEST!!</title>
  6.         <style type="text/css">

  8.             html {
  9.                 height: 100%;
  10.                 font-family: sans-serif;
  11.             }

  13.             body {
  14.                 margin: 0;
  15.                 padding: 0;
  16.                 /* position: relative; */
  17.                 background: url([img]https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/532110/5b512f23e387af896fdb1589d7f8ae854e731cbd.jpg[/img]) center center;
  18.                 background-size: cover;
  19.             }

  21.             #container {
  22.                 width: 100%;
  23.                 text-align: center;
  24.                 position: absolute;
  25.                 top:50%;
  26.                 transform: translateY(-50%);
  27.             }

  29.             h1 {
  30.                 color: pink;
  31.                 font-size: 50px;
  32.                 margin-bottom: 15px;
  33.             }

  35.             p {
  36.                 color: honeydew;
  37.                 font-size: 20px;
  38.                 margin-bottom: 20px;
  39.             }
  40.             
  41.             a {
  42.                 color: #DC143C;
  43.                 background: #33FFFF;
  44.                 font-size: 55px;
  45.                 border: 1px solid;      
  46.                 border-color: blue;
  47.                 border-radius: 10px;
  48.                 padding:10px 50px;
  49.                 text-decoration: none;
  50.             }
  51.         </style>
  52.     </head>

  54.     <body>
  55.         <div id="container">
  56.             <h1>我爱鱼C</h1>
  57.             <p>让编程改变世界!</p>
  58.             <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  59.         </div>
  60.     </body>
  61. </html>
复制代码
Snipaste_2020-08-15_13-44-34.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-6-8 21:57

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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