QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 1572|回复: 28

[系列教程] 0 0 0 6 - 美化字体

[复制链接]
最佳答案
105 
累计签到:564 天
连续签到:92 天
不二如是 发表于 2017-1-8 19:18:23 157228 | 显示全部楼层 |阅读模式
购买主题 已有 40 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:3 天
连续签到:1 天
黑色蒙面人 发表于 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>

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

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-5-9 19:32
最佳答案
0 
累计签到:1 天
连续签到:1 天
hwx8777115 发表于 2017-5-9 18:49:04 | 显示全部楼层
作业
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>欢迎来到国际大厦酒店调查问卷界面!</title>
  6.                 <style type="text/css">
  7.                         html,body{
  8.                                 height:100%;
  9.                                 color:#000000;
  10.                                 font-family:sans-serif;
  11.                         }
  12.                         body{
  13.                                 background:url(background.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:33px;
  36.                         }
  37.                 </style>
  38.         </head>
  39.         <body>
  40.                 <div id="container">
  41.                         <h1>国际大厦酒店</h1>
  42.                         <p>  餐饮部:</p>
  43.                         <a href="https://www.baidu.com/?tn=96674718_hao_pg">传送门</a>
  44.                
  45.         </body>
  46. </html>
复制代码

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-5-9 19:32
最佳答案
0 
累计签到:90 天
连续签到:1 天
ttyhtg 发表于 2018-2-1 23:04:26 | 显示全部楼层
看着果然好看多了。

360截图-190415125.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-2-2 07:51

评分

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

查看全部评分

最佳答案
0 
累计签到:56 天
连续签到:1 天
aluominhai 发表于 2017-2-8 14:33:40 | 显示全部楼层
默认字体挺好看了,木有改
最佳答案
0 
累计签到:179 天
连续签到:1 天
dps521 发表于 2017-2-15 18:16:36 | 显示全部楼层
看看来
最佳答案
105 
累计签到:564 天
连续签到:92 天
不二如是  楼主| 发表于 2017-2-15 18:38:48 | 显示全部楼层
最佳答案
0 
累计签到:134 天
连续签到:4 天
金哥专用 发表于 2017-3-1 13:38:46 | 显示全部楼层
感谢分享!
最佳答案
0 
累计签到:41 天
连续签到:1 天
longwutian004 发表于 2017-3-2 17:14:38 | 显示全部楼层
这一节很有用,果断收藏
最佳答案
2 
累计签到:28 天
连续签到:1 天
fishc1008 发表于 2017-3-2 20:50:40 | 显示全部楼层
美美美
最佳答案
0 
累计签到:3 天
连续签到:1 天
345127857 发表于 2017-3-7 13:34:06 | 显示全部楼层
支持楼主1!!!!
最佳答案
0 
累计签到:3 天
连续签到:1 天
黑色蒙面人 发表于 2017-3-23 00:59:58 | 显示全部楼层
为啥我设置了sans-serif显示的字体还是宋体。。
系统是win10的
最佳答案
105 
累计签到:564 天
连续签到:92 天
不二如是  楼主| 发表于 2017-3-23 08:36:37 | 显示全部楼层
黑色蒙面人 发表于 2017-3-23 01:15
欢迎来到html世界
               
                        html,body{

3月-23-2017 08-35-27.gif

辛苦这位鱼油,发求助帖

前人种树,后人乘凉
最佳答案
0 
累计签到:6 天
连续签到:1 天
lyzklkl 发表于 2017-3-31 14:30:00 | 显示全部楼层
交作业啦啦啦~
  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:#fff;
  10.                                 font-family: sans-serif;
  11.                         }
  12.                         body{
  13.                                 background: url(背景图片.jpg) center center;
  14.                                 background-size: cover;
  15.                                 margin: 0;
  16.                                 padding: 0;
  17.                                 position: relative;
  18.                         }
  19.                         #container{
  20.                                 position: absolute;
  21.                                 top: 50%;
  22.                                 transform: translateY(-50%);
  23.                                 width: 100%;
  24.                                 text-align: center;
  25.                         }
  26.                         h1{
  27.                                 font-size: 78px;
  28.                                 margin-bottom: -15px;
  29.                         }
  30.                         #z{
  31.                                 margin-bottom: 20px;
  32.                         }
  33.                         a{
  34.                                 color: #999;
  35.                                 font-size: 20px;
  36.                         }

  37.                 </style>
  38.         </head>
  39.         <body>
  40.                 <div id="container">
  41.                         <h1>我爱鱼C</h1>
  42.                         <p>bbs.fishC.com - 是你在改变我,谢谢你</p>
  43.                         <p id="z">---------[url=home.php?mod=space&uid=378930]@不二如是[/url] 的学生 lyzklkl---------</p><br>
  44.                         <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  45.                 </div>
  46.         </body>
  47. </html>
复制代码

屏幕快照 2017-03-31 下午2.28.31.png
最佳答案
302 
累计签到:311 天
连续签到:21 天
新手·ing 发表于 2017-4-2 17:29:53 | 显示全部楼层
最佳答案
302 
累计签到:311 天
连续签到:21 天
新手·ing 发表于 2017-4-2 17:31:55 | 显示全部楼层
交作业!!!!!
  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: #FF3EFF;
  10.                                 font-family: sans-serif;
  11.                         }
  12.                         body{
  13.                                 background: url(bg.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: 55px;
  36.                         }
  37.                 </style>
  38.         </head>
  39.         <body>
  40.                 <div id="container">
  41.                         <h1>我爱鱼C</h1>
  42.                         <p>bbs.fishC.com - 让编程改变世界</p>
  43.                         <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  44.                 </div>
  45.         </body>
  46. </html>
复制代码

PBK5]UF[ILPC`4XBCE)_U$X.png
最佳答案
5 
累计签到:288 天
连续签到:1 天
时光不老 发表于 2017-4-12 21:40:03 | 显示全部楼层
不二的帖子都是精品
最佳答案
0 
累计签到:133 天
连续签到:1 天
shishunfu 发表于 2017-4-17 22:20:32 | 显示全部楼层
交作业
  1. <html lang="en">
  2. <!DOCTYPE html>
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>center</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         width: 100%;
  10.                         color: red;
  11.                         font-family: sans-serif, serif,cursive,fantasy,monospace;
  12.                                 /*font-family 规定元素的字体系列。
  13.                                 font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。*/
  14.                 }
  15.                 body{
  16.                         background: url("background.jpg") center center;  
  17.                         background-size: cover;       
  18.                         margin: 0;       
  19.                         padding: 0;
  20.                         position: relative;       
  21.                 }
  22.                 #container{
  23.                         width: inherit;       
  24.                         text-align: center;
  25.                         position: absolute;
  26.                         top:50%;
  27.                         transform:translateY(-50%);       
  28.                 }
  29.                 h1{
  30.                         font-size: 33px;
  31.                         margin-bottom: 22px;
  32.                 }
  33.                 p{
  34.                         font-size: 18px;
  35.                         margin-bottom: 22px;        /*margin-bottom 属性设置元素的下外边距。注释:允许使用负值。*/
  36.                 }
  37.                 a{
  38.                         font-size: 22px;        /*该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮*/
  39.                 }
  40.         </style>
  41. </head>
  42. <body>
  43.         <div id="container">
  44.                 <h1>我爱鱼C</h1>
  45.                 <p>让编程改变世界!<br/>Change the world by program!</p>
  46.                 <a href="http://www.fishc.com/" style="color: blue">传送门</a><br/>
  47.                 <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" style="color: blue">HTML5-庖丁解牛</a>
  48.         </div>
  49. </body>
  50. </html>
复制代码
0005.jpg
最佳答案
0 
累计签到:2 天
连续签到:1 天
馆长の微笑 发表于 2017-7-2 13:51:36 | 显示全部楼层
  1. <!doctype html>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.         <meta charset="utf-8">
  6.         <title>欢迎来到HTML世界</title>
  7.         <style type="text/css"></style>
  8. </head>
  9. <body>
  10.                 <div  id="container">
  11.                 <h1>我爱鱼C</h1>
  12.                 <p>WWW.FihsC.com - 继续学习中</p>
  13.                 <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  14.                 </div>               
  15.     <style type="text/css">
  16.         html,body{
  17.                 height:100%;
  18.                 color: #FF0088;
  19.             font-family:serif;
  20.         }
  21.         h1{
  22.             font-size: 66PX;
  23.             margin-bottom: 22PX;
  24.         }
  25.         p{
  26.                 font-size: 33PX;
  27.                 margin-bottom: 22PX;
  28.         }
  29.         a{
  30.                                 font-size: 55PX;
  31.         }
  32.         body{
  33.             background: url(background.jpg) center center;
  34.             background-size:cover;
  35.             margin: 0;
  36.             padding:0;
  37.             position:relative;
  38.         }
  39.         #container{
  40.                 width:100%;
  41.                 text-align:center;
  42.                 position:absolute;
  43.                 top:50%;
  44.                 transform:translateY(-50%);
  45.         }
  46.     </style>
  47. </body>
  48. </html>
复制代码

交作业!
最佳答案
28 
累计签到:144 天
连续签到:1 天
MSK 发表于 2017-7-5 15:14:11 | 显示全部楼层
本帖最后由 MSK 于 2017-7-5 15:15 编辑

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


  1. <!<!doctype html>
  2. <html>
  3.     <head>
  4.         <title>这里是标题</title>
  5.         <meta charset='utf-8'>
  6.         <style type='text/css'>
  7.             html{
  8.                 height:100%;
  9.                 width:100%;
  10.                 text-align: center;
  11.                 color:cyan;
  12.                 margin: 0;
  13.                 padding:0;
  14.             }
  15.             body{
  16.                 background: url(http://img4.imgtn.bdimg.com/it/u=2999403677,993608789&fm=26&gp=0.jpg) center center;
  17.                 background-size:cover;
  18.             }
  19.             div{
  20.                 font-family:宋体;
  21.             }
  22.             h1{
  23.                 font-size:90px;
  24.                 margin-bottom:220px;
  25.             }
  26.             p{
  27.                 font-size:22px;
  28.                 color:black;
  29.             }
  30.         </style>
  31.     </head>
  32.     <body>
  33.         <div id='font1'>
  34.             <h1>字体测试</h1>
  35.             <p>www.fishc.com</p>
  36.         </div>
  37.     </body>
  38. </html>

复制代码
最佳答案
0 
累计签到:676 天
连续签到:9 天
aswyamato1989 发表于 2017-7-5 22:13:18 | 显示全部楼层
继续学习。

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /2 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-2-18 15:11

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