<?xml version="1.0" encoding="gbk"?>
<rss version="2.0">
  <channel>
    <title>曲径通幽论坛 - HTML/CSS</title>
    <link>http://www.groad.net/bbs/forum.php?mod=forumdisplay&amp;fid=109</link>
    <description>Latest 20 threads of HTML/CSS</description>
    <copyright>Copyright(C) 曲径通幽论坛</copyright>
    <generator>Discuz! Board by Comsenz Inc.</generator>
    <lastBuildDate>Thu, 09 Apr 2026 19:56:22 +0000</lastBuildDate>
    <ttl>60</ttl>
    <image>
      <url>http://www.groad.net/bbs/static/image/common/logo_88_31.gif</url>
      <title>曲径通幽论坛</title>
      <link>http://www.groad.net/bbs/</link>
    </image>
    <item>
      <title>外边距(margin)</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9296</link>
      <description><![CDATA[示例一：
在没有左外边距描述的时候：

效果：


增加外边距描述：

效果：



示例二：

在没有右外边距描述的时候：
[mw_shl_cod ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Wed, 28 Dec 2016 05:52:44 +0000</pubDate>
    </item>
    <item>
      <title>内边距 (padding)</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9291</link>
      <description><![CDATA[内容与边框之间的距离就是内边距，使用 padding 属性来控制，其属性值可以是长度值或百分比，但不能是负值。当值是百分数时，这个百分比是相对于父元素的 width 而言，如果父元素的 width 改变，它们也会随之变化。
可以通过 padding-top, padding-right,  padding-bot ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Sun, 25 Dec 2016 15:07:46 +0000</pubDate>
    </item>
    <item>
      <title>div 中的边框(border) 设置</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9290</link>
      <description><![CDATA[现在定义一个 div，里头被一张背景图片填充（请忽略背景图片中的 “这是一个段落的内容”文字）。代码：

在 IE 里打开：


如果使用 border 给这个 div 加上边框：




我们加的边框是 10px 。需要注意的是，这个 10px 并不是单一侧边框的宽度是 10px，而是 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Mon, 19 Dec 2016 08:10:28 +0000</pubDate>
    </item>
    <item>
      <title>关于选择器的一些小结</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9289</link>
      <description><![CDATA[各种选择器的使用场合

1. 类选择器一般是提供给一类具有相同特性的元素来使用，这些元素数量一般比较多，在一个页面或整个站点中多处都会出现且要求具有同一风格的。

2. id 选择器往往提供给某一个元素来使用，而不是像类那样要提供给多人使用。

3. 在不清楚将 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Mon, 12 Dec 2016 16:04:03 +0000</pubDate>
    </item>
    <item>
      <title>客户端图像映射(img, usemap, map, area)</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9287</link>
      <description><![CDATA[在浏览网页时，有时会看到这种效果：在一张图片里，你的鼠标单击其中的某块区域时，会链接到一个页面；当鼠标单击另外一块区域时，又会链接到另一个页面。这种情况，就是“客户端图像映射”（Client Side Image MAP）的使用。

在  中使用 usemap 属性时，就是要打 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Fri, 09 Dec 2016 19:17:37 +0000</pubDate>
    </item>
    <item>
      <title>marquee 标签 -- 移动内容(文字，图片，表格等)</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9286</link>
      <description><![CDATA[直接使用 hello world 时的所包围的文字 hello world 跑马灯移动，默认从右到左移动。

可以使用 direction 属性来控制移动的方向：


可以用 behavior 控制于东的 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Fri, 09 Dec 2016 15:05:33 +0000</pubDate>
    </item>
    <item>
      <title>选择器：选择父级元素下的子元素(first-child/nth-child)</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9086</link>
      <description><![CDATA[有时候想选择父级元素下的某个子元素应用样式，此时可以使用 first-child 和 nth-child() 这两个属性。其中，first-child 表示父元素的首个子元素；nth-child() 通过括号里填入一个整数可以指定任意一个子元素。

看下面的代码：

这两个 div 都使用了同一个 class  ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Fri, 25 Dec 2015 16:46:41 +0000</pubDate>
    </item>
    <item>
      <title>下拉列表样式应用举例</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9085</link>
      <description><![CDATA[下面应用样式生成一个彩色的下拉列表，考察下面代码：
效果图：
上面代码只是针对每一个下拉选项设置了一个背景色。]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Fri, 25 Dec 2015 13:00:58 +0000</pubDate>
    </item>
    <item>
      <title>按钮样式举例</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9084</link>
      <description><![CDATA[下面举例对按钮进行样式描述。

考虑下面的代码：


第 1 条 input 语句，定义了一个最为普通的按钮。

第 2 条 input 语句则是使用了样式描述。它有两个事件，当鼠标不在按钮上时(onMounseOut)时应用类名为 ip 的样式；当鼠标悬停在按钮上时（onMouseOver）应用 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Fri, 25 Dec 2015 09:00:00 +0000</pubDate>
    </item>
    <item>
      <title>一条线的文本框</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9083</link>
      <description><![CDATA[一般情况下，表单里的文本框是一个矩形，供用户输入用户名和密码之类。但是像一些填写的表格，比如价格之类的，就只需要一条下划线。考察下面代码，它同时制作出了一个普通的文本框和一条线的文本框。


效果图：



你可能看到别人的论坛上的登录表单，或者是快 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Fri, 25 Dec 2015 08:43:15 +0000</pubDate>
    </item>
    <item>
      <title>表格样式</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9082</link>
      <description><![CDATA[table { table-layout:fixed }
看下面代码：


效果：



默认的表格，单元格会随着你里头输入的内容而相应增大以恰好容纳它们。

再修改一下网址那行  ，将其改为  ，会发现并没有限制住，单元格还是能自适应的增大。


因此得出一个结论，在没有其它限制 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Fri, 25 Dec 2015 03:45:19 +0000</pubDate>
    </item>
    <item>
      <title>背景属性</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9081</link>
      <description><![CDATA[background-color
定义元素的背景色，比如下面代码所示：

效果图：



background-image
定义背景图像，使用格式： background-image:url(your_image) ;

许多情况下，还需要配合 background-repeat:repeat-x; 这样的标签使用，以使图像得到延伸。通常我们不 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Thu, 24 Dec 2015 15:15:01 +0000</pubDate>
    </item>
    <item>
      <title>margin-bottom 属性</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9080</link>
      <description><![CDATA[margin-bottom 属性设置元素的下外边距。

下面以一个直观的实例来查看到底是啥，到 bbs.17173.com 论坛来看看 “欢迎新会员” 一栏，如下图所示：



上图中，红色方框的 div id 为 chart ，通过浏览器的审查元素可以看到其对应的 CSS 描述：


很清楚，这 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Thu, 24 Dec 2015 03:21:17 +0000</pubDate>
    </item>
    <item>
      <title>选择器</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9079</link>
      <description><![CDATA[选择器就是要告诉 CSS 作用于哪个元素之上，可以分为下面几类：


[*]HTML 选择器

针对 HTML 标签的选择器。


[*]Class  选择器

针对 class 的选择器。


[*]ID  选择器

针对 ID 的选择器。


[*]关联选择器

该样式和某个有关联的。比如某个   ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Tue, 22 Dec 2015 17:14:18 +0000</pubDate>
    </item>
    <item>
      <title>用 z-index 设置元素的堆叠顺序</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9078</link>
      <description><![CDATA[CSS 的元素是可以堆叠的，比如像下面这个效果：


改一下代码，又能上绿块堆在黄块上头：


像叠罗汉一样，决定是我压你，还是你压我，看 z-index 的属性值，值大的，在上头；反之在下头。需要注意的是，z-index 只能在定位元素（position）上有效。

这里说明 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Tue, 22 Dec 2015 15:03:49 +0000</pubDate>
    </item>
    <item>
      <title>position 定位</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9077</link>
      <description><![CDATA[在说 position 定位之前，需要先了解 html 是以一种流的方式依次的展现在你的面前的。比如下面的代码：

它呈现的效果是：


注意代码的书写顺序以效果的展现顺序。

但是在日常的使用中，我们经常遇到一些导航栏中的下拉菜单，只要鼠标移动到其上，下拉菜单就会 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Mon, 21 Dec 2015 15:20:11 +0000</pubDate>
    </item>
    <item>
      <title>一个属性可以用多个值来描述</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9076</link>
      <description><![CDATA[在 CSS 中一个便利之处就是一个属性可以用多个值来描述，且这几个值之间用空格隔开，比如给一段文字添加一个 4px 粗且为橙色的实现边框，可以写成 border:solid 4px #F60;  。如下代码所演示：

显示效果为：



当然，如果想更详细的表达，可以单独将 border 的 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Sun, 20 Dec 2015 18:01:29 +0000</pubDate>
    </item>
    <item>
      <title>text-align:justify  两端对齐</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9075</link>
      <description><![CDATA[有时候可能需要两端对齐，那么需要用到 text-align:justify 属性。在用该属性时，应该配合 width 宽度属性来使用，否则书写的内容会一直走到浏览器窗口的右侧尽头然后换行。

如果写的是英文，那么仅用该属性即可；如果写的内容是中文，那么还需要加上 text-justify:d ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Sun, 20 Dec 2015 17:54:49 +0000</pubDate>
    </item>
    <item>
      <title>CSS 中的继承关系</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9074</link>
      <description><![CDATA[text-align:inherit 该属性表示对齐方式为向下继承，CSS 本身就具有这种特性。下面举例说明。
代码：

上面代码将  标记中内容显示为蓝色。按照常理来说， 标记内并没有什么规定显示其内容为蓝色，默认应该为黑色。但是， 标记在这是  的子标记，反过来  是  标记的 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Sun, 20 Dec 2015 17:38:24 +0000</pubDate>
    </item>
    <item>
      <title>单线表格的实现（border-collapse: collapse/separate）</title>
      <link>http://www.groad.net/bbs/forum.php?mod=viewthread&amp;tid=9072</link>
      <description><![CDATA[一般来做，表格是双线的，如下图所示：



为什么是双线的？其实，在定义最外边的大表格  时，有了一根线；然后再定义出一个单元格时，又是一条线，于是这两天叠加起来，就成了两条线。

那么如何变成单线的表格呢（一般做表格也都是单线表格）？

使用 CSS 中 ...]]></description>
      <category>HTML/CSS</category>
      <author>beyes</author>
      <pubDate>Thu, 17 Dec 2015 15:46:36 +0000</pubDate>
    </item>
  </channel>
</rss>