<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first web</title> <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8"> </head> <body> <div class="ui inverted vertical segment"> <div class="ui fluid image"> <img src="images/banner.jpg" alt=""/> </div> </div> <div class="ui vertical segment"> <div class="ui container segment"> <a href="#" class="ui blue right ribbon label">life</a> <h1 class="ui header"> First web </h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button type="button" name="button" class="ui inverted blue button">Read more</button> </div> <div class="ui container segment"> <a href="#" class="ui red right ribbon label">tech</a> <h1 class="ui header"> First web </h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button type="button" name="button" class="ui inverted blue button">Read more</button> </div> <div class="ui container segment"> <a href="#" class="ui green right ribbon label">news</a> <h1 class="ui header"> First web </h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <button type="button" name="button" class="ui inverted blue button">Read more</button> </div> </div> <div class="ui inverted vertical very padded segment"> xyxpractice@ </div> </body> </html>
semanticUI中的相關源碼：
.ui.segment {
position: relative;
background: #ffffff;
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
margin: 1rem 0em;
padding: 1em 1em;
border-radius: 0.28571429rem;
border: 1px solid rgba(34, 36, 38, 0.15);
}
.ui.inverted.segment {
border: none;
box-shadow: none;
}
.ui.inverted.segment,
.ui.primary.inverted.segment {
background: #1b1c1d;
color: rgba(255, 255, 255, 0.9);
}
.ui.vertical.segment {
margin: 0em;
padding-left: 0em;
padding-right: 0em;
background: none transparent; //none：表示沒有設置背景圖片 transparent：表示透明，是background-color的默認值
border-radius: 0px;
box-shadow: none;
border: none;
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
}
/* All Sizes */
.ui.container {
display: block;
max-width: 100% !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) { //自適應992px-1199px，其他寬度省略
.ui.container {
width: 933px;
margin-left: auto !important;
margin-right: auto !important;
}
.ui.header {
border: none;
margin: calc(2rem - 0.14285em ) 0em 1rem; //計算
padding: 0em 0em;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: bold;
line-height: 1.2857em;
text-transform: none; //定義文本，標准大小寫
color: rgba(0, 0, 0, 0.87);
}
.ui.fluid.images,
.ui.fluid.image,
.ui.fluid.images img,
.ui.fluid.images svg,
.ui.fluid.image svg,
.ui.fluid.image img {
display: block;
width: 100%;
height: auto;
}
/*-------------------
Ribbon
--------------------*/
.ui.ribbon.label {
position: relative;
margin: 0em;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content; //設置元素最小寬度為寬度最大那個內容的寬度
border-radius: 0em 0.28571429rem 0.28571429rem 0em;
border-color: rgba(0, 0, 0, 0.15);
}
/* Positioning */
.ui.ribbon.label {
left: calc( -1rem - 1.2em );
margin-right: -1.2em;
padding-left: calc( 1rem + 1.2em );
padding-right: 1.2em;
}
.ui[class*="right ribbon"].label {
left: calc(100% + 1rem + 1.2em );
padding-left: 1.2em;
padding-right: calc( 1rem + 1.2em );
}
/* Right Ribbon */
.ui[class*="right ribbon"].label {
text-align: left;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%); //定義轉換，只用X軸的值
border-radius: 0.28571429rem 0em 0em 0.28571429rem;
}
.ui.button {
cursor: pointer; //定義光標顯示類型為手
display: inline-block;
min-height: 1em;
outline: none; //無輪廓
border: none;
vertical-align: baseline; //元素放置在父元素基線上
background: #e0e1e2 none;
color: rgba(0, 0, 0, 0.6);
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
margin: 0em 0.25em 0em 0em;
padding: 0.78571429em 1.5em 0.78571429em;
text-transform: none;
text-shadow: none;
font-weight: bold;
line-height: 1em;
font-style: normal;
text-align: center;
text-decoration: none; //文本無修飾
border-radius: 0.28571429rem;
box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; //不可以選擇文本
-webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; //opacity設置不透明級別，ease過渡速度默認由快到慢
will-change: ''; //似乎是優化，具體意思不明白
-webkit-tap-highlight-color: transparent; //當用戶點擊iOS的Safari瀏覽器中的鏈接或JavaScript的可點擊的元素時，覆蓋顯示的高亮顏色。
}
.ui.padded.segment {
padding: 1.5em;
}
.ui[class*="very padded"].segment {
padding: 3em;
}
