精华内容
下载资源
问答
  • 前端心得

    2017-10-20 16:42:00
    前端心得在第二次重新学习了前端的知识后,我对前端又有更深的了解.还记得3个月前,我通过别人口中得知,IT行业比较工资比较高(可能我比较现实吧),我就抱着试试的心态通过网上查询找到了青鸟,刚开始我还以为IT是个比较...

    前端心得


    在第二次重新学习了前端的知识后,我对前端又有更深的了解.还记得3个月前,我通过别人口中得知,IT行业比较工资比较高(可能我比较现实吧),我就抱着试试的心态通过网上查询找到了青鸟,刚开始我还以为IT是个比较轻松的职业,便也放下了心中的忐忑感,步入教室,默默的坐在最后一排,通过短暂的接触,发现周边都是24,5岁的大哥哥,貌似没有同龄的,心中便开始有些压抑感,不怎么与大家交流.从刚开始HTML开始,还觉得可以,心里觉得慢慢背,总会好的,可能是还不习惯吧,总是不能进入状态,每天上课都要睡着,下午,一个人又默默的坐在后面,看着老师发的代码,跟着敲敲,到了晚上,困意又上来了,便老是分神,学习状态很差,学进去的也很慢,每天也不预习,总之HTML css还好.当教到javascript的时候,我感觉脑子一片空白,感觉啥也不会了,心里对自己是否可以做这行也担忧起来,到最后也习惯了这种感觉,考试每次都要补考,靠着死记硬背,但过两天就又忘了,当即将学完前端时,回过头发现,自己貌似只会个HTML css 其他啥也不会,而且,页面都不会做.不过改变也从那时开始了,当听到别的学长,老师来演讲时,说的那些话,顿时让我心里热浪翻滚,我貌似又恢复到了刚开始的状态,对,我心里顿时不在放弃自己了,我像邱老师说明了情况,并且来到了现在的96班,可以说,转变从这里开始,从第一天上课起,我变反复强调自己,上课认真听,不懂得立马提出来,并且主动与大家交流,自习时,也不再浪费时间,而是不停的反复敲到代码,不怕烦,我相信,代码量多了,总会记住了,通过一段时间的强制学习,我渐渐养成了一种习惯,同学的问题,我不管会不会都会走到他们身边进行讲解,哪怕有时讲错了第二天,老师讲出了正确的说明,我脸也会情不自禁红起来,但是我知道这样就加深印象了,晚上回家,合理分配好时间,该学习就学习,做了半个小时就做20个俯卧撑,强制自己少玩游戏(虽然有时还是玩玩,但是毕竟19,心里的贪玩劲还没过).我发现,质量也提高了,并且每晚也11点就可以睡了,上课时,老是没问一个我嘴里也会跟着回应一下,(不知道有没有打扰到同学,哈哈),作为96班班长,感觉还是挺难为情的,但是这也是个激励我的办法,班长不能学的比较落后吧,那多没面子,嘻嘻(虽然我是厚脸皮).每天和同学们一起学习,一起讨论,我发现这是多有趣的事情,学的不在无聊也不再没有兴趣了,自己也在老崔的反复监督,催赶下,我也从简单的页面做到了稍微复杂的页面了,对制作页面也有了更好的了解,做完后,发现页面这东西,就是要多做,虽然做起来有个几千行,但是做着做着,貌似也挺有意思,反复的重试,让我对制作页面也熟练起来,不再是当初只有羡慕别人的心态了.在这里,真的要感谢一下老崔老师(不会喊老了吧!别建议呦)没有老师的监督和督促下,我也不可能强制自己并且反复完善.不过做完,真的挺有成就感的.当再次学习到javascript时,我心里也开始忐忑了,但发现也不是很陌生,也许是之前上课睡觉,导致学习内容不能很好的拼接起来吧.每周的考试也不再补考了,虽然学了两遍,但我对自己现在的学习状态,还是要自我表扬一下的.但有时上课还是睡着了,可能这毛病从小养成吧,比较难改,所以我也”聘请”我的同桌,只要发现我上课睡着了,便呼我脑瓜子(不过我同桌下手还真不清,哈哈).不过还是挺谢谢他的.讲了那么多总之我总结了几点:
    1. 上课不能分神
    2. 上课不懂得就要问,不能拖欠
    3. 每天的作业要保质保量,不能copy
    4. 要预习,要不然第二天上课会处于比较被动
    5. 一定要多交流
    7. 保证睡眠
    好了总结写到这里也差不多说完了,希望自己继续努力.

    展开全文
  • 前端心得01

    2017-09-18 20:57:00
    什么是前端? 什么是前端工程师? 前端工程师平时的工作是什么? 做前端需要掌握一些什么知识? 这些问题是我现在对前端工作的思考和困惑, 希望能在很长一段时间里, 我会从工作中慢慢对它们有所感悟. 我对前端...

    什么是前端?

    什么是前端工程师?

    前端工程师平时的工作是什么?

    做前端需要掌握一些什么知识?

    这些问题是我现在对前端工作的思考和困惑, 希望能在很长一段时间里, 我会从工作中慢慢对它们有所感悟.
     
    我对前端最开始的认识, 是在大三的时候. 当时开始接触J2EE, 于是知道了现在的IT领域里, 有前端这一个分支.
    当时我就知道自己更喜欢做前端相关的工作, 因为做这一块, 会对你要做的东西有更直观的接触. 不同于做后台都是和逻辑代码打交道, 前端工作更视觉化, 做成什么样一下子就能看出来了.
    而当时自己最大的兴趣其实就是做出一个好看的网页.
     
    我毕业的时候没有直接就做了前端方面的工作, 虽然一直在做IT, 但是经历了很多. 从测试开始做起, 然后是测试兼职前端, 产品兼职前端. 在计算机这个行业, 如果你一开始做了测试, 想要转型到开发, 是一件很难的事情. 特别是我在现在这份正式的前端工作之前, 都是做一些给前端大师傅打打杂的事情, 就连切页面的机会也不多.
     
    现在终于正是成为了一名前端工程师, 天知道我有多珍惜这一个机会. 我等来这一个机会, 几乎花了3年的时间. 这种机会相对很多人来说, 其实都是轻而易举的, 但是在我坎坷的转行之路上, 可能犹豫我自己的优柔寡断和各种际遇, 都让我现在的这份工作显得多么的来之不易.
     

    什么是前端?

    其实呢, 我以前对前端的理解就是, 做页面展示.
    具体来说, 其实就是把设计师的效果图变成一张静态的html页面.
    现在知道了还要完成一个页面还要做到高保真, 随着各种屏幕大小和移动端的流行, 还要做到响应式开发. 甚至不止局限于单单是静态的页面了. 除去数据交互方面, 前端甚至还要做到很多动效, 比如用jQuery来实现, 随着H5的出现, 还有canvas等等, 都对前端的要求越来越高.
    其实随着JavaScript语言的逻辑性越来越完整, 前端甚至不止于写一些页面效果了. 就拿我现在的工作来说, 前端的工作必须还要懂得往页面里套数据, 懂得一些数据交互的原理, 这也是我目前十分欠缺的方面.
     
      

    转载于:https://www.cnblogs.com/darthbadwolf/p/7545126.html

    展开全文
  • web前端心得

    2019-07-09 16:43:16
    最近的一些心得: 1.LocalStorage和sessionStorage可以存值把值从一个页面传到另一个页面 LocalStorage.setItem(“变量”,值);存值 LocalStorage.getItem(“变量”);取值 2.validForm表单验证 3.bootstrap-...

    最近的一些心得:
    1.LocalStorage和sessionStorage可以存值把值从一个页面传到另一个页面
    LocalStorage.setItem(“变量”,值);存值
    LocalStorage.getItem(“变量”);取值

    2.validForm表单验证

    3.bootstrap-datapicker

    4.jq-ztree树型结构
    setting = {
    view: {
    selectedMulti: false
    },
    data:{
    key:{
    name:“displayName”
    },
    simpleData: {
    enable: true,
    idKey: “id”,
    pIdKey: “parentId”,
    rootPId: 0
    }
    },
    callback:{
    onClick: zTreeOnClick
    }
    };

        zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
        zTreeObj.expandAll(true);
    
        //刷新树
        $('#reloadTree').click(function(){
            var zTreeNodes =getOrgData();
            zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
            zTreeObj.expandAll(true);
            $('#editContent').hide();
            $('#addContent').show();
        });
    

    5,ajax的另外一种写法
    function getDetails(id){
    var organizationData = $.ajax({
    url:baseUrl+’/api/services/app/NewOrganizationUnit/GetById?Id=’+id,
    type:‘GET’,
    async:false,
    dataType:‘json’
    });
    organizationData.done(function(data,textStatus,xhr){
    if(data.success && xhr.status===200){
    var ortData= data.result;
    var ele;
    $(’#parentId’).val(ortData.parentId);
    $(’#id’).val(ortData.id);
    $(’#id1’).val(ortData.id);
    $(‘input[name=“cparentId”]’).val(ortData.id);
    $(‘input[name=“displayName”]’).val(ortData.displayName);
    ortData.parentId!=0? ele = $("[name =‘pJobScope’]:checkbox"):ele = $("[name =‘cJobScope’]:checkbox");
    checkJobScope(ortData.jobScope,ele);
    }
    });
    }
    6.bootstrap-table的选择一个
    var selectedRow = $tabEle.bootstrapTable(‘getSelections’);

    7.layer的弹出框
    8,点击事件函数封装
    /*按钮点击事件/
    (function(){
    var actionList = {
    ‘add-action’:function(){
    Add();
    },
    ‘edit-action’:function(){
    Edit();
    },
    ‘del-action’:function(){
    Del();
    },
    ‘view-action’:function(){
    View()
    },
    ‘lock-action’:function(){
    lock();
    },
    ‘login-action’:function(){
    login();
    },
    ‘pass-action’:function(){
    pass();
    },
    ‘check-action’:function(){
    check();
    },
    ‘complete-action’:function(){
    complete();
    },
    ‘building-action’:function(){
    building();
    },
    ‘quto-action’:function(){
    Quto();
    },
    ‘grant-action’:function(){
    Grant();
    },
    ‘addtest-action’:function(){
    addTest();
    },
    ‘rettest-action’:function(){
    rettest();
    },
    ‘print-action’:function(){
    print();
    },
    ‘review-action’:function(){
    reView();
    },
    ‘downLoad-action’:function() {
    downLoad();
    },
    ‘payment-action’:function(){
    payment();
    },
    ‘refresh-action’:function(){
    dataRefresh();
    }
    };
    var $body = $(document.body);

    //点击事件绑定
    $body.on(‘click’, ‘[data-action]’, function (){
    var actionName = (this).data(action);varaction=actionList[actionName];if((this).data('action'); var action = actionList[actionName]; if (.isFunction(action)) action();
    });
    })();

    //9.全局ajax
    (function(){
    $.ajaxSetup({
    dataType : “json”,
    contentType: ‘application/json; charset=UTF-8’,
    beforeSend:function(xhr){
    xhr.setRequestHeader(“Authorization”,“Bearer “+localStorage.accessToken);
    //检查登录是否失效
    },
    error : function(jqXHR, textStatus, errorThrown) {
    var status = jqXHR.status,errorMsg;
    switch (status){
    case (500):
    errorMsg = jqXHR.responseJSON.error;
    RsCommon.errorMsg({content:errorMsg.message});
    break;
    case (401):
    errorMsg = jqXHR.responseJSON.error;
    RsCommon.errorMsg({content:errorMsg.message});
    setTimeout(function(){
    top.location.href=”/login.html”;
    },2000);
    break;
    case (403):
    layer.alert(‘无权限执行此操作’, {
    icon : 2
    });
    break;
    case (408):
    layer.alert(‘请求超时’,{
    icon : 2
    });
    break;
    default:
    layer.alert(‘未知错误,请联系管理员’, {
    icon : 2
    });
    }
    },
    complete:function(){
    $(".loaded").delay(500).fadeOut(‘slow’);
    $(".preloader").delay(500).fadeOut(“slow”);
    }
    });
    })();

    展开全文
  • 前端心得技术

    2017-01-08 23:39:15
    网上看到一组不错的图形代码, 分享给各位! 1、正方形 最终效果:   CSS代码如下: 复制代码 代码如下: #square {  width: 100px;  height: 100px;... C

    网上看到一组不错的图形代码,

    分享给各位!


    1、正方形

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #square { 
    width: 100px; 
    height: 100px; 
    background: red; 

    2、长方形

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #rectangle { 
    width: 200px; 
    height: 100px; 
    background: red; 

    3、圆形

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #circle { 
    width: 100px; 
    height: 100px; 
    background: red; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 

    4、椭圆

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #oval { 
    width: 200px; 
    height: 100px; 
    background: red; 
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 100px / 50px; 
    border-radius: 100px / 50px; 

    5、上三角

    最终效果:

     

     

    CSS代码如下:


    复制代码
    代码如下:

    #triangle-up { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid red; 

    6、下三角

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #triangle-down { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 100px solid red; 

    7、左三角

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #triangle-left { 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-right: 100px solid red; 
    border-bottom: 50px solid transparent; 

    8、右三角

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #triangle-right { 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-left: 100px solid red; 
    border-bottom: 50px solid transparent; 

    9、左上三角

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #triangle-topleft { 
    width: 0; 
    height: 0; 
    border-top: 100px solid red; 
    border-right: 100px solid transparent; 

    10、右上三角

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #triangle-topright { 
    width: 0; 
    height: 0; 
    border-top: 100px solid red; 
    border-left: 100px solid transparent; 

    11、左下三角

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #triangle-bottomleft { 
    width: 0; 
    height: 0; 
    border-bottom: 100px solid red; 
    border-right: 100px solid transparent; 

    12、右下三角

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #triangle-bottomright { 
    width: 0; 
    height: 0; 
    border-bottom: 100px solid red; 
    border-left: 100px solid transparent; 

    13、平行四边形

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #parallelogram { 
    width: 150px; 
    height: 100px; 
    margin-left:20px; 
    -webkit-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -o-transform: skew(20deg); 
    background: red; 

    14、梯形

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #trapezoid { 
    border-bottom: 100px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 100px; 

    15、六角星

    最终效果: 

     

     CSS代码如下:


    复制代码
    代码如下:

    #star-six { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid red; 
    position: relative; 

    #star-six:after { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 100px solid red; 
    position: absolute; 
    content: ""; 
    top: 30px; 
    left: -50px; 

    16、五角星

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #star-five { 
    margin: 50px 0; 
    position: relative; 
    display: block; 
    color: red; 
    width: 0px; 
    height: 0px; 
    border-right: 100px solid transparent; 
    border-bottom: 70px solid red; 
    border-left: 100px solid transparent; 
    -moz-transform: rotate(35deg); 
    -webkit-transform: rotate(35deg); 
    -ms-transform: rotate(35deg); 
    -o-transform: rotate(35deg); 

    #star-five:before { 
    border-bottom: 80px solid red; 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
    position: absolute; 
    height: 0; 
    width: 0; 
    top: -45px; 
    left: -65px; 
    display: block; 
    content: ''; 
    -webkit-transform: rotate(-35deg); 
    -moz-transform: rotate(-35deg); 
    -ms-transform: rotate(-35deg); 
    -o-transform: rotate(-35deg); 

    #star-five:after { 
    position: absolute; 
    display: block; 
    color: red; 
    top: 3px; 
    left: -105px; 
    width: 0px; 
    height: 0px; 
    border-right: 100px solid transparent; 
    border-bottom: 70px solid red; 
    border-left: 100px solid transparent; 
    -webkit-transform: rotate(-70deg); 
    -moz-transform: rotate(-70deg); 
    -ms-transform: rotate(-70deg); 
    -o-transform: rotate(-70deg); 
    content: ''; 

    17、五角大楼

    最终效果:

     

     CSS代码如下:


    复制代码
    代码如下:

    #pentagon { 
    position: relative; 
    width: 54px; 
    border-width: 50px 18px 0; 
    border-style: solid; 
    border-color: red transparent; 

    #pentagon:before { 
    content: ""; 
    position: absolute; 
    height: 0; 
    width: 0; 
    top: -85px; 
    left: -18px; 
    border-width: 0 45px 35px; 
    border-style: solid; 
    border-color: transparent transparent red; 

    18、六边形

    最终效果:

     

     CSS代码如下:


    复制代码
    代码如下:

    #hexagon { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative; 

    #hexagon:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 25px solid red; 

    #hexagon:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 25px solid red; 

    19、八角形

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #octagon { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 

    #octagon:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-bottom: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 

    #octagon:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border-top: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 

    20、爱心

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #heart { 
    position: relative; 
    width: 100px; 
    height: 90px; 

    #heart:before, 
    #heart:after { 
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    width: 50px; 
    height: 80px; 
    background: red; 
    -moz-border-radius: 50px 50px 0 0; 
    border-radius: 50px 50px 0 0; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 

    #heart:after { 
    left: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    transform-origin :100% 100%; 

    21、无穷大符号

    最终效果:

     

     

    CSS代码如下:


    复制代码
    代码如下:

    #infinity { 
    position: relative; 
    width: 212px; 
    height: 100px; 

    #infinity:before, 
    #infinity:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 60px; 
    height: 60px; 
    border: 20px solid red; 
    -moz-border-radius: 50px 50px 0 50px; 
    border-radius: 50px 50px 0 50px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 

    #infinity:after { 
    left: auto; 
    right: 0; 
    -moz-border-radius: 50px 50px 50px 0; 
    border-radius: 50px 50px 50px 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 

    22、鸡蛋

    最终效果 

     CSS代码如下:


    复制代码
    代码如下:

    #egg { 
    display:block; 
    width: 126px; 
    height: 180px; 
    background-color: red; 
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 

    23、食逗人(Pac-Man)

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #pacman { 
    width: 0px; 
    height: 0px; 
    border-right: 60px solid transparent; 
    border-top: 60px solid red; 
    border-left: 60px solid red; 
    border-bottom: 60px solid red; 
    border-top-left-radius: 60px; 
    border-top-right-radius: 60px; 
    border-bottom-left-radius: 60px; 
    border-bottom-right-radius: 60px; 

    24、提示对话框

    最终效果:

     

     

    CSS代码如下:


    复制代码
    代码如下:

    #talkbubble { 
    width: 120px; 
    height: 80px; 
    background: red; 
    position: relative; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 

    #talkbubble:before { 
    content:""; 
    position: absolute; 
    right: 100%; 
    top: 26px; 
    width: 0; 
    height: 0; 
    border-top: 13px solid transparent; 
    border-right: 26px solid red; 
    border-bottom: 13px solid transparent; 

    25、12角星

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #burst-12 { 
    background: red; 
    width: 80px; 
    height: 80px; 
    position: relative; 
    text-align: center; 

    #burst-12:before, #burst-12:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 80px; 
    width: 80px; 
    background: red; 

    #burst-12:before { 
    -webkit-transform: rotate(30deg); 
    -moz-transform: rotate(30deg); 
    -ms-transform: rotate(30deg); 
    -o-transform: rotate(30deg); 
    transform: rotate(30deg); 

    #burst-12:after { 
    -webkit-transform: rotate(60deg); 
    -moz-transform: rotate(60deg); 
    -ms-transform: rotate(60deg); 
    -o-transform: rotate(60deg); 
    transform: rotate(60deg); 

    26、8角星

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #burst-8 { 
    background: red; 
    width: 80px; 
    height: 80px; 
    position: relative; 
    text-align: center; 
    -webkit-transform: rotate(20deg); 
    -moz-transform: rotate(20deg); 
    -ms-transform: rotate(20deg); 
    -o-transform: rotate(20eg); 
    transform: rotate(20deg); 

    #burst-8:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 80px; 
    width: 80px; 
    background: red; 
    -webkit-transform: rotate(135deg); 
    -moz-transform: rotate(135deg); 
    -ms-transform: rotate(135deg); 
    -o-transform: rotate(135deg); 
    transform: rotate(135deg); 

    27、钻石

    最终效果: 

     CSS代码如下:


    复制代码
    代码如下:

    #cut-diamond { 
    border-style: solid; 
    border-color: transparent transparent red transparent; 
    border-width: 0 25px 25px 25px; 
    height: 0; 
    width: 50px; 
    position: relative; 
    margin: 20px 0 50px 0; 

    #cut-diamond:after { 
    content: ""; 
    position: absolute; 
    top: 25px; 
    left: -25px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-color: red transparent transparent transparent; 
    border-width: 70px 50px 0 50px; 

    28、阴阳八卦(霸气的这个)

     

     

    CSS代码如下:


    复制代码
    代码如下:

    #yin-yang { 
    width: 96px; 
    height: 48px; 
    background: #eee; 
    border-color: red; 
    border-style: solid; 
    border-width: 2px 2px 50px 2px; 
    border-radius: 100%; 
    position: relative; 

    #yin-yang:before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    background: #eee; 
    border: 18px solid red; 
    border-radius: 100%; 
    width: 12px; 
    height: 12px; 

    #yin-yang:after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background: red; 
    border: 18px solid #eee; 
    border-radius:100%; 
    width: 12px; 
    height: 12px; 



    js学习了一个星期,刚入门,js真是一门方便好用的语言,感觉还有很多东西要学。以后继续努力!












    展开全文
  • html 前端心得

    2016-05-27 15:10:44
    .mui-radio img,.mui-radio h6 { display: inline-block; vertical-align: middle; } <div class=" mui-radio" style="height: 15vh;border-bottom: 1px solid #EFEFF4;"> <img src...
  • 前端心得笔记2

    2020-01-21 19:12:00
    第二篇笔记 通过视频学习,了解了网页的访问过程,比如当我点击一个页面之后,我要访问的地址就会被传输到服务器,服务器就向数据库里发出消息,寻求该地址下的数据,数据库查找数据存在,则把数据返回给服务器,...
  • 毕设项目前端心得

    千次阅读 2019-03-26 14:01:13
    防止覆盖div同时触发两个事件 输入框样式设置 <input id="search" placeholder="输入内容搜索"/>
  • 5年前端心得体会

    2021-02-24 14:34:35
    从事前端开发5年半了,可我现在内心慌得一批,没有核心竞争力,感觉和3年开发经验的差不多,没有记笔记的习惯,距离上次发文已近4年,这中间我都做了什么? 目前任职一家外包公司,月入左右,主要做一些管理页面的...
  • 学习前端心得

    2013-01-10 14:04:00
    就算是叫握现在立刻做个表单都不会,排版这个东西真的不容小看,后悔一味的一个头冲进js的世界,搞得现在开始做时,怎么下手都不知道,刚刚学习前端的同学,切记快速进入js,先把html和css搞懂,多做练习,不要弄得...
  • 初学web前端心得

    2015-10-31 09:31:20
    在去年笼统地学习过web前端的知识,但是那次是看书学习的,那本书很厚,也讲的很具体,但是讲的内容没有重点,常用和不常用的都放在一起讲,以至于看了很多的东西但是却有许多都用不上,那一次也基本就是自己看看...
  • 浅谈初学前端心得

    2018-10-24 13:38:25
    &...由于学习时间尚短,这篇文章只是分享自己对前端的初步认识,如果有说的不对或不准确的地方,还请大家批评指正。 &amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&
  • 2017我的前端心得体会

    千次阅读 2017-11-24 19:44:47
    记录当下对前端基础HTML、CSS和JavaScript的认识。希望几年后,再看这篇文章,能笑着想“当时可真菜”。
  • web前端心得记录

    千次阅读 2014-03-27 10:02:15
    1、jquery获取select的值 A A A 获取value值:  $("select[name=st]").val();...2、在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作 ...$('#checkbox').prop('checked')设
  • 作为一个本科学机械的跨考生,从来没有接触过前端技术,今天来谈一谈学习半个月以来的心得。 什么是前端 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术...
  • 文字不居中,给一个容器,文本行高 line-height和当前容器或者元素相同高度 文字就会剧中 布局小技巧,用父级容器去挤子集容器(块级元素),然后从左往右挤元素(或者从一方向往另一...等对前端有新的理解在更新 ...
  • 一.前言 ...然而实现动态页面或者实现交互功能就离不开JavaScript。所以在这里对半个月学习js做一个总结。 二....2.1 什么是JS JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,972
精华内容 1,188
关键字:

前端心得