QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 1713|回复: 25

[系列教程] 0 0 0 5 - 优化内容区设置

[复制链接]
最佳答案
96 
累计签到:497 天
连续签到:25 天
不二如是 发表于 2017-1-8 11:13:19 171325 | 显示全部楼层 |阅读模式
购买主题 已有 16 人购买  本主题需向作者支付 5 鱼币 才能浏览

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
23 
累计签到:420 天
连续签到:168 天
alltolove 发表于 2017-1-8 15:06:15 | 显示全部楼层
哇!知识量真大
最佳答案
96 
累计签到:497 天
连续签到:25 天
不二如是  楼主| 发表于 2017-1-8 15:08:05 | 显示全部楼层

尽精微
每天玩儿一点,时间会其开花结果
最佳答案
0 
累计签到:26 天
连续签到:1 天
type_J 发表于 2017-1-24 23:54:25 | 显示全部楼层
厉害,知识讲解都很到位~~
最佳答案
96 
累计签到:497 天
连续签到:25 天
不二如是  楼主| 发表于 2017-1-25 07:05:40 | 显示全部楼层
type_J 发表于 2017-1-24 23:54
厉害,知识讲解都很到位~~

最佳答案
1 
累计签到:202 天
连续签到:1 天
EzioA 发表于 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>
复制代码
最佳答案
96 
累计签到:497 天
连续签到:25 天
不二如是  楼主| 发表于 2017-3-10 06:23:02 | 显示全部楼层
EzioA 发表于 2017-3-9 23:27
为什么我不能设置body的position为relative,否则就不是垂直居中了。。。我的代码要这样才能垂直居中

建议发一个问题求助帖子,方便后人学习
最佳答案
176 
累计签到:229 天
连续签到:1 天
lumber2388779 发表于 2017-3-24 15:54:05 | 显示全部楼层
CSS有点忘了,其他跟HTML旧版本好像没差
最佳答案
96 
累计签到:497 天
连续签到:25 天
不二如是  楼主| 发表于 2017-3-24 16:06:49 | 显示全部楼层
lumber2388779 发表于 2017-3-24 15:54
CSS有点忘了,其他跟HTML旧版本好像没差


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

最佳答案
0 
累计签到:6 天
连续签到:1 天
lyzklkl 发表于 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
最佳答案
0 
累计签到:26 天
连续签到:1 天
鱿鱼酱 发表于 2017-4-11 16:33:17 | 显示全部楼层
加了transform: translateY(-50%); 木有上移,求解。。。
最佳答案
4 
累计签到:245 天
连续签到:5 天
时光不老 发表于 2017-4-11 22:54:00 | 显示全部楼层
mark一下,学了005了,回头好找,讲的很好,就是词汇量有点大,哈哈
最佳答案
0 
累计签到:112 天
连续签到:3 天
shishunfu 发表于 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
最佳答案
0 
累计签到:113 天
连续签到:2 天
chesir 发表于 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>
复制代码
求解
最佳答案
0 
累计签到:9 天
连续签到:1 天
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>

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


                               
登录/注册后可看大图
最佳答案
0 
累计签到:146 天
连续签到:2 天
骑着蜗牛狂奔 发表于 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>
复制代码


这个有问题吗?设置相对定位和决定定位后 字就不水平居中了
最佳答案
0 
累计签到:2 天
连续签到:1 天
icezion 发表于 2017-7-4 14:01:17 | 显示全部楼层
body中不加position: relative;可以垂直居中,加了反而不行。。。。求解
最佳答案
0 
累计签到:611 天
连续签到:36 天
aswyamato1989 发表于 2017-7-5 08:39:31 | 显示全部楼层
同样遇到了在body之中加入"position: relative"之后,无法实现垂直居中的问题。
005.jpg
最佳答案
26 
累计签到:141 天
连续签到:2 天
MSK 发表于 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
最佳答案
26 
累计签到:141 天
连续签到:2 天
MSK 发表于 2017-7-5 15:06:23 | 显示全部楼层
懂了懂了

发表回复

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

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /2 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2017-12-13 11:42

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