單一幻燈片解決方案 ``` .hm-no-arrow .swiper-button-white,.hm-no-arrow .swiper-pagination{display:none;} ``` ##### 圖文組件標題間距取消 ``` .自定義css .do-caption .do-title { margin: 0; } ``` ##### 手機端圖片100%；標題100%寬 ``` @media only screen and (max-width: 800px){ 自定義class .do-media-image-box{width:100%!important;display:contents;} 自定義class .do-title{width:100%!important} } ``` ##### 圖文圖片下放置 ``` .自定義css .do-element-media-li .do-title { z-index: 3; position: absolute; top: 0; } .自定義css .do-media-image-conter { position: relative; } ``` ##### 圖文圖片居右 ``` .自定義class .do-media-image-box{float:right!important;margin-right:0!important;} ``` ##### 鼠標經過圖片標題遮罩 自定義效果 ``` .hm-mdzs-tw .do-caption-overlay-hover-cover .do-title{background-color: rgba(150, 206, 63, 0.66);height: 90%; margin: auto; width: 90%; border-radius: 30px;} ``` ##### 底部圖文1像素bug ``` .hm-footer-top{margin-bottom: -1px;} ``` ##### 左圖右文手機端修改 ``` @media only screen and (max-width: 640px){ .ly-right .do-title { float: left; } .ly-right .do-element-media-content.md .do-content-list .do-media-image-box { width: 100%; } .ly-right .do-element-media-ul li:nth-child(2n+1) .do-media-image-box { float: none!important; } } ``` ###### 圖文樣式加入READ MORE ``` .blog-item .do-html-content.des:after{content:"READ MORE";float:right;font-weight:bold;} .blog-item li:hover .do-html-content.des:after{color:#00923F} ``` ##### PC導航中央圖片 > 實現方式 導航外鏈放圖實現自適應效果 ``` 外鏈所在的class名稱，此處以.nav409248舉例 .nav409248{background: url(http://bk.image.styleweb.com.cn/2017/7/25/11825_j5jgjv7p.png?imageView2/2/w/1800) no-repeat; background-size: 180px;} .nav409248 a{width: 180px;} .nav409248 span{font-size:0;} .nav409248:hover {background: url(http://bk.image.styleweb.com.cn/2017/7/25/11825_j5jgjv7p.png?imageView2/2/w/1800) no-repeat!important; background-size: 180px!important; } ``` 玉子堂 ``` .blog-item .do-html-content.des:after{content:"";display:block;height:3px;background:#96CE3F;width:30%;margin:10px auto;transition: all 0.5s;} .blog-item li:hover .do-html-content.des:after{background:#ffF;width:50%;transition: all 0.5s;} .blog-item li:hover .title{color:#fff;transition: all 0.5s;} .blog-item li:hover .des>*{color:#fff;transition: all 0.3s;} .blog-item{ text-align: center;} .blog-item li:hover .do-element-media-conter { background-color: #96CE3F; transition: all 0.5s; } ``` ##### 圖文組件個性化效果 ``` .num2.do-time-open .do-time-left{display: block;} .num2.do-time-open .do-media-image-box{width: 22%!important} .num2.do-time-open .lg{margin:-32px} .num2.do-time-open .lg .do-element-media-li{padding:32px!important;} ``` 單排圖文 ``` <script> $('.hm-tuwen img') .wrap('<span></span>') </script> <style> .hm-tuwen .title span{min-width: 35px; display: -webkit-inline-box;} </style> ```