首页 标题


ul-group-title
预览效果
销售
设计
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-group-title">销售</div>
<div class="ul-group-title">设计</div>

.ul-group-title {
    color        : #999;
    border-bottom: 1px solid #bbb;
    padding      : 5px 0;
    margin-bottom: 15px;
}
.ul-group-title {
  color: #999;
  border-bottom: 1px solid #bbb;
  padding: 5px 0;
  margin-bottom: 15px;
}
<view class="ul-group-title">销售</view>
<view class="ul-group-title">设计</view>
ul-group-title-2
预览效果
销售
设计
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-group-title-2">销售</div>
<div class="ul-group-title-2">设计</div>

.ul-group-title-2 {
  background: #d2dbe0;
  width: 84px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  position: relative;
  margin-top: 30px;
  margin-bottom: 14px;
  color: #666666;
}

.ul-group-title-2::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 15px solid #d2dbe0;
  right: -15px;
  top: 0px;
}
.ul-group-title-2 {
  background: #d2dbe0;
  width: 84px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  position: relative;
  margin-top: 30px;
  margin-bottom: 14px;
  color: #666666;
}
.ul-group-title-2::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 15px solid #d2dbe0;
  right: -15px;
  top: 0px;
}
<view class="ul-group-title-2">销售</view>
<view class="ul-group-title-2">设计</view>
简约分组标题
预览效果
分组标题
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-group-title-simple">分组标题</div>

.ul-group-title-simple {
  line-height: 30px;
  font-size: 16px;
  padding-left: 10px;
  position: relative;
}
.ul-group-title-simple:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  height: 16px;
  width: 3px;
  top: 7px;
  border-radius: 3px;
  background: linear-gradient(0deg, #7FC0FC, #4B7EEF);
}
.ul-group-title-simple {
  line-height: 30px;
  font-size: 16px;
  padding-left: 10px;
  position: relative;
}
.ul-group-title-simple:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  height: 16px;
  width: 3px;
  top: 7px;
  border-radius: 3px;
  background: linear-gradient(0deg, #7FC0FC, #4B7EEF);
}
<view class="ul-group-title-simple">分组标题</view>
ul-title
预览效果
精品酒店
Boutique Hotel
精品酒店
Boutique Hotel
精品酒店
Boutique Hotel
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-section">
    <div class="ul-title">
        <div class="ul-title-main">精品酒店 </div>
        <div class="ul-title-plus">Boutique Hotel</div>
        <div class="ul-title-line"></div>
    </div>
</div>
<div style="width:200px" class="ul-section">
    <div class="ul-title">
        <div class="ul-title-main">精品酒店 </div>
        <div class="ul-title-plus">Boutique Hotel</div>
        <div class="ul-title-line"></div>
    </div>
</div>
<div class="ul-section">
    <div class="ul-title" style="margin: 0 auto;width: 200px;">
        <div class="ul-title-main">精品酒店 </div>
        <div class="ul-title-plus">Boutique Hotel</div>
        <div class="ul-title-line"></div>
    </div>
</div>

.ul-title {
    text-align : center;
    line-height: 1.5;
}

.ul-title-main {
    font-size: 16px;
}

.ul-title-plus {
    color: #999;
}

.ul-title-line {
    border-top: 2px solid #666;
    margin-top: 8px;
}
.ul-title {
  text-align: center;
  line-height: 1.5;
}
.ul-title-main {
  font-size: 16px;
}
.ul-title-plus {
  color: #999;
}
.ul-title-line {
  border-top: 2px solid #666;
  margin-top: 8px;
}
<view class="ul-section">
    <view class="ul-title">
        <view class="ul-title-main">精品酒店 </view>
        <view class="ul-title-plus">Boutique Hotel</view>
        <view class="ul-title-line"></view>
    </view>
</view>
<view style="width:200px" class="ul-section">
    <view class="ul-title">
        <view class="ul-title-main">精品酒店 </view>
        <view class="ul-title-plus">Boutique Hotel</view>
        <view class="ul-title-line"></view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-title" style="margin: 0 auto;width: 200px;">
        <view class="ul-title-main">精品酒店 </view>
        <view class="ul-title-plus">Boutique Hotel</view>
        <view class="ul-title-line"></view>
    </view>
</view>