0 0 0 7 - 优化传送门

xl7613 · 发表于 2017-8-2 12:32:58

学习学习

ttyhtg · 发表于 2018-2-2 23:56:35

每一次都自以为一模一样的代码，结果预览却不一样，反复检查，总会发现有某个字母打错了，或者少了一个符号，照抄前一节的代码都能抄错。。。。粗心要不得
360截图-279804375.jpg

夕颜梦雨 · 发表于 2018-3-8 17:30:43

本帖最后由夕颜梦雨于 2018-3-8 17:33 编辑

<!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;
                        color: #FFF;
                        border:1px solid #3FF;
                        background-color: #3FF;
                        border-radius: 10px;
                        padding: 10px 66px;
                        text-decoration: none;
                }
        </style>
</head>
<body>
        <div id="container">
                <h1>热爱鱼,热爱生活</h1>
                <p>www.fishc.com---让编程改变世界</p>
                <a href="#">传送门</a>
        </div>
</body>
</html>

rock5442107 · 发表于 2018-5-26 12:04:15

<!DOCTYPE html>
<html>
<head>
        <meata charset="UTF-8">
        <title>歡迎來到HTML世界</title>
        <style type="text/css">
                html,body{
                        height: 100%;
                        color: #00FF00;
                        font-family: sans-serif;
                }
                body{
                        background: url(KED08.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: 22px;
                }
                a{
                        font-size: 55px;
                        background: #000000;
                        color:#FFFFFF;
                        border:1px solid #0000FF;
                        border-radius: 10px;
                        padding:10px 66px;
                        text-decoration: none;
                }
        </style>
</head>

<body>
        <div id="container">
                <h1>我愛魚C</h1>
                <p>WWW.FishC.com - 讓編程改變世界</p>
                <a >傳送門</a>
        </div>
</body>
</html>

土耳其东木白 · 发表于 2018-5-29 14:08:48

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>欢迎来到HTML世界</title>
        <style type="text/css">
                html,body{
                        height: 100%;
                        color: #FA3;
                        font-family: cursive;
                }
                h1{
                        font-size: 33px;
                        margin-bottom: -20px;
                }
                p{
                        font-size: 22px;
                        margin-bottom: 22px;
                }
                a{
                        font-size: 33px;
                        color: #fff;
                        background: #0F0;
                        border: 5px solid #0f0;
                        border-radius: 10px;
                        padding: 1px 11px;
                        text-decoration: none;
                }
                body{
                        background: url(pic_02.png)center center;
                        background-size: cover;
                        margin: 0;
                        padding:0;
                        position: relative;
                }
                #container{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 60%;
                        transform: translateY(-50%);
                }
                #Gucci{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 20%;
                        transform: translateY(-50%);
                }
                #Prada{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 40%;
                        transform: translateY(-50%);                        
                }
        </style>
</head>
<body>
        <div id="container">
                <h1>我爱鱼C</h1>
                <p>WWW.FihsC.com - 让编程改变世界</p>
                <a >传送门</a>
        </div>
        <div id="Gucci">
                <h1>I love Gucci</h1>
                <p>Gucci Gucci Parada Parada</p>
                <a >传送门</a>
        </div>
        <div id="Prada">
                <h1>脚踩Prada的女魔头</h1>
                <p>WWW.FihsC.com - 让编程改变世界</p>
                <a >传送门</a>
        </div>
</body>
</html>

凌乱大帅比 · 发表于 2018-6-6 13:50:39

F:\学习\1.pngF:\学习\2.pngF:\学习\3.png
我都按教程做了，但为什么这个链接就是不居中呢，（先不管边框，我在其他字体上做了）

凌乱大帅比 · 发表于 2018-6-6 13:51:20

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

F:\学习\1.png

凌乱大帅比 · 发表于 2018-6-6 13:51:51

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

这个图怎么发啊.....

STmove · 发表于 2018-7-12 20:05:53

<!DOCTYPE HTML>
<!-- 0007优化链接，learned from 不二如是 -->
<html>
<head>
    <meat charset="utf-8">
    <title>welcome to the world of HTML</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="keywords" content="STmove,test">
    <meta name="description" content="学习测试">
    <meta name="author" content="STmove">
    
    <style type="text/css">
        html
        {
            height:100%;
            font-family:sans-serif; /*没反应啊*/
        }
        body
        {   
            background:url("320980.jpg") center center;   /*设置背景图水平和垂直位置为居中 */
            background-size:cover;  /*cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/
            margin:0;
            padding:0;
            <!-- position:relative; -->  /*相对坐标*/
        }
        #container
        {
            width:100%;
            text-align: center;   /*文字位置水平居中*/
            position: absolute;  /*绝对坐标*/
            top:50%;            /*距顶50%*/
            transform:translateY(-50%);  /*transform:该属性允许我们对元素进行旋转、缩放、移动或倾斜。translateY(-50%)：沿Y轴整体上移一半*/
        }
        h1
        {
            color:#0bf;
            font-size:66px;
            margin-bottom:22px;  /*设置与下面P元素之间的距离*/
        }
        p
        {
            color:#2df;
            font-size:33px;
            margin-bottom:22px;
        }
        a
        {
            color:#fff;
            background:“”;
            font-size:50px;
            border:4px solid #eee; /*加上2px的框线，实线(虚线是dotted)，颜色*/
            border-radius: 16px;      /*圆角6px*/
            padding:6px 66px;      /*内边距：上下  左右*/
            text-decoration:none;   /*文字下划线：None*/
        }
    </style>
</head>

<body>
    <div id="container">
        <h1>我爱鱼兮</h1>
        <p>www.FishC.org-让编程改变世界</p>
        <a href="http://www.FishC.org" target="_blank">JOIN US</a>
    </div>
</body>
</html>

我爱鱼C！ · 发表于 2018-7-15 07:43:58

交作业喽:

<!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("https://picsum.photos/1600/1200/?random") 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;

                        }
                        a {
                                background: #33ffff;
                                color: #fff;
                                border: 1px solid #33ffff;
                                border-radius: 10px;
                                padding: 10px 66px;
                                text-decoration: none;
                        }
                </style>
        </head>
        <body>
                <div id="container">
                        <h1>我爱鱼Ｃ</h1>
                        <p>www.fishc.com-让编程改变世界</p>
                        <a >咻!</a>
                </div>
        </body>
</html>

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>

soulwyb · 发表于 2018-10-11 23:35:14

<!DOCTYPE html>
<html>

<head>
    <title>
        XXX
    </title>
    <meta charset="utf-8">
    <style type="text/css">
        html {
            height: 100%;
            color: #FF0088;
            /* font-family: sans-serif; */
            font-family: sans-serif;
        }
        
        body {
            background: url(background.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;
            color: rgb(243, 211, 107);
            border: 1px solid #33ffff;
            border-radius: 10px;
            padding: 10px 66px;
            text-decoration: none;
            background: #33ffff
        }
    </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>

757722417 · 发表于 2018-11-18 14:42:16

wangguohui 发表于 2017-6-22 16:58

text-transform: translateY(-50%);
这句代码错了，是transform:translateY(-50%);

星海雪的钟爱 · 发表于 2019-2-20 15:41:51

交作业

border:用于设置边框
text-decoration:用于设置辅助线条的位置、颜色
padding:用于设置内边距

phszhuli · 发表于 2019-3-26 10:00:28

<!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;
                        background: #66B0A7;
                        color:#fff;
                        /*border: 5px double #ffffff;/*宽度。样式。颜色*/
                        border-radius: 10px;
                        padding: 10px 66px;/*上下两侧10px，左右两侧66px*/
                        text-decoration: none;/*定义无边框*/
                }
        </style>
</head>
<body>
        <div id="container"><!--div封装，id区块说明-->
<h1>我爱鱼C</h1> 
<p>WWW.FishC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

萌·小杨 · 发表于 2019-5-26 18:57:08

<!doctype html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>看什么看</title>
                <style type="text/css">
                        html {
                                height: 100%;
                                color: #00ff00;
                                margin:0;
                                padding:0;
                                position: relative;
                                font-family: sans-serif;
                        }
                        body {
                                background: url("bg.jpg") center center;
                                background-size: cover;
                        }
                        #container {
                                width: 100%;
                                text-align: center;
                                position:absolute;
                                top:50%;
                                transform:translateY(-50%);
                        }
                        h1 {
                                font-size:66px;
                                margin-bottom: 22px;
                        }
                        a {
                                font-size:55px;
                                color:#fff;
                                border: 1px solid #33ffff;
                                border-radius: 25px;
                                background:#33ffff;
                                padding:10px 60px;
                                text-decoration: none;
                        }
                </style>
        </head>
        <body>
                <div id="container">
                        <h1>老子哎FishC</h1>
                        <p>草泥马</p>
                        <a href="http://fishc.com.cn">传送！</a>
                </div>
        </body>
</html>

你在意在便在 · 发表于 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%;

transform: translateY(-50%);

}
p {
font-size: 33px;
margin-bottom: 22px;
}

a {
font-size: 55px;
border:1px solid gray;
border-radius: 10px;  
margin:10px 33px;
color:white;

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>

ricia · 发表于 2020-2-21 17:25:26

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础美化</title>
    <style type="text/css"> /*指定CSS的样式定义*/
        html,body{
            height: 100%;
            width: 100%; 
            color: pink; 
            font-family: sans-serif; /*系统默认最佳显示字体*/
        }

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

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

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

        p {
            font-size: 33px;
            margin-bottom: 22px;
        }

        a {
            font-size: 55px; 
            background: #3ff; /*背景颜色*/
            color: #fff; /*字体颜色*/
            border: 1px solid #3ff; /*1px的实心边框*/
            border-radius: 10px; /*圆角边框*/
            padding: 10px 66px; /*上下两侧10px，左右两侧，66px*/
            text-decoration: none; /*none就是去掉链接下划线*/
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>我爱鱼C</h1>
        <p>WWW.FishC.com - 让编程改变世界</p>
        <a href="http://www.ilovefishc.com">传送门</a>
    </div>
</body>
</html>

酒醉三分醒 · 发表于 2020-4-17 11:14:36

本帖最后由酒醉三分醒于 2020-4-17 11:16 编辑

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>欢迎来到HTML世界</title>
        <style type="text/css">
                html{
                        height: 100%;
                        color: #FFFFFF;
                }
                body{
                        background: url(stars.jpg) center center;
                        background-size: cover;
                        margin: 0;
                        padding: 0;
                        font-family: Sans - serif;
                }
                h1{
                        font-size: 66px;
                        margin-bottom: 22px;
                }
                p{
                        font-size: 33px;
                        margin-bottom: 22px;
                }
                a{
                        color: #444444;
                        font-size: 55px;
                        border: 1px solid #DDDDDD;
                        border-radius: 10px;
                        font-size: 20px;
                        background:#DDDDDD;
                        text-decoration: none;
                        padding: 10px 15px
                        
                }
        #container{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                }
        </style>
</head>
<body>
        <div id="container">
                <h1>我爱鱼C</h1>
                <p>让编程改变世界</p>
                <a href="https://fishc.com.cn">传送门</a>
        </div>
</html>

huanghuiyv · 发表于 2020-8-15 16:27:45

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TEST! TEST!!</title>
        <style type="text/css">

            html {
                height: 100%;
                font-family: sans-serif;
            }

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

            #container {
                width: 100%;
                text-align: center;
                position: absolute;
                top:50%;
                transform: translateY(-50%);
            }

            h1 {
                color: pink;
                font-size: 50px;
                margin-bottom: 15px;
            }

            p {
                color: honeydew;
                font-size: 20px;
                margin-bottom: 20px;
            }
            
            a {
                color: #DC143C;
                background: #33FFFF;
                font-size: 55px;
                border: 1px solid;       
                border-color: blue;
                border-radius: 10px;
                padding:10px 50px;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <h1>我爱鱼C</h1>
            <p>让编程改变世界!</p>
            <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
        </div>
    </body>
</html>

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

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

点评

评分