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>
<!-- 0004页面美化，learned from 不二如是 -->
<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;
            <!-- position:relative; -->  /*相对坐标*/
        }
        #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 - 优化内容区设置

点评

评分

评分

评分

点评

评分

点评

评分