banner about 新增小屏文字居中 500/
.col-xs-8 {
width: 100%;
text-align: center !important;
}
1 /* 顶部轮播图中文字设置缩放 */
2 媒介查询 500px缩放0.4 768缩放0.7 992缩放0.7
3 #banner .home .text {
4 transform: scale(0.4);
5 transform-origin: left top;
6 }
7 /* css样式 */
8 #banner .home {
9 position: relative;
10 }
11 #banner .home .text {
12 position: absolute;
13 top: 11vw;
14 left: 11vw;
15 text-transform: uppercase;
16 color: #000;
17 }
18 #banner .home .text h2 {
19 line-height: 6rem;
20 font-size: 6rem;
21 font-family: 'Oswald-Light';
22 font-weight: bold;
23 padding-bottom: 10px;
24 color: #fff;
25 }
26 #banner .home .text .col-3 {
27 text-align: left;
28 padding: 0 5px;
29 background-color: transparent;
30 }
31 #banner .home .text a {
32 display: inline-block;
33 white-space:nowrap;
34 overflow: hidden;
35 text-overflow: ellipsis;
36 text-align: center;
37 width: 100%;
38 max-width: 200px;
39 line-height: 2rem;
40 font-size: 0.8rem;
41 font-family: 'Oswald-Light';
42 border: 1px solid red;
43 margin: 0 2px 5px;
44 color: #fff;
45 }
46
47 html代码
48 <ul class="row ">
49 <li>
50 <div class="home">
51 <img src="images/background.png">
52 <div class="text container">
53 <h2>SPUNLACE <br>NONWOVEN</h2>
54 <div class="row">
55 <div class="col-3 col-lg-3"><a href="">WALL COVERINGS</a></div>
56 <div class="col-3 col-lg-3"><a href="">AUTOMOTIVE INTERIORS</a></div>
57 <div class="col-3 col-lg-3"><a href="">INDUSTRIAL SUBSTRATES</a></div>
58 <div class="col-3 col-lg-3"><a href="">LEATHER SUBSTRATES</a></div>
59 <div class="col-3 col-lg-3"><a href="">MEDICAL BEAUTY</a></div>
60 <div class="col-3 col-lg-3"><a href="">HOUSEHOLD CLEANING</a></div>
61 </div>
62 </div>
63 </li>
64 </ul>
1 /* about增加小屏幕居中对齐 */
2 <div class="col-3 col-xs-8 wow bounceInLeft" data-wow-duration=".3s" data-wow-delay="0.3s">
3 <div class="col-3 col-xs-8">
4 <img src="images/time.png">
5 </div>
6 <div class="col-5 col-xs-8 about-text">
7 <h3>2017</h3>
8 <p>was established in year 2017</p>
9 </div>
10 </div>
11 css样式
12 #index-body .i-advantage .all-one .ui .row.about .col-3 img {
13 width: 100%;
14 width: 5rem;
15 }
16 #index-body .i-advantage .all-one .ui .row.about .about-text {
17 line-height: 1.2;
18 text-align: left;
19 }
20 #index-body .i-advantage .all-one .ui .row.about .about-text h3 {
21 color: #0da8d7;
22 font-size: 1.9rem;
23 font-family: 'Poppins-Medium';
24 }
25 #index-body .i-advantage .all-one .ui .row.about .about-text p {
26 color: #666;
27 font-size: 1rem;
28 font-family: 'Raleway-Medium';
29 }
30
1 /* all-six logo响应式 */
2 <div class="rwo six-logo ">
3 <div class="col-2 col-md-4 col-sm-4 left"><i class=""></i></div>
4 <h3 class="col-6 col-md-4 col-sm-4 right">INQUIRY</h3>
5 </div>
6 css样式
7 #index-body .all-six .six-left .six-logo .col-6 {
8 padding-left: 0;
9 }
1 <div class="row wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
2 <div class="four-img">
3 <img src="images/map.jpg" alt="">
4 <div class="text container">
5 <h3>sales network</h3>
6 <p>Exported to the United States, Japan, South Korea,<br>
7 Europe, Australia, Canada and dozens of countries.</p>
8 </div>
9 </div>
10 </div>
11 css样式
12 #index-body .all-four .row .four-img {
13 position: relative;
14 overflow: hidden;
15 }
16 #index-body .all-four .row .four-img .text {
17 position: absolute;
18 top: 43%;
19 right: 13%;
20 text-align: left;
21 }
22 #index-body .all-four .row .four-img .text h3 {
23 font-size: 2rem;
24 font-family: 'Raleway-SemiBold';
25 text-transform: uppercase;
26 white-space: normal;
27 }
28 #index-body .all-four .row .four-img .text p {
29 font-size: 1rem;
30 color: #666;
31 font-family: 'Raleway-Regular';
32
33 basic新增：
34
35 700 /0.6 500 /0.4
36 #index-body .all-four .row .four-img .text {
37 transform: scale(0.4);
38 transform-origin: right top;
39 }
来源：https://www.cnblogs.com/chalkbox/p/12591201.html