zoukankan      html  css  js  c++  java

  • css简单整理

    style1.css

    /*统一设置h1、h2、a标签的样式*/
h1,h2,a{
    color: aqua;
    font-size: 50px;
}
/*如果h1、h2没有上面的单独设置样式那么就会继承body所设的样式*/
body{
    color: brown;
}

/*设置列表标签的strong标签的内容*/
/*派生*/
li strong{
    color: blue;
}
/*strong不会夫覆盖li strong的样式*/
strong{
    color: blueviolet;
}
/*通过id改属性前面加#*/
#pid{
    color: cadetblue;
}
/*派生和id的结合更改a标签的内容*/
#pid a{
    font-size: 20px;
    color: darkgoldenrod;
}
/*类选择器和派生结合*/
/*类之前加.*/
.dclass p{
   color: red;
}
/*属性选择器*/
[title]{
    color: chartreuse;
}
[title=b]{
    color: darkgreen;
}
input[type="submit"]{
    width:120px;
    height: 120px;
    margin-left:35px;
}

    test1.htm

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/style1.css" rel="stylesheet" type="text/css">

</head>
<body>

<h1>h1的样式</h1>
<h2>h2的样式</h2>
<a>a的样式</a>
<p><strong>p的样式</strong></p>
<ul>
    <li><strong>li的样式</strong></li>
</ul>
<p id="pid">我有id<a href="http://www.baidu.com">百度一下</a></p>

<div class="dclass">
    <p>div中的p标签样式</p>
</div>
<p title="a">我的title是a</p>
<p title="b">我的title是b</p>

<form>
    <input type="submit" value="提交">
</form>
</body>
</html>

    效果：

    style2.css

    body{
/*background-color: darkgray;*/

background-image: url("../img/13.jpg");
background-repeat: no-repeat;/*设置图片是否允许重复*/
background-position: center top;/*图片位置、从哪里开始显示*/
background-attachment: scroll;/*随着鼠标滑轮滚动图片也滚动*/
/*background-size: 1920px 1080px;!*设置背景图大小*!*/
/*background-position: 0px 0px;!*左上角从(0,0)开始显示*!*/

}
p{
    color: chartreuse;
    background-color: blueviolet;
    width: 160px;
    padding: 10px;/*内边框*/
}

    test2.htm

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>测试背景是否可被继承(内边框效果)</p>

<p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p>
<p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p>
<p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p>

</body>
</html>

    style3.css

    p{
    text-align: center;/*对齐方式*/
}
h1{
    text-indent: 47.5%;/*缩进*/
}

#pid1{/*首字母大写*/
    text-transform: capitalize;
}

#pid2{/*全大写*/
    text-transform: uppercase;

}

#pid3{/*全变小写*/
    text-transform: lowercase;
}
h4{
    text-shadow: 100px 1px 1px chartreuse;/*距离实体位置：左、上、大小、颜色*/
}
h3{
    width: 300px;
    text-wrap: normal;/*自动换行*/
    font-size: 30px;/*设置字体大小*/
    font-family: "Calibri Light ";/*设置字体样式*/
}

/*@font-face {!*下载字体*!*/
/*    font-family: myfont;*/
/*    src:url("");*/
/*}*/

    test3.htm

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" href="../css/style3.css" rel="stylesheet">
</head>
<body>
<P>对齐测试</P>
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<p id="pid1">Hello1 world</p>
<p id="pid2">Hello2 world</p>
<p id="pid3">Hello3 world</p>
<h4>阴影测试</h4>
<h3>this is my first good this is my first good this is my first good this is my first good this is my first good</h3>
</body>
</html>

    结果：

    style4.css

    a:link{/*未被访问的链接*//*注意清除缓存*/
    color: chartreuse;
    font-size: 30px;
    text-decoration: none;/*去掉超链接文字下方的下划线*/
}

a:visited{/*访问过*/
    color: blue;
    font-size: 30px;
    text-decoration: none;
}

a:hover{/*鼠标位于链接上方*/
    color: blueviolet;
    font-size: 30px;
    text-decoration: none;
}

a:active{/*鼠标点击链接的时候*/
    color: red;
    font-size: 30px;
    text-decoration: none;
}

li{
    /*list-style-type: circle;!*空心圆*!*/
    /*list-style-type: decimal;!*数字*!*/
    list-style-image: url("../img/15.png");
}
ul.ul1{
    list-style-position: outside;
}
ul.ul2{
list-style-position: inside;
}

    test4.htm

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="../css/style4.css">
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<p>list-style-position: outside</p>
<ul class="ul1">

    <li>apple</li>
    <li>banana</li>
    <li>orange</li>
</ul>
<p>list-style-position: inside</p>
<ul class="ul2">

    <li>apple</li>
    <li>banana</li>
    <li>orange</li>
</ul>
</body>
</html>

    结果：

     鼠标放在百度一下：

     点击之后是另一种颜色，但是由于会跳转就不截图了

    style5.css

    #tb,tr,th,td{
    border:3px solid blue;
    text-align: center;
}
#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;/*合并双边框*/
    /*background-color: darkgoldenrod;*/
}

#tb tr.tc,th{
    padding: 5px;
    background-color: aquamarine;
}

p{
    outline: blue;
    outline-style: dotted;
    outline-color: aqua;
    outline-width: 5px;
    width: 200px;
}
#did{
    background-color: blue;
    width: 200px;
    height: 200px;
    /*position: relative;!*相对布局*!*/
    position: absolute;/*绝对布局不会覆盖数字*/
    /*position: fixed;!*固定布局，不随滑轮滑动而变化*!*/
    /*position: static;!*静态布局left和top不起作用*!*/
    left: 50px;
    top: 90px;
    z-index: 1;
}

#di{
    background-color: aqua;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 100px;
    top: 280px;
    z-index: 2;/*哪个数值大，哪个覆盖，数值小的被覆盖*/
}

    test5.htm

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="tb">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr >
        <td>Alice</td>
        <td>12</td>
        <td>女</td>
    </tr>
    <tr class="tc">
        <td>Bob</td>
        <td>15</td>
        <td>男</td>
    </tr>
    <tr >
        <td>Alice</td>
        <td>12</td>
        <td>女</td>
    </tr>
    <tr class="tc">
        <td>sary</td>
        <td>12</td>
        <td>女</td>
    </tr>
</table>

<p>轮廓</p>

<div id="did">

</div>
<script>
    for(var i=0;i<100;i++){
        document.write(i+"<br>");
    }
</script>
<div id="di">

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

    结果：

    style6.css

    #d1{
    background-color: blue;
    width: 100px;
    height: 150px;
    float: left;
}

#d2{
    background-color: red;
    width: 150px;
    height: 100px;
}

#d3{
    background-color: greenyellow;
    width: 100px;
    height: 100px;

}
#d4{
    width: 100px;
    height: 50px;
    background-color: blueviolet;

    /*clear:left;*/
}
#d{
   background-color: aquamarine;
    width: 250px;
    height: 300px;
    float: left;
 }

    test6.htm

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style6.css" type="text/css">
</head>
<body>
<div id="d">

    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4">hello world</div>
</div>

</body>
</html>

    效果：

     style7.css

    #did{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
}
/*#did{*/
/*    !*transform: translate(100px,100px);!*向右方和下方移动位置*!*!*/
/*    !*-moz-transform: translate(100px,100px);!*火狐浏览器*!*!*/

/*    transform: rotate(200deg);!*旋转200度*!*/
/*    -moz-transform: rotate(200deg);!*火狐浏览器*!*/

/*    transform: scale(1,2);!*长和宽放大倍数*!*/
/*    -moz-transform: scale(1,2);*/

    /*transform: skewX(20deg);!*绕x轴旋转20度*!*/
    /*transform: skewY(20deg);*/
    /*-moz-transform: skewX(20deg);*/
    /*-moz-transform: skewY(20deg);*/
/*}*/

#did{
    width: 100px;
    height: 100px;
    background-color: blueviolet;

    transition: height 2s,width 2s ,transform 2s;
    -moz-transition: width 2s ,height 2s ,-moz-transform 2s;
    /*延时执行*/
    transition-delay: 2s;
    -moz-transition-delay: 2s; /* Firefox 4 */
    -webkit-transition-delay: 2s; /* Safari 和 Chrome */
    -o-transition-delay: 2s; /* Opera */

}
#did:hover{/*鼠标放在上面之后的操作*/
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
    -moz-transform: rotate(360deg);

}

    test7.htm

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <link href="../css/style7.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="did">

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

    效果是个鼠标放在div区域的动画

    style8.css

    .box_img img{
    width: 250px;
    height: auto;
    margin: 2px 0;
}
body{
     background-color: aquamarine;
 }
/*.box img{*/
/*     250px;*/
/*    margin: 2px 0;*/
/*}*/

#container{
    column-width: 250px;
    -moz-column-width: 250px;
    -moz-column-gap:2px; /* Firefox */
    -webkit-column-gap:2px; /* Safari 和 Chrome */
    column-gap:2px;
}
.box_img{
    padding: 5px;
    border: 1px solid #cccccc;/*边框*/
    box-shadow: 0 0 5px #cccccc;
    border-radius: 5px;
}
*{
    margin: 0px;/*外边距*/
    padding: 0px; /*内边距   */
}

    test8.htm

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pool</title>
    <link rel="stylesheet" type="text/css" href="../css/style8.css">
<!--    <script src="js/app.js"></script>-->
</head>
<body>
<div id="container">
    <div class="box">
        <div class="box_img">
            <img src="../img/1.jpeg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/8.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/2.jpeg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/10.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/10.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/10.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/1.jpeg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/2.jpeg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/2.jpeg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/2.jpeg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/2.jpeg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="../img/2.jpeg">
        </div>
    </div>
</div>

</body>
</html>

    效果：

    瀑布流效果

    之后的用到在补充吧

    不一样的烟火
  • 相关阅读:
    Android（java）学习笔记68：使用proguard混淆android代码
    SGU 194 Reactor Cooling
    关于流量有上下界的网络流问题的求解
    关于最小割的求解方法
    HDU 5311 Hidden String
    POJ 3548 Restoring the digits
    POJ 2062 HDU 1528 ZOJ 2223 Card Game Cheater
    ZOJ 1967 POJ 2570 Fiber Network
    HDU 1969 Pie
    HDU 1956 POJ 1637 Sightseeing tour
  • 原文地址：https://www.cnblogs.com/cstdio1/p/11837967.html
Copyright © 2011-2022 走看看