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 日志相册贡献荣誉积分 64237 狗仔卡	发表于 2017-1-8 19:18:23 \| 显示全部楼层 \|阅读模式购买主题已有 65 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 38
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

点评

点评

点评

评分