css樣式-例子

效果圖:


html代碼:


scss代碼:

*{

margin:0;

padding:0;

box-sizing: border-box;

}

@mixin boxCenter{

position:absolute;

margin:auto;

top:0;

left:0;

bottom:0;

right:0;

}

.activity{

width:412px;

height:496px;

/*background-color:pink;*/

font-size:12px;

font-weight:400;

color:#333;

padding:0 20px;

margin:100px auto;

border:1px solid #eee;

.title{

/*background-color:lightblue;*/

font-size:14px;

text-align:left;

height:52px;

line-height: 52px;

}

.photo{

/*background-color:cyan;*/

.phpto-box{

width:372px;

height:444px;

margin:0 auto;

position:relative;

/*background-color:gold;*/

.round-box{

width:220px;

height:220px;

border:1px solid #9CACBB;

border-radius:50%;

@include boxCenter;

.dash-box{

width: 90%;

? ? height: 90%;

? ? /*background-color: lightblue;*/

? ? border: 1px dashed #9CACBB;

? ? border-radius: 50%;

? ? @include boxCenter;

? ? .small-box{

? ? width: 90%;

? ? height: 90%;

? ? background-image:url(./../img/bg.png);

? ? background-repeat: no-repeat;

? ? background-position: center;

? ? background-size: contain;

? ? border-radius:50%;

? ? ? ? z-index: 100;

? ? @include boxCenter;

? ? }

}

$dotWidth:8px;$dotHeight:8px;

.pie{

position:absolute;

width: 50%;

? ? height: 50%;

? ? border: 1px solid #9CACBB;

? ? border-radius: 100% 0 0 0;

? ? transform-origin: 100% 100% 0;

? ? border-left: none;

? ? border-top: none;

? ? border-bottom: none;

? ? .dot{

? ? width:$dotWidth;

? ? height:$dotHeight;

? ? background-color:#9CACBB;

? ? border-radius:50%;

? ? position: absolute;

? ? right: -$dotWidth/2;

? ? top: -$dotWidth/2;

? ? }

? ? .data{

? ? padding:0 3px;

? ? text-align:center;

? ? position:absolute;

? ? top: 0;

? ? right: 0;

? ? margin-top: -60px;

? ? margin-right: -30px;

? ? transform-origin: 50% 50% 0;

? ? ? ? height: 50px;

line-height: 22px;

? ? .num{

? ? font-size:14px;

? ? color: #00A4D7;

? ? display: block;

? ? }

? ? }

? ? @for $i from 1 through 6{

? ? &.pie#{$i}{

? ? transform: rotate(($i - 1) * 60deg);

? ? .data{

transform: rotate(-($i - 1) * 60deg);

? ? }

? ? @if $i==3{

? ? .data{

margin-top: -80px;

? ? margin-right: -35px;

? ? }

? ? }@else if $i==4{

? ? .data{

? ? margin-right: -40px;

? ? }

? ? }@else if $i==5{

? ? .data{

margin-top: -80px;

margin-right: -35px;

? ? }

? ? }@else if $i==6{

? ? .data{

? ? margin-top: -65px;

? ? margin-right: -15px;

? ? }

? ? }

? ? }

? ? }

}

}

}

}

}

css代碼:


1
2
3
4
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末臼朗,一起剝皮案震驚了整個(gè)濱河市角塑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌滤愕,老刑警劉巖甚带,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件她肯,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡鹰贵,警方通過查閱死者的電腦和手機(jī)晴氨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來碉输,“玉大人籽前,你說我怎么就攤上這事》蠹兀” “怎么了枝哄?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)阻荒。 經(jīng)常有香客問我挠锥,道長(zhǎng),這世上最難降的妖魔是什么侨赡? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任蓖租,我火速辦了婚禮,結(jié)果婚禮上羊壹,老公的妹妹穿的比我還像新娘蓖宦。我一直安慰自己,他們只是感情好油猫,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布稠茂。 她就那樣靜靜地躺著,像睡著了一般情妖。 火紅的嫁衣襯著肌膚如雪主慰。 梳的紋絲不亂的頭發(fā)上嚣州,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音共螺,去河邊找鬼。 笑死情竹,一個(gè)胖子當(dāng)著我的面吹牛藐不,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播秦效,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼雏蛮,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了阱州?” 一聲冷哼從身側(cè)響起挑秉,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎苔货,沒想到半個(gè)月后犀概,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡夜惭,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年姻灶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诈茧。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡产喉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出敢会,到底是詐尸還是另有隱情曾沈,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布鸥昏,位于F島的核電站塞俱,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏互广。R本人自食惡果不足惜敛腌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惫皱。 院中可真熱鬧像樊,春花似錦、人聲如沸旅敷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽媳谁。三九已至涂滴,卻和暖如春友酱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背柔纵。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工缔杉, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人搁料。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓或详,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親郭计。 傳聞我的和親對(duì)象是個(gè)殘疾皇子霸琴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容