鱼C论坛

 找回密码
 立即注册
查看: 7473|回复: 53

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

[复制链接]
发表于 2017-1-8 11:13:19 | 显示全部楼层 |阅读模式
购买主题 已有 25 人购买  本主题需向作者支付 5 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-2-1 15:20:45 | 显示全部楼层
  1. <!copytype html>
  2. <html>
  3. <head>
  4. <meta charset="uft-8">
  5. <title>0005-优化内容区设置</title>
  6. <style type="text/css">
  7.         html,body{
  8.                 height:100%;
  9.                 color:#FF0088;
  10.         }
  11.         body{
  12.                 background:url(background.jpg)center center;
  13.                 background-size:cover;
  14.         }
  15.         #container{
  16.                 width:100%;
  17.                 text-align:center;
  18.                 position:absolute;
  19.                 top:50%;
  20.                 transform:translateY(-50%);
  21.         }
  22. </style>
  23. <body
  24.         margin:0;
  25.         padding:0;
  26.         position:relative;>
  27. </head>

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

360截图-162611281.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-2-1 15:27

评分

参与人数 2荣誉 +5 鱼币 +11 贡献 +3 收起 理由
muwan + 5 + 5 + 3 又学到了新知识,这位大哥牛逼了
不二如是 + 6 加油!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

发表于 2017-1-8 15:06:15 | 显示全部楼层
哇!知识量真大
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-1-8 15:08:05 | 显示全部楼层

尽精微
每天玩儿一点,时间会其开花结果
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-1-24 23:54:25 | 显示全部楼层
厉害,知识讲解都很到位~~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-1-25 07:05:40 | 显示全部楼层
type_J 发表于 2017-1-24 23:54
厉害,知识讲解都很到位~~

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-9 23:27:24 | 显示全部楼层
为什么我不能设置body的position为relative,否则就不是垂直居中了。。。我的代码要这样才能垂直居中
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset = "utf-8">
  5.                 <title>Hello!</title>
  6.                 <style type = "text/css">
  7.                         body{
  8.                                 background: url(saw.jpg) center center;
  9.                                 background-size: cover;
  10.                                 margin: 0;
  11.                                 padding: 0;
  12.                                 <!-- position: relative; -->
  13.                         }
  14.                         html{
  15.                                 height: 100%;
  16.                                 color: #FFFFFF;
  17.                         }
  18.                         #container{
  19.                                 width: 100%;
  20.                                 text-align: center;
  21.                                 position: absolute;
  22.                                 top: 50%;
  23.                                 transform: translateY(-50%);
  24.                         }
  25.                 </style>
  26.         </head>
  27.        
  28.         <body>
  29.                 <div id = "container">
  30.                         <h1>Hello World!</h1>
  31.                         <p>how are you?</p>
  32.                         <a href = "http://www.baidu.com/">baidu</a>
  33.                 </div>
  34.         </body>
  35. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 2 反对 0

使用道具 举报

 楼主| 发表于 2017-3-10 06:23:02 | 显示全部楼层
EzioA 发表于 2017-3-9 23:27
为什么我不能设置body的position为relative,否则就不是垂直居中了。。。我的代码要这样才能垂直居中

建议发一个问题求助帖子,方便后人学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-24 15:54:05 | 显示全部楼层
CSS有点忘了,其他跟HTML旧版本好像没差
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-24 16:06:49 | 显示全部楼层
lumber2388779 发表于 2017-3-24 15:54
CSS有点忘了,其他跟HTML旧版本好像没差


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

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-31 11:44:47 | 显示全部楼层
本帖最后由 lyzklkl 于 2017-3-31 11:46 编辑

交作业啦~
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>欢迎来到html的世界</title>
  6.                 <style type="text/css">
  7.                         html,body{
  8.                                 height: 100%;
  9.                                 color:#fff;
  10.                         }
  11.                         body{
  12.                                 background: url(背景图片.jpg) center center;
  13.                                 background-size: cover;
  14.                                 margin: 0;
  15.                                 padding: 0;
  16.                                 position: relative;
  17.                         }
  18.                         #container{
  19.                                 position: absolute;
  20.                                 top: 50%;
  21.                                 transform: translateY(-50%);
  22.                                 width: 100%;
  23.                                 text-align: center;
  24.                         }
  25.                 </style>
  26.         </head>
  27.         <body>
  28.                 <div id="container">
  29.                         <h1>我爱鱼C</h1>
  30.                         <p>bbs.fishC.com - 是你在改变我,谢谢你</p>
  31.                         <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  32.                 </div>
  33.         </body>
  34. </html>
复制代码
屏幕快照 2017-03-31 上午11.45.48.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-11 16:33:17 | 显示全部楼层
加了transform: translateY(-50%); 木有上移,求解。。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-11 22:54:00 | 显示全部楼层
mark一下,学了005了,回头好找,讲的很好,就是词汇量有点大,哈哈
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-17 21:02:58 | 显示全部楼层
交作业
  1. <html lang="en">
  2. <!DOCTYPE html>
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>center</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         width: 100%;
  10.                         color: red;
  11.                 }
  12.                 body{
  13.                         background: url("background.jpg")center center;/*想把文字放到页面中间,必须通过设置水平、竖直两个方向都是“居中”*/
  14.                         background-size: cover;        /*cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/
  15.                         margin: 0;        /*初始化内外边距*/
  16.                         padding: 0;
  17.                         position: relative;        /*相对定位*/
  18.                 }
  19.                 #container0{
  20.                         width: 100%;
  21.                         text-align: center;        /*文字水平居中*/
  22.                         position: absolute;
  23.                 }
  24.                 #container1{
  25.                         width: inherit;        /*inherit 继承父类的属性*/
  26.                         text-align: center;
  27.                         position: absolute;
  28.                         top:50%;
  29.                         transform:translateY(-50%);        /*transform:该属性允许我们对元素进行旋转、缩放、移动或倾斜。translateY(-50%):沿Y轴整体上移一半*/
  30.                 }
  31.                 #container2{
  32.                         width: 100%;
  33.                         text-align: center;
  34.                         position: absolute;
  35.                         bottom: 0;
  36.                         transform:translateY(-50%);
  37.                         /*bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
  38.                                                 与之对应的top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。*/
  39.                 }
  40.         </style>
  41. </head>
  42. <body>
  43.         <div id="container0">
  44.                 <h1>我爱鱼C</h1>
  45.         </div>
  46.         <div id="container1">
  47.                 <p>让编程改变世界!<br/>Change the world by program!</p>
  48.         </div>
  49.         <div id="container2">
  50.                 <a href="http://www.fishc.com/" style="color: blue">传送门</a><br/>
  51.                 <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" style="color: blue">HTML5-庖丁解牛</a>
  52.         </div>
  53. </body>
  54. </html>
复制代码
0004.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-12 18:41:11 | 显示全部楼层
屏幕快照 2017-06-12 18.35.51.png 我的代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         color: #ff0088;
  10.                 }
  11.                 body{
  12.                         background: url(background.jpg) center center;
  13.                         background-size: cover;
  14.                         margin: 0;
  15.                         padding: 0;
  16.                         position: relative;
  17.                 }
  18.                 #container{
  19.                         width: 100%;
  20.                         text-align: center;
  21.                         position: absolute;
  22.                         top: 50%
  23.                         transform: translateY(-50%);
  24.                 }
  25.         </style>
  26. </head>
  27. <body>
  28.         <div id="container">
  29.                 <h1>我爱学习</h1>
  30.                 <p>www.fishc.com - 让编程改变世界</p>
  31.                 <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  32. </body>
  33.         </div>

  34. </html>
复制代码
求解
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>

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


                               
登录/注册后可看大图
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-30 07:29:41 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset = "utf-8">
  5. <title>wo de </title>
  6. <style type="text/css">
  7. html,body{
  8.         height:100%;
  9.                 color:#FF0088;
  10.                 }
  11. body{
  12.                 background-size:cover;       
  13.                 background:url(background.jpg)center center;
  14.                 margin:0;
  15.                 padding:0;
  16.                 position: relative;
  17.         }
  18. #container{
  19.                         widht:100%;
  20.                         text-align:center;
  21.                     position: absolute;
  22.                         top:50%;
  23.                 }

  24. </style>


  25. </head>
  26. <body>
  27. <div id="container">
  28. <h1>鱼C</h1>
  29. <p>我爱鱼C</p>
  30. <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
  31. </div>
  32. </body>
  33. </html>
复制代码


这个有问题吗?设置相对定位和决定定位后 字就不水平居中了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-4 14:01:17 | 显示全部楼层
body中不加position: relative;可以垂直居中,加了反而不行。。。。求解
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-5 08:39:31 | 显示全部楼层
同样遇到了在body之中加入"position: relative"之后,无法实现垂直居中的问题。
005.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 2 反对 0

使用道具 举报

发表于 2017-7-5 09:48:50 | 显示全部楼层
我的直接无法居中,还是麻烦不二看看

  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <title>这是一张网页</title>
  5.                 <meta charset='utf-8'>
  6.                 <style type='text/css'>
  7.                         html,body{
  8.                                 height:100%;
  9.                                 color:#00FFFF;
  10.                         }
  11.                         body{
  12.                                 background:url(练习.jpg);
  13.                                 background-size:cover;
  14.                                 margin: 0;
  15.                                 padding: 0;
  16.                         }
  17.                         #container{
  18.                                 width: inherit;
  19.                                 text-align:center;
  20.                                 position:absolute;
  21.                                 top:50%;
  22.                                 transform:translateY(-50%);
  23.                         }
  24.                 </style>
  25.         </head>
  26.         <body>
  27.                 <div id='test'>
  28.                         <h1>爱鱼C,爱编程</h1>
  29.                         <p>www.fishc.com</p>
  30.                         <a href='http://www.fishc.com'>传送门</a>
  31.                 </div>
  32.         </body>
  33. </html>
复制代码
temp6.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-5 15:06:23 | 显示全部楼层
懂了懂了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 20:36

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表