0 0 0 6 - 美化字体

不二如是 · 发表于 2017-1-8 19:18:23

购买主题 已有 65 人购买 本主题需向作者支付 2 鱼币 才能浏览

黑色蒙面人 · 发表于 2017-3-23 01:15:51

<!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(123.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;
background:#33FFFF;
color:#FFF;
border:1px solid #33FFFF;
border-radius:10px;
padding:10px 66px;
text-decoration:none;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com -让编程改变世界</p>
<a href="http://www.FishC.com">传送门</a>
</div>
</body>
</html>

没有出现雅黑字体还是原来的宋体

hwx8777115 · 发表于 2017-5-9 18:49:04

作业

<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <title>欢迎来到国际大厦酒店调查问卷界面！</title>
                <style type="text/css">
                        html,body{
                                height:100%;
                                color:#000000;
                                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:33px;
                        }
                </style>
        </head>
        <body>
                <div id="container">
                        <h1>国际大厦酒店</h1>
                        <p>  餐饮部：</p>
                        <a href="https://www.baidu.com/?tn=96674718_hao_pg">传送门</a>
                
        </body>
</html>

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

看着果然好看多了。

aluominhai · 发表于 2017-2-8 14:33:40

默认字体挺好看了，木有改

dps521 · 发表于 2017-2-15 18:16:36

看看来

不二如是 · 发表于 2017-2-15 18:38:48

dps521 发表于 2017-2-15 18:16
看看来

欢迎

金哥专用 · 发表于 2017-3-1 13:38:46

感谢分享！

longwutian004 · 发表于 2017-3-2 17:14:38

这一节很有用，果断收藏

fishc1008 · 发表于 2017-3-2 20:50:40

美美美

345127857 · 发表于 2017-3-7 13:34:06

支持楼主1！！！！

黑色蒙面人 · 发表于 2017-3-23 00:59:58

为啥我设置了sans-serif显示的字体还是宋体。。
系统是win10的

不二如是 · 发表于 2017-3-23 08:36:37

黑色蒙面人发表于 2017-3-23 01:15
欢迎来到html世界

html,body{

辛苦这位鱼油，发求助帖

前人种树，后人乘凉

lyzklkl · 发表于 2017-3-31 14:30:00

交作业啦啦啦～

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>欢迎来到html的世界</title>
                <style type="text/css">
                        html,body{
                                height: 100%;
                                color:#fff;
                                font-family: sans-serif;
                        }
                        body{
                                background: url(背景图片.jpg) center center;
                                background-size: cover;
                                margin: 0;
                                padding: 0;
                                position: relative;
                        }
                        #container{
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                width: 100%;
                                text-align: center;
                        }
                        h1{
                                font-size: 78px;
                                margin-bottom: -15px;
                        }
                        #z{
                                margin-bottom: 20px;
                        }
                        a{
                                color: #999;
                                font-size: 20px;
                        }

                </style>
        </head>
        <body>
                <div id="container">
                        <h1>我爱鱼C</h1>
                        <p>bbs.fishC.com - 是你在改变我，谢谢你</p>
                        <p id="z">---------[url=home.php?mod=space&uid=378930]@不二如是[/url] 的学生 lyzklkl---------</p><br>
                        <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
                </div>
        </body>
</html>

新手·ing · 发表于 2017-4-2 17:29:53

我的作业

新手·ing · 发表于 2017-4-2 17:31:55

交作业！！！！！

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>欢迎来到html的世界</title>
                <style type="text/css">
                        html,body{
                                height: 100%;
                                color: #FF3EFF;
                                font-family: sans-serif;
                        }
                        body{
                                background: url(bg.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>bbs.fishC.com - 让编程改变世界</p>
                        <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
                </div>
        </body>
</html>

时光不老 · 发表于 2017-4-12 21:40:03

不二的帖子都是精品

shishunfu · 发表于 2017-4-17 22:20:32

交作业

<html lang="en">
<!DOCTYPE html>
<head>
        <meta charset="UTF-8">
        <title>center</title>
        <style type="text/css">
                html,body{
                        height: 100%;
                        width: 100%;
                        color: red;
                        font-family: sans-serif, serif,cursive,fantasy,monospace; 
                                /*font-family 规定元素的字体系列。
                                font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。*/
                }
                body{
                        background: url("background.jpg") center center;  
                        background-size: cover;        
                        margin: 0;        
                        padding: 0;
                        position: relative;        
                }
                #container{
                        width: inherit;        
                        text-align: center;
                        position: absolute;
                        top:50%;
                        transform:translateY(-50%);        
                }
                h1{
                        font-size: 33px;
                        margin-bottom: 22px;
                }
                p{
                        font-size: 18px;
                        margin-bottom: 22px;        /*margin-bottom 属性设置元素的下外边距。注释：允许使用负值。*/
                }
                a{
                        font-size: 22px;        /*该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮*/
                }
        </style>
</head>
<body>
        <div id="container">
                <h1>我爱鱼C</h1>
                <p>让编程改变世界!<br/>Change the world by program!</p>
                <a href="http://www.fishc.com/" style="color: blue">传送门</a><br/>
                <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" style="color: blue">HTML5-庖丁解牛</a>
        </div>
</body>
</html>

馆长の微笑 · 发表于 2017-7-2 13:51:36

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

交作业！

MSK · 发表于 2017-7-5 15:14:11

本帖最后由 MSK 于 2017-7-5 15:15 编辑

我发现url后面竟然可以加网络图片地址！

<!<!doctype html>
<html>
    <head>
        <title>这里是标题</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            html{
                height:100%;
                width:100%;
                text-align: center;
                color:cyan;
                margin: 0;
                padding:0;
            }
            body{
                background: url(http://img4.imgtn.bdimg.com/it/u=2999403677,993608789&fm=26&gp=0.jpg) center center;
                background-size:cover;
            }
            div{
                font-family:宋体;
            }
            h1{
                font-size:90px;
                margin-bottom:220px;
            }
            p{
                font-size:22px;
                color:black;
            }
        </style>
    </head>
    <body>
        <div id='font1'>
            <h1>字体测试</h1>
            <p>www.fishc.com</p>
        </div>
    </body>
</html>

aswyamato1989 · 发表于 2017-7-5 22:13:18

继续学习。

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

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57002 狗仔卡	发表于 2017-1-8 19:18:23 \| 显示全部楼层 \|阅读模式购买主题已有 65 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 36
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

点评

点评

评分