设为首页收藏本站
开启辅助访问

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流区 › Web开发 › 0 0 0 6 - 美化字体
12下一页
返回列表 发新帖
查看: 2983|回复: 36

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

[复制链接]
不二如是
最佳答案
197 
发表于 2017-1-8 19:18:23 | 显示全部楼层 |阅读模式
购买主题 本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

【28期-7月2号】15PB信息安全2018新课改：偏重编程、软件逆向破解、漏洞挖掘与利用、移动端安全等方向，增加相关工作的实战训练！学员毕业就职于大型互联网公司、安全公司。
回复

举报

黑色蒙面人
最佳答案
0 
发表于 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
回复 支持 反对

举报

hwx8777115
最佳答案
0 
发表于 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
回复 支持 反对

举报

ttyhtg
最佳答案
0 
发表于 2018-2-1 23:04:26 | 显示全部楼层
看着果然好看多了。

360截图-190415125.jpg

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-2-2 07:51

评分

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

查看全部评分

回复 支持 反对

举报

aluominhai
最佳答案
0 
发表于 2017-2-8 14:33:40 | 显示全部楼层
默认字体挺好看了，木有改

【28期-7月2号】15PB信息安全2018新课改：偏重编程、软件逆向破解、漏洞挖掘与利用、移动端安全等方向，增加相关工作的实战训练！学员毕业就职于大型互联网公司、安全公司。
回复 支持 反对

举报

dps521
最佳答案
0 
发表于 2017-2-15 18:16:36 | 显示全部楼层
看看来
回复 支持 反对

举报

不二如是
最佳答案
197 
 楼主| 发表于 2017-2-15 18:38:48 | 显示全部楼层
dps521 发表于 2017-2-15 18:16
看看来

欢迎
回复 支持 反对

举报

金哥专用
最佳答案
0 
发表于 2017-3-1 13:38:46 | 显示全部楼层
感谢分享！
回复 支持 反对

举报

longwutian004
最佳答案
0 
发表于 2017-3-2 17:14:38 | 显示全部楼层
这一节很有用，果断收藏
回复 支持 反对

举报

fishc1008
最佳答案
2 
发表于 2017-3-2 20:50:40 | 显示全部楼层
美美美

【28期-7月2号】15PB信息安全2018新课改：偏重编程、软件逆向破解、漏洞挖掘与利用、移动端安全等方向，增加相关工作的实战训练！学员毕业就职于大型互联网公司、安全公司。
回复 支持 反对

举报

345127857
最佳答案
0 
发表于 2017-3-7 13:34:06 | 显示全部楼层
支持楼主1！！！！
回复 支持 反对

举报

黑色蒙面人
最佳答案
0 
发表于 2017-3-23 00:59:58 | 显示全部楼层
为啥我设置了sans-serif显示的字体还是宋体。。
系统是win10的
回复 支持 反对

举报

不二如是
最佳答案
197 
 楼主| 发表于 2017-3-23 08:36:37 | 显示全部楼层
黑色蒙面人 发表于 2017-3-23 01:15
欢迎来到html世界
               
                        html,body{

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

辛苦这位鱼油，发求助帖

前人种树，后人乘凉
回复 支持 反对

举报

lyzklkl
最佳答案
0 
发表于 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.                         }

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

屏幕快照 2017-03-31 下午2.28.31.png
回复 支持 1 反对 0

举报

新手·ing
最佳答案
346 
发表于 2017-4-2 17:29:53 | 显示全部楼层
我的作业

【28期-7月2号】15PB信息安全2018新课改：偏重编程、软件逆向破解、漏洞挖掘与利用、移动端安全等方向，增加相关工作的实战训练！学员毕业就职于大型互联网公司、安全公司。
回复 支持 反对

举报

新手·ing
最佳答案
346 
发表于 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
回复 支持 反对

举报

时光不老
最佳答案
7 
发表于 2017-4-12 21:40:03 | 显示全部楼层
不二的帖子都是精品
回复 支持 反对

举报

shishunfu
最佳答案
0 
发表于 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 
发表于 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>
复制代码

交作业！
回复 支持 反对

举报

MSK
最佳答案
30 
发表于 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>

复制代码

【28期-7月2号】15PB信息安全2018新课改：偏重编程、软件逆向破解、漏洞挖掘与利用、移动端安全等方向，增加相关工作的实战训练！学员毕业就职于大型互联网公司、安全公司。
回复 支持 反对

举报

aswyamato1989
最佳答案
0 
发表于 2017-7-5 22:13:18 | 显示全部楼层
继续学习。
回复 支持 反对

举报

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

本版积分规则

关闭

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

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

GMT+8, 2018-8-19 08:19

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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