首页

科技资讯

技术分享

程序开发

设备维修

登录

注册

• 首页
• 程序开发
• 正文

CSS基础和实例（上）

admin

2023-08-01 14:00:09

0次

上一篇简单的过了一遍HTML的常用标签，这一篇继续CSS。

例1 CSS的标签选择器

    
    
    
    


    1

    1

    1

             

        

            

                oo                 uu             

        

    

    sdfsdf

    1     2

    3     baidu     

99

    

99

    

99

    

        

asdf

    

例2 加载CSS文件

创建一个css文件，把style内容写进去

在html文件里面导入这个css文件，效果和直接写是一样的

    
    
    


    
asdfasdfsdf

例3 float的使用

如果不用float，那么因为

是块级标签，他会自动变成两行,使用float之后，漂浮起来变成一行，具体的理解是，css是分层级的，一个是标准层，一个是浮动层；他float之后就漂浮到标准标签的外面的一层了（浮动层），那么这个float的标签后面的标签，如果没有float的话，会自动往上跑（标准层），这样的结果有可能导致浮动的标签遮挡了后面没有浮动的标签。同时这个float的标签如果他的上面是一个标准的标签，他会自动紧贴上面；如果他的上面是一个浮动的，他会跟着浮动到同一行，如果塞不下才会跑到下面一行。

    
    
    


    test1

             test2

        test3

    

例4. 加载背景图片

使用背景图片的时候需要指定高度，宽带；一个使用技巧是通过Chrome的F12，可以滚轮编辑数字像素

    

列5 边距

注意那三个input距离上边和左边的距离

列6 clear的使用

clear可以禁止float, 默认一个float的标签后面跟着的标签会跟着float起来，可以指定clear来控制是否漂浮

这里有一个很不错的文章解释了float和clear的使用

前面已经说了

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。如果使用了clear，那么在float那一层里面 他会把横向排列的div再变成纵向的，但是不影响标准层的排列

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

例如；红色

例7 position的使用 首先看fixed的使用，固定标签在屏幕的某个位置，即使拖动滚轮 他也在那里不会动。fixed以后，效果和float类似，他就漂浮起来了（想象立体空间），这样导致他后面的div会自动往上跑，造成一部分遮挡。可以通过调整margin来正常显示

    
    


    
    返回顶部

例8 position的使用场景2，外面使用relative，里面用absolute，这样的可以保证 111始终在父div的固定位置, 这个absolute的位置可以为正数，也可以为负数（跑出去边框）

    
    


    
        
            111
        
    

例9加载图片,和背景图使用类似，也需要指定高度和宽度

例10 一个模拟对话框的界面

• display:none 隐藏标签

• 如果希望实现弹出框一个居中的效果，可以指定top： 50%，left：50%，这样左上角就居中了，然后根据弹出框的尺寸，左移动一半，下移动一半

• 如有多层，可以指定z-index来觉得谁在谁上面，z-index越大，这个div就越在上面

例11. 菜单高亮效果

布局一般分为三大块：header,body和foot

根据需求可以left float或者right float

cursor是鼠标放上去的效果

.w里面 margin：0 auto可以保证在拖曳浏览器大小的时候，整个页面始终居中显示

    
    
    


    
        
            

                
菜单一
                
菜单二
                
菜单三
                
菜单三
                
菜单三
                
菜单三
                
菜单三
                
菜单三