HTML+CSS+JavaScript作业篇

一、作业题大全

1.1、HTML5表单验证

代码：

复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表单验证</title>
        <style>
            .lu {
                width: 350px;
            }
        </style>
    </head>
    <body>

        <form>
            <fieldset class="lu">
                <legend>HTML5新的表单</legend>
                <p>
                    <label for="">国家：</label>
                    <input type="text" required="required" autocomplete="on">
                </p>
                <p>
                    <label for="">文件：</label>
                    <input type="file" multiple="multiple">
                </p>
                <p>
                    <label>正则：</label>
                    <input type="text" id="" required="required" pattern="^[0-9a-zA-Z]{6,16}$"
                        placeholder="请输入6-16位的数字字母下划线">

                </p>
                <p>
                    <label for="">邮箱：</label>
                    <input type="email" id="mail" name="mail" placeholder="请输入正确的邮箱" />
                </p>
                <p>
                    <label>网址：</label>
                    <input type="url">
                </p>
                <p>
                    <label for="">日期：</label>
                    <input type="date">

                </p>

                <p>
                    <label for="">数字：</label>
                    <input type="number" max="226" min="0" step="2" value="165">
                </p>
                <p>
                    <label for="">滑块：</label>
                    <input type="range" max="100" min="0" step="1" value="25" onchange="showValue(this.value)" />
                    <!-- <input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/> -->
                    <span id="rangeValue"></span>
                </p>

                <p><label>搜索：</label>
                    <input type="search" name="" id="">
                </p>
                <p>
                    <label for="">电话：</label>
                    <input type="tel" name="" id="">
                </p>
                <p><label for="">颜色：</label>
                    <input type="color" name="" id="">
                </p>
                <p>
                    <label>占位：</label>
                    <input placeholder="请输入用户名">
                </p>
                <button type="submit">提交</button>
                <button>查找</button>
                </p>
            </fieldset>
        </form>
        <script type="text/javascript">
            function showValue(val) {
                document.getElementById("rangeValue").innerHTML = val;
            }

            function showValue(val) {
                document.getElementById("rangeValue").innerHTML = val;
            }
        </script>


    </body>
</html>
View Code
复制代码

会自动校验

 

 1.2、概要

代码：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p> <details id="phone">
        <summary>中国好手机在这里</summary>
        <p>华为手机，你值得拥有</p>
        <p>3309元</p>
        <p>6000毫安</p>
    </details>
</p>
   <button id="btnSwitch">开</button>
    <script>
        var phone=document.getElementById("phone");
        var btnSwitch=document.getElementById("btnSwitch");
      
        btnSwitch.addEventListener('click',function(){
            phone.open=!phone.open;
        },false);
    </script>
</body>
</html>
View Code
复制代码

效果：

1.3、滑块的值和Color的值显示

View Code

效果：

 

1.4、动态进度条

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条</title>
</head>
<body>
    <meter id="meter1" max="100" min="0" style="width: 300px; height: 30px;"></meter>
    <h2 id="msg"></h2>
    <script>
        var meter1=document.getElementById("meter1");
        var msg=document.getElementById("msg");
        var v=meter1.value;
        //每隔0.1秒设置meter的value值
        setInterval(function(){
            v++;
            if(v>parseInt(meter1.max)){
                v=0;
            }
            meter1.value=v;
            msg.innerHTML="look this当前值为："+v;
        },100);
        
    </script>
</body>
</html>
View Code
复制代码

效果：

 凑合看，没钱看会员 

1.5、视频播放标签

代码：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video id="videolce" src="../iceage.mp4" height="400" width="600"  controls="controls" poster="./img/tv.png" ></video>
    <p>
    <button type="button" onclick="play()">播放</button>
    <button type="button" onclick="pause()">暂停</button>
    <button type="button" onclick="">继续</button>
    <button type="button" onclick="">静音</button>
    <button type="button" onclick="">快音</button>
    <button type="button" onclick="">快退</button>
    <button type="button" onclick="">音量+</button>
    <button type="button" onclick="">音量-</button>
    <button type="button" onclick="">全屏</button>
</p>
    <!-- <span id="msg"></span> -->
<script>
var videolce=document.getElementById("videolce");
function play(){
    videolce.play();
}
function pause(){
    videolce.pause();
}

</script>
</body>

</html>
View Code
复制代码

效果：

1.6、预处理Sass和Less

需求：制作一个页面，然后点击换色按钮，主题色颜色改变。

1、创建一个文件夹：test

2、在test文件下加入js.js文件，然后创建一个页面blue.html

复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>页面</title>
        <link rel="stylesheet" href="css/dist/01.css" id="hs">
        <style>
            .container {
                position: absolute;
                width: 800px;
                /* border: 1px solid blueviolet; */
                /* height: 700px; */

            }

            .p1 {
                position: relative;
                left: 200px;
                top: 80px;
                color: white;
            }

            .left {
                width: 350px;
                /* border: 1px solid blue; */
                /* height: 500px; */

            }

            .p2 {
                position: relative;
                margin-top: 160px;
                margin-left: 120px;
                font-size: 14px;
            }

            .p3 {
                position: absolute;
                left: 120px;
                top: 460px;
                font-size: 14px;

            }

            #right {
                position: relative;
                top: -450px;
                left: 400px;
                width: 400px;

                font-size: 14px;
                /* background: rgb(216, 203, 203); */
            }

            img {
                width: 100px;
                height: 90px;
            }

            .div0 ul li {
                list-style: none;
                float: left;

            }

            .div0 ul li a {
                width: 60px;
            }

            .div0-1 {
                position: relative;
                left: 820px;
                top: -1000px;
                width: 200px;
                height: 100px;
            }

            #fk4-1 {
                margin-top: -50px;
            }

            #fk4-2 {
                margin-top: -50px;
                float: left;
                left: 330px;
            }

            #fk4-3 {
                margin-top: -50px;
                float: left;
                left: 490px;
            }

            #fk4-4 {
                margin-top: -50px;
                float: left;
                left: 650px;
            }

            #fk4-5 {
                margin-top: -50px;
                float: left;
                left: 170px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header1">

                <div class="div1"></div>
                <div class="div2"></div>
                <div class="div3"></div>
                <div class="div4"></div>
                <span class="p1"> DUIS AUTE
                    <p>IRURE DOLOR</p>
                </span>
            </div>
            <div>
                <div class="div1-1"></div>
                <div class="div1-2"></div>
                <div class="div1-3"></div>
                <div class="div1-4"></div>
                <div class="div1-5"></div>
                <div id="fk4-1" class="fk4"></div>
                <div id="fk4-2" class="fk4"></div>
                <div id="fk4-3" class="fk4"></div>
                <div id="fk4-4" class="fk4"></div>
                <div id="fk4-5" class="fk4"></div>

            </div>
            <div class="left">
                <span class="left1">Mollit Anim</span>
                <span class="left2" style="width: 340px;font-size: 14px;">
                    Lorem ipsum dolor sit amet,consectetur
                    adipisicing elit, sed do eiusmod tempor <a href="" class="left3">incididunt</a> ut labore
                    et dolore aliqu Ut enim ad laboris nisi ut aliquip
                    ex ea <a href="" class="left3">xommodo</a>.magna aliqu Ut enim ad laboris nisi ut aliquip
                </span>
                <span class="left1-1">Lorem</span><span class="left1-2">Ipsum</span>
                <div class="fk1"></div>
                <div class="p2">Duis aute irure dolor in pehenderit
                    in voluptate velit esse cillum dolore
                    eu fugiat nulla pariatur.
                    <p> Duis aute irure dolor in pehenderit
                        in voluptate velit esse cillum dolore
                        eu fugiat nulla pariatur.</p>
                    <p>
                        <span style="font-weight: 800;font-size: 16px;">Duis aute irure dolor</span>
                    <ul class="left3">
                        <li><a class="left3" href="">Lorem ipsum</a></li>
                        <li><a class="left3" href="">Lorem ipsum</a></li>
                        <li><a class="left3" href="">Lorem ipsum</a></li>
                    </ul>
                    </p>
                </div>

            </div>
            <!-- 右边 -->
            <div id="right">
                <div>
                    <p>
                    <div class="fk2"></div>
                    <div style="position: absolute; left: 30px;top: -4px;" class="left3">Lorem ipsum dolor sit amet
                    </div>
                    </p>
                    <p><img src="../f(9).jpg" alt="">
                    <div style="font-weight: 800; position: absolute; top: 20px;left: 120px;">Duis aute</div>
                    </p>
                    <div style=" position: absolute; top: 43px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do
                        eiusmod tempor
                        Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
                    </div>
                    <div style=" position: absolute; top:100px;left: 296px;"><a class="left3" href="">Ut Labore...》</a>
                    </div>
                    <div>
                        <p>
                        <div class="fk2"></div>
                        <div style="position: absolute;top:130px;left: 30px;" class="left3">Lorem ipsum dolor sit amet
                        </div>
                        </p>
                        <div>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt
                        </div>
                    </div>
                    <p>
                    <div class="fk3">
                        <div class="fk4"></div><span class="ys"
                            style=" position: relative; left: 30px;top: 5px;">Excepteur sint occaecat cupidatr amet
                            xomsequat ea exsint occa
                            <button class="fk5"
                                style="height: 30px;width: 120px;position: relative;left: 250px;top: -30px;">Deserunt
                                >></button>
                        </span>
                    </div>
                    </p>
                    <p><img src="../f(9).jpg" alt="">
                    <div style="font-weight: 800; position: absolute; top: 280px;left: 120px;">Duis aute</div>
                    </p>
                    <div style=" position: absolute; top: 303px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do
                        eiusmod tempor
                        Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
                        <div style=" position: absolute; top:70px;left: 170px;"><a class="left3" href="">Ut
                                Labore...》</a></div>
                    </div>
                </div>
            </div>
            <div class="div0">
                <div class="fk6">
                    <!-- <ul class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
                <li><a class="left3" href="">Lorem  |</a></li>
                <li><a class="left3" href="">Ipsum |</a></li>
                <li><a class="left3" href="">Dolor </a></li>
                <li><a class="left3" href="">Sit amet| </a></li>
                <li><a class="left3" href="">Aliquip</a></li>
                
            </ul> -->
                    <div class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
                        Lorem | Ipsum | Dolor | Sit amet | Aliquip
                    </div>
                </div>
            </div>
            <div class="div0-1">
                <button id="btn1">蓝色</button>
                <button id="btn2">橙色</button>
                <button id="btn3">绿色</button>
            </div>
        </div>

        <script>
            var hs = document.getElementById("hs"); // 获取link文件

            var btn1 = document.getElementById("btn1") //获取按钮节点
            var btn2 = document.getElementById("btn2") //获取按钮节点
            var btn3 = document.getElementById("btn3") //获取按钮节点


            //绑定单击事件
            btn1.onclick = function() {
                //给link赋值
                document.getElementById("hs").setAttribute("href", "css/dist/01.css");
            }

            btn2.onclick = function() {
                document.getElementById("hs").setAttribute("href", "css/dist/02.css");
            }
            btn3.onclick = function() {
                document.getElementById("hs").setAttribute("href", "css/dist/03.css");
            }
        </script>
    </body>
</html>
View Code
复制代码

3、第一个样式写好之后可以复制两份，然后只需要改一下

green.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面</title>
    <link rel="stylesheet" href="css/dist/03.css">
<style>
 
    .container{
        position: absolute;
        width: 800px;
        /* border: 1px solid blueviolet; */
        /* height: 700px; */
       
    }
    .p1{
        position: relative;
        left: 200px;
        top: 80px;
        color: white;
    }
    .left{
        width: 350px;
        /* border: 1px solid blue; */
        /* height: 500px; */
        
        }
        .p2{
            position: relative;
            margin-top: 160px;
            margin-left: 120px;
            font-size: 14px;
        }
        .p3{
           position: absolute;
           left: 120px;
           top: 460px;
           font-size: 14px;
           
        }
        #right{
          position: relative;
           top: -450px;
           left: 400px;
            width: 400px;
           
           font-size: 14px;
            /* background: rgb(216, 203, 203); */
        }
        img{
            width: 100px;
            height: 90px;
        }
       
       .div0 ul li{
            list-style: none;
            float: left;
           
        }
        .div0 ul li a{
            width: 60px;
        }
        .div0-1{
            position: relative;
            left: 820px;
            top:-1000px;
width: 200px;
height: 100px;
        }
        #fk4-1{
            margin-top: -50px;
        }
          #fk4-2{
            margin-top: -50px;
            float: left;
            left:330px;
        }
        #fk4-3{
            margin-top: -50px;
            float: left;
            left:490px;
        }
        #fk4-4{
            margin-top: -50px;
            float: left;
            left:650px;
        }
        #fk4-5{
            margin-top: -50px;
            float: left;
            left:170px;
        }
</style>
</head>
<body>
    <div class="container">
        <div class="header1">
          
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
            <div class="div4"></div>
            <span class="p1"> DUIS AUTE
                <p>IRURE DOLOR</p>
                </span>
        </div>
        <div>
            <div class="div1-1"></div>
            <div class="div1-2"></div>
            <div class="div1-3"></div>
            <div class="div1-4"></div>
            <div class="div1-5"></div>
            <div id="fk4-1" class="fk4"></div>
            <div id="fk4-2" class="fk4"></div>
            <div id="fk4-3" class="fk4"></div>
            <div id="fk4-4" class="fk4"></div>
            <div id="fk4-5" class="fk4"></div>
        </div>
        <div class="left">
            <span class="left1">Mollit Anim</span>
            <span class="left2" style="width: 340px;font-size: 14px;">
                  Lorem ipsum dolor sit amet,consectetur 
                adipisicing elit, sed do eiusmod tempor <a href="" class="left3">incididunt</a> ut labore
                 et dolore  aliqu Ut enim ad laboris nisi ut aliquip
                  ex ea  <a href="" class="left3">xommodo</a>.magna aliqu Ut enim ad laboris nisi ut aliquip
                 </span>
                <span class="left1-1">Lorem</span><span class="left1-2">Ipsum</span><div class="fk1"></div>
                <div class="p2">Duis aute irure dolor in pehenderit 
                    in voluptate velit esse cillum dolore 
                    eu fugiat nulla pariatur.
                    <p> Duis aute irure dolor in pehenderit
                        in voluptate velit esse cillum dolore 
                        eu fugiat nulla pariatur.</p>
                    <p>
                        <span style="font-weight: 800;font-size: 16px;">Duis aute irure dolor</span>
                        <ul class="left3">
                            <li><a class="left3" href="">Lorem ipsum</a></li>
                            <li><a class="left3" href="">Lorem ipsum</a></li>
                            <li><a class="left3" href="">Lorem ipsum</a></li>
                        </ul>
                    </p>
                    </div>
                   
        </div>
        <!-- 右边 -->
        <div id="right">
            <div >
                <p><div class="fk2"></div> <div style="position: absolute; left: 30px;top: -4px;" class="left3">Lorem ipsum dolor sit amet</div></p>
                <p><img src="../f(9).jpg" alt=""><div  style="font-weight: 800; position: absolute; top: 20px;left: 120px;">Duis aute</div></p>
                <div style=" position: absolute; top: 43px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
                    Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
               </div>
              <div style=" position: absolute; top:100px;left: 296px;"><a  class="left3" href="">Ut Labore...》</a></div>
               <div><p><div class="fk2"></div><div style="position: absolute;top:130px;left: 30px;" class="left3">Lorem ipsum dolor sit amet</div> </p>
               <div>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt</div>
            </div>
           <p><div class="fk3">
               <div class="fk4"></div><span class="ys" style=" position: relative; left: 30px;top: 5px;">Excepteur sint occaecat cupidatr  amet xomsequat ea exsint occa
                  <button class="fk5" style="height: 30px;width: 120px;position: relative;left: 250px;top: -30px;">Deserunt >></button>   
            </span>
           </div></p> 
           <p><img src="../f(9).jpg" alt=""><div  style="font-weight: 800; position: absolute; top: 280px;left: 120px;">Duis aute</div></p>
                <div style=" position: absolute; top: 303px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
                    Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
                    <div style=" position: absolute; top:70px;left: 170px;"><a class="left3" href="">Ut Labore...》</a></div>
               </div>
        </div>
    </div>
    <div class="div0">
        <div class="fk6">
            <!-- <ul class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
                <li><a class="left3" href="">Lorem  |</a></li>
                <li><a class="left3" href="">Ipsum |</a></li>
                <li><a class="left3" href="">Dolor </a></li>
                <li><a class="left3" href="">Sit amet| </a></li>
                <li><a class="left3" href="">Aliquip</a></li>
                
            </ul> --><div class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
                Lorem | Ipsum | Dolor | Sit amet | Aliquip
            </div>
        </div>
    </div>
    <div class="div0-1">
        <button><a href="yellow.html" style="text-decoration: none;">橙色</a></button>
        <button><a href="green.html" style="text-decoration: none;">绿色</a></button>
        <button><a href="blue.html" style="text-decoration: none;">蓝色</a></button>
    </div>
</div>
    
<link rel="stylesheet" type="text/css" href="#" id="css1"/>
<script src="js.js"></script>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(".color").click(function() {
                var file = $(this).data("color");
                $("#css1").attr("href", file);
            });
        </script>
</body>
</html>
View Code
复制代码

yellow.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面</title>
    <link rel="stylesheet" href="css/dist/02.css">
<style>
 
    .container{
        position: absolute;
        width: 800px;
        /* border: 1px solid blueviolet; */
        /* height: 700px; */
       
    }
    .p1{
        position: relative;
        left: 200px;
        top: 80px;
        color: white;
    }
    .left{
        width: 350px;
        /* border: 1px solid blue; */
        /* height: 500px; */
        
        }
        .p2{
            position: relative;
            margin-top: 160px;
            margin-left: 120px;
            font-size: 14px;
        }
        .p3{
           position: absolute;
           left: 120px;
           top: 460px;
           font-size: 14px;
           
        }
        #right{
          position: relative;
           top: -450px;
           left: 400px;
            width: 400px;
           
           font-size: 14px;
            /* background: rgb(216, 203, 203); */
        }
        img{
            width: 100px;
            height: 90px;
        }
       
       .div0 ul li{
            list-style: none;
            float: left;
           
        }
        .div0 ul li a{
            width: 60px;
        }
        .div0-1{
            position: relative;
            left: 820px;
            top:-1000px;
width: 200px;
height: 100px;
        }
        #fk4-1{
            margin-top: -50px;
        }
          #fk4-2{
            margin-top: -50px;
            float: left;
            left:330px;
        }
        #fk4-3{
            margin-top: -50px;
            float: left;
            left:490px;
        }
        #fk4-4{
            margin-top: -50px;
            float: left;
            left:650px;
        }
        #fk4-5{
            margin-top: -50px;
            float: left;
            left:170px;
        }
</style>
</head>
<body>
    <div class="container">
        <div class="header1">
          
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
            <div class="div4"></div>
            <span class="p1"> DUIS AUTE
                <p>IRURE DOLOR</p>
                </span>
        </div>
        <div>
            <div class="div1-1"></div>
            <div class="div1-2"></div>
            <div class="div1-3"></div>
            <div class="div1-4"></div>
            <div class="div1-5"></div>
            <div id="fk4-1" class="fk4"></div>
            <div id="fk4-2" class="fk4"></div>
            <div id="fk4-3" class="fk4"></div>
            <div id="fk4-4" class="fk4"></div>
            <div id="fk4-5" class="fk4"></div>
        </div>
        <div class="left">
            <span class="left1">Mollit Anim</span>
            <span class="left2" style="width: 340px;font-size: 14px;">
                  Lorem ipsum dolor sit amet,consectetur 
                adipisicing elit, sed do eiusmod tempor <a href="" class="left3">incididunt</a> ut labore
                 et dolore  aliqu Ut enim ad laboris nisi ut aliquip
                  ex ea  <a href="" class="left3">xommodo</a>.magna aliqu Ut enim ad laboris nisi ut aliquip
                 </span>
                <span class="left1-1">Lorem</span><span class="left1-2">Ipsum</span><div class="fk1"></div>
                <div class="p2">Duis aute irure dolor in pehenderit 
                    in voluptate velit esse cillum dolore 
                    eu fugiat nulla pariatur.
                    <p> Duis aute irure dolor in pehenderit
                        in voluptate velit esse cillum dolore 
                        eu fugiat nulla pariatur.</p>
                    <p>
                        <span style="font-weight: 800;font-size: 16px;">Duis aute irure dolor</span>
                        <ul class="left3">
                            <li><a class="left3" href="">Lorem ipsum</a></li>
                            <li><a class="left3" href="">Lorem ipsum</a></li>
                            <li><a class="left3" href="">Lorem ipsum</a></li>
                        </ul>
                    </p>
                    </div>
                   
        </div>
        <!-- 右边 -->
        <div id="right">
            <div >
                <p><div class="fk2"></div> <div style="position: absolute; left: 30px;top: -4px;" class="left3">Lorem ipsum dolor sit amet</div></p>
                <p><img src="../f(9).jpg" alt=""><div  style="font-weight: 800; position: absolute; top: 20px;left: 120px;">Duis aute</div></p>
                <div style=" position: absolute; top: 43px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
                    Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
               </div>
              <div style=" position: absolute; top:100px;left: 296px;"><a  class="left3" href="">Ut Labore...》</a></div>
               <div><p><div class="fk2"></div><div style="position: absolute;top:130px;left: 30px;" class="left3">Lorem ipsum dolor sit amet</div> </p>
               <div>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt</div>
            </div>
           <p><div class="fk3">
               <div class="fk4"></div><span class="ys" style=" position: relative; left: 30px;top: 5px;">Excepteur sint occaecat cupidatr  amet xomsequat ea exsint occa
                  <button class="fk5" style="height: 30px;width: 120px;position: relative;left: 250px;top: -30px;">Deserunt >></button>   
            </span>
           </div></p> 
           <p><img src="../f(9).jpg" alt=""><div  style="font-weight: 800; position: absolute; top: 280px;left: 120px;">Duis aute</div></p>
                <div style=" position: absolute; top: 303px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
                    Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
                    <div style=" position: absolute; top:70px;left: 170px;"><a class="left3" href="">Ut Labore...》</a></div>
               </div>
        </div>
    </div>
    <div class="div0">
        <div class="fk6">
            <!-- <ul class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
                <li><a class="left3" href="">Lorem  |</a></li>
                <li><a class="left3" href="">Ipsum |</a></li>
                <li><a class="left3" href="">Dolor </a></li>
                <li><a class="left3" href="">Sit amet| </a></li>
                <li><a class="left3" href="">Aliquip</a></li>
                
            </ul> --><div class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
                Lorem | Ipsum | Dolor | Sit amet | Aliquip
            </div>
        </div>
    </div>
    <div class="div0-1">
        <button><a href="yellow.html" style="text-decoration: none;">橙色</a></button>
        <button><a href="green.html" style="text-decoration: none;">绿色</a></button>
        <button><a href="blue.html" style="text-decoration: none;">蓝色</a></button>
    </div>
</div>
    
<link rel="stylesheet" type="text/css" href="#" id="css1"/>
<script src="js.js"></script>
        <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
        <script type="text/javascript">
            $(".color").click(function() {
                var file = $(this).data("color");
                $("#css1").attr("href", file);
            });
        </script>
</body>
</html>
View Code
复制代码

4、在test再创建一个css文件夹，然后创建一个01.less文件

复制代码
@color:blue;

.header(@width:800px,@height:150px,@color:lightblue){
    width:@width;
    height: @height;
    background: @color;

}
.div(@width:80px,@height:30px,@color:rgb(86, 154, 177)){
    width:@width;
    height: @height;
    background: @color;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    
}

.header1{
    .header();
}
.div1{
    .div();
    
}
.div2{
.div(@color:rgb(45, 88, 102));
}

.div3{
    .div(@color:rgb(6, 106, 139));
    }
.div4{
        .div(@color:rgb(134, 173, 185));
        }
.div1-1{
    .div(@width: 155px;@height:30px);
    margin-top: 5px;
    margin-left: 0px;
}
.div1-2{
    .div(@width: 155px;@height:30px;@color:rgb(45, 88, 102));
    margin-top: 5px;
    margin-left: 5px;
 }
 .div1-3{
    .div(@width: 156px;@height:30px;@color:rgb(45, 88, 102));
    margin-top: 5px;
    margin-left: 5px;
 }
 .div1-4{
    .div(@width: 156px;@height:30px;@color:rgb(45, 88, 102));
    margin-top: 5px;
    margin-left: 5px;
 }
 .div1-5{
    .div(@width: 156px;@height:30px;@color:rgb(45, 88, 102));
    margin-top: 5px;
    margin-left: 5px;
 }
//  天蓝色
  .left(@color:lightblue){
      color: @color;

  }
  .left2(@a:absolute){
      position: @a;
      margin-top: 80px;
      margin-left: -90px;
  }    
  .left1{
      .left();
      position: relative;
      top: 20px;
      left: 20px;
      margin-top: 20px;
      font-size: 20px;
  } 
  .left1-1{
    .left();
    position: relative;
    top: 180px;
    left: -90px;
    margin-top: 220px;
    font-size: 20px;
}
.left1-2{
    .left();
    position: absolute;
  margin-top: 270px;
   left: 30px;
    font-size: 20px;
}              
  .left2{
      .left2();
     top: 180px;
      margin-left: -90px;
  }
  
  .left3{
      .left();
  }
//   边框
.fk(@color:lightblue){
    background: @color;
}
.fk1{
   .fk();
   width: 60px;
   height: 60px;
   position: absolute;
 margin-top: 350px;
  left: 30px;
   font-size: 20px;
}

.fk3{
    .font1();
    width: 250px;
    height: 55px;
}
.fk-1(@color:rgb(134, 173, 185)){
    background: @color;
}
.fk4{
    .fk-1();
    width: 12px;
    height: 12px; 
    position: absolute;
    top: 215px;
    left: 10px;
}
// 第二个颜色
.font(@color:rgb(45, 88, 102)){
    color: @color;
}
.font1(@color:rgb(45, 88, 102)){
    background:  @color;
}
// 第三个颜色
.font2(@color:rgb(6, 106, 139)){
    color: @color;
}

.ys{
   .font2();
}
.fk2{
    .font1();
    width: 12px;
    height: 12px;
}
.fk-2(@color:rgb(134, 173, 185)){
    background: @color;
}
.fk5{
    .fk-2();
}
.fk-3(@color:rgb(45, 88, 102);@w:800px;@h:40px){
    background: @color;
    width: @w;
    height: @h;
}
.fk6{
    .fk-3();
    position: relative;
    top:-370px;
   
    
}
View Code
复制代码

同样操作复制两份

02.less

复制代码
@color:yellow;
.header(@width:800px,@height:150px,@color:#ff9840){
    width:@width;
    height: @height;
    background: @color;

}
.div(@width:80px,@height:30px,@color:#bf7230){
    width:@width;
    height: @height;
    background: @color;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    
}

.header1{
    .header();
}
.div1{
    .div();
    
}
.div2{
.div(@color:#a64d00);
}

.div3{
    .div(@color:#ff7600);
    }
.div4{
        .div(@color:#ffa456 );
        }
.div1-1{
    .div(@width: 155px;@height:30px);
    margin-top: 5px;
    margin-left: 0px;
}
.div1-2{
    .div(@width: 155px;@height:30px;@color:#a64d00);
    margin-top: 5px;
    margin-left: 5px;
 }
 .div1-3{
    .div(@width: 156px;@height:30px;@color:#a64d00);
    margin-top: 5px;
    margin-left: 5px;
 }
 .div1-4{
    .div(@width: 156px;@height:30px;@color:#a64d00);
    margin-top: 5px;
    margin-left: 5px;
 }
 .div1-5{
    .div(@width: 156px;@height:30px;@color:#a64d00);
    margin-top: 5px;
    margin-left: 5px;
 }
//  天蓝色
  .left(@color:#ff9840){
      color: @color;

  }
  .left2(@a:absolute){
      position: @a;
      margin-top: 80px;
      margin-left: -90px;
  }    
  .left1{
      .left();
      position: relative;
      top: 20px;
      left: 20px;
      margin-top: 20px;
      font-size: 20px;
  } 
  .left1-1{
    .left();
    position: relative;
    top: 180px;
    left: -90px;
    margin-top: 220px;
    font-size: 20px;
}
.left1-2{
    .left();
    position: absolute;
  margin-top: 270px;
   left: 30px;
    font-size: 20px;
}              
  .left2{
      .left2();
     top: 180px;
      margin-left: -90px;
  }
  
  .left3{
      .left();
  }
//   方框
.fk(@color:#ff9840){
    background: @color;
}
.fk1{
   .fk();
   width: 60px;
   height: 60px;
   position: absolute;
 margin-top: 350px;
  left: 30px;
   font-size: 20px;
}

.fk3{
    .font1();
    width: 250px;
    height: 55px;
}
.fk-1(@color:#ffa456  ){
    background: @color;
}
.fk4{
    .fk-1();
    width: 12px;
    height: 12px; 
    position: absolute;
    top: 215px;
    left: 10px;
}
// 第二个颜色
.font(@color:#bf7230){
    color: @color;
}
.font1(@color:#bf7230){
    background:  @color;
}
// 第三个颜色
.font2(@color:#ffa456){
    color: @color;
}

.ys{
   .font2();
}
.fk2{
    .font1();
    width: 12px;
    height: 12px;
}
.fk-2(@color:#ffa456){
    background: @color;
}
.fk5{
    .fk-2();
}
.fk-3(@color:#ff7600;@w:800px;@h:40px){
    background: @color;
    width: @w;
    height: @h;
}
.fk6{
    .fk-3();
    position: relative;
    top:-370px;
   
    
}
View Code
复制代码

03.less

复制代码
.header(@width:800px,@height:150px,@color:#aff53d){
    width:@width;
    height: @height;
    background: @color;

}
.div(@width:80px,@height:30px,@color:#7eb12c){
    width:@width;
    height: @height;
    background: @color;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    
}

.header1{
    .header();
}
.div1{
    .div(@color:#92ec00 );
    
}
.div2{
.div(@color:#5f9900  );
}

.div3{
    .div(@color:#92ec00 );
    }
.div4{
        .div(@color:#c2f56e   );
        }
.div1-1{
    .div(@width: 155px;@height:30px);
    margin-top: 5px;
    margin-left: 0px;
}
.div1-2{
    .div(@width: 155px;@height:30px;@color:#5f9900 );
    margin-top: 5px;
    margin-left: 5px;
 }
 .div1-3{
    .div(@width: 156px;@height:30px;@color:#5f9900 );
    margin-top: 5px;
    margin-left: 5px;
 }
 .div1-4{
    .div(@width: 156px;@height:30px;@color:#5f9900 );
    margin-top: 5px;
    margin-left: 5px;
 }
 .div1-5{
    .div(@width: 156px;@height:30px;@color:#5f9900 );
    margin-top: 5px;
    margin-left: 5px;
 }
//  全局字体颜色
  .left(@color:#aff53d){
      color: @color;

  }
  .left2(@a:absolute){
      position: @a;
      margin-top: 80px;
      margin-left: -90px;
  }    
  .left1{
      .left();
      position: relative;
      top: 20px;
      left: 20px;
      margin-top: 20px;
      font-size: 20px;
  } 
  .left1-1{
    .left();
    position: relative;
    top: 180px;
    left: -90px;
    margin-top: 220px;
    font-size: 20px;
}
.left1-2{
    .left();
    position: absolute;
  margin-top: 270px;
   left: 30px;
    font-size: 20px;
}              
  .left2{
      .left2();
     top: 180px;
      margin-left: -90px;
  }
  
  .left3{
      .left();
  }
//   方框
.fk(@color:#92ec00 ){
    background: @color;
}
.fk1{
   .fk();
   width: 60px;
   height: 60px;
   position: absolute;
 margin-top: 350px;
  left: 30px;
   font-size: 20px;
}

.fk3{
    .font1();
    width: 250px;
    height: 55px;
}
.fk-1(@color:#c2f56e  ){
    background: @color;
}
.fk4{
    .fk-1();
    width: 12px;
    height: 12px; 
    position: absolute;
    top: 215px;
    left: 10px;
}
// 第二个颜色
.font(@color:#5f9900 ){
    color: @color;
}
.font1(@color:#5f9900 ){
    background:  @color;
}
// 第三个颜色
.font2(@color:#92ec00){
    color: @color;
}

.ys{
   .font2();
}
.fk2{
    .font1();
    width: 12px;
    height: 12px;
}
.fk-2(@color:#c2f56e){
    background: @color;
}
.fk5{
    .fk-2();
}
.fk-3(@color:#7eb12c;@w:800px;@h:40px){
    background: @color;
    width: @w;
    height: @h;
}
.fk6{
    .fk-3();
    position: relative;
    top:-370px;
   
    
}
View Code
复制代码

保存运行会自动生成css目录下的dist文件夹，会把less转换成css

效果：

 

1.7、翻页效果

代码：

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>翻页效果</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            html,
            body {
                height: 100%;
                
            }
            
            /* #div0 {
                width: 600px;
                height: 300px;
               
                background: rgb(68, 83, 128);
                margin: 0 auto;
                position: absolute;
                margin: 100px;
                z-index: -5;

            }
             */
           
          
           
            .box{
            width: 500px;
            height: 200px;
            position: relative;
           
            background: #ccc;
            margin:100px  auto;
           
              text-shadow: 0 1px 1px #fff;
        }
        .box::before{
            content: "";
            position: absolute;
            z-index: -1;
            bottom: 15px;
            left: 10px;width: 10%;
            width: 50%;
            max-width: 150px;
            height: 20%;
            /* 天极爱阴影效果 */
            box-shadow: 0 15px 10px rgba(125,125,125,0.8);
            /* 转换 旋转 */

            transform: rotate(-3deg);
        }
       .box::after{
           content: "";
           position: absolute;
           z-index: -1;
           bottom: 15px;
           right: 10px;
            width: 50%;
            max-width: 150px;
            height: 20%;
            box-shadow: 0 15px 10px rgba(125, 125, 125,0.8);
            transform: rotate(3deg);

       }
       h3{
           text-align: center;
           position: absolute;
           top: 30px;
           left: 100px;
       }
       p{
           position: absolute;

                font-size: 12px;
               top: 70px;
                text-align: center;
               
            }
       /* #div1-1{
        background: #000;
        margin-top: 0px;
       } */
        </style>
    </head>

    <body>
        <div id="div0">
            
                <div class="box">
                    <div id="div1-1">
                    <h3  style="color: rgb(83, 83, 83); ">CSS3 Wrapping Drop Shadows</h3>
                    <p>Walking from Nicolson street past Pollock hall, we found ourselves on a road beside the
                        hills. The nameless small yellow flowers are noisily blooming all the way on the hills. 
                        gasping while walking.gasping while walking.gasping while walking.
                        gasping while walking.
                        </p>
                    </div>
                </div>

           
        </div>
    </body>

</html>
View Code
复制代码

1.8、小风车动画

代码：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <link rel="stylesheet" type="text/css" href="css/animate1.css"/>
  <style>
      *{
    margin: 0;
    padding: 0;
}

#s{
    float: left;
}


#one:hover{
    animation:run 2s linear infinite; 
}

@keyframes run{ 
from{
    transform: rotate(360deg);
    } 
to{
    transform: rotate(0deg);
    } 
} 
.sj{
    margin-top: 5px;
    transform: rotate(-46deg);
    position: absolute;
    top:14px;
    left: -49px;
    float: left;
    width: 0;
    height: 0;
    z-index: 2;
    border: 50px solid lightcoral;
    border-color:lightcoral transparent  transparent   transparent  ;
}
.ye{
    transform: rotate(0deg);
    position: absolute;
    left: 0px;
    top:0px;
    float:left;
    width: 0;
    height: 0;
    border: 80px solid #D9B300;
    z-index: 2;
    border-color: transparent  transparent  transparent  #D9B300;
}

.ye1{
    transform: rotate(0deg);
    position: absolute;
    left: -80px;
    top:78px;
    float: left;
    width: 0;
    height: 0;
    z-index: 2;
    border: 80px solid orange;
    border-color: transparent orange transparent   transparent ;
}

.re{
    transform: rotate(-46deg);
    position: absolute;
    left: 21px;
    top: -61px;
    float: left;
    z-index: 2;
    width: 0;
    height: 0;
    border: 59px solid brown;
    border-color: transparent  transparent   transparent brown;
}

.blue{
    transform: rotate(0deg);
    position: absolute;
    left: 80px;
    top:-79px;
    float: left;
    width: 0;
    height: 0;
    z-index: 2;
    border: 80px solid cornflowerblue;
    border-color:  transparent  transparent   transparent cornflowerblue;
}

.blue1{
    transform: rotate(-44deg);
    position: absolute;
    left: 102px;
    top: 23px;
    float: left;
    width: 0;
    height: 0;
    z-index: 2;
    border: 58px solid lightblue;
    border-color: lightblue transparent  transparent   transparent ;
    animation:gg 1s linear infinite; 
}

.green{
    transform: rotate(0deg);
    position: absolute;
    left: 80px;
    top: 80px;
    z-index: 2;
    float: left;
    width: 0;
    height: 0;
    border: 81px solid #01814A;
    border-color: #01814A transparent  transparent   transparent ;
    z-index: 2;
    
}

.green1{
    transform: rotate(-45deg);
    position: absolute;
    top:103px;
    left: 23px;
    float: left;
    width: 0;
    height: 0;
    border: 57px solid seagreen;
    border-color:  transparent  seagreen transparent   transparent ;
    z-index: 2;
}

#mg{
    /* background: salmon; */
   background: rgb(224, 137, 137);
    width: 15px;
    height: 300px;
    border-radius: 8px;
    position: absolute;
    top:300px;    
    left:640px;
    z-index: 0;
}
#one{
    margin: 150px auto auto auto;
    width: 162px;
    transform: rotate(-45deg);
    height: 162px;
    line-height: 168px;
    text-align: center;
    position: relative;
    z-index: 3;
    animation:run 3s linear infinite; 
}


#img{
    position: relative;
    top:-50px;
    left: 522px;
    z-index: -1;
}
p{
    text-align: center;
    margin-top: 50px;
    font-size: 50px;
    color: #7cbea2;
    /* color: white; */
    /* position: relative;
    
    left: 450px; */
    text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
  </style>
    </head>
    <body>
        
        <div>
            <p>小 风 车, 10 块 两 个 ！!</p>
        </div>
            <div id="one">
                
                <div class="sj">
                    
                </div>
                
                <div class="ye">
                    
                </div>
                <div class="ye1">
                    
                </div>
                <div class="re">
                    
                </div>
                <div class="blue">
                    
                </div>
                <div class="blue1">
                    
                </div>
                <div class="green">
                    
                </div>
                
                <div class="green1">
                    
                </div>
            
        </div>
            
            <div id="mg">
                    
            </div>
            
            <div>
                <!--<img src="img/1.jpg" id="img"/>-->
        </div>
    </body>
</html>
View Code
复制代码

1.9、手机充电效果动画

代码：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机充电效果</title>
    <style>
html,body{
    width: 100%;
    height: 100%;
    display: flex;
    background: #e4e4e4;
}
.container{
    position: relative;
    width: 140px;
    margin: auto;
    /* border: 1px solid blue; */
}
.header{
    position: absolute;
    width: 26px;
    height: 10px;
    left: 50%;
    top: 0;
    background: rgba(82, 82, 153, 0.8);
    border-radius: 5px 5px 0 0;
    transform: translate(-50%,-10px);
}

.battery{
    position: relative;
    height: 220px;
    box-sizing: border-box;
    border-radius: 15px 15px 5px 5px;
    background: rgb(202, 190, 190);
    box-shadow: 0 0 5px 2px rgba(225,223,225,0.34);
    z-index: 1;
}
.battery-copy{
position: absolute;
top: 0;
left: 0;
height: 220px;
width: 140px;
border-radius: 15px 15px 5px 5px;
overflow: hidden;

}
.battery::after{
    content: "";
    position: absolute;
    top: 80%;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,#43944d 0%,
        #5ebb7a 44%,
        #41886b 100%
    );
    border-radius: 0 0 5px 5px;
    box-shadow: 0 14px 28px rgba(146, 69, 146, 0.1);
    animation: charging 10s linear infinite;
    filter: hue-rotate(90deg);


}
.g-wave{
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255, 0.8);
    border-radius: 45% 47% 44% 42%;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 1;
    animation: move 10s linear infinite;

}
.g-wave:nth-child(2){
    border-radius: 38% 46% 43% 47%;
    transform: translate(-50%,0) rotate(-135deg);

}
.g-wave:nth-child(3){
    border-radius: 42% 46% 37% 40%;
    transform: translate(-50%,0) rotate(135deg);

}
@keyframes charging{
    50%{
        box-shadow: 0 14px 28px rgba(188,213,213,0),
        0 10px 10px rgba(9, 188, 1215, 0.4);

    }
    65% {
          top: 5%;
          filter: hue-rotate(0deg);
          border-radius: 0 0 5px 5px;
          box-shadow: 0 14px 28px rgba(4, 188, 213, 0.2),
            0 10px 10px rgba(9, 188, 215, 0.08);
        }
        100% {
          top: 0%;
          filter: hue-rotate(0deg);
          border-radius: 15px 15px 5px 5px;
          box-shadow: 0 14px 28px rgba(4, 188, 213, 0),
            0 10px 10px rgba(9, 188, 215, 0.4);
        }
    }
        @keyframes move {
        100% {
          transform: translate(-50%, -160px) rotate(720deg);
        }
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="header"></div>
        <div class="battery"></div>
        <div class="battery-copy">
            <div class="g-wave"></div>
            <div class="g-wave"></div>
            <div class="g-wave"></div>
        </div>

    </div>
</body>
</html>
View Code
复制代码

效果：

1.10、图片墙各种翻转

代码：

复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css3图片墙</title>
        <style>
            body {
                /* background: rgb(233, 231, 231); */
                background: url(./img/星空20.jpg);
            }

            .container {
                margin: auto;
                width: 900px;

            }

            .container img {
                /* padding:5px 5px 5px; */

                /* background:white; */

                border: 3px solid rgb(255, 255, 255);

                box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);

                -webkit-transition: all 0.5s ease-in;

                -moz-transition: all 0.5s ease-in;

                transition: all 0.5s ease-in;

                position: absolute;

                z-index: 1;

            }

            .pic1 {
                left: 450px;

                top: 70px;

                -webkit-transform: rotate(-5deg);

                -moz-transform: rotate(-5deg);

                transform: rotate(-5deg);

            }

            .pic2 {
                top: 40px;

                left: 600px;

                -webkit-transform: rotate(-20deg);

                -moz-transform: rotate(-20deg);

                transform: rotate(-20deg);

            }

            .pic3 {
                bottom: 160px;

                right: 500px;

                -webkit-transform: rotate(5deg);

                -moz-transform: rotate(5deg);

                transform: rotate(5deg);

            }

            .pic4 {
                bottom: 210px;

                left: 450px;

                -webkit-transform: rotate(-10deg);

                -moz-transform: rotate(-10deg);

                transform: rotate(-10deg);

            }

            .pic5 {
                bottom: 120px;

                left: 330px;

                -webkit-transform: rotate(-10deg);

                -moz-transform: rotate(-10deg);

                transform: rotate(-160deg);

            }

            .pic6 {
                top: 320px;

                left: 250px;

                -webkit-transform: rotate(10deg);

                -moz-transform: rotate(10deg);

                transform: rotate(200deg);

            }

            .pic7 {
                top: 80px;

                left: 790px;

                -webkit-transform: rotate(20deg);

                -moz-transform: rotate(20deg);

                transform: rotate(20deg);

            }

            .pic8 {
                bottom: 280px;

                right: 330px;

                -webkit-transform: rotate(5deg);

                -moz-transform: rotate(5deg);

                transform: rotate(20deg);

            }

            .pic9 {
                top: 190px;

                left: 570px;

                -webkit-transform: rotate(15deg);

                -moz-transform: rotate(15deg);

                transform: rotate(-15deg);

            }

            .pic10 {
                left: 280px;

                top: 150px;

                -webkit-transform: rotate(-10deg);

                -moz-transform: rotate(-10deg);

                transform: rotate(-15deg);

            }

            /* 鼠标移动到某一张照片上时，照片由倾斜缓慢转变成端正，并且放大显示在上层 */

            .container img:hover {
                /* box-shadow: 15px 15px 10px rgba(50, 50, 50, 0.4); */

                -webkit-transform: rotate(0deg) scale(1.20);

                -moz-transform: rotate(0deg) scale(1.20);

                transform: rotate(0deg) scale(1.20);

                z-index: 2;


            }

            img {
                width: 120px;
                height: 120px;
            }
        </style>
    </head>
    <body>

        <div class="container">

            <img src="./img/1.jpg" class="pic pic1">
            <img src="./img/1000 (1).jpg" class="pic pic2">
            <img src="./img/1000 (2).jpg" class="pic pic3 ">

            <!-- <img style="width: 200px;height: 140px;" src="./img/星空50.jpg"  class="pic pic5"> -->
            <img style="width: 200px;height: 140px;" src="./img/星空20.jpg" class="pic pic6">
            <img src="./img/f(1).jpg" class="pic pic7">
            <img src="./img/1000.jpg" class="pic pic4">
            <img src="./img/f(2).jpg" class="pic pic8">
            <img style="width: 200px;height: 140px;" src="./img/星空59.jpg" class="pic pic9">
            <img style="width: 200px;height: 150px;" src="./img/f(3).jpg" class="pic pic10">

        </div>
    </body>
</html>
View Code
复制代码

 

 

 

 二、CSS

2.1、隔行换色及鼠标悬停

代码：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行换色</title>

        <style type="text/css">
            /* td:first-child{
                background-color: aqua;
            }  */
           tr:nth-child(2n+1){
                background:lightblue;
           }
           tr:hover{
               background: yellow;
           }
           tr:active{
               background: orangered;
           } 
           td:active{
               background-color: blueviolet;

           }
        </style>

</head>
<body>
    <table border="1" width="800">
<tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
    </table>
</body>
</html>
View Code
复制代码

2.2、三角形

代码：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形</title>
    
    <style>
        .heart {
          position: absolute;
          margin: auto;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-color: pink;
          height: 50px;
          width: 50px;
          transform: rotate(-45deg);
        }
        .heart:after {
          background-color: pink;
          content: "";
          border-radius: 50%;
          position: absolute;
          width: 50px;
          height: 50px;
          top: 0px;
          left: 25px;
        }
        .heart:before {
          content: "";
          background-color: pink;
          border-radius: 50%;
          position: absolute;
          width: 50px;
          height: 50px;
          top: -25px;
          left: 0px;
        }
        #circle{
          width: 100px;
          height: 100px;
          background-color: red;
          border-radius: 50px;
        }
        #triangle-up{
          width: 0;
          height: 0px;
          border-left: 100px solid transparent;
          border-right: 100px solid transparent;
          border-bottom: 100px solid red;
          
        }
        #triangle{
          margin-top: 50px;
    width:0;
    height:0;
    border-top:50px solid blue;
    border-right:50px solid blue;
    border-bottom:50px solid green;
    border-left:50px solid transparent;
}
#box{
            width: 0;
            height: 0;
            border: 50px solid plum;
            border-color: transparent transparent plum transparent;
        }
        </style>
       
</head>
<body>
    <div id="box"></div>
    <div class = "heart"></div>
    <div id="circle"></div>
    <div id="triangle"></div>
</body>
</html>
View Code
复制代码

2.3、心型

代码：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小桃心</title>
.<style>
    .heart{
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: purple;
        height: 100px;
        width: 100px;
        transform: rotate(-45deg);
    }
    .heart::before{
        content: "";
        background-color: purple;
        border-radius: 50%;
        position:absolute;
        width: 100px;
        height: 100px;
        top: -50px;
        left: 0px;
    }
    .heart::after{
        background-color: purple;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 100px;
        height: 100px;
        top:0px;
        left:50px;


}
</style>
</head>
<body>
    <div class="heart"></div>
</body>
</html>
View Code
复制代码

 

 

2.4、面试题

代码：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo{
            border: 2px solid #000;
            background-color: #fff;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            position: relative;
        }
        #demo::before{
            content: "";
            top: 20px;
            position: absolute;
            left:100px;
            width:0;
            height:0;
            border-left: 10px solid #000;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }
        #demo::after{
            content: "";
            top: 23px;
            position: absolute;
            left:100px;
            width:0;
            height:0;
            border-left: 7px solid#fff;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
        }
    </style>
</head>
<body>
    <div id="demo">

    </div>
</body>
</html>
View Code
复制代码

略...

 

 

 

posted @   is橙子  阅读(45)  评论(0)  编辑  收藏  举报
相关博文：
· CSS3-页面布局基础一
· CSS3-页面布局基础二——Box Model、边距折叠、内联与块标签
· 关于本博客样式
· HTML5
· 博客园美化二
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示