标签： css

HTML的“组合框”

效果图

有时候做网页需要弄一个“组合框”,像下图这样的。

HTML的“组合框”
image-2041
HTML

不多说，小提示:在chrome浏览器上设置0.5px是无效的[没明白为啥].可以调整各项参数来观察页面变化。

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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">
    * {
        padding:0;
        margin:0;  
    }
   
    body{
        padding:200px; 
       
    }
   
    #test{
        width:1000px;
        height:auto;   
        padding:0;
        margin:auto;
    }
   
    #test .title{
        display:inline;
        width:120px;
        height:40px;
        margin-top:20px;   
        text-align:center;
        border:#00ff00 1px solid;
        border-bottom:#FFF 1px solid;
    }
   
    #test .test1 {
       
        width:990px;
        height:auto;
        border:#ff0000 1px solid;
        border-top:none;
        text-align:center; 
    }
   
    #test .test1 .sidehr {
       
        width:927px;
        height:0.5px;
        float:right;
        border-top:#cccccc 1px solid;  
        margin:0 -1px 0 70px;
        padding:0;
    }
   
   
    #clear_float {
    /*清除浮动*/
    clear: both;
}
   
</style>

</head>
<body>
<div id="test">
    <div class="title">标题测试</div>
    <div class="test1">
        <div class="sidehr"></div>
        <div id="clear_float"></div>
        测试数据一下.
    </div>
</div>
</body>
</html>

By Cd.

按照层次去写你的CSS

最近一直没写博客，有两方面的原因：

一、不知道写什么，忽然觉得迷茫；

二、忙于考试，以前从未觉得考试如此困难

今天，一个初学CSS的朋友发我一个图，然后问怎么把图片调整到边框。

CSS图
image-1619

将图片与边框之间的距离去掉?

她的代码是这样写的:

HTML代码.

HTML代码
image-1620

HTML代码

拿到之后，我也略微思考了半天，修改了li.box的padding和margin属性.还是没有起色。怎么办？

于是我尝试着在CSS里定义了下面这条语句：

#main ul { margin:auto; padding:0; width:240px; height:auto; text-align:left; }

也就是这条语句界面一下子就“和谐”了。

修改后的效果图
image-1621

 

定义后的效果图

 

这忽然让我联想到了:自上到下。于是在写CSS的时候，请注意以下顺序，即便上级没有什么可用的信息，也一定要写上（有时候觉得这条CSS确实没多大用处，但差错偏偏就出现在这里）。

 

CSS隐藏代码“Display:none;”算是SEO作弊么

前两天，飘易开发一套小型网站程序，为了良好的用户体验，不得不隐藏部分内容以达到页面简洁的效果；程序采用了CSS+DIV设计，自然地想起了颇具争议的css隐藏代码：Display:none;，为什么说有争议呢？因为Display:none;是一把双刃剑，以前被过多地用于seo作弊，所以搜索引擎对它比较敏感。

作为CSS代码的表现样式DISPLAY本身并无过错，许多大型网站的导航系统，为了实现简洁而良好的用户体验，都使用了Display:none;隐藏部分内容，当用户点击了某个链接、按钮时，再通过js代码把隐藏的内容显示出来。

在站长界流传甚广的PHP程序DEDECMS的默认模板的首页就有这样的效果：当鼠标指向对应的div块时，在下方就自动显示相应的内容，而通常情况下，只有一个模块的内容显示，其他模块的内容是隐藏的。同样，这样的效果在163、新浪、qq等等大型门户网站上也大量地被使用了。比如网易的首页的其中一个导航如下图：

image-889

不明白的可以直接打开上面这些大型网站的首页，打开源代码，搜索“Display:none;”，就会发现他们使用了大量的css隐藏代码。很显然，他们使用这样的css代码绝对不是为了对搜索引擎作弊，而是为了在有限的空间里给用户展示更多的内容，提高了用户的体验，节约了屏幕空间。搜索引擎当然也不会把这样的行为定性为网站seo作弊。

隐藏内容的css方法一般有三种：1、css代码Display:none;；2、visibility: hidden 可见性为隐藏；3、overflow:hidden设置。其中，第一种和第三种方法曾经大量地被使用在SEO作弊上，很多早期有着黑帽SEO历史的SEOER们应该都知道这样的方法。

当然，搜索引擎也不是傻子，在作弊与反作弊的较量上几乎就没有停止过；如果现在再使用上面的隐藏方法来作弊的话，比如在隐藏内容里堆叠大量的关键词，大量的链接等，搜索引擎K你是没商量。

其实，飘易看来，是否正常使用了Display:none;这样的隐藏代码，是否利用它来对搜索引擎作弊有一个很简单的判断方法：隐藏的内容如果搜索引擎看得到，用户也看得到的为正常使用隐藏；如果用户看不到，而搜索引擎看得到就可以定性为作弊。像上面提到的网易、新浪等网站使用的隐藏效果就是完全正常的，使用了隐藏是为了更好地用户体验，更好的利用有限的空间，搜索引擎也不会机械到一刀切的地步。

如果大家对本文讨论的内容也有兴趣，欢迎留下您的评论。

原文:

百度提供的CSS命名表

百度提供的CSS命名表
image-712

百度提供的CSS命名表

地址为：百度CSS命名参考

什么是CSS：CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。 在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。