咋的啥名都用不了呢~
咋的啥名都用不了呢~

前端作业（7）

品优购项目总练习

总结：建议还是跟着pink老师做吧，本人是两种结合，即一边跟着其他博主写的代码打，一边跟着老师打码，我的话就是打完跟一遍老师的思路，理一下思路，有时候，好吧(~ ~)经常打错，然后还要自己找自己的代码那里打错了，就一个字‘累’，两个字‘累啊’，真是痛并快乐着，痛就是找的要死要活的，有时候就只是一个空格的事，然后嘞，把全部代码都看了一遍，有时候是把类名写错啦，大家在打的时候可以从这入手，我的大几率错误都这样；快乐的话就是，找到并改正好喽！

因为没有那些图标和品优购的图，所以我做的会有些不一样，差不多都是用ps截图的，也因此嘞，我的作品有点糊(所以如果屏幕前的你也想截图的话，还是找个清晰点的截图吧，截老师的图也还OK，咳咳，有几个图标，我是这么干的)，好吧，说白了，我就是懒得去找资料啦！

所用的的文件：

前端作业（7）_第1张图片

前端作业（7）_第2张图片 

前端作业（7）_第3张图片

 

 

前端作业（7）_第4张图片

 

 index.html




    
    
    
    品优购商城-正品低价、品质保障、配送及时、轻松购物！
    
    
    
    
    
    
    
    
    
    
    
    


    
    

        

            

                
            

            

                
    
                    
  • 我的订单
    • 
                    
                    
  • 
                    
  • 我的品优购
    • 
                    
  • 
                    
  • 品优购会员
    • 
                    
  • 
                    
  • 企业采购
    • 
                    
  • 
                    
  • 关注品优购
    • 
                    
  • 
                    
  • 客户服务
    • 
                    
  • 
                    
  • 网址导航
    • 
                

            

        

    

    
    

        
     
     
     

        
        
     

     
     

            优惠购首发
            亿元优惠
            9.9团购
            美团99减30
            办公用品
            电脑
            通信
     

     
     

        我的购物车
        8
     

    

    
    

        

            

                

                    全部商品分类
                

                

                    
                

            

            

                
            

        

    

    
    

        

            

                
    
                    
    • 
                

            

            

                

                    

                        
品优购快报

                        更多
                    

                    

                        
                    

                

                

                    
    
                        
  • 
                            
                            
    话费
    
                        
    • 
                        
  • 
                            
                            
    机票
    
                        
    • 
                        
  • 
                            
                            
    电影票
    
                        
    • 
                        
  • 
                            
                            
    游戏
    
                        
    • 
                        
  • 
                            
                            
    机票
    
                        
    • 
                        
  • 
                            
                            
    加油卡
    
                        
    • 
                        
  • 
                            
                            
    机票
    
                        
    • 
                        
  • 
                            
                            
    酒店
    
                        
    • 
                        
  • 
                            
                            
    机票
    
                        
    • 
                        
  • 
                            
                            
    火车票
    
                        
    • 
                        
  • 
                            
                            
    礼品卡
    
                        
    • 
                        
  • 
                            
                            
    白条
    
                        
    • 
                    

                

                

                    
                

            

        

    

    
    

        

            
        

        

            
    
                
    • 
                
    • 
                
    • 
                
    • 
            

        

    

    
    

        
        

            

                
家用电器

                

                    
                

            

            

                

                    

                        

                            
                            
                                
                            
                        

                        

                            
                                
                            
                        

                        

                            
                                
                            
                            
                                
                            
                        

                        

                            
                                
                            
                        

                        

                            
                                
                            
                            
                                
                            
                        

                    

                

            

        

        
        

            

                
手机通讯

index.css:

/* 首页专有模块 */
.main {
    width: 980px;
    height: 455px;
    background-color: #fff;
    margin-left: 220px;
    margin-top: 10px;
}
.main .focus {
    float: left;
    width: 721px;
    height: 455px;
}
.newsflash {
    float: right;
    width: 250px;
    height: 455px;
    border: 1px solid #e4e4e4;
}
.news {
    height: 165px;
    width: 250px;
    border-bottom: 1px solid #e4e4e4;
}
.news-hd {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}
.news-hd h5 {
    float: left;
    font-size: 14px;
}
.news-hd .more {
    float: right;
}
.news-hd .more::after {
    content: '\e90b';
    font-family: 'icomoon';
}
.news-bd {
    padding: 5px 15px 0;
}
.news-bd ul li {
    height: 24px;
    line-height: 24px;
    /* 超出的文字显示省略号 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lifeservice {
    overflow: hidden;
    height: 209px;
    border-bottom: 1px solid #e4e4e4;
    border-top: 0;
}
.lifeservice ul {
    width: 252px;
}
.lifeservice ul li {
    float: left;
    width: 63px;
    height: 71px;
    text-align: center;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
} 
.lifeservice ul li i {
    display: inline-block;
    width: 24px;
    height: 28px;
    margin-top: 12px;
    /* 我的材料都是截图 所以这个用不了 害 累死个人了 菜鸟的材料受限就只能这样了
    background: url(../样式类图片文件夹（image）/two.jpg) ; */
}
.bargain img {
    margin-top: 5px;
}
/* 推荐模块 */
.recom {
    height: 163px;
    background-color: #ebebeb;
    margin-top: 12px;
}
.recom_hd {
    float: left;
    width: 205px;
    height: 163px;
    text-align: center;
    line-height: 163px;
    background-color: #5c5251;
}
.recom_bd {
    float: left;
}
.recom_bd ul li {
    position: relative;
    float: left;
}
.recom_bd ul li img {
    width: 248px;
    height: 163px;
}
.recom_bd ul li:nth-child(-n+3)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}
/* 1楼家用电器模块 */
.box_hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
}
.box_hd h3 {
    float: left;
    font-size: 18px;
    font-weight: 400;
    color: #c81623;
}
.tab_list {
    float: right;
    line-height: 30px;
}
.tab_list ul li {
    float: left;
}
.tab_list ul li a {
    margin: 0 15px;
}
.floor .w {
    margin-top: 30px;
}
.box_bd {
    height: 361px;
}
.table_list_item>div {
    float: left;
    height: 361px;
}
.col_210 {
    width: 210px;
    text-align: center;
    background-color: #f9f9f9;
}
.col_210 ul {
    padding-left: 12px;
}
.col_210 ul li {
    float: left;
    width: 85px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
    border-bottom: 1px solid #ccc;
}
.col_329 {
    width: 329px;
}
.col_221 {
    text-align: center;
    width: 221px;
    border-right: 1px solid #ccc;
}
/* .col_221 a img {
    margin-top: 26px;
} */
.col_219 {
    text-align: center;
    width: 219px;
}
/* .col_219 a img {
    margin-top: 26px;
} */
/* .col_221 .h_73 {
    margin-top: 73px;
} */
.bb {
    display: block;
    border-bottom: 1px solid #ccc;
}

base.css:

/* 所有标签的内外边距清零 */
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
/* 斜体文字不倾斜 */
em,
i {
    font-style:normal;
}
/* 去掉li的小圆点 */
li {
    list-style:none;
}
img {
    /* border：0照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border:0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle;
}
button {
    /* 当鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor:pointer;
}
a {
    color:#666;
    text-decoration:none;
}
a:hover {
    color:#c81623;
}
button,
input {
    font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    /* 默认有黑色边框，去掉 */
    border: 0;
    outline: none;
}
body {
    /* css 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing:antialiased;
    background-color:#fff;                                             
    /* "\5B8B\4F53"：宋体 兼容性up */
    font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666;
}
.hide,
.none {
    display:none;
}
/* 清除浮动 */
.clear-fix:after {
    visibility:hidden;
    clear:both;
    display:block;
    content:".";
    height:0;
}
.clearfix {
    *zoom:1;
}

common.css:

/* 声明字体图标 这里要注意路径变化 */
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?lx66hn');
    src:  url('../fonts/icomoon.eot?lx66hn#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?lx66hn') format('truetype'),
      url('../fonts/icomoon.woff?lx66hn') format('woff'),
      url('../fonts/icomoon.svg?lx66hn#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.style_red {
    color: #c81623;
}
/* 快捷导航模块 */
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}
.shortcut ul li {
    float: left;
}
/* 选择所有的偶数li */
.shortcut .fr ul li:nth-child(even)  {
    width: 1px;
    height: 12px;
          /* 上 左右 下 */
    margin: 9px 15px 0;
    background-color: #666;
}
.arrow-icon::after {
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}
/* 整个header头部模块 */
.header {
    position: relative;
    /* 这个是它本来的值，我的是因为没有品优的图片文档，就直接截图
    所以有一些值是不一样的，还请见谅，不过一不一样关系不大，会就好
    啦 height: 105px; */
    height: 125px;
}
/* header中的logo部分 */
.logo {
    position: absolute;
    top: 25px;
    /* width: 171px; */
    width: 272px;
    /* height: 61px; */
    height: 86px;
}
.logo a {
    display: block;
    width: 171px;
    height: 61px;
    /* background: url(../样式类图片文件夹（image）/logo.png) no-repeat; */
    /* 京东做法 */
    font-size: 0;
    /* 淘宝做法 */
    /* text-indent: -999px;
    overflow: hidden; */
}
/* 搜索模块 */
.search {
    position: absolute;
    top: 25px;
    left: 346px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}
.search input {
    float: left;
    height: 32px;
    width: 454px;
    padding-left: 10px;
}
.search button {
    float: left;
    height: 32px;
    width: 80px;
    font-size: 16px;
    color: #fff;
    background-color: #b1191a;
}
/* hotwords模块 */
.hotwords {
    position: absolute;
    top: 66px;
    left: 346px;
}
.hotwords a {
    margin: 0 10px;
}
.shopcar {
    position: absolute;
    top: 25px;
    right: 60px;
    height: 35px;
    /* 字体垂直居中 */
    line-height: 35px;
    text-align: 35px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}
.shopcar::before {
    content: '\e920';
    font-family: 'icomoon';
    margin-left: 5px;
    color: #b1191a;
}
.shopcar::after {
    content: '\e93a';
    font-family: 'icomoon';
    margin-left: 10px;
}
.count {
    position: absolute;
    top: -5px;
    left: 105px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    padding: 0 5px;
    border-radius: 7px 7px 7px 0;
}
/* nav模块制作 */
.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}
.nav .dropdown {
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;
}
.nav .navitems {
    float: left;
}
.dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
}
.dropdown .dd {
    height: 465px;
    width: 210px;
    background-color: #c81623;
    margin-top: 2px;
}
.dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
}
.dropdown .dd ul li::after {
    position: absolute;
    top: 1px;
    right: 10px;
    font-family: 'icomoon';
    content: '\e90b';
    color: #fff;
    font-size: 14px;
}
.dropdown .dd ul li a {
    font-size: 14px;
    color: #fff;
}
.dropdown .dd ul li:hover {
    background-color: #fff;
}
.dropdown .dd ul li:hover a {
    color: #c81623;
}
.navitems ul li {
    float: left;
}
.navitems ul li a {
    display: block;
    height: 47px;
    line-height: 47px;
    font-size: 16px;
    padding: 0 25px;
}
/* 底部模块的制作 */
.footer {
    float: left;
    height: 415px;
    background-color: #f5f5f5;
    margin-top: 30px;
}
.mod_service {
    height: 120px;
    border-bottom: 1px solid #ccc;
}
.mod_service ul li {
    float: left;
    width: 300px;
    height: 50px;
    margin-top: 35px;
    padding-left: 35px;
}
.footer .mod_service ul li h5 {
    float: left;
    height: 66px;
    width: 64px;
    margin-right: 8px;
    margin-top: -14px;
    border-radius: 13px 13px 39% 39%;
    background: url(../样式类图片文件夹（image）/图标.jpg) no-repeat -982px -247px;
}
.service_txt h4 {
    font-size: 14px;
}
.service_txt p {
    font-size: 12px;
}
.mod_help {
    height: 185px;
    padding: 35px;
    border-bottom: 1px solid #ccc;
}
.mod_help dl {
    float: left;
    width: 200px;
}
.mod_help dl:last-child {
    float: left;
    width: 90px;
    margin-top: 6px;
    text-align: center;
}
.mod_help dl dt {
    font-size: 16px;
    margin-bottom: 10px;
}
.mod_help dl dd {
    font-size: 12px;
}
.mod_copyright {
    text-align: center;
    margin-top: 20px;
}
.mod_copyright .links {
    margin-bottom: 15px;
    line-height: 2px;
}

前端作业（7）_第5张图片

 

list.html:




    
    
    
    列表页-正品低价、品质保障、配送及时、轻松购物！
    
    
    
    
    
    
    
    
    
    
    
    


    
    

        
     
     
     

        
     

     
     

        
        
     

     
     

            优惠购首发
            亿元优惠
            9.9团购
            美团99减30
            办公用品
            电脑
            通信
     

     
     

        我的购物车
        8
     

    

    
    

        

            

                
            

            

                
            

        

    

    
    

        

            
        

        

            
    
                
    • 
                
    • 
                
    • 
                
    • 
                
    • 
                
    • 
                
    • 
                
    •

list.css

/* 列表页专业的css样式 */
.nav {
    overflow: hidden;
}
.sk {
    position: absolute;
    left: 190px;
    top: 40px;
    border-left: 1px solid #c81523;
    padding: 3px 0 0 14px;
}
.sk {
    position: absolute;
    left: 190px;
    top: 40px;
    padding: 3px 0 0 14px;
}
.sk_list {
    float: left;
}
.sk_list ul li {
    float: left;
}
.sk_list ul li a {
    display: block;
    line-height: 47px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
.sk_con {
    float: left;
}
.sk_con ul li {
    float: left;
}
.sk_con ul li a {
    display: block;
    line-height: 49px;
    padding: 0 20px;
    font-size: 14px;
}
.sk_con ul li:last-child a::after {
    content: '\e908';
    font-family: icomoon;
}
/* 列表页主体部分 */
.sk_bd {
    margin-bottom: 283px;
}
.sk_bd ul li {
    float: left;
    overflow: hidden;
    width: 290px;
    height: 460px;
    margin-right: 13px;
    /* 小li本身有边框 */
    border: 1px solid transparent;
}
.sk_bd ul li:nth-child(4n) {
    margin-right: 0;
}
.sk_bd ul li:hover {
    border: 1px solid #c81523;
}
.sk_bd ul li p {
    margin-left: 12px;
    font-size: 14px;
    color: #666;
}
.sk_bd ul li .price {
    position: relative;
    margin-left: 12px;
}
.sk_bd ul li .price h3 {
    margin-top: 5px;
    font-size: 22px;
    color: #e60012;
}
.sk_bd ul li .price h4 {
    position: absolute;
    left: 75px;
    top: 8px;
    font-size: 14px;
    color: #a4a4a4;
    text-decoration: line-through;
}
.sk_bd ul li .yishou {
    height: 15px;
    font-size: 14px;
    line-height: 24px;
    padding-bottom: 0;
    margin-left: 12px;
}
.sk_bd ul li .yishou i {
    display: block;
    height: 10px;
    width: 116px;
    border-radius: 6px 0 0 6px;
    margin-left: 10px;
    border: 1px solid #ed282e;
    background-color: #ed282e;
}
.sk_bd ul li .yishou div {
    display: block;
    height: 10px;
    width: 16px;
    border-radius: 0 6px 6px 0;
    border: 1px solid #fff;
    margin-left: -10px;
    margin-right: 10px;
}
.sk_bd ul li .yishou p {
    display: inline;
    font-size: 14px;
    margin-left: 0;
    color: #ed282e;
}

.sk_bd ul li .qianguo a {
    display: block;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    background-color: #ed282e;
    margin-top: 25px;
}

前端作业（7）_第6张图片

 

register.html:




    
    
    
    个人注册
    
    
    
    
    
    


    

        

            
        

        

            
注册新用户
                
            

            

                

                    
    
                        
  • 
                             
                                
                             手机号码格式不正确，请重新输入
    • 
                        
  • 
                             
                                
                             短信验证码输入正确
    • 
                        
  • 
                             
                                
                             手机号码格式不正确，请重新输入
    • 
                        
  • 安全程度 弱 中 强
    • 
                        
  • 
                             
                                
                             手机号码格式不正确，请重新输入
    • 
                        
  •  
                            同意协议并注册 《知晓用户协议》
                        
    • 
                        
  • 
                            
                        
    •

register.css:

.w {
    width: 1200px;
    margin: 0 auto;
}
header {
    height: 84px;
    border-bottom: 2px solid #c81523;
}
.logo {
    padding-top: 18px;
}
.registerarea {
    height: 522px;
    border: 1px solid #ccc;
    margin-top: 20px;
}
.registerarea h3 {
    height: 42px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    line-height: 42px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 400;
}
.login {
    float: right;
    font-size: 14px;
}
.login a {
    color: #c81523;
}
.reg_form {
    width: 600px;
    margin: 50px auto 0;
}
.reg_form ul li {
    margin-bottom: 20px;
}
.reg_form ul li label {
    display: inline-block;
    width: 88px;
    text-align: right;
}
.reg_form ul li .inp {
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}
.error {
    padding-left: 10px;
    color: #c81523;
}
.error_icon img,
.success_icon img  {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-top: -2px;
    border-radius: 100px ;
}
.success {
    padding-left: 10px;
    color: green;
}
.safe {
    padding-left: 175px;
}
.safe em{
    padding: 0 12px;
    color: #fff;
}
.ruo {
     background-color: #de1111;
}
.zhong {
    background-color: #40b83f;
}
.qiang {
    background-color: #f79100;
}
.agree {
    padding-left: 95px;
}
.agree input {
    vertical-align: middle;
}
.agree a {
    color: #1ba1e6;
}
.btn {
    width: 200px;
    height: 34px;
    background-color: #c81623;
    font-size: 14px;
    color: #fff;
    margin: 30px 0 0 70px;
}
.mod_copyright {
    text-align: center;
    margin-top: 20px;
}
.mod_copyright .links {
    margin-bottom: 15px;
    line-height: 2px;
}

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

  • ArcGIS 10.1 Engine Developer Kit 和 ArcGIS 10.1 Engine 快速入门指南 冷月宫主 arcinfo
    http://resources.arcgis.com/zh-cn/help/quick-start-guides/10.1/index.html#//01q100000004000000ArcGIS10.1EngineDeveloperKit和ArcGIS10.1Engine快速入门指南
  • 工程化与框架系列（9）--前端监控体系 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端
    前端监控体系前端监控是现代Web应用不可或缺的组成部分，它帮助我们了解应用的运行状况、用户行为和潜在问题。本文将详细介绍如何构建一个完整的前端监控体系。监控体系概述小知识：前端监控体系通常包括性能监控、错误监控、用户行为分析和业务监控四大模块，通过这些数据可以全面了解应用的健康状况和用户体验。为什么需要前端监控在复杂的前端应用中，监控系统能够帮助我们：及时发现问题捕获JS运行时错误监控API请求异
  • 工程化与框架系列（36）--前端监控告警实践 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端
    前端监控告警实践引言前端监控是保障应用质量和用户体验的重要手段。本文将深入探讨前端监控的实现方案，包括性能监控、错误监控、用户行为监控等方面，以及相应的告警机制。监控系统概述前端监控系统主要包括以下方面：性能监控：页面加载、资源加载、接口性能等错误监控：JS错误、接口错误、资源加载错误等用户行为：PV/UV、点击行为、路由变化等业务监控：转化率、留存率、业务指标等告警系统：规则配置、通知分发、告警
  • 企业信息化整体架构图 weixin_33937913 系统架构
    今天无意间发现一张企业信息化的图，放在这里以后参考。CollaboraticeCommerce转载于:https://www.cnblogs.com/Masterpiece/archive/2004/12/29/83696.html
  • Python与C ++开发匿名捐赠1对1管理APP Geeker-2025 pythonc++
    开发一款用于**匿名捐赠1对1管理**的App，结合Python和C++的优势，可以实现高效的后端数据处理、实时的捐赠监控以及用户友好的前端界面。以下是一个详细的开发方案，涵盖技术选型、功能模块、开发步骤等内容。##技术选型###后端（Python）-**编程语言**：Python-**Web框架**：Django或Flask-**数据库**：PostgreSQL或MySQL-**实时通信**：W
  • SvelteKit 最新中文文档教程（5）—— 页面选项
    前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我
  • Angular 17开发中的SCSS编译问题解决方案 t0_54coder 编程问题解决手册angular.jsscss前端个人开发
    在Angular的开发过程中，我们常常会遇到一些难以预料的编译问题。特别是当我们从Angular16升级到Angular17时，可能会遇到一些新的挑战。今天，我们来探讨一下如何解决在使用ngserve进行开发时，.scss文件的编译错误问题。问题描述当使用ngserve命令进行开发时，如果在编辑.scss文件时出现了编译错误，即使你已经修复了语法错误，AngularCLI也不会自动重新编译。结果是
  • react实现虚拟列表 束尘 react.js前端javascript
    在前端开发中，当一次性渲染大量数据时，直接渲染所有DOM节点，会造成渲染过慢，浏览器卡顿的现象，导致用户体验不佳，为了改善这种情况，提出使用虚拟列表的方式进行渲染。虚拟列表的实现思路1.只渲染可见区域：计算当前可见区域的起始索引和结束索引。只渲染可见区域内的列表项，其他区域用空白占位。2.动态计算高度：如果列表项高度固定，可以直接计算。如果列表项高度不固定，需要动态计算每个列表项的高度。3.滚动时
  • 前端大文件上传,分片方式上传 Sunsit 前端开发vue前端javascript开发语言
    前端大文件分片上传文件上传超时：原因是前端请求框架限制最大请求时长，后端设置了接口访问的超时时间，或者是nginx（或其它代理/网关）限制了最大请求时长。文件大小超限：原因在于后端对单个请求大小做了限制，一般nginx和server都会做这个限制。上传时间过久（想想10个g的文件上传，这不得花个几个小时的时间）由于各种网络原因上传失败，且失败之后需要从头开始整体思路前端根据代码中设置好的分片大小将
  • 【Python】爬取高校数据（名字，院校特色，所在地，性质）。可用于判断高校是否为双一流，本科/专科等分析 llzcxdb Pythonpython开发语言爬虫
    源网站：http://college.gaokao.com/schlist/p1利用Python的lxml库进行html解析，源代码：importrequestsfromlxmlimportetreeimportpandasaspdimportcsv#请求URLurl='http://college.gaokao.com/schlist/p'#构建请求头headers={'User-Agent':
  • JavaScript基础-获取元素 難釋懷 javascript开发语言
    在Web开发中，使用JavaScript动态地访问和操作网页上的元素是一项基本技能。通过获取页面上的特定元素，我们可以对其进行各种操作，比如修改内容、样式或属性等。本文将详细介绍几种获取DOM元素的方法，并探讨它们的特点及适用场景。一、为什么需要获取元素？在现代Web应用中，交互性是关键。无论是响应用户的输入、更新页面内容还是实现动画效果，首先都需要定位到相关的HTML元素。掌握不同的获取元素的方
  • 前端大文件分片上传 北凉柿子i 前端javascript
    1.分片上传整体流程开始上传：前端启动文件分片上传。后端返回唯一标识。分片上传：获取到上传的文件，然后设置一个固定的分片大小，将文件切成多个小片，计算出每一个分片的MD5值（32位）。将每个分片的内容和MD5标识符一同上传至服务器。服务端接收每个分片及相关信息后，通过对每个分片进行校验，来确保分片的完整性。结束上传：当分片上传完毕或者前端取消上传时，调用结束上传接口结束此次文件上传操作。结束上传时
  • 【脑洞小剧场】零帧起手创业小公司之 新人入职的一天 Foyo Designer 技术职场小剧职场和发展程序人生学习方法改行学it创业创新远程工作程序员创富
    点击查看小剧场合集https://blog.csdn.net/foyodesigner/category_12896948.html阳光明媚的早晨，段萌儿怀揣着对新工作的无限憧憬，踏入了这家充满未知的小公司。然而，她万万没想到，第一天上班就迎来了一场“惊悚”之旅。场景一：段萌儿的“惊悚”发现段萌儿，新入职的前端工程师，一早便迫不及待地打开了公司的代码库，想要一窥项目的“真容”。然而，当她看到代码库
  • 前端大文件上传（分片上传）与下载 束尘 前端
    文章目录一、问题二、思路1、选择文件2、校验文件是否符合规范3、文件切片上传4、分片上传注意点5、大文件下载一、问题日常业务中难免出现前端需要向后端传输大型文件的情况，这时单次的请求不能满足传输大文件的需求，就需要用到分片上传业务需求为：用户可以上传小于20G的镜像文件，并进显示当前上传进度前端：vue3.x+ElementPlus组件+axios二、思路解决思路简单为前端选择文件后读取到文件的基
  • html重点知识总结 *goliter * html前端
    html重点知识一直在网上看过许多不同的前端资料，但是总觉的只是单单的阅读和记忆不能够真正的加深自己的知识理解，所以开始尝试自己在不查看其他一切资料的情况下对自己了解的知识做一个总结（顺序或许有点乱），如果之后发现有不足再来补充，我相信输出才是最好的输入！！！H5新增内容语义化标签：h5新增了一系列语义化标签，他们本质上和一般的div标签没有区别，但是在语义上有不同。header：专门指页面的顶部
  • lxml模块的学习 bad kid's cute lxml模块lxml模块python爬虫
    1.lxml的认识在前面学习了xpath的语法，那么在代码中我们如何使用xpath呢，对应的我们需要lxm博文链接：xpath和lxml类库安装方式：pipinstalllxml2.lxml的使用1.导入lxml的etree库(导入没有提示不代表不能用)fromlxmlimportetree2.利用etree.HTML，将字符串转化为Element对象,Element对象具有xpath的方法,返回
  • 如何用deepseek快速生成思维导图和流程图？ ProcessOn官方账号 流程图
    一起来看看md格式和mermaid格式，与deepseek的碰撞会产生怎样的魔法吧！1、md格式+deepseek，快速生成思维导图Markdown是一种轻量级的标记语言，旨在以易读易写的纯文本格式编写文档，并能够轻松转换为结构化的HTML（超文本标记语言）或其他格式。它最初由JohnGruber和AaronSwartz于2004年创建，因其简洁性和可读性而广受欢迎。操作方法：Step1：给dee
  • 利用Python进行数据可视化（Plotly与Dash的应用） 步入烟尘 Python超入门指南全册信息可视化pythonplotly
    本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以
  • JS逆向案例-致远OA的前端密码加密逆向分析 布啦啦李 我的渗透笔记pythonJS逆向javascript逆向致远OA密码爆破防范措施js逆向
    免责声明本文仅为技术研究与渗透测试思路分享，旨在帮助安全从业人员更好地理解相关技术原理和防御措施。任何个人或组织不得利用本文内容从事非法活动或攻击他人系统。如果任何人因违反法律法规或不当使用本文内容而导致任何法律后果，本文作者概不负责。请务必遵守法律法规，合理使用技术知识。一、致远OA的登录过程1.1实验版本致远A6+协同管理软件V8.0SP2用户名不变，密码加密，无验证码。1.2登录过程步骤操作
  • JavaScript基础-DOM 简介 難釋懷 javascript开发语言
    在现代Web开发中，JavaScript与HTML和CSS一起构成了网页的核心技术。而在这三者之中，DOM（DocumentObjectModel，文档对象模型）作为浏览器处理网页内容的一种接口，扮演着至关重要的角色。通过DOM，JavaScript能够动态地访问和操作网页的内容、结构以及样式。本文将介绍DOM的基本概念、核心组成部分以及如何使用JavaScript来操作DOM。一、什么是DOM？
  • 【H2O2 | 软件开发】什么是Promise？ 过期的H2O2 【H2O2】全栈面试题前端javascriptecmascript6
    目录前言开篇语准备工作正文概述三种状态创建和使用链式操作多对象处理语法糖回调地狱和优化结束语前言开篇语本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。如果您需要为面试八股文做准备，笔者建议重点关注加粗强调部分，它们是概念中的关键词。准备工作软件：【参考版本】VisualStudioCode系统版本：Win
  • HTML入门 Yeauty html
    HTML的概述什么是HTML:HyperTextMarkupLanguage超文本标记语言超文本:比普通文本更加强大,能够定义许多文本样式标记语言:通过一组标签来对内容进行标记,并且修饰-标签:为什么要学习HTML它是网页设计的设计,基本上所有的网站都是用它开发的如何来学习HTMLHTML语法规范HTML是一个.html或者.htm结尾的文件HTML文件中是头和体两部分HTML是通过一组标签来对内
  • 【 ＜二＞ 丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 的起步依赖：快速构建 JavaWeb 项目 Foyo Designer springspringbootjavaSpringDataJPAJUnit
    点击此处查看合集https://blog.csdn.net/foyodesigner/category_12907601.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12907601&sharerefer=PC&sharesource=FoyoDesigner&sharefrom=from_link一、起步依赖：SpringBoo
  • 谈谈 TypeScript 中的模块系统，如何使用 ES Modules 和 CommonJS 模块？ 程序员黄同学 TypeScript前端开发JavaScripttypescriptubuntujavascript
    模块系统是TypeScript项目组织代码的核心机制，主要用于代码拆分、复用和依赖管理。TypeScript支持ESModules（ESM）和CommonJS两种主流模块系统，理解它们的差异和使用场景是前端开发中的必备技能。以下从基础语法、配置、互操作性到实战建议展开说明。一、ESModules（ESM）：标准化的模块系统1.基础语法ESM使用import/export语法，是ECMAScript
  • tomcat下直接访问html网页 努力的搬砖人.
    在conf/server.html配置文件中添加（在标签上添加）访问地址：http://localhost:8081/hello.html
  • CSS入门：为文档添加样式的几种方法 程序员
    CSS入门：为文档添加样式的几种方法一、先从HTML开始吧HTML是网页的基础结构，我们需要先有HTML文档才能添加样式。二、添加CSS试试看？让我们开始为HTML添加一些基本的CSS样式。三、样式化HTML元素基本语法p{color:green;}四、改变元素的默认行为修改元素的默认显示方式和行为。五、使用类名通过类名选择器来定义样式：.special{color:orange;}六、根据元素在
  • HTML基础语法：写好网页的第一步 程序员
    HTML基础语法：写好网页的第一步在Web开发的世界里，HTML是构建网页的基石。今天，让我们一起来了解HTML的基础语法，掌握编写规范网页的要点。一、HTML的基本构成1.HTML元素的解析HTML元素通常由三部分组成：开始标签（如）内容（实际的文本内容）结束标签（如）例如：这是一个段落2.元素的嵌套HTML元素可以相互嵌套，但必须注意正确的嵌套顺序：我的猫咪非常可爱二、元素的类型1.块级元素在
  • ChatGPT + Vue3：如何打造 AI 智能助手？ Js_x chatgpt人工智能
    引言人工智能（AI）正快速渗透到前端开发领域，越来越多的开发者希望将ChatGPT集成到自己的应用中，为用户提供智能对话、自动回复、辅助决策等功能。本文将介绍如何使用Vue3+OpenAIAPI搭建一个AI智能助手，让你的应用拥有强大的AI交互能力。1.项目准备1.1技术栈选择本项目将使用以下技术：Vue3-现代化的前端框架，响应式强，适合构建交互式应用。Vite-高效的Vue3项目构建工具，提升
  • 原生JavaScript控制页面跳转的几种方式 thinkQuadratic javascript前端开发语言
    在开发一些简单的页面，不需要复杂的单页面应用（SPA）功能的时候。可以使用原生JavaScript的跳转即可满足需求。另外在处理一些需要直接与服务器进行交互的表单提交后跳转，或者在某些浏览器兼容性要求较高的场景下，原生JavaScript的跳转方式更加稳定可靠。正文开始这里本地创建两个html文件进行演示，index.html和home.htmlwindow.location.hrefindex页
  • AI：188-利用Python进行自然语言生成和文本摘要 一键难忘 python开发语言人工智能自然语言处理
    本文收录于专栏：精通AI实战千例专栏合集https://blog.csdn.net/weixin_52908342/category_11863492.html从基础到实践，深入学习。无论你是初学者还是经验丰富的老手，对于本专栏案例和项目实践都有参考学习意义。每一个案例都附带关键代码，详细讲解供大家学习，希望可以帮到大家。正在不断更新中~一.利用Python进行自然语言生成和文本摘要近年来，人工智
  • jquery实现的jsonp掉java后台 知了ing javajsonpjquery
    什么是JSONP？ 先说说JSONP是怎么产生的： 其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、
  • Struts2学习笔记 caoyong struts2
    SSH : Spring + Struts2 + Hibernate 三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller) 分层原则:单向依赖，接口耦合 1、Struts2  =  Struts  + Webwork 2、搭建struts2开发环境    a>、到www.apac
  • SpringMVC学习之后台往前台传值方法 满城风雨近重阳 springMVC
    springMVC控制器往前台传值的方法有以下几种： 1.ModelAndView    通过往ModelAndView中存放viewName：目标地址和attribute参数来实现传参：      ModelAndView mv=new ModelAndView();  mv.setViewName="success
  • WebService存在的必要性？ 一炮送你回车库 webservice
    做Java的经常在选择Webservice框架上徘徊很久，Axis  Xfire Axis2 CXF ，他们只有一个功能，发布HTTP服务然后用XML做数据传输。 是的，他们就做了两个功能，发布一个http服务让客户端或者浏览器连接，接收xml参数并发送xml结果。 当在不同的平台间传输数据时，就需要一个都能解析的数据格式。 但是为什么要使用xml呢？不能使json或者其他通用数据
  • js年份下拉框 3213213333332132 java web ee
    <div id="divValue">test...</div>测试 //年份 <select id="year"></select> <script type="text/javascript"> window.onload =
  • 简单链式调用的实现技术 归来朝歌 方法调用链式反应编程思想
    在编程中，我们可以经常遇到这样一种场景：一个实例不断调用它自身的方法，像一条链条一样进行调用 这样的调用你可能在Ajax中，在页面中添加标签： $("<p>").append($("<span>").text(list[i].name)).appendTo("#result");   也可能在HQ
  • JAVA调用.net 发布的webservice 接口 darkranger webservice
    /** * @Title: callInvoke * @Description: TODO(调用接口公共方法) * @param @param url 地址 * @param @param method 方法 * @param @param pama 参数 * @param @return * @param @throws BusinessException
  • Javascript模糊查找 | 第一章 循环不能不重视。 aijuans Way
    最近受我的朋友委托用js+HTML做一个像手册一样的程序，里面要有可展开的大纲，模糊查找等功能。我这个人说实在的懒，本来是不愿意的，但想起了父亲以前教我要给朋友搞好关系，再加上这也可以巩固自己的js技术，于是就开始开发这个程序，没想到却出了点小问题，我做的查找只能绝对查找。具体的js代码如下： function search(){ var arr=new Array("my
  • 狼和羊，该怎么抉择 atongyeye 工作
    狼和羊，该怎么抉择 在做一个链家的小项目，只有我和另外一个同事两个人负责，各负责一部分接口，我的接口写完，并全部测联调试通过。所以工作就剩下一下细枝末节的，工作就轻松很多。每天会帮另一个同事测试一些功能点，协助他完成一些业务型不强的工作。 今天早上到公司没多久，领导就在QQ上给我发信息，让我多协助同事测试，让我积极主动些，有点责任心等等，我听了这话，心里面立马凉半截，首先一个领导轻易说
  • 读取android系统的联系人拨号 百合不是茶 androidsqlite数据库内容提供者系统服务的使用
           联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢   关键代码:     1, 使用javabean操作存储读取到的数据 package com.example.bean; /** * * @author Admini
  • ORACLE自定义异常 bijian1013 数据库自定义异常
    实例： CREATE OR REPLACE PROCEDURE test_Exception ( ParameterA IN varchar2, ParameterB IN varchar2, ErrorCode OUT varchar2 --返回值,错误编码 ) AS /*以下是一些变量的定义*/ V1 NUMBER; V2 nvarc
  • 查看端号使用情况 征客丶 windows
    一、查看端口 在windows命令行窗口下执行： >netstat -aon|findstr "8080" 显示结果： TCP     127.0.0.1:80         0.0.0.0:0    &
  • 【Spark二十】运行Spark Streaming的NetworkWordCount实例 bit1129 wordcount
    Spark Streaming简介   NetworkWordCount代码   /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with
  • Struts2 与 SpringMVC的比较 BlueSkator struts2spring mvc
    1. 机制：spring mvc的入口是servlet，而struts2是filter，这样就导致了二者的机制不同。 2. 性能：spring会稍微比struts快。spring mvc是基于方法的设计，而sturts是基于类，每次发一次请求都会实例一个action，每个action都会被注入属性，而spring基于方法，粒度更细，但要小心把握像在servlet控制数据一样。spring
  • Hibernate在更新时，是可以不用session的update方法的(转帖） BreakingBad Hibernateupdate
    地址：http://blog.csdn.net/plpblue/article/details/9304459 public void synDevNameWithItil() {Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran
  • 读《研磨设计模式》-代码笔记-观察者模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; import java.util.Observable; import java.util.Observer; /** * “观
  • 重置MySQL密码 chenhbc mysql重置密码忘记密码
    如果你也像我这么健忘，把MySQL的密码搞忘记了，经过下面几个步骤就可以重置了（以Windows为例，Linux/Unix类似）： 1、关闭MySQL服务 2、打开CMD，进入MySQL安装目录的bin目录下，以跳过权限检查的方式启动MySQL mysqld --skip-grant-tables  3、新开一个CMD窗口，进入MySQL mysql -uroot  
  • 再谈系统论，控制论和信息论 comsci 设计模式生物能源企业应用领域模型
                               再谈系统论，控制论和信息论     偶然看
  • oracle moving window size与 AWR retention period关系 daizj oracle
    转自： http://tomszrp.itpub.net/post/11835/494147 晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程. SQL> select * from v$version; BANNER -------------------
  • Python版B树 dieslrae python
    话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树... 首先是数据实体对象,很简单,只存放key,value class Entity(object): '''数据实体''' def __init__(self,key,value)
  • C语言冒泡排序 dcj3sjt126com 算法
    代码示例： # include <stdio.h> //冒泡排序 void sort(int * a, int len) { int i, j, t; for (i=0; i<len-1; i++) { for (j=0; j<len-1-i; j++) { if (a[j] > a[j+1]) // >表示升序
  • 自定义导航栏样式 dcj3sjt126com 自定义
    -(void)setupAppAppearance { [[UILabel appearance] setFont:[UIFont fontWithName:@"FZLTHK—GBK1-0" size:20]]; [UIButton appearance].titleLabel.font =[UIFont fontWithName:@"FZLTH
  • 11.性能优化-优化-JVM参数总结 frank1234 jvm参数性能优化
    1.堆 -Xms --初始堆大小 -Xmx --最大堆大小 -Xmn --新生代大小 -Xss --线程栈大小 -XX:PermSize  --永久代初始大小 -XX:MaxPermSize  --永久代最大值 -XX:SurvivorRatio --新生代和suvivor比例,默认为8 -XX:TargetSurvivorRatio --survivor可使用
  • nginx日志分割 for linux HarborChung nginxlinux脚本
    nginx日志分割 for linux 默认情况下，nginx是不分割访问日志的，久而久之，网站的日志文件将会越来越大，占用空间不说，如果有问题要查看网站的日志的话，庞大的文件也将很难打开，于是便有了下面的脚本   使用方法，先将以下脚本保存为 cutlog.sh，放在/root 目录下，然后给予此脚本执行的权限   复制代码代码如下: chmo
  • Spring4新特性——泛型限定式依赖注入 jinnianshilongnian springspring4泛型式依赖注入
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • centOS安装GCC和G++ liuxihope centosgcc
    Centos支持yum安装，安装软件一般格式为yum install .......，注意安装时要先成为root用户。 按照这个思路，我想安装过程如下： 安装gcc：yum install gcc 安装g++： yum install g++ 实际操作过程发现，只能有gcc安装成功，而g++安装失败，提示g++ command not found。上网查了一下，正确安装应该
  • 第13章 Ajax进阶（上） onestopweb Ajax
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • How to determine BusinessObjects service pack and fix pack blueoxygen BO
    http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/   The table below is helpful. Reference   BOE XI 3.x 12.0.0. y BOE XI 3.0 12.0. x. y BO
  • Oracle里的自增字段设置 tomcat_oracle oracle
    　大家都知道吧，这很坑，尤其是用惯了mysql里的自增字段设置，结果oracle里面没有的。oh，no 　　我用的是12c版本的，它有一个新特性，可以这样设置自增序列，在创建表是，把id设置为自增序列 create table t ( id 　　 　　 number generated by default as identity (start with 1 increment b
  • Spring Security（01）——初体验 yang_winnie springSecurity
    Spring Security（01）——初体验     博客分类： spring Security Spring Security入门安全认证        首先我们为Spring Security专门建立一个Spring的配置文件，该文件就专门用来作为Spring Security的配置
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他