0 0 0 5 - 优化内容区设置,Web密训营,Web开发,鱼C论坛

不二如是 发表于 2017-1-8 11:13:19

已有 25 人购买本主题需向作者支付 5 鱼币 才能浏览购买主题

ttyhtg 发表于 2018-2-1 15:20:45

<!copytype html>
<html>
<head>
<meta charset="uft-8">
<title>0005-优化内容区设置</title>
<style type="text/css">
html,body{
height:100%;
color:#FF0088;
}
body{
background:url(background.jpg)center center;
background-size:cover;
}
#container{
width:100%;
text-align:center;
position:absolute;
top:50%;
transform:translateY(-50%);
}
</style>
<body
margin:0;
padding:0;
position:relative;>
</head>

<div id="container">
<h1>我爱鱼<h2>
<p>www.fishc.com-让编程改变世界</p>
<a href="http:///bbs.fishC.com/forum.php">鱼C论坛传送门</a>
<a href="http://xxjl.zhanghm.cc/">回到本站主页</a>
</div>
</body>
</html>

alltolove 发表于 2017-1-8 15:06:15

哇！知识量真大{:5_92:}

不二如是 发表于 2017-1-8 15:08:05

alltolove 发表于 2017-1-8 15:06
哇！知识量真大

{:10_275:}尽精微
每天玩儿一点，时间会其开花结果{:10_275:}

type_J 发表于 2017-1-24 23:54:25

厉害，知识讲解都很到位~~

不二如是 发表于 2017-1-25 07:05:40

type_J 发表于 2017-1-24 23:54
厉害，知识讲解都很到位~~

{:10_303:}

EzioA 发表于 2017-3-9 23:27:24

为什么我不能设置body的position为relative，否则就不是垂直居中了。。。我的代码要这样才能垂直居中<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>Hello!</title>
<style type = "text/css">
body{
background: url(saw.jpg) center center;
background-size: cover;
margin: 0;
padding: 0;

}
html{
height: 100%;
color: #FFFFFF;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>

<body>
<div id = "container">
<h1>Hello World!</h1>
<p>how are you?</p>
<a href = "http://www.baidu.com/">baidu</a>
</div>
</body>
</html>

不二如是 发表于 2017-3-10 06:23:02

EzioA 发表于 2017-3-9 23:27
为什么我不能设置body的position为relative，否则就不是垂直居中了。。。我的代码要这样才能垂直居中

建议发一个问题求助帖子，方便后人学习

lumber2388779 发表于 2017-3-24 15:54:05

{:10_258:}{:10_258:}CSS有点忘了，其他跟HTML旧版本好像没差

不二如是 发表于 2017-3-24 16:06:49

lumber2388779 发表于 2017-3-24 15:54
CSS有点忘了，其他跟HTML旧版本好像没差

我一直觉得CSS + Html5是一家。。。

lyzklkl 发表于 2017-3-31 11:44:47

本帖最后由 lyzklkl 于 2017-3-31 11:46 编辑

交作业啦～
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到html的世界</title>
<style type="text/css">
html,body{
height: 100%;
color:#fff;
}
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;
}
</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-11 16:33:17

加了transform: translateY(-50%); 木有上移，求解。。。

时光不老 发表于 2017-4-11 22:54:00

mark一下，学了005了，回头好找，讲的很好，就是词汇量有点大，哈哈

shishunfu 发表于 2017-4-17 21:02:58

交作业
<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;
}
body{
background: url("background.jpg")center center;/*想把文字放到页面中间，必须通过设置水平、竖直两个方向都是“居中”*/
background-size: cover; /*cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/
margin: 0; /*初始化内外边距*/
padding: 0;
position: relative; /*相对定位*/
}
#container0{
width: 100%;
text-align: center; /*文字水平居中*/
position: absolute;
}
#container1{
width: inherit; /*inherit 继承父类的属性*/
text-align: center;
position: absolute;
top:50%;
transform:translateY(-50%); /*transform:该属性允许我们对元素进行旋转、缩放、移动或倾斜。translateY(-50%)：沿Y轴整体上移一半*/
}
#container2{
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
transform:translateY(-50%);
/*bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
与之对应的top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。*/
}
</style>
</head>
<body>
<div id="container0">
<h1>我爱鱼C</h1>
</div>
<div id="container1">
<p>让编程改变世界!<br/>Change the world by program!</p>
</div>
<div id="container2">
<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>

chesir 发表于 2017-6-12 18:41:11

我的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">
html,body{
height: 100%;
color: #ff0088;
}
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>
</head>
<body>
<div id="container">
<h1>我爱学习</h1>
<p>www.fishc.com - 让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</body>
</div>

</html>求解

dnagz1995 发表于 2017-6-17 18:52:16

本帖最后由 dnagz1995 于 2017-6-17 18:53 编辑

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Welcome to HTML</title>
<style type='text/css'>
html{
height:100%;
color:#ff3333;
}

body{
background: url(img_2.jpg) center center;
background-size:cover;
background:url(img_2.jpg) center center;
margin:0; /*初始化好习惯*/
padding: 0;
position:relative;
}
#container{
width:100%;
text-align :center;
position:absolute;
top:50%;
transform: translateY(-50%);
}
</style>
<body>
<div id="container">
   <h1>这是h1标签</h1>
   <p>这是P标签</p>
   <a href = 'http://www.baidu.com'>这是a标签</a>
   </div>
</body>
</head>
</html>

为什么我实现不了垂直居中

http://xxx.fishc.com/album/201706/17/185138yht0ndnd40dnbr86.png

骑着蜗牛狂奔 发表于 2017-6-30 07:29:41

<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>wo de </title>
<style type="text/css">
html,body{
height:100%;
color:#FF0088;
}
body{
background-size:cover;
background:url(background.jpg)center center;
margin:0;
padding:0;
position: relative;
}
#container{
widht:100%;
text-align:center;
position: absolute;
top:50%;
}

</style>

</head>
<body>
<div id="container">
<h1>鱼C</h1>
<p>我爱鱼C</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>

这个有问题吗？设置相对定位和决定定位后字就不水平居中了

icezion 发表于 2017-7-4 14:01:17

body中不加position: relative;可以垂直居中，加了反而不行。。。。求解 {:10_266:}

aswyamato1989 发表于 2017-7-5 08:39:31

同样遇到了在body之中加入"position: relative"之后，无法实现垂直居中的问题。

MSK 发表于 2017-7-5 09:48:50

我的直接无法居中，还是麻烦不二看看{:10_266:}

<!doctype html>
<html>
<head>
<title>这是一张网页</title>
<meta charset='utf-8'>
<style type='text/css'>
html,body{
height:100%;
color:#00FFFF;
}
body{
background:url(练习.jpg);
background-size:cover;
margin: 0;
padding: 0;
}
#container{
width: inherit;
text-align:center;
position:absolute;
top:50%;
transform:translateY(-50%);
}
</style>
</head>
<body>
<div id='test'>
<h1>爱鱼C，爱编程</h1>
<p>www.fishc.com</p>
<a href='http://www.fishc.com'>传送门</a>
</div>
</body>
</html>

MSK 发表于 2017-7-5 15:06:23

懂了懂了{:10_266:}

页: [1] 2 3

鱼C论坛's Archiver