0 0 0 6 - 美化字体,Web密训营,Web开发,鱼C论坛

不二如是 发表于 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>

没有出现雅黑字体还是原来的宋体{:10_254:}

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

默认字体挺好看了，木有改{:10_256:}

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！！！！{:10_245:}

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

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

不二如是 发表于 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">---------@不二如是的学生 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

不二的帖子都是精品{:10_275:}

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>
<divid="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后面竟然可以加网络图片地址！{:10_257:}

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

继续学习。

页: [1] 2 3

鱼C论坛's Archiver