我的頁面不static..教教我吧。

Jjloveziling · 发表于 20-10-2014 10:58 PM

我的页面只要把它变小或缩小，那些里面的东西就会跑上跑下，有大大可以教我吗？

<!DOCTYPE html>

<html>
<head>
      <meta charset="UTF-8">
      <title>Hallo</title>
      <style type="text/css">
         input{
            margin: 0px;
         }
      </style>
</head>
<body style="background:#FFCCFF;">
      <div id="header" style="border-bottom:1px solid gray;">
         <div style="float:left">
            <img src="image/logo.png">
         </div>
         <div style="float:left; margin-top: 100px; color: #CC0099; font-size: 30px; font-family: Agency FB;">Grab Your Sticker!</div>
         <div style="float:right;">
            <div style="margin-top:10px;">
            Login
            </div>
            <form method="POST">
                  <input type="text" placeholder="username" style="width:90%; margin-top:10px;"/>
                  <br/>
                  <input type="password" placeholder="password" style="width:90%;"/>
                  <br/>
                  <input type="submit" value="Login" style="width:90%;"/>
            </form>
            <a href="#" id="join">Join us now</a>
         </div>
         <div style="clear:both"></div>
      </div>
      <div id="content">
         <div id="content-column-1" style="float:left; width:20%; height:800px; border-right:1px solid gray;">
            <input type="text" placeholder="Search" style="margin-top:20px; height:30px; width:90%; border:2px solid gray; padding:2px; font-size:18px;">
         </div>
         <div id="content-column-2" style="float:left; width:69%;">
            <div id="row-1" style="height:200px; border-bottom: 1px solid gray;">
                  <div style="color:red; font-size:35px; font-weight:bold; font-family: Aharoni; margin-top:25px; margin-left:25px;">Hot!</div>
            </div>
            <div id="row-2">
                  <div style="color:blue; font-size:35px; font-weight:bold; font-family:Aharoni; margin-top:25px; margin-left:25px;">
                     Create Your Own Sticker
                  </div>
                  <div id="box1" style="height:100px; width:100px; background:gray; float:left; margin-left:10px; margin-top:15px">

                  </div>

                  <img src="image/arrow.png" style="float:left; height:60px; width:60px; margin-left:20px; margin-top:30px;" >

                  <div id="box2" style="height:100px; width:100px; height:100px; background:gray; float:left; margin-left:50px; margin-top:15px;">

                  </div>

                  <img src="image/arrow.png" style="float:left; height:60px; width:60px; margin-left:20px; margin-top:30px;">

                  <div id="box3" style="height:100px; width:100px; background:gray; float:left; margin-left:60px; margin-top:15px">

                  </div>

                  <img src="image/arrow.png" style="float:left; height:60px; width:60px; margin-left:20px; margin-top:30px">

                  <div id="box4" style="height:100px; width:100px; background:gray; float:left; margin-left:60px; margin-top:15px">

                  </div>
            </div>
            <div id="row-3" style="height:200px; border-bottom: 1px solid gray;">

            </div>
                  <div style="color:#00CC33; font-size:35px; font-weight:bold; font-family:Aharoni; margin-top:15px; margin-left:25px;">
                     Donate to us and the sticker's creator make it useful
                  </div>
                  <img src="image/donate.png" style="float:left; height:200px; width:200px; margin-left:20px">

         </div>
         <div id="content-column-3" style="float:left; width:10%; height:800px; border-left:1px solid gray;">

         </div>
      </div>
      <div style="clear: both"></div>
</body>
</html>

k2levin · 发表于 20-10-2014 11:40 PM

试试 bootstrap

http://www.w3schools.com/html/html_responsive.asp 本帖最后由 k2levin 于 21-10-2014 09:57 AM 编辑

musicalangel · 发表于 21-10-2014 07:40 AM

建议:

1) 在处理DOM跟layout这类问题时, 如果你是使用 firefox, 请启用

Tools -> Web Developer -> Developer Toolbar

然后你的游览器下方会出现一览深色, 你按下右边的 logo 按钮, 就会跳出一些非常有用的东西.
下方的空格可以让你打JS, 当场执行看结果, 或观看DOM的CSS等

2) 请把 CSS 跟 html 分开, 你这样子写code会造成你的page 要改成动态很麻烦, 或者后续的人要维护很困难.

原因:
当你的box 跟其他img 使用float: left的时候, 会跳出 column-2 的div 所以网路上有人建议加一行东西

<div id="box4" style="height:100px; width:100px; background:gray; float:left; margin-left:60px; margin-top:15px">
</div>
<b><div style="clear: both;"></div></b>

复制代码

详细请参考
div leaving parent when using float

本帖最后由 musicalangel 于 21-10-2014 12:51 PM 编辑

musicalangel · 发表于 23-10-2014 07:27 PM

如果我的答案有幫助, 煩請通知一下

謝謝.

ric.h.c · 发表于 5-3-2015 03:10 PM

其实我觉得你的page 很responsive，没什么不好。。很方便那些screen小的mobile user，最近的趋势都面向mobile responsive了。

用那个boostrap不错，不过要注意version 2.x和3的keyword和structure有别，尤其是box-sizing。

poiseberry · 发表于 12-3-2015 04:19 PM

买个theme，几十块

直接A+

加峻 · 发表于 5-4-2015 05:12 PM

musicalangel 发表于 21-10-2014 07:40 AM
建议:

1) 在处理DOM跟layout这类问题时, 如果你是使用 firefox, 请启用

若是chorme呢？

musicalangel · 发表于 6-4-2015 09:55 AM

加峻发表于 5-4-2015 05:12 PM
若是chorme呢？

Tools > Developer Tools

		自动登录	找回密码
密码			注册

我的頁面不static..教教我吧。

评分

所属分类: 电脑手机

浏览过的版块