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

前端作业（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)

  • 前端项目利用Gitlab CI/CD流水线自动化打包、部署云服务 黑心的奥利奥 前端gitlabci/cd
    叠甲前言本文仅作为个人学习GitLab的CI/CD功能记录，不适合作为专业性指导，如有纰漏，烦请君指正。Gitlab的CI/CD做什么用的自工作以来，去过大大小小公司，有一些公司技术人员专业性欠佳，每当产品经理或测试人员需要最新或者某个版本的包时【比如安卓的apk包，IOS的ipa包，前端的打包静态资源】，开发总是要停下手中的工作，去手动给测试打包，这类手动工作包括了打开某个项目，加载项目依赖，构
  • Java全栈开发性能优化全攻略：从数据库到前端 AI天才研究院 计算AI大模型企业级应用开发实战AI人工智能与大数据java性能优化数据库ai
    Java全栈开发性能优化全攻略：从数据库到前端关键词：Java全栈、性能优化、数据库索引、后端缓存、前端渲染、响应时间、系统瓶颈摘要：本文从全栈视角出发，系统讲解Java开发中数据库、后端服务、前端页面三大核心层的性能优化方法。通过生活类比、代码示例和实战案例，带你一步步理解索引设计、缓存策略、懒加载、防抖节流等关键技术，掌握从“发现瓶颈”到“精准优化”的完整流程，最终实现用户体验与资源效率的双重
  • 如何让用户回到上次阅读的位置？ 玛卡巴卡半夜不睡觉 状态模式
    【前端实战】如何让用户回到上次阅读的位置？在阅读类、资讯类、博客类网站中，记忆用户上次阅读到的位置，并在下次访问时自动滚动回那个位置，可以大大提升用户体验感。今天我们就来详细讲一讲：前端如何实现用户回到上次阅读的位置，包括基础scroll方法+优化、IntersectionObserverAPI+探针追踪、锚点URLHASH定位跳转等策略实现一个流畅且高效的方案。一、总体思路1、核心目标在用户滚动
  • Javaweb笔记 笙鹿鸣 html前端html5
    HTMLHTML网页常用基础知识网页结构JavaSEC/SClientserver客户端–服务器JavaWebB/SBroswerServer浏览器–服务器网页的组成部分：内容（结构）、表现、行为HTML:HyperTextMarkupLanguage(超文本标记语言)ALT+F2选择浏览器HTML书写规范：表示整个html页面的开始头信息标题标题body是页面的主体内容页面主体内容表示整个htm
  • python 抓取小红书 小五咔咔咔 python开发语言
    python相关学习资料：https://edu.51cto.com/video/3832.htmlhttps://edu.51cto.com/video/4102.htmlhttps://edu.51cto.com/video/1158.htmlPython抓取小红书数据的科普文章小红书是一个流行的社交电商平台，用户可以分享购物心得、生活点滴等。本文将介绍如何使用Python语言抓取小红书的数据
  • Spring Boot、Spring MVC 和 Spring 有什么区别
    spring是⼀个IOC容器，⽤来管理Bean，使⽤依赖注⼊实现控制反转，可以很⽅便的整合各种框架，提供AOP机制弥补OOP的代码重复问题、更⽅便将不同类不同⽅法中的共同处理抽取成切⾯、⾃动注⼊给⽅法执⾏，⽐如⽇志、异常等springmvc是spring对web框架的⼀个解决⽅案，提供了⼀个总的前端控制器Servlet，⽤来接收请求，然后定义了⼀套路由策略（url到handle的映射）及适配执⾏h
  • 前后端分离项目进阶1---后端 屋外雨大，惊蛰出没 java开发语言
    前端链接：前端解析一.项目目录二.关键代码分析1)Admin.javapackageimprov1.improv1.entity;publicclassAdmin{privateStringaccount;privateStringpassword;privateStringname;//构造方法、getter和setterpublicAdmin(){}publicAdmin(Stringacco
  • poi html转换成word文档,poi将html转换为word文档 天猪飞翔 poihtml转换成word文档
    如何使用apachepoi将word转化为htmlJava可以使用这个开源框架，对word进行读取合并等操作，ApachePOI是一个开源的利用Java读写Excel、WORD等微软OLE2组件文档的项目。最新的3.5版本有很多改进，加入了对采用OOXML格式的Office2007支持，如xlsx、docx、pptx文档。示例如下：importorg.apache.poi.POITextExtra
  • 社交应用全栈开发实战：前后端与数据库整合
    本文还有配套的精品资源，点击获取简介：本资源包详细介绍了构建一个社交应用程序的全过程，包括前端、后端以及数据库管理的核心组件和关键功能。Uniapp框架用于开发跨平台的移动端用户界面，Java后端负责处理业务逻辑和数据交互，MySQL数据库用于管理用户信息和动态数据。项目还包括前后端通信、身份验证、性能优化和推送通知服务的实现。学习这些代码可以提升开发者的技能，帮助快速构建社交应用。1.社交APP
  • No module named "Crypto"，如何安装Python三方模块Crypto weixin_30342827 python操作系统
    前两天公司公司老总让我研究怎么用企业微信第三方应用进行官网对接，完成URL回调验证问题。具体如何进行Python的Django网站与企业微信第三方应用进行回调验证的博客地址为：https://www.cnblogs.com/ws17345067708/p/10522472.html这里讲讲，如何在win10下，安装一个非常坑爹的加密算法库，名字叫"Crypto"看了好多博客，没有一个管用的，要么就
  • Three.js入门：创建第一个3D场景 薯条说影 Three.js3D场景创建跨平台设置安全异常处理HTML骨架搭建
    背景简介Three.js是一个轻量级的3D图形库，它让Web开发者能够在浏览器中创建和显示3D图形。本章介绍如何设置环境以开始使用Three.js，包括不同操作系统下的安装步骤、安全异常处理以及基本的HTML骨架创建。安装与设置操作系统兼容性：Three.js的使用不仅限于Windows系统。对于其他操作系统，如Linux和MacOS，需要将可执行文件复制到目标目录，并通过命令行启动。无论是哪种操
  • JavaScript进阶：探索模块化、ES6+与前端框架 WayneYalejk javascriptes6前端框架
    随着Web技术的快速发展，JavaScript也在不断演进。ES6（ECMAScript2015）及更高版本的发布为JavaScript带来了许多新特性和改进，使得JavaScript更加强大和易用。同时，模块化编程和前端框架的兴起也极大地推动了前端开发的现代化进程。本文将带您深入探索JavaScript的进阶话题，包括模块化、ES6+新特性以及前端框架的应用。1.模块化编程模块化的重要性：解释模
  • 爬虫_加速乐秒杀 kisloy 爬虫逆向爬虫python
    加速乐补环境补环境window={navigator:{userAgent:"Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/104.0.0.0Safari/537.36"},outerWidth:1920,outerHeight:1050,};location={reload:functi
  • 前端使用 Vue 3，后端使用 Spring Boot 构建 Hello World 程序 天天进步2015 编程技巧前端vue.jsspringboot
    前端使用Vue3，后端使用SpringBoot构建HelloWorld程序前端（Vue3）首先，创建一个Vue3项目。1.安装VueCLInpminstall-g@vue/cli2.创建Vue项目vuecreatefrontend在交互式提示中，选择默认的Vue3预设。3.修改App.vue在frontend/src目录下，修改App.vue文件：{{message}}{{error}}expor
  • URL GET +号后台接收成空格 墨着染霜华 javavue
    问题：参数spdm=whbs+001其中包含URL特殊符号如果用GET请求方式不做任何不处理那么浏览器自动将+转为%20请求链接为details?spdm=whbs%20001&limitKcysType=1后台接收到的参数为whbs001，自动将+号转成空格了。尝试解决（失败）：前端URLENCODE然后后台解密params:{spdm:encodeURIComponent(this.spdm)
  • 从零入门 HTML 开发：构建网页世界的基石指南 incidite html前端
    从零入门HTML开发：构建网页世界的基石指南在互联网蓬勃发展的今天，我们每天浏览的网页、使用的App界面，背后都离不开HTML这一基础技术的支撑。作为前端开发的入门语言，HTML（超文本标记语言）就像建筑中的砖石，是构建网页骨架的核心。无论你是想成为专业的前端工程师，还是单纯想了解网页背后的运作原理，掌握HTML基础都是迈出的第一步。认识HTML：网页的“骨架”语言HTML的全称为HyperTex
  • Taro 网络 API 详解与实用案例
    Taro网络API详解与实用案例在现代前端开发中，网络通信是不可或缺的一环。Taro作为一款多端开发框架，提供了丰富且统一的网络API，帮助开发者在小程序、H5、ReactNative等多端环境下高效地进行数据交互。本文将详细介绍Taro的四大网络API：Taro.request、Taro.uploadFile、Taro.downloadFile和Taro.connectSocket，并结合实际案
  • css 混合模式 mix-blend-mode属性 Br不二 csscss前端
    mix-blend-mode是CSS中的一个属性，它定义了一个元素的内容（包括文本、图片、矢量图形等）如何与其背景或其他元素的内容进行颜色混合。这个属性允许创建复杂的视觉效果，如半透明效果、阴影、图片蒙版等，从而增强页面的视觉层次和艺术感。一、基本介绍属性类型：mix-blend-mode是一个CSS属性。作用：控制元素内容的颜色与其背景或其他元素内容的颜色混合方式。继承性：mix-blend-m
  • css mix-blend,详解CSS3的mix-blend-mode属性 weixin_39630813 cssmix-blend
    1、相当于加了一个图层mix-blend-mode:multiply;2、相当于加了一个滤镜mix-blend-mode:screen;3、相当于加了一个图层和滤镜mix-blend-mode:overlay;4、会使图片变暗，出现变暗效果mix-blend-mode:darken;5、这个模式与darken相反，*它的效果取决于源和背景颜色之间更浅的(色彩)。*即将两像素的RGB值进行比较后，取
  • 实现一个HTML页面，上传图片后可以测量两条辅助线之间的距离，支持点击添加、拖动和右键删除辅助线
    一、项目背景偶尔需要测量图片上元素的宽度高度和间距。因此实现一个交互式、可视化的测距工具。开发一个简单易用的HTML页面，用户可以上传任意图片，在图片上通过点击添加辅助线，拖动调整辅助线位置，右键删除不需要的辅助线，同时自动计算并显示相邻辅助线间的距离，提升效率和准确度。二、核心功能图片上传用户可以上传本地图片作为测距背景，图片会按用户指定的宽高展示，支持任意尺寸，不做限制。辅助线添加用户点击图片
  • 5. 移动端适配rem方案 未路过
    1.rem+动态html的font-sizerem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。比如如下案例：1.设置一个盒子的宽度是2rem；2.设置不同的屏幕上html的font-size不同；image.png这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的fo
  • centos7常用的国内yum源整理 inrgihc Linuxlinux
    清华大学yum源参考地址：https://mirrors.tuna.tsinghua.edu.cn/help/centos/网易yum源参考地址：http://mirrors.163.com/.help/centos.htmlyum-yinstallwgetrm-rf/etc/yum.repo.d/*wget-O/etc/yum.repos.d/CentOS-Base.repohttp://mir
  • Vite：下一代前端构建工具的革命 布兰妮甜 vitejavascript前端构建工具
    Hi，我是布兰妮甜！在现代前端开发领域，构建工具的选择对开发体验和项目效率有着决定性影响。从早期的Grunt、Gulp到Webpack、Rollup，前端构建工具不断演进。而Vite的出现，则彻底改变了传统构建工具的工作模式，为开发者带来了前所未有的开发体验。本文将深入探讨Vite的设计哲学、核心特性、工作原理以及实际应用场景。文章目录一、什么是Vite？二、Vite的核心设计理念2.1利用浏览器
  • MEMS定向短节的作用如何在HDD中体现？ ericco123 MEMS陀螺仪惯性技术制造科技
    ER-MNS-09作为一款基于MEMS陀螺技术的定向短节，其异形圆柱体设计（直径30mm，长度120mm）使其能适配探管等钻探设备前端的有限空间。其核心在于采用可自寻北的高精度MEMS陀螺仪，摆脱了对地磁场的依赖。这一特性对于HDD至关重要，因其常在埋地管线、强电磁干扰或金属结构密集区域施工，传统磁传感器易受干扰失效，而ER-MNS-09能在此类复杂地下环境中提供稳定、可靠的方位基准。在HDD管道
  • CSS的content属性妙用指南 代码的余温 css前端
    CSS的content属性专门用于::before和::after伪元素，用于动态生成内容并插入到文档流中。其核心作用如下：一、主要功能插入文本内容p::before{content:"提示：";color:red;}→在每个元素前添加红色文字“提示：”插入图标（结合字体图标库）.download::after{content:"\f019";/*FontAwesome下载图标的Unicode*/
  • swiper js无缝滚动---解决播放总是有间隔、动画一闪一跳的问题 StrongerIrene javascript开发语言ecmascript
    搜了很多，没找到解决方案，ai也不知道，那个delay=0也不管用后面自己抓css，发现先设置freemode（可以无限滚动滑的那个）然后会发现他有这个css，把这个改成linear就行了:global(.swiper-free-mode>.swiper-wrapper){transition-timing-function:linear!important;}还有就是得设置宽高、必须设置宽高之后
  • 前端基础知识Vue系列 - 17（vue中key的原理）
    一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key...用+newDate()生成的时间戳作为key，手动强制触发重新渲染那么这背后的逻辑是什么，key的作用又是什么？一句话来讲key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点场景背后的逻辑当我们在使用v-for时，需要给单元加上
  • 标签的分类 健倾心语
    双标签：成对的标签，有开始标签和结束标签html，title，body，等单标签：单个标签只有开始标签没有结束标签meta根据标签所处的位置，又可以分为平级关系和父子关系标签
  • Vue.js 全面解析：构建现代前端应用的渐进式框架 斯~内克 vue知识点前端vue.js
    一、Vue.js的核心价值与演进1.1前端框架的变革与Vue的定位根据2024年StateofJS调查报告，Vue.js以82%的开发者满意度稳居前端框架前三甲。其核心优势体现在：渐进式架构：可从轻量级视图层扩展至全栈解决方案响应式系统：基于Proxy的精准依赖追踪（Vue3）组合式API：代码复用率提升60%以上生态系统：覆盖SSR、状态管理、移动端等20+场景1.2版本演进里程碑版本发布时间里
  • Python 事件循环与 asyncio 的底层实现 代码界的灵魂舞者 pythonjava数据库
    ```htmlPython事件循环与asyncio的底层实现Python事件循环与asyncio的底层实现在现代的异步编程中，事件循环扮演着至关重要的角色。Python的asyncio模块是其核心，它提供了一种优雅的方式来处理异步任务和并发操作。本文将深入探讨Python中事件循环的概念以及asyncio的底层实现。什么是事件循环？事件循环（EventLoop）是一种控制流机制，它负责管理任务队列
  • 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其他