问个CSS布局的问题。

xiaopang08 2012-04-28 06:29:15
我照着书上敲的代码，这是我的页面的显示样式：


不知道知道怎么回事，两行之间总有空隙。我希望两行之间不要有那个空隙。请问，该怎么改？

<!DOCTYPE html>

<html>

<head>

<meta http-equv="Content-Type" content="text/html;charset=UTF-8" />

<title>Events Calendar</title>

<link rel="stylesheet" type="text/css" media="screen,projection" href="css/style.css" />

</head>



<body>

<div id="content">

  <h2>January 2010</h2>

  <ul class="weekdays">

    <li>Sun</li>

    <li>Mon</li>

    <li>Tue</li>

    <li>Wed</li>

    <li>Thu</li>

    <li>Fri</li>

    <li>Sat</li>

  </ul>

  <ul>

    <li class="fill"> </li>

    <li class="fill"> </li>

    <li class="fill"> </li>

    <li class="fill"> </li>

    <li class="fill"> </li>

    <li class=""><strong>01</strong><a href="view.php?event_id=1">New Year&#039s Day</a></li>

    <li class=""><strong>02</strong></li>

  </ul>

  <ul>

    <li class=""><strong>03</strong></li>

    <li class=""><strong>04</strong></li>

    <li class=""><strong>05</strong></li>

    <li class=""><strong>06</strong></li>

    <li class=""><strong>07</strong></li>

    <li class=""><strong>08</strong></li>

    <li class=""><strong>09</strong></li>

  </ul>

  <ul>

    <li class=""><strong>10</strong></li>

    <li class=""><strong>11</strong></li>

    <li class=""><strong>12</strong></li>

    <li class=""><strong>13</strong></li>

    <li class=""><strong>14</strong></li>

    <li class=""><strong>15</strong></li>

    <li class=""><strong>16</strong></li>

  </ul>

  <ul>

    <li class=""><strong>17</strong></li>

    <li class=""><strong>18</strong></li>

    <li class=""><strong>19</strong></li>

    <li class=""><strong>20</strong></li>

    <li class=""><strong>21</strong></li>

    <li class=""><strong>22</strong></li>

    <li class=""><strong>23</strong></li>

  </ul>

  <ul>

    <li class=""><strong>24</strong></li>

    <li class=""><strong>25</strong></li>

    <li class=""><strong>26</strong></li>

    <li class=""><strong>27</strong></li>

    <li class=""><strong>28</strong></li>

    <li class=""><strong>29</strong></li>

    <li class=""><strong>30</strong></li>

  </ul>

  <ul>

    <li class=""><strong>31</strong><a href="view.php?event_id=2">Last Day of January</a></li>

    <li class="fill"> </li>

    <li class="fill"> </li>

    <li class="fill"> </li>

    <li class="fill"> </li>

    <li class="fill"> </li>

    <li class="fill"> </li>

  </ul>

</div>

<!-- end #content -->



</body>

</html>


body {

    background-color: #789;

    font-family: georgia, serif;

    font-size: 13px;

}

#content {

    display: block;

    width: 821px;

    margin: 40px auto 10px;

    padding: 10px;

    background-color: #FFF;

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 0 14px #123;

    -webkit-box-shadow: 0 0 14px #123;

    box-shadow: 0 0 14px #123;

}

h2, p {

    margin: 0 auto 14px;

    text-align: center;

}

ul {

    display: block;

    clear: left;

    height: 82px;

    width: 812px;

    padding: 0;

    list-style: none;

    background-color: #FFF;

    text-align: center;

    border: 1px solid black;

    border-top: 0;

    border-bottom: 2px solid black;

}

li {

    position: relative;

    float: left;

    margin: 0;

    padding: 20px 2px 2px;

    border-left: 1px solid black;

    border-right: 1px solid black;

    width: 110px;

    height: 60px;

    overflow: hidden;

    background-color: white;

}

li:hover {

    background-color: #FCB;

    z-index: 1;

    -moz-box-shadow: 0 0 10px #789;

    -webkit-box-shadow: 0 0 10px #789;

    box-shadow: 0 0 10px #789;

}

.weekdays {

    height: 20px;

    border-top: 2px solid black;

}

.weekdays li {

    height: 16px;

    padding: 2px;

    background-color: #BCF;

}

.fill {

    background-color: #BCD;

}

.weekdays li:hover, li.fill:hover {

    background-color: #BCF;

}

li strong {

    position: absolute;

    top: 2px;

    right: 2px;

}

li a {

    position: relative;

    display: block;

    border: 1px dotted black;

    margin: 2px;

    padding: 2px;

    font-size: 11px;

    background-color: #DEF;

    text-align: left;

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    z-index: 1;

    text-decoration: none;

    color: black;

    font-weight: bold;

    font-style: italic;

}

li a:hover {

    background-color: #BCF;

    z-index: 2;

    -moz-box-shadow: 0 0 6px #789;

    -webkit-box-shadow: 0 0 6px #789;

    box-shadow: 0 0 6px #789;

}
...全文
80 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
LoeYueng 2012-04-28
  • 打赏
  • 举报
 回复
直接在css文件的第一行加上
*{margin:0;padding:0}
ycproc 2012-04-28
  • 打赏
  • 举报
 回复


padding: 2px; ？ 0
001007009 2012-04-28
  • 打赏
  • 举报
 回复
<!DOCTYPE html>
<html>
<head>
<meta http-equv="Content-Type" content="text/html;charset=UTF-8" />
<title>Events Calendar</title>
<style>
* { margin:0; padding:0; }
body {
background-color: #789;
font-family: georgia, serif;
font-size: 13px;
}
#content {
display: block;
width: 821px;
margin: 40px auto 10px;
padding: 10px;
background-color: #FFF;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0 14px #123;
-webkit-box-shadow: 0 0 14px #123;
box-shadow: 0 0 14px #123;
}
h2, p {
margin: 0 auto 14px;
text-align: center;
}
ul {
display: block;
clear: left;
height: 82px;
width: 812px;
padding: 0;
list-style: none;
background-color: #FFF;
text-align: center;
border: 1px solid black;
border-top: 0;
border-bottom: 2px solid black;
}
li {
position: relative;
float: left;
margin: 0;
padding: 20px 2px 2px;
border-left: 1px solid black;
border-right: 1px solid black;
width: 110px;
height: 60px;
overflow: hidden;
background-color: white;
}
li:hover {
background-color: #FCB;
z-index: 1;
-moz-box-shadow: 0 0 10px #789;
-webkit-box-shadow: 0 0 10px #789;
box-shadow: 0 0 10px #789;
}
.weekdays {
height: 20px;
border-top: 2px solid black;
}
.weekdays li {
height: 16px;
padding: 2px;
background-color: #BCF;
}
.fill {
background-color: #BCD;
}
.weekdays li:hover, li.fill:hover {
background-color: #BCF;
}
li strong {
position: absolute;
top: 2px;
right: 2px;
}
li a {
position: relative;
display: block;
border: 1px dotted black;
margin: 2px;
padding: 2px;
font-size: 11px;
background-color: #DEF;
text-align: left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
z-index: 1;
text-decoration: none;
color: black;
font-weight: bold;
font-style: italic;
}
li a:hover {
background-color: #BCF;
z-index: 2;
-moz-box-shadow: 0 0 6px #789;
-webkit-box-shadow: 0 0 6px #789;
box-shadow: 0 0 6px #789;
}
</style>
</head>

<body>
<div id="content">
<h2>January 2010</h2>
<ul class="weekdays">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class=""><strong>01</strong><a href="view.php?event_id=1">New Year&#039s Day</a></li>
<li class=""><strong>02</strong></li>
</ul>
<ul>
<li class=""><strong>03</strong></li>
<li class=""><strong>04</strong></li>
<li class=""><strong>05</strong></li>
<li class=""><strong>06</strong></li>
<li class=""><strong>07</strong></li>
<li class=""><strong>08</strong></li>
<li class=""><strong>09</strong></li>
</ul>
<ul>
<li class=""><strong>10</strong></li>
<li class=""><strong>11</strong></li>
<li class=""><strong>12</strong></li>
<li class=""><strong>13</strong></li>
<li class=""><strong>14</strong></li>
<li class=""><strong>15</strong></li>
<li class=""><strong>16</strong></li>
</ul>
<ul>
<li class=""><strong>17</strong></li>
<li class=""><strong>18</strong></li>
<li class=""><strong>19</strong></li>
<li class=""><strong>20</strong></li>
<li class=""><strong>21</strong></li>
<li class=""><strong>22</strong></li>
<li class=""><strong>23</strong></li>
</ul>
<ul>
<li class=""><strong>24</strong></li>
<li class=""><strong>25</strong></li>
<li class=""><strong>26</strong></li>
<li class=""><strong>27</strong></li>
<li class=""><strong>28</strong></li>
<li class=""><strong>29</strong></li>
<li class=""><strong>30</strong></li>
</ul>
<ul>
<li class=""><strong>31</strong><a href="view.php?event_id=2">Last Day of January</a></li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
</ul>
</div>
<!-- end #content -->

</body>
</html>



浏览器对标签有默认的样式（外边距，内补白，字体之类的），写css前，最好清除下默认样式，才能最好的达到自己预想的效果。
*{margin:0; padding:0;} 是个偷懒的做法，不建议这样使用。
楼主可以搜下 reset css
xiaopang08 2012-04-28
  • 打赏
  • 举报
 回复
谢谢，已经解决。看来为了保险起见，以后我都养成一个习惯，直接在css文件的第一行加上
*{margin:0;padding:0}
[Quote=引用 1 楼 的回复:]

CSS code
/*给ul增加样式：*/
ul { margin:0; }
[/Quote]
rn131456789 2012-04-28
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

CSS code
/*给ul增加样式：*/
ul { margin:0; }
[/Quote]

+ + + + + + + + + 1
乌镇程序员 2012-04-28
  • 打赏
  • 举报
 回复 
/*给ul增加样式：*/

ul { margin:0; }
div+css布局大全
div+css布局大全 B/S项目表现层也很重要！
HTML+CSS网页设计与布局从入门到精通
《HTML+CSS网页设计与布局从入门到精通》共分4个部分21章和两个附录，包括网页设计基础、HTML基础、CSS基础、CSS高级技术和CSS布局技术等内容。全书遵循Web标准，强调“表现”与“内容”的分离，抛弃了那些过时的...
div+css 网站布局案例精粹 Sample
div+css 网站布局案例精粹 Sample
iframe网页上下左右布局模板
iframe网页上下左右布局模板，可以修改里面的css代码来更改各个模块的大小，位置。很基本使用的网页布局模板
50个Div+CSS模板
50个Div+CSS模板 为网页模板，理解网页布局
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章