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

欲爱欲恨欲天真- 发表于 2017-7-10 17:12:34

{:5_90:}

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

懂了。{:5_109:}

嘟嘟！ 发表于 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
懂了懂了

为什么啊我不懂求解{:10_266:}

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,好了{:10_256:}
<!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

去掉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

支持老大分享

页: 1 [2] 3

鱼C论坛's Archiver