0 0 0 7 - 优化传送门

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

学习学习

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

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

夕颜梦雨 · 发表于 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([img]https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/532110/5b512f23e387af896fdb1589d7f8ae854e731cbd.jpg[/img]) 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>

复制代码

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 0 7 - 优化传送门

点评

评分