0 0 0 5 - 优化内容区设置

xl7613 · 发表于 2017-8-1 21:46:36

懂了。

嘟嘟！ · 发表于 2017-8-6 19:37:35

为什么要设置区块宽度为100%，横向撑满屏幕呢？感觉没啥区别

javaStar · 发表于 2017-8-24 19:32:59

MSK 发表于 2017-7-5 09:48
我的直接无法居中，还是麻烦不二看看

我的也无法居中，你的解决了吗

你的南城没有北 · 发表于 2017-10-14 09:45:53

MSK 发表于 2017-7-5 15:06
懂了懂了

为什么啊我不懂求解

gentes · 发表于 2017-12-7 09:12:41

只能照抄,不能默写。。。

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>

复制代码

helingyuan · 发表于 2018-2-9 03:54:34

挑灯夜读，精神好！

夕颜梦雨 · 发表于 2018-3-7 21:18:26

交作业
<!DOCTYPE html>
<html>
<head>
<title>欢迎来到HTML世界</title>
<style type="text/css">
html,body{
height: 100%;
color: #FF0088;
}
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%);
}
</style>
</head>
<body>
<div id="container">
<h1>I love Fishc</h1>
<p>www.fishc,com-永远爱鱼C</p>
<a href="#">鱼C传送门</a>
</div>
</body>
</html>

likesunshine · 发表于 2018-3-8 16:17:09

ok,好了

<!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);
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>我爱鱼C</h1>
<p>WWW.FishC.com - 继续学习</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>

二洋同学 · 发表于 2018-5-23 19:33:06

aswyamato1989 发表于 2017-7-5 08:39
同样遇到了在body之中加入"position: relative"之后，无法实现垂直居中的问题。

兄弟，好图！

1356631733 · 发表于 2018-5-28 21:12:27

dnagz1995 发表于 2017-6-17 18:52
[code]

去掉body的相对定位

1356631733 · 发表于 2018-5-28 21:14:03

MSK 发表于 2017-7-5 09:48
我的直接无法居中，还是麻烦不二看看

把#container的with 设置为100%看看

土耳其东木白 · 发表于 2018-5-29 10:53:04

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">
html,body{
height: 100%;
color: #BBEEBB;
}
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>

复制代码

枫丹白露666 · 发表于 2018-5-29 20:06:52

鱿鱼酱发表于 2017-4-11 16:33
加了transform: translateY(-50%); 木有上移，求解。。。

分号你写成中文形态下的了，换成英文的

Sert_My · 发表于 2018-6-10 13:13:39

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到html世界</title>
<style type="text/css">
html,body{
height: 100%;
color: #FF0088;
}
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%);
}
</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:24:40

本帖最后由 STmove 于 2018-7-12 19:27 编辑

同样要注释掉position：relative才能垂直居中，求解

<!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%;
}
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;}
p{color:#afe;}
a{color:#fff;}
</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>

复制代码

soulwyb · 发表于 2018-10-11 00:04:01

<!DOCTYPE html>
<html>
<head>
<title>
XXX
</title>
<meta charset="utf-8">
<style type="text/css">
html {
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>我爱鱼C</h1>
<p>www.FishC.com - 让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>

复制代码

我也是设置了position: relative;就没办法垂直居中

elias · 发表于 2018-11-11 00:44:24

可以受益匪浅

guohuo888meng@1 · 发表于 2019-2-11 13:12:50

支持老大分享

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

[庖丁解牛] 0 0 0 5 - 优化内容区设置

评分

评分

评分

点评

评分

点评

评分