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

xl7613 发表于 2017-8-2 08:07:15

{:10_245:}继续学习

哨子1122 发表于 2017-8-8 19:38:54

标签<style>就是用来修饰<body>中的样式或者添加一些图片进去的吗

易改乌江水 发表于 2018-1-20 22:41:21

交交作业
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>易改乌江水</title>
<style type="text/css">
         html{
height: 100%;
color: #5599FF;
font-family: sans-serif;
}
body{
background: url(background.jpg);
background-size: cover;
background: url(background.jpg) center center;
}
#profile
{
width: 100%;
text-align: center;
}
#pic
{
width: 100%;
text-align: center;
}
#link
{

}
h1{
                     font-size: 66px;
                     margin-bottom: 22px;
               }
</style>
</head>
<body>
<div id ="profile">
<h1>
欢迎来到易改乌江水的个人网站
</h1>
<p>
简介:一个热爱写诗的傻子
</p>
</div>
<br/>
<div id="link">
<pre>
<ahref="http://mcbox.duowan.com">转到多玩我的世界盒子官网</a>
<ahref="http://www.mcbbs.net">转到MCBBS</a>
<hr />
</pre>
</div>
<div id="pic">
<p>
<ahref="http://www.baidu.com.cn">
<imgsrc="baidu.png" width="121" height="75" />
</a>
<br/>
<hr />
</p>
<p>
<a href="https://www.yahoo.com/">
<imgsrc="yahoo.png" width="121" height="91" />
</a>
<br/>
<hr />
</p>
<p>
<a href="http://www.w3school.com.cn">
<img src="w3school.gif" width="365" height="49" />
</a>
<br/>
<hr />
</p>
<p>
<a href="bbs.fishc.com">
<img src="fishc.png" width="359" height="84" />
</a>
<br/>
<hr />
</p>
<p>
<a href="HTML2.html">
<imgsrc="1.jpg" width="330" height="220" />
</a>
<br/>
<hr />
</p>
</div>
</body>
</html>

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

看着果然好看多了。

jcx1117 发表于 2018-2-7 13:36:22

<!doctype html>
<html>
<head>
<title>LOVE JENNY</title>
<meta charset="UTF-8">
<style type=text/css>
html,body{
height:100%;
color:#FF0088;

}
body{
background:url(jenny_background.jpg) center center;;
background-size:cover;
margin:0;
padding:0;
position:relative;
}
#heart{
width:100%;
text-align:center;
position:absolute;
top:50%;
font-family:sans-serif;
}
h1{
font-size:66px;
margin-bottom:22px;
}
p{
font-size:33px;
margin-bottom:22px;
}
a{
font-size:55px;
}
</style>
</head>
<body>
<div id="heart">
<h1>爱鱼儿！</h1>
<p>LOVE FISHER！爱生活！</p>
<a href="http://fish-jenny.lofter.com/">LOVE JENNY!</a>
</div>
</body>
</html>

之前都好好的，加了这节课调节代码后，显示又到顶端了，没有垂直居中效果了，何解？

helingyuan 发表于 2018-2-9 03:55:28

越看越兴奋！

夕颜梦雨 发表于 2018-3-7 21:52:25

本帖最后由夕颜梦雨于 2018-3-7 21:53 编辑

逗号很重要,总是忘了逗号
<!DOCTYPE html>
<html>
<head>
<title>欢迎来到HTML世界</title>
<style type="text/css">
html,body{
height: 100%;
color: #FF0088;
font-family: sans-serif;
}
body{
background: url(0004素材.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>I love Fishc.com</h1>
<p>我爱鱼C---www.fishc.com</p>
<a href="#">传送门</a>
</div>
</body>
</html>

likesunshine 发表于 2018-3-8 16:29:01

话说放大了好多
<!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(background.jpg);
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: 55px;
}
a{
font-size: 55px;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 继续学习</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>

rock5442107 发表于 2018-5-26 11:54:23

跟着不二师兄学习

土耳其东木白 发表于 2018-5-29 11:29:38

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">
html,body{
height: 100%;
color: #BBFFAA;
font-family: cursive;
}
h1{
font-size: 33px;
margin-bottom: -20px;
}
p{
font-size: 22px;
margin-bottom: 22px;
}
a{
font-size: 22px;
}
body{
background: url(pic_02.png)center center;
background-size: cover;
margin: 0;
padding:0;
position: relative;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 60%;
transform: translateY(-50%);
}
#Gucci{
width: 100%;
text-align: center;
position: absolute;
top: 20%;
transform: translateY(-50%);
}
#Prada{
width: 100%;
text-align: center;
position: absolute;
top: 40%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FihsC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
<div id="Gucci">
<h1>我爱Gucci</h1>
<p>Gucci Gucci Parada Parada</p>
<a >传送门</a>
</div>
<div id="Prada">
<h1>脚踩Prada的女魔头</h1>
<p>WWW.FihsC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

Sert_My 发表于 2018-6-10 13:19:44

<!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("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528606019071&di=1e968ad4299ede9ae69c7e69fedff785&imgtype=0&src=http%3A%2F%2F4k.znds.com%2F20140314%2F4kznds3.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;
}
h1{
font-size: 33px;
margin-bottom: 22px;
}
a {
font-size: 55px;
}
</style>

</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FihsC.com - 让编程改变世界</p>
<a href="http://bbs.fishc.com">传送门</a>
</div>
</body>
</html>

STmove 发表于 2018-7-12 19:40:25

木有变成宋体，还是原来的雅黑
<!DOCTYPE HTML>

<html>
<head>
<meat charset="utf-8">
<title>welcome to the world of HTML</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="STmove,test">
<meta name="description" content="学习测试">
<meta name="author" content="STmove">

<style type="text/css">
   html
   {
         height:100%;
         font-family:sans-serif; /*没反应啊*/
   }
   body
   {
         background:url("320980.jpg") center center; /*设置背景图水平和垂直位置为居中 */
         background-size:cover;/*cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/
         margin:0;
         padding:0;
         /*相对坐标*/
   }
   #container
   {
         width:100%;
         text-align: center; /*文字位置水平居中*/
         position: absolute;/*绝对坐标*/
         top:50%;          /*距顶50%*/
         transform:translateY(-50%);/*transform:该属性允许我们对元素进行旋转、缩放、移动或倾斜。translateY(-50%)：沿Y轴整体上移一半*/
   }
   h1
   {
         color:#0bf;
         font-size:66px;
         margin-bottom:22px;/*设置与下面P元素之间的距离*/
   }
   p
   {
         color:#afe;
         font-size:33px;
         margin-bottom:22px;
   }
   a
   {
         color:#fff;
         font-size:50px;
   }
</style>
</head>

<body>
<div id="container">
   <h1>我爱鱼兮</h1>
   <p>www.FishC.org-让编程改变世界</p>
   <a href="http://www.FishC.org" target="_blank">JOIN US</a>
</div>
</body>
</html>

我爱鱼C！ 发表于 2018-7-15 07:31:34

交作业喽:
<!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("https://picsum.photos/1600/1200/?random") 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>我爱鱼Ｃ</h1>
<p>www.fishc.com-让编程改变世界</p>
<a >咻!</a>
</div>
</body>
</html>

船到桥头自然沉 发表于 2018-9-1 10:45:13

字体改了没变化{:10_247:}

soulwyb 发表于 2018-10-11 23:22:00

<!DOCTYPE html>
<html>

<head>
<title>
   XXX
</title>
<meta charset="utf-8">
<style type="text/css">
   html {
         height: 100%;
         color: #FF0088;
         /* font-family: sans-serif; */
         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: 55px;
   }
</style>
</head>

<body>
<div id="container">
   <h1>我爱鱼C</h1>
   <p>www.FishC.com - 让编程改变世界</p>
   <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>

</html>

好像没啥效果 WIN10的系统火狐61.02

guohuo888meng@1 发表于 2019-2-11 13:45:37

交作业
<!doctype html>
<html>
      <head>
            <meta charset="utf-8">
            <title>第一个网页</title>

            <style type="text/css">
                     html,body{
                           height: 100%;
                           color:#ff0088;
                           font-family: sans-serif;
                     }
                     body{
                                    background:url(background.jpg) center center;
                                    background-size: cover;
                                    margin: 0;
                                    padding: 0;
                                    position: relative;

                     }
                     #A{
                           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="A">
                     <h1>我爱鱼C</h1>
                     <P>FISHC.COM</P>
                     <a >百度</a>

            </DIV>
   </body>
</html>

星海雪的钟爱 发表于 2019-2-20 15:32:45

交作业：
font-size:更改字体大小
margin-bottom:控制元素与下方元素的距离

phszhuli 发表于 2019-3-26 09:21:16

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">/*指定CSS的样式定义*/
body{
background: url(1.png)center center;/*图片加center center，就能保持一直显示中间位置，如果不加，当页面缩小到小于图片尺寸时，只能出现图片顶部、左侧的内容*/
background-size: cover;/*不会产生平铺的效果，只会一张图放大缩小*/
margin: 0;
padding: 0;/*潜规则，提高自主控制*/
position: relative;/*若设置containertop属性，container必须绝对定位，body相对定位*/

}

html,body{/*为了确保照片自适应屏幕显示，需要给body以及body的父级（html）设置height属性，使之充满全屏。*/
height: 100%; /* height如果不设置100%，就会出现重复
*/
color: #ffffff;
font-family:sans-serif;

}
#container{
width: 100%;
text-align: center;/*文字居中*/
position: absolute;/*绝对定位*/
top: 50%;
transform: translateY(-50%);/*使container在Y轴方向上移动50%*/
}
h1{
font-size: 55px;
margin-bottom: 22px;/*控制行间距，h1标题与下面p之间的距离*/
}
p{
font-size: 22px;
margin-botton:22px;
}
a{
font-size:33px;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

萌·小杨 发表于 2019-5-26 18:53:49

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>看什么看</title>
<style type="text/css">
html {
height: 100%;
color: #00ff00;
margin:0;
padding:0;
position: relative;
font-family: sans-serif;
}
body {
background: url("bg.jpg") center center;
background-size: cover;
}
#container {
width: 100%;
text-align: center;
position:absolute;
top:50%;
transform:translateY(-50%);
}
h1 {
font-size:66px;
margin-bottom: 22px;
}
a {
font-size:55px;
}
</style>
</head>
<body>
<div id="container">
<h1>老子哎FishC</h1>
<p>草泥马</p>
<a href="http://fishc.com.cn">传送！</a>
</div>
</body>
</html>

Cloud1258 发表于 2019-8-21 00:02:10

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>欢迎来到html的世界</title>
   <style type="text/css">
         html,body{
            height: 100%;
            color: #ffffff;
            font-family: sans-serif;
         }
         body{
            background: url(link.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: 22px;
         }
   </style>
</head>
<body>
   <div id="container">
         <h1>我爱编程</h1>
         <p>编程能静心</p>
         <a href="https://cn.bing.com">必应</a>
   </div>
</body>
</html>

页: 1 [2] 3

鱼C论坛's Archiver