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

不二如是 · 发表于 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

哇！知识量真大

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

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

尽精微
每天玩儿一点，时间会其开花结果

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

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

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

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

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;
                                <!-- position: relative; -->
                        }
                        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

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 编辑

[code]<!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>

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

登录/注册后可看大图

骑着蜗牛狂奔 · 发表于 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;可以垂直居中，加了反而不行。。。。求解

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

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

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

我的直接无法居中，还是麻烦不二看看

<!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

懂了懂了

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

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57852 狗仔卡	发表于 2017-1-8 11:13:19 \| 显示全部楼层 \|阅读模式购买主题已有 25 人购买本主题需向作者支付 5 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

点评

评分