单一幻灯片解决方案 ``` .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> ```