這篇文章先講幾個(gè)重要的點(diǎn),然后文末有效果圖和具體代碼
-
css優(yōu)先級(jí)
<div class="column">
<div class="ui inverted segment card-view" style="background: url('img/card.png');background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header">Title's here</h3>
<h4 class="ui header">Username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">40%get</div>
<span>10k<i class="icon unhide"></i></span>
</div>
</div>
這里再介紹一種選擇器,之前我們?cè)谛薷臅r(shí),為了防止修改一個(gè)標(biāo)簽而造成其他標(biāo)簽樣式的改變,我們會(huì)給標(biāo)簽加一個(gè)別名,此外,我們也可以使用子孫選擇器
.ui.vertical.basic.segment.recommended > .ui.center.aligned.header{
}
今天發(fā)現(xiàn)一個(gè)問(wèn)題,就是css選擇器不要留空格,比如以下這種方式是不對(duì)的
.ui .vertical .basic .segment .recommended{
}
需要改成無(wú)空格:
.ui.vertical.basic.segment.recommended{
}
-
柵格布局
1.定距
<div class="ui three column grid">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
2.定寬
<div class="ui grid">
<div class="four wide column">
</div>
<div class="four wide column">
</div>
<div class="four wide column">
</div>
<div class="four wide column">
</div>
</div>
效果圖
完整HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/semantic.css">
<link rel="stylesheet" href="10Mins.css">
</head>
<body>
<div class="ui vertical basic segment master">
<div class="ui text menu">
<div class="ui image logo">
</div>
<div class="right menu">
<div class="item">
<button type="button" name="button" class="ui inverted circular blue button">Login</button>
</div>
</div>
</div>
<h1 class="ui center inverted aligned header slogan">
這里是大標(biāo)題應(yīng)該出現(xiàn)的位置
<p class="sub header">
這里是子標(biāo)題出現(xiàn)的位置
</p>
<button type="button" name="button" class="ui circular red button">注冊(cè)一個(gè)</button>
</h1>
</div>
<div class="ui vertical basic segment recommended">
<h1 class="ui center aligned header">10mins學(xué)會(huì)一門(mén)技能</h1>
<div class="ui three column grid container">
<div class="column">
<!-- style="background: url('img/card.png');background-size: cover;background-repeat: no-repeat;" -->
<div class="ui inverted segment card-view" >
<h3 class="ui header">Title's here</h3>
<h4 class="ui header">Username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">40%get</div>
<span>10k<i class="icon unhide"></i></span>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view">
<h3 class="ui header">Title's here</h3>
<h4 class="ui header">Username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">40%get</div>
<span>10k<i class="icon unhide"></i></span>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view">
<h3 class="ui header">Title's here</h3>
<h4 class="ui header">Username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">40%get</div>
<span>10k<i class="icon unhide"></i></span>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view">
<h3 class="ui header">Title's here</h3>
<h4 class="ui header">Username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">40%get</div>
<span>10k<i class="icon unhide"></i></span>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view">
<h3 class="ui header">Title's here</h3>
<h4 class="ui header">Username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">40%get</div>
<span>10k<i class="icon unhide"></i></span>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view">
<h3 class="ui header">Title's here</h3>
<h4 class="ui header">Username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">40%get</div>
<span>10k<i class="icon unhide"></i></span>
</div>
</div>
</div>
</div>
<div class="ui pink inverted basic segment people-say">
<h3 class="ui center aligned header">呈現(xiàn)給您最簡(jiǎn)潔有趣的知識(shí)是我們認(rèn)為最有趣的事情</h3>
<div class="ui grid">
<div class="four wide column">
<div class="ui circular segment">
<i class="icon red inverted circular star "></i>
<h4 class="ui inverted header">首席執(zhí)行官
<p class="sub header">CEO</p></h4>
</div>
</div>
<div class="four wide column">
<div class="ui circular segment">
<i class="icon red inverted circular star "></i>
<h4 class="ui inverted header">首席執(zhí)行官
<p class="sub header">CEO</p></h4>
</div>
</div>
<div class="four wide column">
<div class="ui circular segment">
<i class="icon red inverted circular star "></i>
<h4 class="ui inverted header">首席執(zhí)行官
<p class="sub header">CEO</p></h4>
</div>
</div>
<div class="four wide column">
<div class="ui circular segment">
<i class="icon red inverted circular star "></i>
<h4 class="ui inverted header">首席執(zhí)行官
<p class="sub header">CEO</p></h4>
</div>
</div>
</div>
<button name="button" type="button" class="ui red inverted circular button">Be our coach</button>
</div>
<div class="ui inverted vertical padded segment">
<div class="ui grid">
<div class=" four wide column">
<div class="ui inverted vertical padded text menu">
<div class="ui image">
</div>
</div>
</div>
<div class=" four wide column">
<div class="ui inverted vertical padded text menu">
<div class="item">Adress:CN</div>
<div class="item">Tel:10000000</div>
<div class="item">E-mail:1231231</div>
</div>
</div>
<div class=" four wide column">
<div class="ui inverted vertical padded text menu">
<div class="item">Adress:CN</div>
<div class="item">Tel:10000000</div>
<div class="item">E-mail:1231231</div>
</div>
</div>
<div class=" four wide column">
<div class="ui inverted vertical padded text menu">
<div class="item">Designed by</div>
<div class="item">
<h1 class="ui inverted header bottom-logo">zmy</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
完整CSS代碼
.ui.vertical.basic.segment.master{
height: 500px;
background: url('img/hugue.jpg');
background-size: cover;
background-repeat: no-repeat;
padding-top: 40px;
}
.ui .text.menu{
margin-top: -10px;
}
.ui.image.logo{
margin-left: 15px;
/* margin-top: 5px; */
height: 50px;
width: 50px;
}
.ui.image.footer{
margin-left: 30px;
margin-top: 20px;
}
.ui.inverted.circular.blue.button{
margin-right: 20px;
/* margin-top: -10px; */
}
.ui.center.inverted.aligned.header.slogan{
font-size: 40px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
h1.ui.header .sub.header{
margin: 20px;
}
.ui .circular.red.button{
width: 200px;
}
.ui.inverted.header.bottom-logo{
margin: 0px;
}
.ui.inverted.segment.card-view{
height: 220px;
/* background: :url('img/card.png');background-size: cover;background-repeat: no-repeat; */
}
.ui.vertical.basic.segment.recommended > .ui.center.aligned.header{
font-size: 40px;
margin-top: 50px;
margin-bottom: 50px;
}
.ui.inverted.segment.card-view > .ui.header{
margin-bottom: 50px;
}
.ui.pink.inverted.basic.segment.people-say{
height: 450px;
/* background: url('image/people1.jpg');
background-size: cover;
background-repeat: no-repeat; */
}
.ui.pink.inverted.basic.segment.people-say > .ui.center.aligned.header{
margin-top: 30px;
}
.ui.circular.segment{
background: url('img/people2.jpg');
background-size: cover;
background-repeat: no-repeat;
width: 120px;
height: 120px;
position: absolute;
left: 50%;
top: 200px;
transform: translate(-50%, -50%);
}
.ui.circular.segment > .ui.header{
position: absolute;
left: 50%;
top: 110%;
transform: translate(-50%, -50%);
width: 200px;
}
.icon.red.inverted.circular.star{
position: absolute;
left: 100%;
top: 100%;
transform: translate(-100%, -100%)
}
.ui.pink.inverted.basic.segment.people-say > .ui.red.inverted.circular.button{
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, -50%);
background: white;
}
.ui.inverted.vertical.padded.segment{
margin-top: 100px;
}
