Python学习总结【第十八篇】：CSS

CSS简介

　　CSS(Cascading Style Sheets),称为层叠样式表，用于对页面进行美化，CSS可以使页面变的更加美观。基本上所有的html页面都会使用一些CSS。

使用方法：元素内联、页面嵌入及外部引入（三种方法定义了相同的样式，优先级：标签>页面嵌入>外部引用）

语法：style = 'key1:value1;key2:value2;'

     在标签中使用 style='xx:xxx;'
     在页面中嵌入 < style type="text/css"> </style > #在头部指定CSS样式
     引入外部css文件

CSS应用案例

元素内联：
<p style="background-color: aqua">
    前端之CSS学习
</p>

效果：

页面嵌入：
在头部定义好css样式，需要时直接应用：
<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <!--在头部指定好CSS样式然后，在标签里使用class="样式名应用"-->
    <style>
        .css_test{
            background-color: darkorchid;
        }
    </style>
</head>
<body>
    <div>
        <p class="css_test">
            <!--这里应用指定好的CSS样式名即可-->
           前端之CSS学习
        </p>
    </div>
</body>

效果：

外部引入

写一个独立的文件存储css样式代码如下：建议（在样式文件里加上标注防止出现遗忘）

# css定义，文件名称color.css
.page_color{
    /*设置背景颜色及宽带*/
    background-color: darkorchid;
    width: 300px;
}

# html页面
<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <!--这里通过link导入样式，有点类似与python导入模块中的import *-->
    <link rel="stylesheet" href="color.css">
</head>
<body>
    <div>
        <p class=page_color>
            <!--这里直接应用指定好的CSS样式名即可-->
            前端之CSS学习
        </p>
    </div>
</body>

效果：

CSS常用属性

background[背景]

background-color  背景颜色
background-image 背景图片
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复

代码：

<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
</head>
<body>
    <div style="background-color: red">
     <!--设置背景颜色-->
        Hello,html
    </div>

    <div style="background-image: url(ico.gif);height: 80px;">
     <!--设置背景图片-->
    </div>
</body>

效果：

div是块级别的标签，我们的图片仅仅是一个小的图片，但是现在是平铺，所以看下面的代码：

<div style="background-image: url(ico.gif);height: 80px;background-repeat: no-repeat" >
</div>

效果：

border[边框]

<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
<!--第一种：线的粗细为1像素，实线、红色-->
<div style="border:1px solid red;height:10px" ></div>

<!--第二种：线的粗细为1像素，点、蓝色-->
<div style="border:1px dotted blue;height:10px" ></div>

<!--第三种：线的粗细为1像素、虚线、紫色-->
<div style="border:1px dashed purple;height:10px" ></div>

# 边框可以单独的设置一边的边框、上、下、左、右
<!--在左边设置边框，3px、实线、红色-->
<div style="border-left: 3px solid red">前端CSS</div>

效果：

display

<!--display 为none将隐藏标签-->
<div style="display: none;">前端CSS</div>

<!--display 为inline会将块级别标签调为内联标签-->
<div style="background-color:red;display:inline">前端JavaScript</div>

<!--display 为block会将内联标签调为块级别标签-->
<a style="background-color:red;display:block">前端HTML</a>

效果：

cursor[鼠标停放时显示的效果]

    <div style="cursor:pointer">停放在这里显示小手(pointer)</div>

    <div style="cursor:help">停放在这里显示问号(help)</div>

    <div style="cursor:wait">停放在这里显示转圈(wait)</div>

    <div style="cursor:move">停放在这里显示移动(move)</div>
    
    <div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

效果：需要手动验证效果

float 浮动[用的比较多，用于布局]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <style>
        .float-left{
            width:20%;
            background-color:red;
            height: 500px;
            float: left;
            /*这里长和宽，可以用百分比或者直接指定像素来指定*/
        }
        .float-right{
            width: 80%;
            background-color:blue;
            height: 500px;
            float:left;
            /*这里长和宽，可以用百分比或者直接指定像素来指定*/
        }
    </style>
</head>
<body>
    <div class="float-left"></div>
    <div class="float-right"></div>
</body>
</html>
效果：
 注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？在父的div内加一条：
<div style="clear:both;"></div>

 

CSS选择器

CSS选择器种类

  • 标签选择器
  • id选择器（不常用）
  • class选择器
  • 层级选择器
  • 组合选择器

案例：

<style>
    /*标签选择器，找到所有的标签应用以下样式*/
    div{
        color: green;
    }
    /*id选择器，找到标签id等于i1的标签，应用以下样式*/
    #i1{
        font-size: 56px;
        /* color: green; */
    }
    /*class选择器，找到class=c1的所有标签，应用一下样式*/
    .c1{
        background-color: red;
    }
    /*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/
    /*.c2 div p a{*/
        /**/
    /*}*/
    .c2 div p .c3{
        background-color: red;
    }
    /*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/
    .c4,.c5,.c6{
        background-color: aqua;
    }
</style>

 

CSS选择器案例

1、id应用

"#",这个调用CSS样式的方法，就是在头部<style>#name{....}</style>     # name意思就是所有id为name的都会使用这个css样式

<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <style>
        #name{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <p id="name">
            <!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
            前端CSS
        </p>
        <p id="name">
            前端HTML
        </p>
    </div>
</body>

效果：

 

ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <style>
        /*ID选择器*/
        #i1{
            background-color:red;
        }
     </style>
</head>
<body>

/* 为所有id为i1的ID应用样式，注意咱们是为了测试，在实际的生产中ID不能相同 */
<a id="i1"> id 选择器 </a> <a id="i1"> id 选择器 </a> <a id="i2"> 如果ID不同,那么将不会应用样式 </a>
</body>
</html>

效果：

2、标签应用

为指定标签统一设置格式：在头部<style>p{....}</style>  这里的p是标签的名称，也可以是div这样就会给所有的div设置格式

<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <style>
        p{
            background-color: lightskyblue;
            width: 100px;
            height:20px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
            前端CSS
        </p>
        <p>
            前端HTML
        </p>
    </div>
</body>

效果：

标签选择器

为类型标签设置样式例如：<div>、<a>、等标签设置一个样式，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
     <style>
        /*标签选择器，如果启用标签选择器所有指定的标签讲默认使用此样式*/
        div{
            font-size: 19px;
        }
    </style>
</head>
<body>
    <div>
        font size test 19
    </div>
</body>
</html>

效果：

3、类选择器

class选择器，id是可以相同的，代码如下：

<head>
    <meta charset="UTF-8">
    <title>前端CSS</title>
    <!--在头部指定好CSS样式然后，在标签里使用class="样式名应用"-->
    <style>
        /*类选择器标签*/
        .cls{
            background-color:blue;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <!--任何类型的标签都可以调用类选择器-->
    <div class="cls">
        class test div
    </div>
    <a class="cls">
        class test a
    </a>
    <span class="cls">
        class test span
    </span>
</body>

效果：

注：以上三种选择器，建议使用第三种

4、关联选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>

    <style>
        /*为一个标签应用了,类选择器,下的li标签设置样式*/
        .container li{
            background-color: pink;
        }
    </style>
</head>
<body>
    <!--下面的div应用了container类选择器,那么他下面的所有的li标签将应用上面设置的样式-->
    <div class="container">
        <div style="height: 20px;background-color: red;">
            test
        </div>
        <ul>
            <li>
                li1
            </li>
            <li>
                li2
            </li>
            <li>
                li3
            </li>
        </ul>
    </div>
</body>
</html>

效果图：

关联选择器应用场景：为某标签下面的标签设置指定的样式：

# 下面的代码就是为应用了这个类选择器的标签下面的所有li标签设置样式

        .container li{
            background-color: pink;
        }

# 问：如果在上面的代码基础上为li标签下的a标签设置样式怎么办呢？在li后面再加个a即可！

        .container li a {
            background-color: pink;
        }

案例：

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
        /*关联选择器：为应用了container下面的子元素下应用了l类选择器下面的应用了p类选择器设置样式*/
        .container .l .p {
            background-color: pink;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="l">
            test
                <div>
                    <ul>
                        <!--这里需要注意,他们只要是有包换关系就行,不一定非得挨着-->
                        <li class="p">
                            hello shuaige
                        </li>
                    </ul>
                </div>

        </div>

    </div>
</body>
</html>

效果图：

 

5、组合选择器

有这么一个场景，看下面的关联组合器，cc1和cc2都要使用相同的样式怎么办？重写一遍？

.container .a .cc1 {
    background-color: pink;
}
.container .a .cc2 {
    background-color: pink;
}

解决方法代码如下：

.container .a .cc1,.container .a .cc2  {
    background-color: pink;
}

上面cc1后面的“逗号”就是或的关系，如果路径都是相同的话可以进行改良代码如下：

.container .a .cc1,.cc2  {
    background-color: pink;
}

这里组合的时候他是按照第一个出现的逗号来进行处理的，看下面的代码：

/*组合选择器*/
.container b ,.a .cc1,.cc2  {
    background-color: pink;
}
/*组合选择器分解,上面的分解完成之后谁来应用:background-color: pink;这个样式呢?*/
.container b
.container b .a .cc1
.container b .cc2
　......这里需要注意，“逗号”是或的关系，一般这个不常用，常用的是上面的方法

 

6、属性选择器

写表单验证的时候最常用,举个例子来说看下面的代码：

我要在这么input下找到type为text的标签并且给他设置样式，在上面咱们知道了组合标签，但是组合选择器最小单元是标签，他不能定位到type属性

 <div>
        <input type="text" />
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>

怎么做呢？在组合选择器后面加个[type=“text”]即可

    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"] {
            border:3px solid red;
        }
    </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"] {
            border:3px solid red;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" />
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>
</body>
</html>
完整案例

效果图：

需求又来了，我想找到input标签为type为text并且name为“lianxi”的那个input标签

    <div class="con">
        <input type="text" />
        <input type="text" name="lianxi"/>
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>

解决方法：在增加一个属性就行了(注意中括号之间没有空格不会报错但是没有效果)，代码如下：

 

    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"][name="shuaige"] {
            border:3px solid red;
        }
    </style>

 

效果：

 

属性标签经常用，要记住

也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuaige</title>
    <style>
        /*input和[之间不能有空格]*/
        .con input[type="text"][alex="shuaige"] {
            border:3px solid red;
        }
    </style>
</head>
<body>
    <div class="con">
        <input type="text" />
        <input type="text" alex="shuaige" />
        <input type="password" />
        <input type="file" />
        <input type="checkbox"/>
        <input type="button"/>
        <input type="reset"/>
    </div>

</body>

</html>
案例

 

background-position

　　应用场景，在实际的生产环境中咱们在网页上看到的小图片不是一个一个的零散的小图片的，咱们只是看到了大图片的一部分。比如一个大图片，我只让他显示一部分并不全部显示怎么做？

可以这么想：

　　有一个窗口，你在窗口的一边，只能通过窗口来看外面，你不能动，我们可以通过移动这个窗口来让你看到不同的场景，当然你看到的大小和窗口的大小有关！

代码如下：

    <style>
        .chuangkou{
            /*定义一个图片*/
            background-image: url('content_images.jpg');
            /*定义一个窗口,指定长和宽*/
            height: 30px;
            width:30px;
            /*设置图片不重复*/
            background-repeat:no-repeat;
            background-position: 3px 10px ;
        }
    </style>

<body>
    <div class="chuangkou">

    </div>
</body>

效果如下：

原图：

处理后的图片：

内外边距

内边距，代码如下：

    <div style="background-color: green;height: 200px;">

        <div style="margin-left: auto;
                    margin-right:auto;
                    background-color: blue;
                    height: 20px;
                    width:20px;
                  ">
        </div>
    </div>

让蓝色在中间的效果怎么办呢？两种方案：

1）在原有的绿色的div标签内部的顶端又填充了100px这样看起来的效果就变成蓝色的在中间了

2）在蓝色的方框外面的顶部增加30px效果就向往下移动了30px

代码：

    <div style="background-color: green;height: 100px;padding-top: 100px;">   <!-- 方案1 -->

        <div style="margin-left: auto;
                    margin-right:auto;
                    background-color: blue;
                    height: 20px;
                    width:20px;
                    margin-top: 30px;   <!-- 方案2 -->
                    ">
        </div>
    </div>

效果如下：

这里需要注意：使用padding会继承原有的颜色在内部填充，使用margin在外面扩张并且没有颜色

如果padding&margin不指定在上、下、左、右增加边框的话默认上下左右都添加边框！

 

定位（position）

position属性将元素放置到一个静态的、相对的、绝对的或者固定的位置中，它有五个属性值

1、inherit

2、static

3、fixed(常用)

4、relative(常用)

5、absolute(常用)

案例：

1、fixed总是以body为定位对象，即按照浏览器的窗口进行定位，例如：

<body>
    <div style="height:2000px;background-color: blueviolet;">
        <!--这里设置position:fixed 并且靠右边和底部各30px-->
        <a style="position: fixed;right: 30px;bottom: 30px;">
        跳转到顶部
        </a>
    </div>
</body>

2、relative，例如：

<head>
    <meta charset="UTF-8">
    <title>shuaige</title>
    <style>
        #sub1
        {
            position: relative;
            padding: 5px;
            top: 5px;
            left: 5px;
        }
    </style>
</head>
<body>
    <div  id="parent">
         <div style="background-color:blueviolet;" id="sub1">sub1</div>
         <div style="background-color:blue;" id="sub2">sub2</div>
    </div>
</body>

效果：

注：sub1这个div如果没有设置：position: relative会按照正常的文档位置进行定位，如果设置了，并给他设置了边距那么，他会根据他本身进行偏移，并且他的偏移不影响sub2。

3、absolute

当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

  1. 当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent（在父对象内）来进行定位。 
  2. 如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解

代码如下：

    <div style="position:relative;background-color: blue;height:100px;">
        <!--当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性-->
        <div style="position:absolute;right: 0px;bottom:0px;background-color: blueviolet">su1</div>
    </div>

    <div style="background-color: blueviolet;height: 2000px;">
        <!--如果父对象内没有,positionabsolute或者relative时,那么会按照你打开网页时的位置进行固定,然后滑动浏览器的时候也随之变化-->
        <div style="position:absolute;right: 30px;bottom: 30px;">
            su1
        </div>
    </div>

 

样式：overflow

应用场景，有这么一种情况，在一个div内有很多的的内容，如果div的框体不是很大超出去了怎么办？详细情况如下图，代码

代码如下：

  <div style="height:100px;background-color:green;">
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
    </div>

解决：增加overflow样式

  <div style="height:100px;background-color:green;overflow: auto;">
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
        CSS学习 <br/>
    </div>

效果：在div块级标签内有个滚动条

<div style="overflow:hidden;height:100px;">   <!-- hidden超出div区域的将会自动隐藏 -->

透明度

    <div style="background-color:blue;height:100px;padding-top:30px">
        <!--这里设置内部的div的透明度-->
        <div style="opacity: 0.5;background-color:pink;height:30px;margin-left: 30px;margin-right:30px;">

        </div>
    </div>

效果：

z-index

功能：用来设置展示在浏览器中的页面的层级

 

CSS布局页面实例

# 第一种
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理布局01</title>
        <style>
        body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background-color: #00a2ca;
        }
        .pg-body .body-menu{
            position: absolute;
            top:48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: red;
        }
        .pg-body .body-content{
            position: absolute;
            top: 48px;
            left: 200px;
            right: 0;
            background-color: green;
        }
    </style>
    <!--头部和左侧部分根据页面动可能消失，中间内容上下滑动-->
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content">
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
                        sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

# 第二种
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理布局02</title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background-color: #00a2ca;
        }
        .pg-body .body-menu{
            position: absolute;
            top:48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: red;
        }
        .pg-body .body-content{
            position: absolute;
            top: 48px;
            left: 200px;
            right: 0;
            bottom: 0;
            background-color: green;
            overflow: auto;
        }
    </style>

</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content">
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
                        sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
            sdfasdfaaaa<br />
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>
两种后台布局方式

 CSS补充内容

1、css实现图形尖角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .icona{
            display: inline-block;
            border-top: 50px solid red;
            border-right: 50px solid red;
            border-bottom: 50px solid red;
            border-left: 50px solid red;
        }
        .iconb{
            display: inline-block;
            border-top: 50px solid red;
            border-right: 50px solid green;
            border-bottom: 50px solid black;
            border-left: 50px solid yellow;
        }
        .iconc{
            display: inline-block;
            border-top: 50px solid red;
            border-right: 50px solid white;
            border-bottom: 50px solid white;
            border-left: 50px solid white;
        }
        .icond{
            display: inline-block;
            border-top: 50px solid white;
            border-right: 50px solid red;
            border-bottom: 50px solid white;
            border-left: 50px solid white;
        }
        .icone{
            display: inline-block;
            border-top: 50px solid white;
            border-right: 50px solid white;
            border-bottom: 50px solid red;
            border-left: 50px solid white;
        }
        .iconf{
            display: inline-block;
            border-top: 50px solid white;
            border-right: 50px solid white;
            border-bottom: 50px solid white;
            border-left: 50px solid red;
        }
    </style>
</head>
<body>

    <div class="icona"></div>
    <div class="iconb"></div>
    <div class="iconc"></div>
    <div class="icond"></div>
    <div class="icone"></div>
    <div class="iconf"></div>
</body>
</html>
案例：尖角

效果：

2、消除浮动

# 方法1：简单

# 方法2：较复杂
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
           float: left;
        }
        .clearfix:after{
            content: ".";
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <div style="background-color: red" class="clearfix">
        <div class="left" style="height: 100px;background-color: green">1</div>
        <div class="left" >2</div>
    </div>
</body>
</html>
消除浮动的两种方法

3、购物数量选择效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .inp{
            border: 0;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            height: 25px;
            margin: 0;
            padding: 0;
            float: left;
        }
        .sp{
            display: inline-block;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;
            float: left;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid #dddddd;display: inline-block;">
        <div class="sp">-</div>
        <input class="inp" type="text" />
        <div class="sp">+</div>
    </div>
</body>
</html>
代码

4、调整css样式应用优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none !important;
        }
        .c1{
            color: red !important;
        }
        .c2{
            color: green;
        }
    </style>
</head>
<body>

    <div class="c1 c2">asdfasdfasdfasdf</div>
</body>
</html>
代码

注：默认显示为绿色，但是由于c1样式添加了特殊设置，故显示为红色

5、类似execl冻结首行效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .pg-header{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            background-color: #2459a2;
        }
        .pg-body{
            height: 2000px;
            margin-top: 48px;
        }
    </style>
</head>
<body>
    <div class="pg-header">asdf</div>
    <div class="pg-body">老男孩</div>
</body>
</html>
代码

 

更多功能请查看菜鸟教程CSS

相关资料：

菜鸟教程：http://www.runoob.com/css/css-tutorial.html

 
posted @ 2016-07-09 16:02  每天进步一点点！！！  阅读(1628)  评论(0)  编辑  收藏  举报