0 0 0 6 - 美化字体

xl7613 · 发表于 2017-8-2 08:07:15

继续学习

哨子1122 · 发表于 2017-8-8 19:38:54

标签<style>就是用来修饰<body>中的样式或者添加一些图片进去的吗

易改乌江水 · 发表于 2018-1-20 22:41:21

交交作业

<!DOCTYPE HTML>
<html>
        <head>
                <meta charset="utf-8">
                <title>易改乌江水</title>
                <style type="text/css">
                        html{
                                                height: 100%;
                                                color: #5599FF;
                                                font-family: sans-serif;
                                        }
                                body{
                                                background: url(background.jpg);
                                                background-size: cover;
                                                background: url(background.jpg) center center;
                                        }
                                #profile
                                        {
                                                width: 100%;
                                                text-align: center;
                                        }
                                #pic
                                        {
                                                width: 100%;
                                                text-align: center;
                                        }
                                #link
                                        {

                                        }
                                h1{
                        font-size: 66px;
                        margin-bottom: 22px;
                  }
                </style>
        </head>
        <body>
                <div id ="profile">
                        <h1>
                        欢迎来到易改乌江水的个人网站
                        </h1>
                        <p>
                        简介:一个热爱写诗的傻子
                        </p>
                </div>
                <br/>
                <div id="link">
                        <pre>
                                <a  href="http://mcbox.duowan.com">转到多玩我的世界盒子官网</a>
                                <a  href="http://www.mcbbs.net">转到MCBBS</a>
                                <hr /> 
                        </pre>
                </div>        
                <div id="pic">
                        <p>
                                <a  href="http://www.baidu.com.cn">
                                        <img  src="baidu.png" width="121" height="75" />
                                </a>
                                <br/>
                                <hr /> 
                        </p>
                        <p>
                                <a href="https://www.yahoo.com/">
                                        <img  src="yahoo.png" width="121" height="91" />
                                </a>
                                <br/>
                                <hr /> 
                        </p>
                        <p>
                                <a href="http://www.w3school.com.cn">
                                        <img src="w3school.gif" width="365" height="49" />
                                </a>
                                <br/>
                                <hr /> 
                        </p>
                        <p>
                                <a href="bbs.fishc.com">
                                        <img src="fishc.png" width="359" height="84" />
                                </a>
                                <br/>
                                <hr /> 
                        </p>
                        <p>
                                <a href="HTML2.html">
                                        <img  src="1.jpg" width="330" height="220" />
                                </a>
                                <br/>
                                <hr /> 
                        </p>
                </div>
        </body>
</html>

ttyhtg · 发表于 2018-2-1 23:04:26

看着果然好看多了。

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{
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>

之前都好好的，加了这节课调节代码后，显示又到顶端了，没有垂直居中效果了，何解？

helingyuan · 发表于 2018-2-9 03:55:28

越看越兴奋！

夕颜梦雨 · 发表于 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>

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>

rock5442107 · 发表于 2018-5-26 11:54:23

跟着不二师兄学习

土耳其东木白 · 发表于 2018-5-29 11:29:38

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>欢迎来到HTML世界</title>
        <style type="text/css">
                html,body{
                        height: 100%;
                        color: #BBFFAA;
                        font-family: cursive;
                }
                h1{
                        font-size: 33px;
                        margin-bottom: -20px;
                }
                p{
                        font-size: 22px;
                        margin-bottom: 22px;
                }
                a{
                        font-size: 22px;
                }
                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>我爱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>

Sert_My · 发表于 2018-6-10 13:19:44

<!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://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;
                                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;
                        }
                        h1{
                                font-size: 33px;
                                margin-bottom: 22px;
                        }
                        a {
                                font-size: 55px;
                        }
                </style>

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

STmove · 发表于 2018-7-12 19:40:25

木有变成宋体，还是原来的雅黑

<!DOCTYPE HTML>
<!-- 0006美化字体，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:#afe;
            font-size:33px;
            margin-bottom:22px;
        }
        a
        {
            color:#fff;
            font-size:50px;
        }
    </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:31:34

交作业喽:

<!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;
                        }
                </style>
        </head>
        <body>
                <div id="container">
                        <h1>我爱鱼Ｃ</h1>
                        <p>www.fishc.com-让编程改变世界</p>
                        <a >咻!</a>
                </div>
        </body>
</html>

船到桥头自然沉 · 发表于 2018-9-1 10:45:13

字体改了没变化

soulwyb · 发表于 2018-10-11 23:22:00

<!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;
        }
    </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>

好像没啥效果 WIN10的系统火狐61.02

guohuo888meng@1 · 发表于 2019-2-11 13:45:37

交作业

<!doctype html>
<html> 
          <head>
                <meta charset="utf-8">
                <title>第一个网页</title>

                <style type="text/css">
                        html,body{
                                height: 100%;
                                color:#ff0088;
                                font-family: sans-serif;
                        }
                        body{
                                        background:url(background.jpg) center center;
                                        background-size: cover;
                                        margin: 0;
                                        padding: 0;
                                        position: relative;

                        }
                        #A{
                                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="A">
                        <h1>我爱鱼C</h1>
                        <P>FISHC.COM</P>
                        <a >百度</a>

                </DIV>
        </body>
</html>

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

交作业：

font-size:更改字体大小
margin-bottom:控制元素与下方元素的距离

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

萌·小杨 · 发表于 2019-5-26 18:53:49

<!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;
                        }
                </style>
        </head>
        <body>
                <div id="container">
                        <h1>老子哎FishC</h1>
                        <p>草泥马</p>
                        <a href="http://fishc.com.cn">传送！</a>
                </div>
        </body>
</html>

Cloud1258 · 发表于 2019-8-21 00:02:10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>欢迎来到html的世界</title>
        <style type="text/css">
             html,body{
                 height: 100%;
                 color: #ffffff;
                 font-family: sans-serif;
             }
             body{
                 background: url(link.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: 22px;
             }
        </style>
    </head>
    <body>
        <div id="container">
            <h1>我爱编程</h1>
            <p>编程能静心</p>
            <a href="https://cn.bing.com">必应</a>
        </div>
    </body>
</html>

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

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

点评

评分

评分

评分

评分

评分