东方青云、
东方青云、

小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript

目录

  • 1. 项目搭建
    • 1.1 在项目开始之前，先做好准备工作，创建这样的文件目录，git和vscode直接忽略。
      • 1.1.1 css文件夹
      • 1.1.2 images文件
      • 1.1.3 js文件
      • 1.1.4 uploads
      • 1.1.5 favicon
    • 1.2 HTML结构
      • 1.2.1 头部引入文件
      • 1.2.2 主体结构
      • 1.2.3 index.html代码示例：
    • 1.3 css样式
      • 1.3.1 页面初始化（base)样式
      • 1.3.2 公共样式（common)样式
      • 1.3.3 首页样式（index)样式
    • 1.4 原生javascript
      • 1.4.1 index.js样式
      • 1.4.2 animate.js样式
  • 2. 页面效果

1. 项目搭建

1.1 在项目开始之前，先做好准备工作，创建这样的文件目录，git和vscode直接忽略。

小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript_第1张图片

1.1.1 css文件夹

包含三个css文件，分别是base.css、common.css、index.css。
小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript_第2张图片

1.1.2 images文件

里面放一些固定的图片

1.1.3 js文件

index.js和animate文件主要放我们自己写的原生js，animate主要用于轮播图。
小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript_第3张图片

1.1.4 uploads

放一些随时更新的图片

1.1.5 favicon

我们的网站图标

1.2 HTML结构

1.2.1 头部引入文件

小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript_第4张图片

1.2.2 主体结构

小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript_第5张图片
小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript_第6张图片

1.2.3 index.html代码示例：




    
    
    
    小兔鲜儿-新鲜、惠民、快捷！
    
    
    
    
    
    
    
    
    
    
    
    



    
    
    

        

            
        

    

    
    
    

        
        
        

            
        

        
            

                2
            

        
    

    
    
    
    

        

            

                
                
                
                
                
                
                
    

                

            

            
        

    

    
    

        

            小兔鲜秒杀
            10:00点场 距结束
            12:
            20:
            03
        

        

            
    
                
    • 
                
    • 
                
    • 
                
    • 
            

        

    

    
    
    
    

        

            
新鲜好物
                新鲜出炉 品质靠谱
            

            查看全部
        


        

            
        

    

    
    
    

        

            
人气推荐
                人气爆款 不容错过
            

        


        

            
        

    

    
    
    

        

            
热门品牌
                国际经典 品质保证
            

            

                
                
            

        

        

            
        


    

    
    
    

        

            
生鲜

            查看全部
            
    
                
  • 
                    水果
                
    • 
                
  • 
                    蔬菜
                
    • 
                
  • 
                    肉禽蛋
                
    • 
                
  • 
                    裤装
                
    • 
                
  • 
                    衬衫
                
    • 
                
  • 
                    T恤
                
    • 
                
  • 
                    内衣
                
    • 

            

        

        

            

                
            

            

                
            

        

    

    
    
    

        

            
服饰

            查看全部
            
    
                
  • 
                    水果
                
    • 
                
  • 
                    蔬菜
                
    • 
                
  • 
                    肉禽蛋
                
    • 
                
  • 
                    裤装
                
    • 
                
  • 
                    衬衫
                
    • 
                
  • 
                    T恤
                
    • 
                
  • 
                    内衣
                
    • 

            

        

        

            

                
            

            

                
            

        

    


    
    
    

        

            
餐厨

            查看全部
            
    
                
  • 
                    水果
                
    • 
                
  • 
                    蔬菜
                
    • 
                
  • 
                    肉禽蛋
                
    • 
                
  • 
                    裤装
                
    • 
                
  • 
                    衬衫
                
    • 
                
  • 
                    T恤
                
    • 
                
  • 
                    内衣
                
    • 

            

        

        

            

                
            

            

                
            

        

    


    
    
    
    

        

            
居家

            查看全部
            
    
                
  • 
                    水果
                
    • 
                
  • 
                    蔬菜
                
    • 
                
  • 
                    肉禽蛋
                
    • 
                
  • 
                    裤装
                
    • 
                
  • 
                    衬衫
                
    • 
                
  • 
                    T恤
                
    • 
                
  • 
                    内衣
                
    • 

            

        

        

            

                
            

            

                
            

        

    


    
    
    

        

            

                
最新专题

                查看全部

1.3 css样式

1.3.1 页面初始化（base)样式

在默认的浏览器中有很多默认的样式，所以我们要对其进行清除并且设置自己的默认样式
代码示例：

* {
  box-sizing: border-box;
}

/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  box-sizing: border-box;
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}



/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

1.3.2 公共样式（common)样式

小兔鲜网站每个网页都有一些共同样式，所以我们单独创建一个css样式以便后续其他页面调用。
效果图：小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript_第7张图片

.w {
    width: 1240px;
    margin: 0 auto;
}

/* 快捷导航栏开始 */
.shortcut {
    height: 52px;
    background-color: #333;
    line-height: 52px;
}
.s {
    position: absolute;
    left: 0;
    top: 0;
    
}
.shortcut ul {
    float: right;
}

.shortcut li {
    float: left;
}

.shortcut li:nth-child(13)::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 11px;
    height: 16px;
    margin-right: 5px;
    background-color: #27ba9b;
    background: url(../images/sprites.png) no-repeat -160px -70px;
}

.sep {
    color: #666;
    margin: 0 15px;
}

.shortcut li a {
    color: #dcdcdc;
    font-size: 14px;
}

.shortcut li a:hover {
    color: #27ba9b;
}

/* 快捷导航栏结束 */
/* 主导航栏开始 */
.main_nav {
    height: 130px;
    padding: 30px 0;

}

.logo {
    float: left;
    width: 207px;
    height: 70px;

}

.logo h1 a {
    display: block;
    width: 207px;
    height: 70px;
    font-size: 0;
    background: url(.././images/logo.png) no-repeat;
    background-size: 100%;
}

.nav {
    float: left;
    margin-top: 5px;
    margin-left: 35px;
}

.nav ul li {
    float: left;
    margin: 24px;
}

.nav ul li a {
    padding-bottom: 5px;
}

.nav ul li:hover a {
    border-bottom: 1px solid #27ba9b;
    color: #27ba9b;
}

.search {
    float: left;
    margin-left: 35px;
    border-bottom: 2px solid #e7e7e7;
}

.search::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    width: 18px;
    height: 22px;
    background: url(.././images/sprites.png) no-repeat -79px -69px;
}

.search input {
    width: 172px;
    height: 30px;
    margin-top: 26px;
    padding-left: 30px;

}

.search input::placeholder {
    color: #ccc;
}

.car {
    position: relative;
    float: left;
    width: 23px;
    height: 23px;
    background-color: #27ba9b;
    margin-top: 30px;
    margin-left: 15px;
    background: url(.././images/sprites.png) no-repeat -119px -70px;
}

.car span {
    position: absolute;
    top: -8px;
    right: -10px;
    font-size: 13px;
    line-height: 14px;
    padding: 0 5px;
    background-color: #e26237;
    border-radius: 7px;
    color: #fff;
}

/* 主导航栏结束 */
/* 底部模块开始 */
footer {
    height: 645px;
}

.ft {
    height: 50%;
}

.ft dl {
    width: 25%;
    float: left;
    text-align: center;
    margin-top: 79px;
    color: #999;
}

.ft dl dt {
    margin-bottom: 30px;
}

.kefu dd,
.guanzhu dd {
    display: inline-block;
    vertical-align: middle;
    width: 92px;
    height: 92px;
    border: 1px solid #eee;
    margin-right: 5px;

}

.kefu dd a,
.guanzhu dd a {
    display: block;
    margin-top: 22px;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #999;
}

.kefu dd a::before,
.guanzhu dd a::before {
    display: block;
    width: 35px;
    height: 31px;
    content: '';
    margin: 0 auto;
    padding-bottom: 5px;
    background: url(../images/sprites.png) no-repeat;
    transition: all .5s;
}

.kefu .zaixian a::before {
    background-position: -250px -70px;
}

.kefu .zaixian a:hover::before {
    background-position: -204px -70px;
}

.kefu .wenti a::before {
    background-position: -350px -70px;
}

.kefu .wenti a:hover::before {
    background-position: -300px -70px;
}

.guanzhu .gongzhong a::before {
    background-position: -250px -15px;
}

.guanzhu .gongzhong a:hover::before {
    background-position: -205px -15px;
}

.guanzhu .weibo a::before {
    background-position: -350px -15px;
}

.guanzhu .weibo a:hover::before {
    background-position: -300px -15px;
}



.xiazai dd {
    width: 105px;
    height: 103px;
    display: inline-block;

}

.xiazai dd a {
    color: #999;
    font-size: 14px;
}

.xiazai dd button {
    width: 107px;
    height: 32px;
    background-color: #27ba9b;
    color: #FFF;
    margin-top: 10PX;
    border: none;
    cursor: pointer;
}

.xiazai dd img {
    width: 100%;
    height: 100%;
    border: 1px solid #eee;
    padding: 5px;
    margin-top: -60px;
}

.ft .rexian dt {
    margin-bottom: 40px;
}

.rexian dd:nth-of-type(1) {
    font-size: 22px;
}

.rexian dd:nth-of-type(2) {
    font-size: 15px;
    margin-top: 5px;
}

.fb {
    height: 50%;
    background-color: #333;
}

.fb .fb_t {
    height: 170px;
    line-height: 175px;
    width: 1393px;
    margin: 0 auto 40px;
    border-bottom: 1px solid #434343;
    text-align: center;
}

.fb .fb_t ul li {
    float: left;
    width: 33.33%;
    color: #fff;
    font-size: 28px;
}

.fb .fb_t ul li::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 58px;
    height: 58px;
    background: url(../images/sprites.png) no-repeat;
}

.fb .fb_t ul li:nth-child(2):before {
    background-position: -65px 0;
}

.fb .fb_t ul li:nth-child(2):before {
    background-position: -130px 0;
}

.fb .fb_b {
    text-align: center;
    color: #999;
}

.fb .fb_b i {
    padding: 0 4px;
}

.fb .fb_b p a {
    color: #999;
    font-size: 14px;

}

.fb .fb_b p a:hover {
    color: #27ba9b;
}

.fb .fb_b p:nth-child(2) {
    margin-top: 5px;
}

/* 底部模块结束 */

1.3.3 首页样式（index)样式

/* 页面滚动
 */
 html {
    scroll-behavior: smooth;
 }
.sk {
    /* position: sticky; */
    top: 0;
    left: 0;
    z-index: 999;
}

.section {
    height: 500px;
    background-color: #f5f5f5;
}

.section .w {
    position: relative;
}

.focus {
    height: 540px;
    width: 1240px;
    overflow: hidden;
}

.focus img {
    height: 540px;
    width: 1240px;
}

.carousel {
    position: relative;
    width: 700%;
}

.carousel li {
    float: left;
}

.prve,
.next {
    display: none;
    transform: translateY(-50%);
    width: 45px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .2) url(../images/sprites.png) no-repeat;
}

.prve:hover,
.next:hover {
    background: rgba(0, 0, 0, .4) url(../images/sprites.png) no-repeat;
}

.prve:hover {
    background-position: 14px -60px;
}

.next:hover {
    background-position: -22px -60px;
}

.prve {
    position: absolute;
    top: 50%;
    left: 260px;
    background-position: 14px -60px;
}

.next {
    position: absolute;
    top: 50%;
    right: 10px;
    background-position: -22px -60px;
}

.dots {
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin-left: 65px;
}

.dots .active {
    background-color: red;
}

.dots li {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 8px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .8);
}

.aside {
    position: absolute;
    top: 0;
    left: 0;
    width: 251px;
    height: 540px;
    background-color: rgba(0, 0, 0, .8);
}

.aside ul li {
    position: relative;
    height: 54px;
    line-height: 54px;
    color: #fff;
    font-size: 16px;
    padding-left: 36px;
    transition: all .3s;
}

.aside ul li::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    transition: all .3s;
    width: 6px;
    height: 6px;
    border-right: 1px;
    border-bottom: 1px;
    border-style: solid;
    transform: rotate(-45deg);
    border-color: transparent white white transparent;
}

.aside ul li:hover {
    padding-left: 60px;
    background-color: #27ba9b;
}

.aside ul li:hover::after {
    transform: rotate(135deg);
}

.aside ul li a {
    color: #fff;
    font-size: 14px;
}

.aside ul li a:first-child {
    margin-left: 15px;
}

/* 新鲜好物模块开始 */
.goods_hd {
    margin-top: 20px;
    height: 113px;
    line-height: 113px;
}

.goods_hd h3 {
    float: left;
    height: 113px;
    font-size: 29px;
    color: #333;
    font-weight: 400;

}

.goods_hd h3 span {
    margin-left: 10px;
}

.goods_hd h3 span,
.goods_hd a {
    font-size: 16px;
    color: #999;
}

.goods_hd a {
    float: right;
}

.goods_hd a:hover {
    color: #27ba9b;
}

.goods_hd a:hover::after {
    border-color: transparent #27ba9b #27ba9b transparent;
}

.goods_hd a::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    width: 5px;
    height: 5px;
    border-right: 1px;
    border-bottom: 1px;
    border-style: solid;
    transform: rotate(-45deg);
    border-color: transparent #999 #999 transparent;
}

.goods_bm {
    height: 406px;
}

.goods_bm li {
    position: relative;
    margin-right: 6px;
    text-align: center;
    width: 305px;
    height: 406px;
    float: left;
    background-color: #f0f9f4;
    transition: all .5s;
}

.goods_bm li:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}

.goods_bm li:nth-child(4) {
    margin-right: 0;
}

.goods_bm li i {
    position: absolute;
    top: 18px;
    left: 17px;
    font-size: 18px;
    line-height: 18px;
    padding-top: 5px;
    width: 28px;
    height: 51px;
    color: #27ba9b;
    border: 2px solid #27ba9b;
    border-radius: 5px;
}

.goods_bm li img {
    width: 304px;
    height: 305px;
}

.goods_bm li a p:nth-of-type(1) {
    font-size: 20px;
    color: #333;
    margin: 10px 0;
}

.goods_bm li a p:nth-of-type(1):hover {
    color: #27ba9b;
}

.goods_bm li a p:nth-of-type(2) {
    font-size: 23px;
    color: #9a2e1f;
}

.renqi .goods_bm li a p:nth-of-type(1) {
    font-size: 21px;
}

.renqi .goods_bm li a p:nth-of-type(2) {
    font-size: 16px;
    color: #999;
}

.renqi .goods_bm li {
    background-color: #fff;
}

/* 新鲜好物模块结束 */
/* 热门品牌开始 */
.pinpai {
    height: 466px;
    background-color: #f5f5f5;
}

.goods_hd .button {
    float: right;
    width: 52px;
    height: 20px;
    line-height: 20px;
    margin-top: 79px;

}

.button i {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #e2e2e2;
    text-align: center;
}

.button span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-bottom: 1px;
    border-right: 1px;
    border-style: solid;
    border-color: transparent white white transparent;
}

.button i:hover {
    background-color: #27ba9b;
}

.button .left {
    transform: rotate(135deg);
    margin-left: 5px;
}

.button .right {
    transform: rotate(-45deg);
    margin-right: 5px;
}

.goodss_bm {
    height: 306px;
}

.goodss_bm ul li {
    float: left;
    width: 244px;
    margin-right: 5px;
    transition: all .5s;
}

.goodss_bm ul li:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
}

.goodss_bm ul li:nth-child(5) {
    margin-right: 0;
}

.goodss_bm img {
    width: 244px;
    height: 306px;
}

/* 热门品牌结束*/
/* 生鲜模块开始 */
.tab {
    float: right;
    margin-right: 65px;
    text-align: center;
}

.tab li {
    display: inline-block;
    width: 48px;
    line-height: 20px;
    color: #333;
    margin-right: 13px;
    font-size: 16px;
    cursor: pointer;
}

.tab li:hover {
    background-color: #27ba9b;
}

.active {
    display: inline-block;
    width: 48px;
}

.goods_bottom {
    height: 611px;
}

.goods_bottom_left {
    float: left;
    height: 100%;
    width: 240px;
}

.goods_bottom_left img {
    height: 611px;
    width: 240px;
}

.goods_bottom_right {
    float: right;
    width: 1000px;
    height: 100%;
}

.goods_bottom_right ul li {
    position: relative;
    float: left;
    margin: 0 0 3px 8px;
    width: 242px;
    height: 304px;
    background-color: #fff;
    border: 2px solid transparent;
    transition: all .5s;
    overflow: hidden;
}

.goods_bottom_right ul li:hover {
    border: 2px solid #27ba9b;
}



.goods_bottom_right ul li img {
    display: block;
    width: 184px;
    height: 184px;
    margin: 0 auto;
}

.goods_bottom_right ul li P {
    margin-left: 29px;
    width: 182px;
}

.goods_bottom_right ul li P:nth-of-type(1) {
    margin-top: 5px;
    margin-bottom: 10px;
}

.goods_bottom_right ul li P:nth-of-type(2) {
    color: #9a2e1f;
}

.goods_bottom_right ul li P:nth-of-type(2) em {
    font-size: 22px;
}

.baby {
    position: absolute;
    left: -2px;
    bottom: -84px;
    width: 242px;
    height: 84px;
    background-color: #27ba9b;
    color: #fff;
    text-align: center;
    transition: all .5s;
}

.goods_bottom_right ul li:hover .baby {
    bottom: 0;
}

.baby span:nth-child(1) {
    display: inline-block;
    width: 125px;
    height: 35px;
    border-bottom: 1px solid #a9dbcc;
    margin: 10px auto 8px;
}

.baby span:nth-child(2) {
    display: block;
}

/* 生鲜模块结束 */
/* 最新模块开始 */
.news {
    height: 512px;
    background-color: #f5f5f5;
}

.news_bt ul li {
    width: 404px;
    height: 356px;
    float: left;
    margin-right: 9px;
}

.news_bt ul li img {
    width: 404px;
    height: 288px;
}

.news_bt ul li:nth-child(3) {
    margin-right: 0;
}

.news_bt ul li div:nth-child(1) {
    position: relative;
    width: 404px;
    height: 288px;
    background-color: #9a2e1f;
}

.news_bt ul li .cook {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 80px;
    width: 288px;
}

.news_bt ul li .cook p {
    color: #999;
    margin-left: 15px;
    margin-top: 5px;
}

.news_bt ul li .cook span {
    position: absolute;
    top: 20px;
    right: -100px;
    width: 81px;
    height: 27px;
    background-color: #fff;
    color: #9a2e1f;
    font-size: 17px;
    font-weight: 700;
}

.news_bt ul li .cook p:nth-child(1) {
    font-size: 20px;
}

.news_bt ul li .nnn {
    width: 100%;
    height: 65px;
    line-height: 65px;
    background-color: #fff;
}

.news_bt ul li div:nth-child(2) i:nth-child(1) {
    margin-left: 20px;
    float: left;
}

.news_bt ul li div:nth-child(2) i:nth-child(2) {
    float: left;
    margin-left: 30px;
}

.news_bt ul li div:nth-child(2) i:nth-child(3) {
    float: right;
    margin-right: 20px;
}

.news_bt ul li div:nth-child(2) i::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: url(../images/sprites.png) no-repeat -120px -110px;
}

.news_bt ul li div:nth-child(2) i:nth-child(2):before {
    background-position: -160px -110px;
}

.news_bt ul li div:nth-child(2) i:nth-child(3):before {
    background-position: -200px -110px;
}

/* 最新模块结束 */
/* 电梯导航 */

.xtx-elevator {
    position: fixed;
    left: 50%;
    top: 280px;
    z-index: 999;
    margin-left: 640px;
    opacity: 0;
    transition: all .5s;
    font-size: 14px;
}

.xtx-elevator .xtx-elevator-list {
    width: 70px;
    height: 300px;
    background: #fff;
    float: right;
    border: 1px solid #f5f5f5;
    position: relative;

}

.xtx-elevator .xtx-elevator-list li {
    height: 60px;
    padding: 15px;
}

.xtx-elevator .xtx-elevator-list li a {
    width: 40px;
    height: 30px;
    display: block;
    text-align: center;

}

.xtx-elevator .xtx-elevator-list li a:hover,
.xtx-elevator .xtx-elevator-list li a.active {
    color: #27BA9B;
}

.xtx-elevator .xtx-elevator-list li a i {
    display: block;
    width: 12px;
    height: 12px;
    position: relative;
    left: 13px;
    border-left: 1px solid black;
    border-top: 1px solid black;
    background-position: 8px -106px;
    font-size: 20px;
    transform: rotate(45deg);
}

.xtx-elevator .xtx-elevator-list li a:hover i {
    border-left: 1px solid #27BA9B;
    border-top: 1px solid #27BA9B;
}

/*  */
.scroll {
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 2px solid #27BA9B;
    background-color: #fff;
    margin-top: -130px;
    transition: all .5s;
    height: 52px;
    line-height: 52px;
}
.scroll .logo h1 a {
    display: block;
    width: 100px;
    position: absolute;
    top: 10px;
}
.scroll  .main_nav {
    position: relative;
}
.scroll .search {
    position: absolute;
    right: 0;
    top:-15px;
    height: 30px;
}

.scroll .search input {
    border: 1px solid #27BA9B;
    width: 600px;
}
/* 推荐模块start */
.recomment {
    position: relative;
    height: 165px;
    /* background-color: pink; */
}

.recomment_today {
    position: relative;
    float: left;
    width: 251px;
    height: 100%;
    line-height: 165px;
    /* background: url(../images/countDown.png) center; */
    background-color: #0a9e87;
    text-align: center;
    cursor: pointer;
    transition: all .3s linear;
}

.recomment_today i {
    position: absolute;
    top: -35px;
    left: 50px;
    font-size: 30px;
    color: #fff;
    font-weight: 700;
}
.recomment_today .ems {
    position: absolute;
    top:12px;
    left: 36px;
}
.recomment_today span {
    margin-top: 118px;
    display: inline-block;
    width: 35px;
    height: 35px;
    background-color: #333;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 35px;
}

.recomment_today:hover {
    box-shadow: 0 10px 10px #ccc;

}

.recomment_today em {
    font-size: 20px;
    margin-left: 2px;
    color: #fff;
    font-weight: 700;
}

.commodity {
    height: 165px;
    background-color: #ebebeb;
}

.commodity ul li {
    float: left;
    width: 247px;
    height: 165px;
    line-height: 165px;
    text-align: center;
    transition: all .5s linear;
}

.commodity ul li:hover {
    box-shadow: 0 10px 20px #ccc;
}

/* 推荐模块ent */

1.4 原生javascript

1.4.1 index.js样式

window.addEventListener('load', function () {
    // 电梯导航模块开始
    (function () {
        // 页面导航栏模块
        const nav = document.querySelector('.main_nav')
        const scrolls = document.querySelector('.scroll')
        // scrolls.style.paddingLeft = nav.offsetLeft + 'px'
        const section = document.querySelector('.section')
        window.addEventListener('scroll', function () {
            let n = document.documentElement.scrollTop
            if (n >= section.offsetTop) {
                scrolls.style.marginTop = 0
            } else {
                scrolls.style.marginTop = '-130px'

            }
        })
    })();

    (function () {
        // 获取电梯模块元素
        const xtx_elevator = document.querySelector('.xtx-elevator')
        // 获取滚动目标新鲜好物模块元素
        const xhw = document.querySelector('.xx_haowu')
        // 获取滚动目标元素得到新鲜好物模块的的scrollTop的值
        let n = xhw.offsetTop - 300
        window.addEventListener('scroll', function () {
            const y = document.documentElement.scrollTop
            if (y >= n) {
                xtx_elevator.style.opacity = 1
            } else {
                xtx_elevator.style.opacity = 0
            }
        })
        // 点击返回顶部按钮
        const backTop = document.querySelector('#backTop')
        backTop.addEventListener('click', function () {
            // let timer = setInterval(function () {
            //     if (document.documentElement.scrollTop <= 0) {
            //         clearInterval(timer)
            //     }
            //     document.documentElement.scrollTop = document.documentElement.scrollTop - 50
            // }, 1)
            document.documentElement.scrollTop = 0
        })
    })();
    (function () {
        // 获取电梯父级元素，使用事件委托
        const list = document.querySelector('.xtx-elevator-list')
        list.addEventListener('click', function (e) {
            if (e.target.tagName === 'A' && e.target.dataset.name) {
                // 移除选中类
                let odd = document.querySelector('.xtx-elevator-list .active')
                if (odd) {
                    odd.classList.remove('active')
                }
                // 添加类
                e.target.classList.add('active')
                // 点击那个小盒子，页面滚动到对应大盒子的位置
                document.documentElement.scrollTop = document.querySelector(`.${e.target.dataset.name}`).offsetTop - 50
            }
        })
    })();
    // 页面滚动到指定位置，对应的小盒子处于选中状态
    (function () {
        window.addEventListener('scroll', function () {
            // 先移除页面选中的active类
            let odd = document.querySelector('.xtx-elevator-list .active')
            if (odd) {
                odd.classList.remove('active')
            }
            // 获取四个大盒子元素
            const news = document.querySelector('.new')
            const popular = document.querySelector('.popular')
            const brand = document.querySelector('.brand')
            const topic = document.querySelector('.topic')
            let n = document.documentElement.scrollTop
            if (n >= news.offsetTop - 60 && n < popular.offsetTop - 60) {
                document.querySelector('[data-name=new]').classList.add('active')
            } else if (n >= popular.offsetTop - 60 && n < brand.offsetTop - 60) {
                document.querySelector('[data-name=popular]').classList.add('active')
            } else if (n >= brand.offsetTop - 60 && n < topic.offsetTop - 60) {
                document.querySelector('[data-name=brand]').classList.add('active')
            } else if(n>topic.offsetTop - 60){
                document.querySelector('[data-name=topic]').classList.add('active')
            }
        })
    })();
    // 电梯导航模块结束

    //  轮播图开始
    // 1获取元素
    var focus = this.document.querySelector('.focus')
    var ul = focus.querySelector('.carousel')
    var btnLeft = focus.querySelector('.prve')
    var btnRight = focus.querySelector('.next')
    var dots = focus.querySelector('.dots')
    var focusWidth = focus.offsetWidth;
    // 2鼠标经过focus，左右按钮隐藏和显示
    focus.addEventListener('mouseenter', function () {
        btnLeft.style.display = 'block'
        btnRight.style.display = 'block'
        clearInterval(timer);
        timer = null
    })
    focus.addEventListener('mouseleave', function () {
        btnLeft.style.display = 'none'
        btnRight.style.display = 'none'
        timer = setInterval(function () {
            btnRight.click()
        }, 2000)
    })
    // 3动态生成小圆点、
    for (var i = 0; i < ul.children.length; i++) {
        var li = this.document.createElement('li')
        dots.appendChild(li)
        li.setAttribute('Date-index', i)
        li.addEventListener('mouseenter', function () {
            for (var i = 0; i < dots.children.length; i++) {
                dots.children[i].className = ''
            }
            this.className = 'active'
            var index = this.getAttribute('Date-index')
            num = index
            d = index
            animate(ul, -index * focusWidth)
        })
    }
    dots.children[0].className = 'active'
    // 克隆第一张图片
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)
    // 4右侧按钮
    // 节流阀
    var flag = true
    var num = 0;
    var d = 0
    btnRight.addEventListener('click', function () {
        if (flag) {
            flag = false
            if (num == ul.children.length - 1) {
                ul.style.left = 0
                num = 0
            }
            num++;
            animate(ul, -num * focusWidth, function () {
                flag = true
            })
            // 小圆点跟随右按钮移动
            d++;
            if (d == dots.children.length) {
                d = 0;
            }
            for (var i = 0; i < dots.children.length; i++) {
                dots.children[i].className = ''
            }
            dots.children[d].className = 'active'
        }
    })
    // 左侧按钮
    btnLeft.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px'
            }
            num--;
            animate(ul, -num * focusWidth, function () {
                flag = true
            })
            // 小圆点跟随右按钮移动
            d--;
            if (d < 0) {
                d = dots.children.length - 1
            }
            for (var i = 0; i < dots.children.length; i++) {
                dots.children[i].className = ''
            }
            dots.children[d].className = 'active'
        }
    })
    // 左侧按钮
    // 自动播放
    var timer = this.setInterval(function () {
        btnRight.click()
    }, 2000)
    // 轮播图结束
})

1.4.2 animate.js样式

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

2. 页面效果



小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript_第8张图片

你可能感兴趣的:(小兔鲜项目,html,css,javascript,前端)

  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 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
  • 如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update iBaoxing github
    如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 抖音乐买买怎么加入赚钱?赚钱方法是什么 测评君高省
    你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
  • 四章-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关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • GitHub上克隆项目 bigbig猩猩 github
    从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
  • 关于城市旅游的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挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
  • 每日算法&面试题，大厂特训二十八天——第二十天（树） 肥学 ⚡算法题⚡面试题每日精进java算法数据结构
    目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • Faiss Tips：高效向量搜索与聚类的利器 焦习娜Samantha
    FaissTips：高效向量搜索与聚类的利器faiss_tipsSomeusefultipsforfaiss项目地址:https://gitcode.com/gh_mirrors/fa/faiss_tips项目介绍Faiss是由FacebookAIResearch开发的一个用于高效相似性搜索和密集向量聚类的库。它支持多种硬件平台，包括CPU和GPU，能够在海量数据集上实现快速的近似最近邻搜索（AN
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 冬天短期的暴利小生意有哪些？那些小生意适合新手做？ 一起高省
    短期生意不失为创业的一个商机，不过短期生意的商机是转瞬即逝的，而且这类生意也很难作为长期的生意去做，那冬天短期暴利小生意查看更多关于短期暴利小生意的文章有哪些呢?给大家先推荐一个2023年风口项目吧，真很不错的项目，全程零投资，当做副业来做真的很稳定，不管你什么阶层的人，或多或少都网购吧？你们知道网购是可以拿提成，拿返利，拿分佣的吗？你们知道很多优惠券群里面，天天群主和管理发一些商品吗？他们其实在
  • 高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts信息可视化数据分析
    ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
  • 01-Git初识 Meereen Gitgit
    01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name
  • Faiss：高效相似性搜索与聚类的利器 网络·魚 大数据faiss
    Faiss是一个针对大规模向量集合的相似性搜索库，由FacebookAIResearch开发。它提供了一系列高效的算法和数据结构，用于加速向量之间的相似性搜索，特别是在大规模数据集上。本文将介绍Faiss的原理、核心功能以及如何在实际项目中使用它。Faiss原理：近似最近邻搜索：Faiss的核心功能之一是近似最近邻搜索，它能够高效地在大规模数据集中找到与给定查询向量最相似的向量。这种搜索是近似的，
  • 果然只有离职的时候，才有人敢说真话！ return2ok
    今天公司出了神贴。今天中午吃饭，同事问我看了论坛上的神贴了吗？什么帖子？我问。同事显得很惊讶，你居然没看，现在那个帖子可能会成为年度最佳帖子。这么厉害？我等不及了，饭没吃完就快速的奔向办公室，打开公司论坛，我要一睹这个帖子的神奇。写这帖子的童鞋胆儿真肥。这哪里是一个帖子，这是很多个帖子，组成了一个系列。某人从公司文化、管理、人事、项目管理等多个方面分析了公司的概况，并抨击了公司的各种弊端，并提出了
  • 如何选择最适合你的项目研发管理软件？TAPD卓越版全面解析 北京云巴巴信息技术有限公司 产品经理需求分析
    在当今快速发展的科技时代，项目研发管理软件已成为企业不可或缺的重要工具。面对市场上琳琅满目的产品，如何选择一款适合自己团队的项目研发管理软件呢？本文将围绕项目研发管理软件的选择标准，重点介绍TAPD卓越版的特点、优势以及使用体验，让你更好地理解和选择适合自己的项目研发管理软件。项目研发管理软件的选择标准在选择项目研发管理软件时，我们需要考虑以下几个方面的因素：功能全面性：软件是否覆盖了从需求管理、
  • OPENAIGC开发者大赛企业组AI黑马奖 | AIGC数智传媒解决方案 RPA中国 人工智能AIGC传媒
    在第二届拯救者杯OPENAIGC开发者大赛中，涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到，我们特意开设了优秀作品报道专栏，旨在展示其独特之处和开发者的精彩故事。无论您是技术专家还是爱好者，希望能带给您不一样的知识和启发。让我们一起探索AIGC的无限可能，见证科技与创意的完美融合！创未来AI应用赛-企业组AI黑马奖作品名称：AIGC数智传媒解决方案参赛团队：深圳市三象智能技术
  • insert into select 主键自增_mybatis拦截器实现主键自动生成 weixin_39521651 insertintoselect主键自增mybatisdelete返回值mybatisinsert返回主键mybatisinsert返回对象mybatisplusinsert返回主键mybatisplus插入生成id
    前言前阵子和朋友聊天，他说他们项目有个需求，要实现主键自动生成，不想每次新增的时候，都手动设置主键。于是我就问他，那你们数据库表设置主键自动递增不就得了。他的回答是他们项目目前的id都是采用雪花算法来生成，因此为了项目稳定性，不会切换id的生成方式。朋友问我有没有什么实现思路，他们公司的orm框架是mybatis，我就建议他说，不然让你老大把mybatis切换成mybatis-plus。mybat
  • “这才好”麻辣香锅 能够增加人身体的免疫能力 小补文知
    我就来介绍一种香锅，那就是“这才好”麻辣香锅，它产出于著名的蜀地文化，具有悠久的历史土家风味，麻辣鲜香，健康安全。采用传统秘制麻辣香锅油辣子，还有贴心加料“孜然包”满足人们的不同口味需求，香锅底料辣椒，微辣且香，含有丰富微量元素和维生素，具有辣而不躁，味道纯正，醇厚温和。花椒采用历史悠久，被列为宫廷供品的“贡椒”的汉源花椒。我们还挑选了“川菜之魂”郫县豆瓣的鼻祖品牌豆瓣，保留最原始的郫县豆瓣味道，
  • 快乐春节 Lilywo
    春节肯定是大多小朋友都喜欢的节日吧，因为春节的娱乐项目可多啦，下面我就带大家去看一看某些娱乐项目吧！第一件肯定就是穿新衣啦！因为辞旧迎新，一年过去了，要迎来新的一年。所以过年穿新衣也是一项习俗吧；第二件，收压岁钱。压岁钱大家都知道吧，过年的时候，小朋友们肯定都会受到大人们的压岁钱吧，对啦！大家知道为什么亲人们会给我们压岁钱呢？答案是因为亲人们希望我们在新的一年里可以健健康康、平平安安，幸福福的生活
  • spring如何整合druid连接池？ 惜.己 springspringjunit数据库javaidea后端xml
    目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl
  • Java序列化进阶篇 g21121 java序列化
            1.transient         类一旦实现了Serializable 接口即被声明为可序列化，然而某些情况下并不是所有的属性都需要序列化，想要人为的去阻止这些属性被序列化，就需要用到transient 关键字。
  • escape()、encodeURI()、encodeURIComponent()区别详解 aigo JavaScriptWeb
    原文：http://blog.sina.com.cn/s/blog_4586764e0101khi0.html   JavaScript中有三个可以对字符串编码的函数，分别是： escape,encodeURI,encodeURIComponent，相应3个解码函数：,decodeURI,decodeURIComponent 。 下面简单介绍一下它们的区别 1 escape()函
  • ArcgisEngine实现对地图的放大、缩小和平移 Cb123456 添加矢量数据对地图的放大、缩小和平移Engine
    ArcgisEngine实现对地图的放大、缩小和平移:  个人觉得是平移，不过网上的都是漫游，通俗的说就是把一个地图对象从一边拉到另一边而已。就看人说话吧.  具体实现: 一、引入命名空间    using ESRI.ArcGIS.Geometry;    using ESRI.ArcGIS.Controls; 二、代码实现.
  • Java集合框架概述 天子之骄 Java集合框架概述
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • 旗正4.0页面跳转传值问题 何必如此 javajsp
    跳转和成功提示 a)        成功字段非空forward 成功字段非空forward，不会弹出成功字段，为jsp转发，页面能超链接传值,传输变量时需要拼接。接拼接方式list.jsp?test="+strweightUnit+"或list.jsp?test="+weightUnit+&qu
  • 全网唯一:移动互联网服务器端开发课程 cocos2d-x小菜 web开发移动开发移动端开发移动互联程序员
        移动互联网时代来了！     App市场爆发式增长为Web开发程序员带来新一轮机遇，近两年新增创业者，几乎全部选择了移动互联网项目！传统互联网企业中超过98%的门户网站已经或者正在从单一的网站入口转向PC、手机、Pad、智能电视等多端全平台兼容体系。据统计，AppStore中超过85%的App项目都选择了PHP作为后端程
  • Log4J通用配置|注意问题 笔记 7454103 DAOapachetomcatlog4jWeb
    关于日志的等级 那些去 百度就知道了！ 这几天 要搭个新框架  配置了 日志 记下来 ！做个备忘！ #这里定义能显示到的最低级别,若定义到INFO级别,则看不到DEBUG级别的信息了~! log4j.rootLogger=INFO,allLog # DAO层 log记录到dao.log 控制台 和 总日志文件 log4j.logger.DAO=INFO,dao,C
  • SQLServer TCP/IP 连接失败问题 ---SQL Server Configuration Manager darkranger sqlcwindowsSQL ServerXP
    当你安装完之后,连接数据库的时候可能会发现你的TCP/IP 没有启动.. 发现需要启动客户端协议 : TCP/IP  需要打开 SQL Server Configuration Manager... 却发现无法打开 SQL Server Configuration Manager..?? 解决方法:  C:\WINDOWS\system32目录搜索framedyn.
  • [置顶] 做有中国特色的程序员 aijuans 程序员
    从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有些技术书读得可
  • document.domain 跨域问题 avords document
    document.domain用来得到当前网页的域名。比如在地址栏里输入：javascript:alert(document.domain); //www.315ta.com我们也可以给document.domain属性赋值，不过是有限制的，你只能赋成当前的域名或者基础域名。比如：javascript:alert(document.domain = "315ta.com");
  • 关于管理软件的一些思考 houxinyou 管理
    工作好多看年了,一直在做管理软件,不知道是我最开始做的时候产生了一些惯性的思维,还是现在接触的管理软件水平有所下降.换过好多年公司,越来越感觉现在的管理软件做的越来越乱. 在我看来,管理软件不论是以前的结构化编程,还是现在的面向对象编程,不管是CS模式,还是BS模式.模块的划分是很重要的.当然,模块的划分有很多种方式.我只是以我自己的划分方式来说一下. 做为管理软件,就像现在讲究MVC这
  • NoSQL数据库之Redis数据库管理(String类型和hash类型) bijian1013 redis数据库NoSQL
    一.Redis的数据类型 1.String类型及操作         String是最简单的类型，一个key对应一个value，string类型是二进制安全的。Redis的string可以包含任何数据，比如jpg图片或者序列化的对象。         Set方法：设置key对应的值为string类型的value
  • Tomcat 一些技巧 征客丶 javatomcatdos
    以下操作都是在windows 环境下 一、Tomcat 启动时配置 JAVA_HOME 在 tomcat 安装目录，bin 文件夹下的 catalina.bat 或 setclasspath.bat 中添加 set JAVA_HOME=JAVA 安装目录 set JRE_HOME=JAVA 安装目录/jre 即可； 二、查看Tomcat 版本 在 tomcat 安装目
  • 【Spark七十二】Spark的日志配置 bit1129 spark
    在测试Spark Streaming时，大量的日志显示到控制台，影响了Spark Streaming程序代码的输出结果的查看(代码中通过println将输出打印到控制台上)，可以通过修改Spark的日志配置的方式，不让Spark Streaming把它的日志显示在console   在Spark的conf目录下，把log4j.properties.template修改为log4j.p
  • Haskell版冒泡排序 bookjovi 冒泡排序haskell
    面试的时候问的比较多的算法题要么是binary search，要么是冒泡排序，真的不想用写C写冒泡排序了，贴上个Haskell版的，思维简单，代码简单，下次谁要是再要我用C写冒泡排序，直接上个haskell版的，让他自己去理解吧。     sort [] = [] sort [x] = [x] sort (x:x1:xs) | x>x1 = x1:so
  • java 路径 配置文件读取 bro_feng java
    这几天做一个项目，关于路径做如下笔记，有需要供参考。 取工程内的文件，一般都要用相对路径，这个自然不用多说。 在src统计目录建配置文件目录res,在res中放入配置文件。 读取文件使用方式： 1. MyTest.class.getResourceAsStream("/res/xx.properties") 2. properties.load(MyTest.
  • 读《研磨设计模式》-代码笔记-简单工厂模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 个人理解：简单工厂模式就是IOC; * 客户端要用到某一对象，本来是由客户创建的，现在改成由工厂创建，客户直接取就好了 */ interface IProduct {
  • SVN与JIRA的关联 chenyu19891124 SVN
    SVN与JIRA的关联一直都没能装成功，今天凝聚心思花了一天时间整合好了。下面是自己整理的步骤： 一、搭建好SVN环境，尤其是要把SVN的服务注册成系统服务 二、装好JIRA，自己用是jira-4.3.4破解版 三、下载SVN与JIRA的插件并解压，然后拷贝插件包下lib包里的三个jar，放到Atlassian\JIRA 4.3.4\atlassian-jira\WEB-INF\lib下，再
  • JWFDv0.96 最新设计思路 comsci 数据结构算法工作企业应用公告
                       随着工作流技术的发展，工作流产品的应用范围也不断的在扩展，开始进入了像金融行业(我已经看到国有四大商业银行的工作流产品招标公告了)，实时生产控制和其它比较重要的工程领域，而
  • vi 保存复制内容格式粘贴 daizj vi粘贴复制保存原格式不变形
        vi是linux中非常好用的文本编辑工具，功能强大无比，但对于复制带有缩进格式的内容时，粘贴的时候内容错位很严重，不会按照复制时的格式排版，vi能不能在粘贴时，按复制进的格式进行粘贴呢？ 答案是肯定的，vi有一个很强大的命令可以实现此功能 。     在命令模式输入:set paste，则进入paste模式，这样再进行粘贴时
  • shell脚本运行时报错误：/bin/bash^M: bad interpreter 的解决办法 dongwei_6688 shell脚本
    出现原因：windows上写的脚本，直接拷贝到linux系统上运行由于格式不兼容导致 解决办法： 1. 比如文件名为myshell.sh，vim myshell.sh 2. 执行vim中的命令 : set ff?查看文件格式，如果显示fileformat=dos，证明文件格式有问题 3. 执行vim中的命令 :set fileformat=unix 将文件格式改过来就可以了，然后:w
  • 高一上学期难记忆单词 dcj3sjt126com wordenglish
    honest 诚实的；正直的 argue 争论 classical 古典的 hammer 锤子 share  分享；共有 sorrow 悲哀；悲痛 adventure 冒险 error 错误；差错 closet 壁橱；储藏室 pronounce 发音；宣告 repeat 重做；重复 majority 大多数；大半   native 本国的，本地的，本国
  • hibernate查询返回DTO对象，DTO封装了多个pojo对象的属性 frankco POJOhibernate查询DTO
          DTO-数据传输对象；pojo-最纯粹的java对象与数据库中的表一一对应。       简单讲：DTO起到业务数据的传递作用，pojo则与持久层数据库打交道。         有时候我们需要查询返回DTO对象，因为DTO
  • Partition List hcx2013 partition
    Given a linked list and a value x, partition it such that all nodes less than x come before nodes greater than or equal to x. You should preserve the original relative order of th
  • Spring MVC测试框架详解——客户端测试 jinnianshilongnian
    上一篇《Spring MVC测试框架详解——服务端测试》已经介绍了服务端测试，接下来再看看如果测试Rest客户端，对于客户端测试以前经常使用的方法是启动一个内嵌的jetty/tomcat容器，然后发送真实的请求到相应的控制器；这种方式的缺点就是速度慢；自Spring 3.2开始提供了对RestTemplate的模拟服务器测试方式，也就是说使用RestTemplate测试时无须启动服务器，而是模拟一
  • 关于推荐个人观点 liyonghui160com 推荐系统关于推荐个人观点
        回想起来，我也做推荐了3年多了，最近公司做了调整招聘了很多算法工程师，以为需要多么高大上的算法才能搭建起来的，从实践中走过来，我只想说【不是这样的】     第一次接触推荐系统是在四年前入职的时候，那时候，机器学习和大数据都是没有的概念，什么大数据处理开源软件根本不存在，我们用多台计算机web程序记录用户行为，用.net的w
  • 不间断旋转的动画 pangyulei 动画
    CABasicAnimation* rotationAnimation; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat: M
  • 自定义annotation sha1064616837 javaenumannotationreflect
    对象有的属性在页面上可编辑，有的属性在页面只可读，以前都是我们在页面上写死的，时间一久有时候会混乱，此处通过自定义annotation在类属性中定义。越来越发现Java的Annotation真心很强大，可以帮我们省去很多代码，让代码看上去简洁。 下面这个例子 主要用到了 1.自定义annotation：@interface，以及几个配合着自定义注解使用的几个注解 2.简单的反射 3.枚举
  • Spring 源码 up2pu spring
    1.Spring源代码 https://github.com/SpringSource/spring-framework/branches/3.2.x 注：兼容svn检出 2.运行脚本 import-into-eclipse.bat 注：需要设置JAVA_HOME为jdk 1.7 build.gradle compileJava { sourceCompatibilit
  • 利用word分词来计算文本相似度 yangshangchuan wordword分词文本相似度余弦相似度简单共有词
    word分词提供了多种文本相似度计算方式： 方式一：余弦相似度，通过计算两个向量的夹角余弦值来评估他们的相似度 实现类：org.apdplat.word.analysis.CosineTextSimilarity 用法如下： String text1 = "我爱购物"; String text2 = "我爱读书"; String text3 =
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他