进击的文文文
进击的文文文

【web前端】近期题目汇总

  汇集了一些这两周写的东西kkk←其实是舍友的一部分作业hhh  

  用到了几天前学的东西ovo~ 想练手的可以试试嗷 w！

  图片什么的可以从网上找 owo~这里就不放了！

目录

出现次数多的知识点

I. 音乐排行榜

❀知识点

❀效果图

❀代码

II. 注册界面

❀知识点

❀效果图

※问题→怎么让意见反馈显示在文本框左上角

❀代码

III. 悬停效果

❀知识点

❀效果图

❀代码

IV. 生如夏花

❀知识点

❀效果图

※问题 → 不用js能实现div高度自适应吗

❀代码

V. 画手机

❀知识点

❀效果图

❀代码

VI. 简单菜单

❀知识点

❀效果图

❀代码

出现次数多的知识点

基本标签和选择器、背景相关、边框、圆角矩形、定位、浮动，忘了的看这→标签、选择器、 背景，边框，圆角，定位，浮动

I. 音乐排行榜

❀知识点

列表，忘了的看这里ovo！→ 列表

新知识（引用的文章ovo）→radial-gradient（径向渐变）

❀效果图

【web前端】近期题目汇总_第1张图片

❀代码





    
    
    
    音乐排行榜
    



    

        

            

                
            

            

                

                    
   

                    
      成都-赵雷

                    
      半壶纱-刘珂矣

                    
      你还要我怎样-薛之谦

                    
      一生所爱-莫文蔚

                    
      Slow Ride-鹿晗

                

            


        

    




* {
    padding: 0;
    margin: 0;
    border: 0;
}

.box {
    width: 700px;
    height: 700px;
    border-radius: 400px;
    margin: 100px auto;
    overflow: hidden;
    border: #9b9b9b 8px solid;
    background-image: repeating-radial-gradient(circle at 50% 50%, #000, #545454 0.1%, #000 1.3%);
}

.bg {
    width: 365px;
    height: 560px;
    margin: 60px auto;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 2px;
    background-color: #545454;
    text-align: center;
}

.one {
    width: 365px;
    height: 220px;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
}

.one img {
    position: relative;
    left: 27%;
    top: 50%;
    transform: translate(-50%, -50%);
}

dt {
    width: 365px;
    height: 45px;
    background-color: #fff;
}

dt img {
    position: relative;
    left: 24%;
    top: 10%;
    transform: translate(-50%, -50%);
}

dd {
    height: 58px;
    width: 365px;
    border-top: 2px solid #fff;
    line-height: 58px;
    font-size: 20px;
    text-align: left;
    color: #fff;
}

dd>img {
    position: relative;
    top: 5%;
    width: 20px;
    height: 20px;
    text-align: center;
}

II. 注册界面

❀知识点

表单，忘了的看这里ovo！→ 表单

文本框相关操作→ 看IV和V

❀效果图

【web前端】近期题目汇总_第2张图片

※问题→怎么让意见反馈显示在文本框左上角

4.28答疑更新ovo！

  今天学了新知识，用vertical-align属性和resize就可以解决啦ovo，也可以加上outline！

❀代码





    
    
    
    用户注册
    



    

        
会员注册

        

                 
             * 性质:
            
             个人
            
             公司

     
             * 昵称：
            （中英文、数字）

      
             * 密码：
            （6位以上）


             * 电子邮箱：
            

      所在地：
            
            

  手机号码：
            

  幸运颜色：
            

  意见反馈：
            


        

        

                     
            
        

    




* {
    margin: 0;
    padding: 0;
    border: none;
}

form {
    margin: 0 auto;
}

.title {
    height: 60px;
    width: 950px;
    font-size: 25px;
    font-weight: 700;
    line-height: 60px;
    padding-left: 290px;
}

.list {
    width: 950px;
    height: 660px;
    background: url(../img/sy.png) no-repeat;
    margin: 100px auto;
    padding-top: 150px;
    padding-left: 130px;
}

input {
    color: darkgrey;
    font-size: 14px;
    height: 23px;
    line-height: 23px;
    margin: 0;
}

option {
    height: 23px;
}

.bth {
    width: 130px;
    height: 30px;
    background-color: aquamarine;
    color: #000;
}

.bg {
    height: 15px;
    border-radius: 3px;
    background-color: rgb(255, 162, 80);
    border: #fff 5px solid;
}

span {
    color: red;
}

.box {
    margin-left: 100px;
}

textarea {
    vertical-align: top;
    resize: none;
    outline: none;
    width: 375px;
    height: 75px;
    color: darkgray;
    font-size: 14px;
}

.s {
    position: relative;
    left: 25%;
}

III. 悬停效果

❀知识点

超链接相关，忘了的戳这→点伪类选择器

/* 超链接去下划线 */

a {
    text-decoration: none;
}

❀效果图

【web前端】近期题目汇总_第3张图片 鼠标进入前
​​
【web前端】近期题目汇总_第4张图片 鼠标进入图片范围

❀代码





    
    网页焦点图
    



    

        
        <
        >
        
    
            
  • 
                
            
    • 
            
  • 
                
            
    • 
            
  • 
                
            
    • 
            
  • 
                
            
    • 
            
  • 
                
            
    • 
            
  • 
                
            
    • 
        

    




    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }
    
    a {
        text-decoration: none;
        text-align: center;
        color: #fff;
        font-size: 36px;
        font-weight: 300;
        line-height: 125px;
    }
    
    #photo {
        position: relative;
        width: 580px;
        height: 200px;
        background-color: #fff;
        margin: 100px auto;
    }
    
    #photo .arrowleft {
        display: none;
        position: absolute;
        top: 50%;
        left: -20px;
        margin-top: -63px;
        width: 40px;
        height: 125px;
        border-radius: 5px;
        background: rgba(0, 0, 0, .5);
    }
    
    #photo .arrowright {
        display: none;
        position: absolute;
        top: 50%;
        right: -20px;
        margin-top: -63px;
        width: 40px;
        height: 125px;
        border-radius: 5px;
        background: rgba(0, 0, 0, .5);
    }
    
    #photo:hover .arrowleft,
    #photo:hover .arrowright {
        display: block;
    }
    
    ul {
        position: absolute;
        bottom: 15px;
        right: 55px;
        background-color: transparent;
    }
    
    .bigger {
        float: right;
        width: 20px;
        height: 10px;
        border-radius: 5px;
        background-color: dodgerblue;
        margin-left: 5px;
    }
    
    li {
        float: left;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        margin-left: 10px;
        background-color: #fff;
    }

IV. 生如夏花

❀知识点

浮动+布局+清除浮动、多背景图片→ 单背景图片迁移一下就可以了ovo ！

忘了的戳这→浮动+清除浮动+布局

❀效果图

 这个做的也有问题→全屏的时候看是没有问题的，但是缩小屏幕的话就会出现很严重的问题 qvq！原来我是想让大div的高度自适应来着，结果搞了半天没搞明白 qwq ，搜到的都是要用 js了。。可是我现在 css还没学完啊 ಥ_ಥ ，果然还是不太行！！继续加油吧 qvq！！！

※问题 → 不用js能实现div高度自适应吗

❀代码





    
    浮动网页多列布局
    



    

        
        

        
    

    
    

        
        

            

                
                

                    
找自己II

                    
2017年10月09日

                    
从

                    
未见过如此急骤又持久的秋雨，身体和心情的温度在出门的一瞬间就降到了冰点，瑟瑟发抖。尽管在假期开始前就能预料到美好的时光将会流逝得多么飞快，但是当一切戛然而止的时候，还是显得心理准备不足——难以坦然接受残酷的现实，更不愿立即回归枯燥的生活。好像2017年只剩下83天了，听上去很少，但毕竟也接近365天的四分之一。不知道在一年的尾声中等待我的将是什么，是开怀大笑还是阵痛煎熬。不敢奢望富贵荣华，但求能够寻到初心，认识自己。

                    阅读全文>>
                

            

            

                
                

                    
出于本能

                    
2017年09月02日

                    
在

                    
一个秋日的周末睡了整整一天，一睁眼竟已是傍晚。不知道刚刚过去的五天工作日中到底消耗了多少精力，亏欠了多少睡眠。很久没有睡得如此昏天黑地而心满意足了——不知从何时开始，本可以肆无忌惮地懒觉的时候，却总是过早惊醒，意犹未尽。听说人老了就会醒得很早，这让我感到惶恐。我宁愿每天叫醒我的不是梦想，而是闹钟。

                    阅读全文>>
                

            

            

                
                

                    
活着而已

                    
2017年08月26日

                    
接

                    
近半年没有更新了，说它荒芜到长草也不为过。不过这段时间确实发生了许多事情，经历了一些变更，导致大多时候身心俱疲，并没有闲情逸致写点什么东西。当然，也可以归结于懒。

                    阅读全文>>
                

            

            

                
                

                    
春去春又来

                    
2017年04月04日

                    
忙

                    
碌了近一个月，终于能够出来透口气了。北京的春天总是短暂，晴空万里时让人愉快，阴郁雾霾时让人心塞。所以每一次天朗气清都会不忍其入夜，每一回惠风和畅都会加倍地珍惜。然而，这些已经在身边变换了九年的季节和情绪即将离我而去了，也不知道南方的气候是否友好，是否需要挣扎一番才能适应。

                    阅读全文>>
                

            

            

                
                

                    
最后的黄昏

                    
2017年02月15日

                    
最

                    
近的生活显得繁琐而空虚，尽管心里知道有一大堆事需要在特定时间前完成，但还是经常不由自主地忙里偷闲并且自我安慰，这应该是拖延癌晚期的症状吧。也不知道哪里来的信心最终一定能顺利度过，大概是因为深知deadline才是第一生产力的真理。最近的生活显得繁琐而空虚，尽管心里知道有一大堆事需要在特定时间前完成，但还是经常不由自主地忙里偷闲并且自我安慰，这应该是拖延癌晚期的症状吧。也不知道哪里来的信心最终一定能顺利度过，大概是因为深知deadline才是第一生产力的真理。

                    阅读全文>>
                

            

        

        
        
    

    
    

        
作者：你的姓名 学号：你的学号 邮箱：你的email

        
©2017 江西师范大学计算机信息工程学院

    




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

a {
    text-decoration: none;
}

.bgc {
    height: 165px;
    background-image: url(../img/logo1.png), url(../img/flower3.png);
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
}

ul {
    height: 35px;
    background-color: darkorange;
}

nav ul li {
    float: left;
    width: 110px;
    height: 35px;
    background-color: darkorange;
    border-right: 2px solid #fff;
    line-height: 35px;
    text-align: center;
}

nav ul a {
    color: #000;
}

#wrapper {
    clear: both;
    margin: 0px auto;
    position: relative;
    width: 100%;
    height: 2000px;
}

main {
    float: left;
    margin-top: 3%;
    padding-left: 10%;
    border-right: 1px solid rgb(42, 39, 39);
    width: 65%;
    left: 0;
}

article img {
    float: left;
    width: 200px;
    height: 200px;
    border-radius: 20px;
    margin-top: 60px;
    margin-right: 50px;
}

article div {
    display: inline-block;
    width: 593px;
    height: 300px;
    margin-top: 60px;
    margin-bottom: 30px;
}

article .special {
    margin-top: 0;
}

.tou {
    color: brown;
    font-size: 30px;
    font-weight: 500;
    margin-right: -3px;
}

article div h3 {
    color: darkgrey;
    font-size: 14px;
    font-weight: 500;
    height: 50px;
}

article div p {
    display: inline;
    color: rgb(90, 88, 88);
}

article div a {
    float: right;
    height: 120px;
    line-height: 120px;
    color: rgb(161, 158, 158);
}

aside {
    position: relative;
    float: left;
    width: 35%;
    height: 100%;
    margin-top: 2%;
    padding-left: 3%;
}

aside .person {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    border: 6px solid rgb(190, 190, 190);
}

aside p {
    width: 200px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

aside h3 {
    margin-top: 30px;
    width: 180px;
    height: 55px;
    border-bottom: 1px solid #000;
    line-height: 60px;
    font-size: 18px;
}

aside ul {
    margin-top: 10px;
    height: 300px;
    background-color: transparent;
}

aside ul li {
    margin-bottom: 20px;
    height: 10px;
}

aside ul li a {
    color: rgb(161, 158, 158);
}

aside .flower {
    position: absolute;
    bottom: 1%;
    right: 0px;
}

footer {
    margin-top: 30px;
    border-top: 1px solid rgb(42, 39, 39);
    text-align: center;
    color: rgb(42, 39, 39);
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 14px;
}

V. 画手机

❀知识点

径向渐变（引用的文章ovo）→radial-gradient（径向渐变）

❀效果图

 里面的图标是老师给的 ovo 

【web前端】近期题目汇总_第5张图片

❀代码

 锁是输入法的表情里的 ovo 





    
    
    
    手机
    
    
    



    

        

        

        

        

            

        

            
            
            
            
编辑            删除           分享

        

        

        

        

        

        

    





* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

.box {
    position: relative;
    width: 350px;
    height: 700px;
    background-color: rgb(57, 56, 56);
    margin: 50px auto;
    border-radius: 30px;
    border: 5px solid rgb(57, 56, 56);
    box-shadow: 5px 3px 10px 10px gray;
}

.top1 {
    position: absolute;
    top: 1.5%;
    left: 20%;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 17px;
    font-size: 14px;
    text-align: center;
    border-radius: 50%;
    background-color: deepskyblue;
}

.top2 {
    position: absolute;
    top: 1.5%;
    left: 50%;
    margin-left: -45px;
    width: 90px;
    height: 20px;
    border-radius: 10px;
    background-color: darkgray;
}

.c1 {
    position: absolute;
    top: 8%;
    margin-top: -10px;
    width: 100%;
    height: 45px;
    font-size: 30px;
    color: lightgray;
    background-color: rgb(85, 85, 85);
}

.c1 .icon-arrow-left2 {
    position: absolute;
    top: 13%;
    left: 2%;
}

.c1 .icon-menu {
    position: absolute;
    top: 13%;
    right: 2%;
}

.c2bg {
    position: absolute;
    top: 13%;
    width: 100%;
    height: 470px;
    background-color: rgb(85, 85, 85);
}

.c2bg img {
    width: 100%;
    height: 99%;
}

.btm {
    position: absolute;
    top: 81%;
    width: 100%;
    height: 65px;
    font-size: 30px;
    color: lightgray;
    background-color: rgb(85, 85, 85);
    padding-top: 2px;
}

.btm span {
    height: 30px;
    width: 30%;
}

.btm .icon-quill {
    margin-left: 17%;
    margin-right: 15.5%;
}

.btm .icon-bin2 {
    margin-right: 15.5%;
}

.btm div {
    margin-left: 17%;
    margin-top: -10px;
    font-size: 16px;
}

.button {
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-image: radial-gradient(ellipse at center, #000, rgb(85, 85, 85));
    border: 2px solid lightgray;
}

.zuo1 {
    position: absolute;
    left: -3.5%;
    top: 15%;
    width: 8px;
    height: 40px;
    border-radius: 4px;
    background-color: rgb(72, 72, 72);
}

.zuo2 {
    position: absolute;
    left: -3.5%;
    top: 25%;
    width: 8px;
    height: 65px;
    border-radius: 4px;
    background-color: rgb(72, 72, 72);
}

.zuo3 {
    position: absolute;
    left: -3.5%;
    top: 40%;
    width: 8px;
    height: 50px;
    border-radius: 4px;
    background-color: rgb(72, 72, 72);
}

.you {
    position: absolute;
    right: -4%;
    top: 30%;
    width: 8px;
    height: 80px;
    border-radius: 4px;
    background-color: rgb(72, 72, 72);
}

VI. 简单菜单

❀知识点

超链接相关、合并外边距， 忘了的戳这→点伪类选择器，外边距

❀效果图

【web前端】近期题目汇总_第6张图片

【web前端】近期题目汇总_第7张图片 鼠标进入“学校概况”区域

【web前端】近期题目汇总_第8张图片 鼠标移动至“学校简介”区域

❀代码





    
    二级菜单
    



    


        
    

    

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro in aliquam, mollitia quos aspernatur, quibusdam laborum rem cumque blanditiis saepe sequi pariatur architecto magnam laboriosam dolor perspiciatis beatae asperiores voluptates quaerat. Ad
        cum aspernatur expedita neque, quos ratione labore quaerat vel accusamus unde laboriosam! Fuga aliquid illo ex velit praesentium reiciendis laborum maiores qui, molestias commodi eaque eligendi molestiae porro sit expedita dolor officia facilis
        laboriosam ullam reprehenderit. Totam praesentium nostrum dolorem facere temporibus perspiciatis ipsum commodi explicabo odit qui dolorum minima expedita culpa, assumenda deleniti, animi! Temporibus sed nobis ducimus perspiciatis reprehenderit
        quo cum, ipsam dolorum enim quas vel.
    




    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }
    
    header {
        position: relative;
        margin: 100px auto;
        margin-bottom: 0;
        width: 1260px;
        font-size: 15px;
    }
    
    a {
        text-decoration: none;
    }
    
    nav {
        margin-top: -4px;
    }
    
    .level1 li {
        position: relative;
        float: left;
        width: 105px;
        height: 40px;
        background-color: brown;
        border-bottom: 3px solid gray;
        text-align: center;
        line-height: 40px;
    }
    
    .level1 li a {
        color: #fff;
    }
    
    ul .level2 li {
        display: none;
        z-index: 1;
        width: 100px;
        margin-top: -3px;
        margin-left: 25%;
        background-color: rgb(201, 188, 69);
        border: #fff 1px solid;
        border-collapse: collapse;
        text-align: left;
        text-indent: 6px;
    }
    
    .level2 li a {
        color: #000;
    }
    
    .level1 li:hover ul.level2 li {
        display: block;
    }
    
    .level1 li:hover {
        background-color: lightcoral;
    }
    
    .level1 li:hover a {
        color: #000;
    }
    
    .level2 li:hover {
        background-color: rgb(125, 103, 215);
    }
    
    p {
        width: 1253px;
        margin: 0 auto;
        font-size: 20px;
    }

  恭喜看到这的小伙伴已经看完这些练习了ovo~！

 如果做了的话就更好了嗷 w！！

这一篇写的真的好累 qvq！

有用的话就点赞评论收藏哦！！  

你可能感兴趣的:(web,前端,css,css3,html)

  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • Google earth studio 简介 陟彼高冈yu 旅游
    GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
  • PHP环境搭建详细教程 好看资源平台 前端php
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • git - Webhook让部署自动化 大猪大猪
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验 张风捷特烈 iderust开发语言后端
    theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
  • Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
  • Java爬虫框架（一）--架构设计 狼图腾-狼之传说 java框架java任务html解析器存储电子商务
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
  • Java：爬虫框架 dingcho Javajava爬虫
    一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
  • MongoDB知识概括 GeorgeLin98 持久层mongodb
    MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • Python实现下载当前年份的谷歌影像 sand&wich python开发语言
    在GIS项目和地图应用中，获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据，并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括：坐标转换：支持WGS-84与WebMercator投影之间转换，以及处理中国GCJ-02偏移。自动化下载：多线程下载地图瓦片，提高效率。图像
  • Spring MVC 全面指南：从入门到精通的详细解析 一杯梅子酱 技术栈学习springmvcjava
    引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
  • Spring Boot中实现跨域请求 BABA8891 springboot后端java
    在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.
  • WebMagic：强大的Java爬虫框架解析与实战 Aaron_945 Javajava爬虫开发语言
    文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • JAVA中的Enum 周凡杨 javaenum枚举
    Enum是计算机编程语言中的一种数据类型---枚举类型。 在实际问题中，有些变量的取值被限定在一个有限的范围内。     例如，一个星期内只有七天 我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday
  • 赶集网mysql开发36条军规 Bill_chen mysql业务架构设计mysql调优mysql性能优化
    (一)核心军规 (1)不在数据库做运算    cpu计算务必移至业务层； (2)控制单表数据量    int型不超过1000w，含char则不超过500w；    合理分表；    限制单库表数量在300以内； (3)控制列数量    字段少而精，字段数建议在20以内
  • Shell test命令 daizj shell字符串test数字文件比较
    Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真 实例演示： num1=100 num2=100if test $[num1]
  • XFire框架实现WebService(二) 周凡杨 javawebservice
       有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)： 两个java bean类： Course.java    package cn.com.bean; public class Course {     private
  • 重绘之画图板 朱辉辉33 画图板
           上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。        画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就
  • Java的IO流 西蜀石兰 java
    刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。 每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？ 答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件
  • No matching PlatformTransactionManager bean found for qualifier 'add' - neither 林鹤霄
    java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match!   网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是
  • Row size too large (> 8126). Changing some columns to TEXT or BLOB aigo column
    原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large   异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM
  • JS 格式化时间 alxw4616 JavaScript
    /** * 格式化时间 2013/6/13 by 半仙 [email protected] * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm
  • 队列中数据的移除问题 百合不是茶 队列移除
         队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除,  代码如下;      // package com.Thread0715.com; import java.util.ArrayList; public class Threa
  • Runnable接口使用实例 bijian1013 javathreadRunnablejava多线程
    Runnable接口 a.       该接口只有一个方法：public void run(); b.       实现该接口的类必须覆盖该run方法 c.       实现了Runnable接口的类并不具有任何天
  • oracle里的extend详解 bijian1013 oracle数据库extend
    扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); --
  • 【httpclient】httpclient发送表单POST请求 bit1129 httpclient
    浏览器Form Post请求 浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form
  • 【Hive十三】Hive读写Avro格式的数据 bit1129 hive
     1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype      2. 创建avro格式的数据表   hive> CREATE TABLE avro_table(age INT, name STRING)STORE
  • nginx+lua+redis自动识别封解禁频繁访问IP ronin47
    在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段 内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在 指定的封禁时间后实行自动解封的目的。 一、安装环境： CentOS x64 release 6.4(Fin
  • java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历 bylijinnan java
    import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,
  • Spring源码学习-XML 配置方式的IoC容器启动过程分析 bylijinnan javaspringIOC
    以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q
  • [科研与项目]民营企业请慎重参与军事科技工程 comsci 企业
         军事科研工程和项目 并非要用最先进，最时髦的技术，而是要做到“万无一失”    而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对
  • spring 定时器-两种方式 cuityang springquartz定时器
    方式一： 间隔一定时间 运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule
  • 简述一下关于BroadView站点的相关设计 damoqiongqiu view
    终于弄上线了，累趴，戳这里http://www.broadview.com.cn   简述一下相关的技术点   前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。   后端：U
  • 运维 PHP问题汇总 dcj3sjt126com windows2003
    1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页 解决方法： 后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。 后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。   2、解决PHP168超级管理员上传图片提示你的空间不足 网站是用PHP168做的，反映使用管理员在后台无法
  • mac 下 安装php扩展 - mcrypt dcj3sjt126com PHP
    MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下： 下载并解压libmcrypt-2.5.8.tar.gz。 在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --
  • MongoDB更新文档 [四] eksliang mongodbMongodb更新文档
    MongoDB更新文档 转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。 语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义 参数   
  • Linux下的解压，移除，复制，查看tomcat命令 y806839048 tomcat
    重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。 有问题不明的先注掉   cp /opt/tomcat-6.0.44/webapps/g
  • Spring之使用事务缘由(3-XML实现) ihuning spring
      用事务通知声明式地管理事务   事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:
  • GCD使用经验与技巧浅谈 啸笑天 GC
    前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量 这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1
  • linux（Ubuntu）下常用命令备忘录1 macroli linux工作ubuntu
    在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息：  ls / 显示/.下的所有文件和目录  ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文
  • nodejs同步操作mysql qiaolevip 学习永无止境每天进步一点点mysqlnodejs
    // db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 });
  • 一起学Hive系列文章 superlxw1234 hiveHive入门
      [一起学Hive]系列文章 目录贴，入门Hive，持续更新中。   [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive
  • Spring开发利器：Spring Tool Suite 3.7.0 发布 wiselyman spring
    Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。   在3.7.0版本主要做了如下的更新：   将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他