‹‹ 上一主题 | 下一主题 ››
 51 12
发新话题
打印

[讨论] CSS布局实验题一（检验CSS布局灵活性）

qesc

初级会员

帖子
27 
体力
62  
威望
0  
离线
153 天
31# 大 中 小 发表于 2007-6-26 23:01 
如果在li里加入div，就违背了原题的意思了。

好厉害！ 学到了处理ul和li来显示边框的妙招！

TOP

jessenlon

初级会员

帖子
82 
体力
181  
威望
0  
当前
北京 西城区
离线
9 天

专长 网页设计,Flash,CG
32# 大 中 小 发表于 2007-7-6 18:03 


 提示：您可以先修改部分代码再运行
火狐 IE7 效果是一样的了。。。

OPERA有点出入。。。

TOP

390507071

初级会员

帖子
45 
体力
90  
威望
0  
离线
462 天
33# 大 中 小 发表于 2007-7-11 14:03 

我的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
       margin: 0px;
       padding: 0px;
}
#list{
       width:400px;
       margin-top: 0px;
       margin-right: auto;
       margin-bottom: 0px;
       margin-left: auto;
}
#list ul {
       list-style-type: none;
       margin: 0px;
       padding: 0px;
}
#list li {
       display: block;
       float: left;
       text-align: center;
       width: 100px;
       margin-top: 0px;
       margin-right: auto;
       margin-bottom: 0px;
       margin-left: auto;
       height: 40px;
       border: 1px solid #FFFFFF;
       background-color: #6699CC;
       color: #FFFFFF;
       font-size: 12px;
       line-height: 40px;
}
-->
</style>
</head>
<body>
<div id="list">
<ul>
<li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
</ul>
</div>
</body>
</html>

TOP

jiangliuhuo

新手上路

帖子
18 
体力
44  
威望
0  
离线
180 天
34# 大 中 小 发表于 2007-9-12 12:35 
引用:
原帖由 wobuup 于 2007-6-26 20:59 发表
为什么不能整体距中呢？？

明明有
margin:0 auto;
要 margin:0px auto;

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
wlx115

中级会员

帖子
107 
体力
366  
威望
0  
离线
140 天
35# 大 中 小 发表于 2007-9-12 15:46 
哈哈，我看了理解了一下楼主的意思！！
表格布局内容多的时候可以自由伸缩但是CSS布局的就不太好做了！！
就单单限制在这些内容中！！
可以看看按这些代码吗？

 提示：您可以先修改部分代码再运行
[ 本帖最后由 wlx115 于 2007-9-12 15:48 编辑 ]
技术太菜！一直在学习中！http://www.dongda-edu.cn
http://www.qhcct.com
http://www.qhet.com.cn

TOP

Nicolasguo

新手上路

帖子
22 
体力
49  
威望
0  
当前
山东 青岛
离线
109 天
36# 大 中 小 发表于 2007-12-31 18:53 
17楼的数字不居中啊，而list中的center命令好像没用啊，大家能解释一下为什么吗？还有怎么把div中的内容的坐标搞定？
成长进步中

TOP

xiaohei2008

新手上路

帖子
7 
体力
0  
威望
0  
当前
广西 南宁
离线
211 天
37# 大 中 小 发表于 2008-2-4 16:10 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#list{width:50%;margin:0 auto;}
#list ul{width:100%;margin:0;padding:0;list-style:none;border:2.5px #00CC33 solid;}
<!--去掉#list ul{width:100%}  ul 自适应宽/高度-->
#list li{width:30%;height:100px;line-height:100px;text-align:center;float:left;background-color:#FFFFCC;border:2.5px #00CC33 solid;}
-->
</style>
</head>
<body>
<div id="list">
<ul>
<li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
</ul>
</div>
</body>
</html>


高手在哪里？~~？~~~？~~

TOP

hong0823

初级会员

帖子
24 
体力
53  
威望
0  
当前
上海 宝山
离线
58 天
38# 大 中 小 发表于 2008-2-5 01:34 
是不是觉得很闲啊

TOP

mbj18

泡沫芭

初级会员

帖子
48 
体力
121  
威望
0  
当前
河南 开封
离线
15 天
39# 大 中 小 发表于 2008-5-7 16:04 
#23 在FF里边显示错误怎么修改呢？

TOP

mjrjlpf

新手上路

帖子
19 
体力
43  
威望
0  
40# 大 中 小 发表于 2008-5-7 16:53 
唉，我都不知道看到多少类似的帖子了，真不懂这些人怎么这么爱钻牛角尖，现在大家所说的用DIV布局，并不是希望你们抛弃TABLE，“物尽其用各司其责”，这才是我们因该提倡的，何必那么较真呢？

TOP

enjoy1943

新手上路

帖子
9 
体力
23  
威望
0  
当前
四川 成都
离线
179 天
41# 大 中 小 发表于 2008-5-8 08:06 
引用:
原帖由 wobuup 于 2007-6-26 20:59 发表
为什么不能整体距中呢？？

明明有
margin:0 auto;

啊

[html] 1列固定宽度


#layout {

margin:0 auto;
  background-color:#cccccc;
border:2px solid # 333333;
width:300;
height:300;

...
在你的style里添加下面代码,就可以了.

body{
text-align:center;
}

TOP

enjoy1943

新手上路

帖子
9 
体力
23  
威望
0  
当前
四川 成都
离线
179 天
42# 大 中 小 发表于 2008-5-8 08:11 
你要验证的两点都是对的.DIV+CSS很多人都做到了.
只是你举的例子,对这两点有些不容易做到.至少表现不明显.

TOP

vicentchen

新手上路

帖子
1 
体力
7  
威望
0  
离线
123 天
43# 大 中 小 发表于 2008-7-18 18:17 
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{
margin:0px;
padding:0px;
}
#list{
width:50%;
margin:0 auto;
height:215px;
}
#list li{
list-style:none;
display:block;
float:left;
width:32%;
height:100px;
background-color:#FFFFCC;
text-align:center;
line-height:100px;
border:solid 5px #00CC33;
}
#list li.left{
border-left-width:0px;
}
#list li.right{
border-right-width:0px;
}
#list li.bottom{
border-bottom-width:0px;
}
</style>
</head>
<body>
<div id="list">
<ul>
<li class="right">1</li>
<li>2</li>
<li class="left">3</li>
<li class="right">4</li>
<li>5</li>
<li class="left">6</li>
</ul>
</div>
</body>
</html>

TOP

abamboo

中级会员

帖子
220 
体力
247  
威望
0  
当前
北京 海淀区

专长 前端制作
44# 大 中 小 发表于 2008-7-18 20:02 

回复 badwish 在 4# 的帖子

4楼写的帅~
以另一种方式~ PFPF。

TOP

luoyunguan

初级会员

帖子
59 
体力
134  
威望
0  
当前
广东 惠州
离线
26 天

专长 网页设计,MSSQL,SEO
45# 大 中 小 发表于 2008-7-18 21:24 
good

TOP

nomad1983

新手上路

帖子
6 
体力
12  
威望
0  
离线
12 天
46# 大 中 小 发表于 2008-7-25 17:28 
引用:
原帖由 wobuup 于 2007-6-26 20:59 发表
为什么不能整体距中呢？？

明明有
margin:0 auto;

啊

[html] 1列固定宽度


#layout {

margin:0 auto;
  background-color:#cccccc;
border:2px solid # 333333;
width:300;
height:300;

...
应该是需要对文档进行声明。!DOCTYPE

TOP

artjoy

新手上路

帖子
2 
体力
7  
威望
0  
离线
15 天
47# 大 中 小 发表于 2008-7-25 20:46 


 提示：您可以先修改部分代码再运行

TOP

gdc123

中级会员

帖子
102 
体力
230  
威望
0  
当前
江西 吉安
离线
2 天
48# 大 中 小 发表于 2008-8-5 10:33 

回复 wobuup 在 30# 的帖子

<style>
ul{width:490px;margin:0;padding:0;list-style:none;}
ul li{height:100px;line-height:100px;text-align:
center;float:left;width:150px;background:#FFFFCC;
border:solid 5px #00CC33;}

ul #li_12{
border-right:solid 0px #00CC33;
border-bottom:solid 0px #00CC33;}
ul #li_3{width:155px;
border-bottom:solid 0px #00CC33;}
ul #li_45{
border-right:solid 0px #00CC33;
}
ul #li_6{width:155px;
}
</style>
<div style="text-align:
center;">
<ul>
<li id="li_12">1</li><li id="li_12">2</li><li

id="li_3">3</li>
<li id="li_45">4</li><li id="li_45">5</li><li

id="li_6">6</li>
</ul>
</div>

TOP

a1212528

新手上路

帖子
11 
体力
11  
威望
0  
离线
11 天
49# 大 中 小 发表于 2008-11-5 15:00 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!-- 调用样式表 -->
<style type="text/css">
<!--
#list{margin:0 auto;padding:0px;border:0;width:491px;height:225px;font-size:16px;font-weight:normal; }
#list ul{float:left;margin:0;padding:0 0;border:0px;width:491px;height:217px;list-style:none;background-color:#00CC33;}
#list li{display:inline;float:left;width:157px;height:101px;background-color:#FFFFCC;padding:0px;border:0;margin:5px 0 0 5px;text-align:center;line-height:101px;}
-->
</style>
</head>
<body>
<div id="list">
<ul>
<li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
</ul>
</div>
</body>

TOP

a1212528

新手上路

帖子
11 
体力
11  
威望
0  
离线
11 天
50# 大 中 小 发表于 2008-11-5 15:02 
完全实现了楼主所要求的，不需要动到hTML，纯cSS实现

TOP

qiutianmty

马天宇

中级会员

帖子
174 
体力
327  
威望
0  
当前
河南 郑州
离线
9 天
51# 大 中 小 发表于 2008-11-6 10:23 
感觉有点不同

TOP

‹‹ 上一主题 | 下一主题 ››
 51 12
发新话题