|
查看: 876|回复: 7
|
我的頁面不static..教教我吧。
[复制链接]
|
|
|
我的页面只要把它变小或缩小，那些里面的东西就会跑上跑下，有大大可以教我吗？
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<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>
|
|
|
|
|
|
|
|
|
|
|
|
发表于 20-10-2014 11:40 PM
|
显示全部楼层
|
|
|
|
|
|
|
|
|
|
|
发表于 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 编辑
|
评分
-
查看全部评分
|
|
|
|
|
|
|
|
|
|
|
发表于 23-10-2014 07:27 PM
|
显示全部楼层
|
|
|
|
|
|
|
|
|
|
|
发表于 5-3-2015 03:10 PM
|
显示全部楼层
其实我觉得你的page 很responsive，没什么不好。。很方便那些screen小的mobile user，最近的趋势都面向mobile responsive了。
用那个boostrap不错，不过要注意version 2.x和3的keyword和structure有别，尤其是box-sizing。
|
|
|
|
|
|
|
|
|
|
|
|
发表于 12-3-2015 04:19 PM
|
显示全部楼层
买个theme，几十块 直接A+ |
|
|
|
|
|
|
|
|
|
|
|
发表于 5-4-2015 05:12 PM
|
显示全部楼层
|
|
|
|
|
|
|
|
|
|
|
发表于 6-4-2015 09:55 AM
|
显示全部楼层
|
|
|
|
|
|
|
|
|
| |
 本周最热论坛帖子
|
变色卡
千斤顶
1588 
65
