前端学习之练习

最新推荐文章于 2024-07-23 14:51:29 发布
最新推荐文章于 2024-07-23 14:51:29 发布
阅读量91 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/quanloveshui/p/11390010.html
版权

css中 :after 选择器向选定的元素之后插入内容，使用content 属性来指定要插入的内容

p:after
{ 
content:"- Remember this";
}

利用after实现清除css中浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .container{
            background-color: red;
        }

        .container .item{
            width: 180px;
            height: 150px;
            background-color: #303a40;
            border: 1px solid red;
        }

       /*利用after 在对应div标签后添加内容，并设置内容不显示，从而达到当class=item这些标签浮动时，外面的div标签设置的背景色可以显示*/
        .clearfix:after{
            content: '.';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="item left"></div>
        <div class="item left"></div>

        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>

    </div>

    <div>asdf</div>

    <!--<div class="body clearfix">-->
        <!--<div class="item left"></div>-->
        <!--<div class="item left"></div>-->
        <!--<div class="item left"></div>-->
        <!--<div class="item left"></div>-->

    <!--</div>-->

    <!--<div class="test">ABC </div>-->
</body>
</html>
例子

 :hover在鼠标移到链接上时添加的特殊样式。:hover 选择器器可用于所有元素，不仅是链接。

a:hover
{ 
    background-color:yellow;
}

// 当鼠标放在c1上时，c1下的c2才生效
.c1:hover .c2{
background-color:yellow;}
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .left{
            float: left;
        }
        .clearfix:after{
            content: '.';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        .container{
            background-color: red;
        }

        .container .item{
            width: 180px;
            height: 150px;
            background-color: #303a40;
            border: 1px solid red;
            overflow: hidden;
            position: relative;
        }
        .hide{
            display: none;
        }
        .container .item:hover{
            border: 1px solid green;
        }

        .container .item .text{
            display: none;
        }
         /*鼠标放在class=item元素上后面class=text元素的样式 本例显示1000和背景色*/
        .container .item:hover .text{
            display: block;
        }
    </style>

</head>
<body>

<div class="container clearfix">
        <div class="item left">
            <div class="bg">
                <img style="height: 150px; width: 180px;" src="1.jpg">
            </div>
            <div class="text">
                <!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。-->
                <div style="z-index:9;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: red;opacity: 0.6"></div>
                <div style="z-index:10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;">1000</div>
            </div>
        </div>

    </div>


</body>
</html>
鼠标放在图片上显示一些信息

后台管理界面例子

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

    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .hide{
            display: none;
        }
        /***********设置class="pg-header"相关标签样式*************/
        .pg-header{
            height: 48px;
            line-height: 48px;
            background-color: #303a40;
            color: white;
        }
        .pg-header .logo{
            float: left;
            width: 200px;
            text-align: center;
        }
         .pg-header .user{
            padding: 0 20px;
            height: 48px;
            position: relative;
        }
        .pg-header .user:hover{  /*鼠标放上去显示的背景色*/
            background-color: #425a66;
        }
        .pg-header .user .a{
            height: 48px;
        }
       .pg-header .user .a img{
            width: 40px;
            height: 40px;
            margin-top: 4px;
            border-radius: 50%; /*给元素的圆角边框*/
        }
         .pg-header .user .more{
            width:200px;
            border: 1px solid darkgreen;
            position: absolute;
            top:48px;
            right: 20px;
            background-color: #C0C0C0;
            display: none;/*设置元素不显示*/
            z-index: 9999;
        }

          .pg-header .user .more a{
            display: block;
            text-decoration: none; /*去掉a标签超链接中的下划线*/
        }
          /*鼠标放在图片上时显示'我的信息、注销信息*/
          .pg-header .user:hover .more{
            display: block;
        }

/***********设置class="pg-body"相关标签样式*************/

        .pg-body .body-menu{
            position: absolute;
            top: 50px;
            bottom: 0;
            left: 0;
            width: 200px;
            border: 1px solid #336699;
        }

         .pg-body .body-menu h1{
            color: #fff;
            background-color: #425a66;
            font-size: 14px;


        }
        .pg-body .body-content{
            position: absolute;
            top: 50px;
            bottom: 0;
            left: 210px;
            right: 0;
            border: 1px solid #336699;
            overflow: auto;
            z-index: 10;
        }


        .pg-body .body-content p{
         display: block;
         height: 40px;
        }

          .back{
            position: fixed;
            bottom: 0px;
            right: 0px;
            background-color: blue;

        }

    </style>
</head>
<body>

 <div class="pg-header">
        <div class="logo">主机系统管理</div>

        <div class="user right" style="position: relative">
            <a class="a">
                <img src="dva01.jpg">
            </a>
            <div class="more">
                <a href="#">我的信息</a>
                <a href="#">注销</a>
            </div>
        </div>

    </div>



<div class="pg-body">
        <div class="body-menu">
            <h1>机房管理</h1>
            <h1>主机管理</h1>

        </div>
        <div class="body-content">
            <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p>
            <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p>
            <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p>
            <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p>
            <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p>
            <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p>
        <div onclick="GoTop()" class="back">返回顶部</div>
        </div>



    </div>

<div onclick="GoTop()" class="back hide">返回顶部</div>


</body>
<script src="jquery-3.1.1.js"></script>
<script type="text/javascript">


   function GoTop(){
        //返回顶部
        $('.body-content').scrollTop(0);

    }

    $(function(){

        $('.body-content').scroll(function(){
            //当滚动滑轮时，执行函数体

            //获取当前滑轮滚动的高度
            var top = $('.body-content').scrollTop();

            if(top>40){
                //展示“返回顶部”
                $('.back').removeClass('hide');
            }else{
                //隐藏“返回顶部”
                $('.back').addClass('hide');
            }
        });
    });

</script>
</html>
后台管理

Jquery动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="display: none">hello world</p>
<input id="show" type="button" value="显示">
<input id="hide" type="button" value="隐藏">
<input id="toggle" type="button" value="toggle">
<script src="jquery-2.1.4.min.js"></script>
<script>

    $("#show").click(function () {
             $("p").show(2000,function () {
                 alert(123)
             });
    });

    $("#hide").click(function () {
             $("p").hide(1000);
    });


     $("#toggle").click(function () {
             $("p").toggle(1000);
    });
    /*toggle元素若显示就隐藏，元素隐藏就显示

</script>    
</body>
</html>
显示和隐藏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div" style="display:none ;width: 200px;height: 200px;background-color: rebeccapurple"></div>

<input id="In" type="button" value="fadeIn">
<input id="out" type="button" value="fadeout">
<input id="toggle" type="button" value="fadetoggle">
<input id="fadeto" type="button" value="fadeto">

<script src="jquery-3.1.1.js"></script>
<script>
    $("#In").click(function () {
        $("div").fadeIn(2000);
    })

    $("#out").click(function () {
        $("div").fadeOut(1000);
    })

     $("#toggle").click(function () {
        $("div").fadeToggle(1000);
    });
   
    /*fadeToggle元素是隐藏就显示，元素显示就隐藏*/
    $("#fadeto").click(function () {
        $("div").fadeTo(1000,0.9);
    });
</script>
</body>
</html>
浅入浅出 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

 <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>


</body>

<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script>
      $("#title").mouseover(function () {
          $(this).css("cursor","move")
      }).mousedown(function (event) {
           var start_x=event.screenX;
           var start_y=event.screenY;

          var parent_left=$(this).parent().offset().left;
          var parent_top=$(this).parent().offset().top;

          $(this).on("mousemove",function (e) {
               var new_x=e.screenX;
               var new_y=e.screenY;


              var new_parent_x=parent_left+(new_x-start_x);
              var new_parent_y=parent_top+(new_y-start_y);


              $(this).parent().css("left",new_parent_x+"px");
              $(this).parent().css("top",new_parent_y+"px");
          }).mouseup(function () {
              $(this).off("mousemove")
          })
      })


</script>

</html>
拖动面板 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#flipshow").click(function(){
         $("#content").slideDown(1000);
     });
      $("#fliphide").click(function(){
         $("#content").slideUp(1000);
     });
      $("#toggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>
        #flipshow,#content,#fliphide,#toggle{
            padding: 5px;
            text-align: center;
            background-color: blueviolet;
            border:solid 1px red;

        }
        #content{
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>

    <div id="flipshow">出现</div>
    <div id="fliphide">隐藏</div>
    <div id="toggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>
slip例子

 

转载于:https://www.cnblogs.com/quanloveshui/p/11390010.html

alkcf22626
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习——页面布局
weixin_51748707的博客
05-20 2803
1.常见的五种布局方式 1.静态布局： 给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。 优点：设计简单。 缺点：对于不同尺寸屏幕的兼容性不好，特别是移动端。 2.流式布局： 元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。 优点：页面元素宽高可以自适应调整。 缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。 3.自适应布局： 屏幕尺寸或分辨率变化时，页面元素会跟着变化。 缺点：页面元素不会随着窗口大小的调整而发生变化
前端开发免费学习资源分享
dongdouzin的博客
10-25 1217
然后再给大家分享一个echarts，一个前端框架的大数据页面案例，所有代码都可以运行，这块在大数据前端比较流行。我这里给大家先总结一下，老师会给大家分享一些基础的学习资料如果你入不了门，就不要去搞啥前端了，这个是黑马在B站上传的前端入门视频，你看看，虽然是黑马的广告课程，但是入门没有问题的。包装好简历，剩下的就是投递简历，不停面试，一般面试十几家，你有很大可能找到工作。这边给大家推荐蓝桥云课堂的一些免费的练手项目，一共十几个项目，够你练习的了。这两个项目视频，老师亲测过，还行吧，反正跟着练手没有问题的。
前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
热门推荐
张彦峰的博客
04-09 169万+
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。 一、HTML简单的回顾 （一）HTML 基本结构 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&...
前端学习-JavaScript基础（练习）
weixin_51346866的博客
03-24 857
Tab切换练习，还有更简单方法教教我啊。我已经陷入无限轮回了。
前端学习目标与规划
m0_64371862的博客
09-04 1300
在整个过程中也会调整学习心态，禁止焦虑，在过去的很长一段时间里，我都在寻求治愈自己，因为我严重迷失了方向，我焦虑、失眠、痛苦，缺乏安全感 否定自我和怀疑人生，反反复复惶恐度日，但很幸运的是，我渐渐的想明白，要跟摆烂的日子彻彻底底拜拜，董宇辉说：“只有年轻的将士才会会很过去，熟练的将军都是在深夜里擦亮剑、准备下一场战斗” 不要焦虑、不要内耗、相信自己、勤能补拙。
前端练习-CSS布局
qq_42385482的博客
02-08 1831
前端练习-CSS布局 文章目录前端练习-CSS布局在线练习一、盒模型CSS1 盒模型 - content-boxCSS2 盒模型 - border-boxCSS3 盒模型- 外边距折叠二、浮动CSS4 浮动CSS5 浮动 - 清除三、定位CSS7 定位 - inheritCSS8 定位 - absoluteCSS9 定位 - absolute - 评注CSS10 定位 - z-indexCSS11 定位 - relativeCSS12 定位 - fixedCSS13 定位 - fixed - 广告四、dis
2023版完整版web前端学习路线图（超详细自学路线）
千锋教育
09-09 4万+
跟着路线图认真坚持学习从前端小白到大神不是梦，0基础看这一篇足矣！前端计算机常识 ➾ html+css基础 ➾ html+css 项目实践JavaScript基础+进阶 ➾ Ajxa ➾ JavaScript应用项目实践 ➾ Node.js ➾ MongoDB项目实践Vue&React开发：Vue2.0+3.0 ➾ Vue项目实践 ➾ 数据可视化项目 ➾ React ➾ React项目实战 ➾ UmiJS项目公众号&小程序开发。
学习前端四个月心得
邓邓今天加油了吗
06-14 1002
前端学习心得
前端必备的学习网站
csdn_chengpeng的博客
01-26 6428
前端常用网站 vue3.0 ui框架 刷题 算法题 前端ui框架
前端学习推荐软件
qq_61476408的博客
10-26 1897
最近有很多学习前端的同学私信问我不知道应该用什么学习软件，于是我决定出一期前端学习软件推荐博客（以下发言仅表示个人言论观点以及喜爱）
学习前端的练习页面
05-22
学习前端的练习页面，自己无聊的时候写的想，新人入门可以看看多练习操作啊。很有必要努力学习，找到好工作。主要的功能我也忘记了，可以下载以后自己看，不要差评
前端练习代码之css2.1
04-12
这个名为"前端练习代码之css2.1"的压缩包文件，显然是为初学者或者正在进阶的前端开发者设计的一系列练习项目，旨在帮助他们深入理解和熟练应用CSS2.1规范。CSS2.1是CSS的一个关键版本，它在2011年成为W3C推荐标准，...
零基础前端学习练习和基础知识
05-02
对于零基础的前端学习者，了解并掌握变量、数组和数据类型是至关重要的。 首先，让我们深入理解变量。变量是编程中的基本概念，它们是存储数据的容器。在JavaScript中，我们通常使用`var`或`let`来声明变量。`var`...
PHP中文网前端学习练习笔记
10-19
【PHP中文网前端学习练习笔记】是一份涵盖了前端开发核心技术的综合学习资料，主要针对HTML5、CSS3、ES6以及Vue.js等关键领域的学习和实践进行了详细记录。这份笔记旨在帮助初学者或者希望提升前端技能的开发者系统...
前端学习之数据库作业之高级查询、综合练习
11-15
在前端学习过程中，数据库操作是不可或缺的一部分，尤其是在构建复杂应用如“我的租房网”时。以下将详细解析涉及的数据库高级查询和综合练习知识点。 首先，我们关注的是数据库设计。在“我的租房网”数据库中，有...
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 209
css浮动——float特点
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 943
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 99
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 81
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
jQuery前端攻略：学习资源大全
学习jQuery的过程中，推荐结合实际的网页项目进行练习，这样可以更好地巩固所学知识。同时，利用提供的各种资源，如Java、.Net技术的相关资料，可以进一步提升前端全栈开发能力。对于软考等相关认证的准备，官方指定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值