首页 > 代码库 > Python之路Day15--CSS补充以及JavaScript（一）

Python之路Day15--CSS补充以及JavaScript（一）

2024-08-21 08:59:59   221人阅读

一、上节作业问题：

技术分享 
上节作业问题：
    1、css重用
        
        <style>
            如果整个页面的宽度 > 900px时：
            {
                .c{
                   共有 
                }
                .c1{
                    独有
                }
            }
            
                .c2{
                独有
            }
        </style>
        
        <div class=‘c c1‘></div>
        <div class=‘c c2‘></div>
    2、自适应 和 改变大小变形
        左右滚动条的出现
        宽度，百分比
        
        页面最外层：像素的宽度 => 最外层设置绝对宽度
        
        
        自适应：media
        
    3、默认img标签，有一个1px的边框
        img{
            border: 0;
        }
    
    4、作业中的数量输入框
    
上节内容回顾
    1、块级和行内
    2、form标签
            <form action=‘http://sssss‘ methed=‘GET‘ enctype=‘multi‘>
                <div>asdfasdf</div>
                <input type=‘text‘ name=‘q‘ />
                <input type=‘text‘ name=‘b‘ />
                # 上传文件
                <input type=‘file‘ name=‘f‘ />
                <input type=‘submit‘ />
            </form>
            GET: http://sssss?q=用户输入的值
                 http://sssss?q=用户输入的值&b=用户输入的内容
                 
            POST：
                请求头
                请求内容
    3、display: block;inline;inline-block
    4、float：
        <div>
            <div style=‘float:left;‘>f</div>
            <div style=‘clear:both;‘></div>
        </div>

    5、margin: 0 auto;
    6、padding, ---> 自身发生变化
上节作业问题

回顾

让IE有自动加上的外边框消失

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border: 0;
        }
    </style>
    <!--将图片边框变为零-->
</head>
<body>
    <a href=http://www.mamicode.com/"http://www.baidu.com">
        <img src=http://www.mamicode.com/"image/1.png" title="phto" style="width: 200px;height: 300px;border: 0">
    </a>
</body>
</html>
让IE自动加上的边框消失默认1px

二、本节内容

　　（一）CSS补充

　　（二） JS

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

（一） CSS补充

1.position

　　a. fiexd ==>固定在页面的某个位置

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div onclick="GoTop();" style="width:50px; height:50px;background-color:black;color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
   ">返回顶部</div>
    <div style="height:5000px;background-color: #dddddd">
    </div>
    <script>
        function GoTop(){
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>
View Code
技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
      }
        .pg-body{
            height: 5000px;
            background-color: #dddddd;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>
将菜单永远置顶

效果：

技术分享

    b.absolute + relative

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position: relative;height: 200px;width: 500px;border: 1px solid red; margin: 0 auto">
       <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black"></div>
    </div>
    <div style="position: relative;height: 200px;width: 500px;border: 1px solid red; margin: 0 auto">
        <div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color: black"></div>
    </div>
    <div style="position: relative;height: 200px;width: 500px;border: 1px solid red; margin: 0 auto">
        <div style="position: absolute;left: 0;top: 0;width: 50px;height: 50px;background-color: black"></div>
    </div>
</body>
</html>
relative+absolutw

效果：

技术分享

2.opcity  透明度

3.z-index 层级顺序

范例：

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style=" display:none;margin:0 auto;z-index:10;position: fixed;top:50%;left:50%;
     margin-left: -250px ; margin-top:-200px;background-color: white;height:400px;width: 500px; ">
           <input type="text" />
           <input type="text" />
           <input type="text" />
    </div>
    <div style="display:none;z-index:9;position: fixed;background-color: black;
    top:0;
     bottom: 0;
     right: 0;
     left: 0;
     opacity: 0.5
       "></div>
    <div style="height: 500px;background-color: green;">
        rcvbrcvghb
    </div>

</body>
</html>
三层范例

4.overflow

范例

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div style="height: 200px;width: 300px;overflow: auto"> .
       <img src=http://www.mamicode.com/"image/1.png">
   </div>
   <div style="height: 200px;width: 300px;overflow: hidden"> .
       <img src=http://www.mamicode.com/"image/1.jpg">
   </div>
</body>
</html>
范例

效果：

技术分享

5.hover 伪类

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left:0;
            top:0;
            height:48px;
            background-color: #2459a2;
            line-height: 48px;

        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px ;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding:0  10px 0 10px;
            color: white;
        }
        /*当鼠标移动到当前标签上时，当前标签才生效*/
         .pg-header .menu:hover{
             background-color: blue;
         }
    </style>
</head>
<body>
      <div class="pg-header">
          <div class="w">
               <a class="logo">LOGO</a>
               <a class="menu">全部</a>
               <a class="menu">42区</a>
               <a class="menu">段子</a>
               <a class="menu">挨踢1024</a>
               <a class="menu">你问我答</a>
          </div>
      </div>
      <div class="pg-body">
          <div class="w">正文</div>
      </div>
</body>
</html>

 效果：

技术分享

6.background-image 背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 100px"></div>
    <div style="background-image: url(‘image/2.png‘);background-repeat: no-repeat;height: 20px;width: 20px;border: 1px solid red;"></div>
<-- backgroud-repeat:no-repeat 表示不重复  还有repeat-x表示横着堆叠 repeat-y表示竖着堆叠-->
<--backgroud-opsition-x:10px; backgroud-position-y:10px;表示往哪个方向移动  还可以使用上右下左的方式写-->
</body>
</html>

效果

技术分享

 课堂小练习--->输入框加头像

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 35px;width: 400px;position: relative;">
        <input type="text" style="height: 35px;width: 370px;padding-right:30px ;">
        <sapn style=" position:absolute;
        right:0;
        top:10px;
        background-image: url(image/i_name.jpg);
        height: 16px;
        width: 16px;
        display: inline-block;"></sapn>
    </div>
</body>
</html>

 效果：

技术分享

 

Python之路Day15--CSS补充以及JavaScript（一）


联系
我们