0 0 0 7 - 优化传送门,Web密训营,Web开发,鱼C论坛

xl7613 发表于 2017-8-2 12:32:58

学习学习{:10_257:}

ttyhtg 发表于 2018-2-2 23:56:35

每一次都自以为一模一样的代码，结果预览却不一样，反复检查，总会发现有某个字母打错了，或者少了一个符号，照抄前一节的代码都能抄错。。。。粗心要不得

夕颜梦雨 发表于 2018-3-8 17:30:43

本帖最后由夕颜梦雨于 2018-3-8 17:33 编辑

<!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;
color: #FFF;
border:1px solid #3FF;
background-color: #3FF;
border-radius: 10px;
padding: 10px 66px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<h1>热爱鱼,热爱生活</h1>
<p>www.fishc.com---让编程改变世界</p>
<a href="#">传送门</a>
</div>
</body>
</html>

rock5442107 发表于 2018-5-26 12:04:15

<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8">
<title>歡迎來到HTML世界</title>
<style type="text/css">
html,body{
height: 100%;
color: #00FF00;
font-family: sans-serif;
}
body{
background: url(KED08.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: 22px;
}
a{
font-size: 55px;
background: #000000;
color:#FFFFFF;
border:1px solid #0000FF;
border-radius: 10px;
padding:10px 66px;
text-decoration: none;
}
</style>
</head>

<body>
<div id="container">
<h1>我愛魚C</h1>
<p>WWW.FishC.com - 讓編程改變世界</p>
<a >傳送門</a>
</div>
</body>
</html>

土耳其东木白 发表于 2018-5-29 14:08:48

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">
html,body{
height: 100%;
color: #FA3;
font-family: cursive;
}
h1{
font-size: 33px;
margin-bottom: -20px;
}
p{
font-size: 22px;
margin-bottom: 22px;
}
a{
font-size: 33px;
color: #fff;
background: #0F0;
border: 5px solid #0f0;
border-radius: 10px;
padding: 1px 11px;
text-decoration: none;
}
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>I love 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>

凌乱大帅比 发表于 2018-6-6 13:50:39

F:\学习\1.pngF:\学习\2.pngF:\学习\3.png
我都按教程做了，但为什么这个链接就是不居中呢，（先不管边框，我在其他字体上做了）

凌乱大帅比 发表于 2018-6-6 13:51:20

凌乱大帅比发表于 2018-6-6 13:50
我都按教程做了，但为什么这个链接就是不居中呢，（先不管边框，我在其他字体上做了）

F:\学习\1.png

凌乱大帅比 发表于 2018-6-6 13:51:51

凌乱大帅比发表于 2018-6-6 13:50
我都按教程做了，但为什么这个链接就是不居中呢，（先不管边框，我在其他字体上做了）

这个图怎么发啊.....

STmove 发表于 2018-7-12 20:05:53

<!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:#2df;
         font-size:33px;
         margin-bottom:22px;
   }
   a
   {
         color:#fff;
         background:“”;
         font-size:50px;
         border:4px solid #eee; /*加上2px的框线，实线(虚线是dotted)，颜色*/
         border-radius: 16px;    /*圆角6px*/
         padding:6px 66px;    /*内边距：上下左右*/
         text-decoration:none; /*文字下划线：None*/
   }
</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:43:58

交作业喽:
<!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;

}
a {
background: #33ffff;
color: #fff;
border: 1px solid #33ffff;
border-radius: 10px;
padding: 10px 66px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼Ｃ</h1>
<p>www.fishc.com-让编程改变世界</p>
<a >咻!</a>
</div>
</body>
</html>

aiqinghuilaidao 发表于 2018-9-14 13:06:21

wangguohui 发表于 2017-6-22 16:58

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个html</title>
<style type="text/css">
html{
height: 100%;
color: #FF0088;
font-family: sans-serif;
}

body{
background: url(7.jpg) center center;
background-size: cover;
margin: 0;
padding: 0;
position: relative;
}
h1{
font-size: 66px;
margin-bottom: 22px;
}
a{
font-size: 55px;
background: #33FFFF;
color: #888888;
border: 1px solid #888888;
border-radius: 10px;
padding:10px 66px;
text-decoration: none;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top:50%;
transform: translateY(+50%);
}
</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>
</body>
</html>

soulwyb 发表于 2018-10-11 23:35:14

<!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;
         color: rgb(243, 211, 107);
         border: 1px solid #33ffff;
         border-radius: 10px;
         padding: 10px 66px;
         text-decoration: none;
         background: #33ffff
   }
</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>

757722417 发表于 2018-11-18 14:42:16

wangguohui 发表于 2017-6-22 16:58

text-transform: translateY(-50%);
这句代码错了，是transform:translateY(-50%);

星海雪的钟爱 发表于 2019-2-20 15:41:51

交作业
border:用于设置边框
text-decoration:用于设置辅助线条的位置、颜色
padding:用于设置内边距

phszhuli 发表于 2019-3-26 10:00:28

<!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;
background: #66B0A7;
color:#fff;
/*border: 5px double #ffffff;/*宽度。样式。颜色*/
border-radius: 10px;
padding: 10px 66px;/*上下两侧10px，左右两侧66px*/
text-decoration: none;/*定义无边框*/
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

萌·小杨 发表于 2019-5-26 18:57:08

<!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;
color:#fff;
border: 1px solid #33ffff;
border-radius: 25px;
background:#33ffff;
padding:10px 60px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<h1>老子哎FishC</h1>
<p>草泥马</p>
<a href="http://fishc.com.cn">传送！</a>
</div>
</body>
</html>

你在意在便在 发表于 2019-10-26 08:34:22

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>让编程改变世界</title>
<style text="text/css">
html,body {
color: pink;
height: 100%;
font-family: sans-serif;
}
h1 {
font-size: 66px;
margin-bottom: 22px;
}
body {
background-size: cover;
background: url(003.jpg) center center;
margin: 0;
padding: 0;
position: relative;
}
#container {
position: absolute;
text-align: center;
width: 100%;
top: 50%;

transform: translateY(-50%);

}
p {
font-size: 33px;
margin-bottom: 22px;
}

a {
font-size: 55px;
border:1px solid gray;
border-radius: 10px;
margin:10px 33px;
color:white;

text-decoration:none;
}
</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>

ricia 发表于 2020-2-21 17:25:26

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础美化</title>
<style type="text/css"> /*指定CSS的样式定义*/
   html,body{
         height: 100%;
         width: 100%;
         color: pink;
         font-family: sans-serif; /*系统默认最佳显示字体*/
   }

   body {
         background: url("../img/ilovefishc.jpg") center center; /*设置背景图水平和垂直位置为居中 */
         background-size: cover; /*背景图像扩展完全覆盖背景区域*/
         margin: 0; /*初始化外边距*/
         padding: 0; /*初始化内边距，提高自主控制*/
         position: relative; /*相对定位*/
   }

   #container {
         width: 100%; /*横向扩充满屏*/
         text-align: center; /*文字水平居中*/
         position: absolute; /*绝对定位*/
         top: 50%; /*距离顶端50%*/
         transform: translateY(-50%); /*自身沿Y轴整体上移一半*/
   }

   h1 {
         font-size: 66px; /*字体大小*/
         margin-bottom: 22px; /*控制h1标题与下面p之间的距离*/
   }

   p {
         font-size: 33px;
         margin-bottom: 22px;
   }

   a {
         font-size: 55px;
         background: #3ff; /*背景颜色*/
         color: #fff; /*字体颜色*/
         border: 1px solid #3ff; /*1px的实心边框*/
         border-radius: 10px; /*圆角边框*/
         padding: 10px 66px; /*上下两侧10px，左右两侧，66px*/
         text-decoration: none; /*none就是去掉链接下划线*/
   }
</style>
</head>
<body>
<div id="container">
   <h1>我爱鱼C</h1>
   <p>WWW.FishC.com - 让编程改变世界</p>
   <a href="http://www.ilovefishc.com">传送门</a>
</div>
</body>
</html>

酒醉三分醒 发表于 2020-4-17 11:14:36

本帖最后由酒醉三分醒于 2020-4-17 11:16 编辑

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">
html{
height: 100%;
color: #FFFFFF;
}
body{
background: url(stars.jpg) center center;
background-size: cover;
margin: 0;
padding: 0;
font-family: Sans - serif;
}
h1{
font-size: 66px;
margin-bottom: 22px;
}
p{
font-size: 33px;
margin-bottom: 22px;
}
a{
color: #444444;
font-size: 55px;
border: 1px solid #DDDDDD;
border-radius: 10px;
font-size: 20px;
background:#DDDDDD;
text-decoration: none;
padding: 10px 15px

}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>让编程改变世界</p>
<a href="https://fishc.com.cn">传送门</a>
</div>
</html>

huanghuiyv 发表于 2020-8-15 16:27:45

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>TEST! TEST!!</title>
   <style type="text/css">

         html {
            height: 100%;
            font-family: sans-serif;
         }

         body {
            margin: 0;
            padding: 0;
            /* position: relative; */
            background: url(https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/532110/5b512f23e387af896fdb1589d7f8ae854e731cbd.jpg) center center;
            background-size: cover;
         }

         #container {
            width: 100%;
            text-align: center;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
         }

         h1 {
            color: pink;
            font-size: 50px;
            margin-bottom: 15px;
         }

         p {
            color: honeydew;
            font-size: 20px;
            margin-bottom: 20px;
         }

         a {
            color: #DC143C;
            background: #33FFFF;
            font-size: 55px;
            border: 1px solid;
            border-color: blue;
            border-radius: 10px;
            padding:10px 50px;
            text-decoration: none;
         }
   </style>
</head>

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

页: 1 [2] 3

鱼C论坛's Archiver