当我们构建门户网站时,CSS框架是必不可少的,因为它能够使网站的样式表现更为一致和美观。下面是建立门户网站 CSS 框架的规则和示例说明。
.block__element--modifier
。下面是两个示例,以帮助更好的理解规则。
在门户网站上,有一个标题栏,包含两个链接:登录和注册。根据以上规则,可以按照如下步骤编写代码。
<div class="header">
<a class="header__login" href="#">登录</a>
<a class="header__register" href="#">注册</a>
</div>
/* 样式重置 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* BEM 命名规范 */
.header {
display: flex;
justify-content: flex-end;
align-items: center;
height: 50px;
background-color: #333;
color: #fff;
}
.header__login, .header__register {
text-decoration: none;
color: inherit;
margin-right: 20px;
}
/* 媒体查询 */
@media screen and (max-width: 768px) {
.header {
justify-content: center;
}
}
/* 样式表压缩 */
.header{display:flex;justify-content:flex-end;align-items:center;height:50px;background-color:#333;color:#fff}.header__login,.header__register{text-decoration:none;color:inherit;margin-right:20px}.@media screen and (max-width:768px){.header{justify-content:center}}
在门户网站上还有一个分页器,根据以上规则,可以按照如下步骤编写代码。
<div class="pagination">
<a class="pagination__link pagination__link--prev" href="#">上一页</a>
<a class="pagination__link pagination__link--number" href="#">1</a>
<a class="pagination__link pagination__link--number pagination__link--active" href="#">2</a>
<a class="pagination__link pagination__link--number" href="#">3</a>
<a class="pagination__link pagination__link--next" href="#">下一页</a>
</div>
/* 样式重置 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* BEM 命名规范 */
.pagination {
display: flex;
justify-content: center;
align-items: center;
}
.pagination__link {
display: inline-block;
text-decoration: none;
color: #333;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 10px;
}
.pagination__link--prev,
.pagination__link--next {
background-color: #f4f4f4;
color: #333;
font-weight: bold;
}
.pagination__link--number {
background-color: #fff;
}
.pagination__link--active {
background-color: #333;
color: #fff;
}
/* 媒体查询 */
@media screen and (max-width: 768px) {
.pagination {
flex-direction: column;
align-items: flex-start;
}
.pagination__link {
margin-bottom: 10px;
}
}
/* 样式表压缩 */
.pagination{display:flex;justify-content:center;align-items:center}.pagination__link{display:inline-block;text-decoration:none;color:#333;padding:6px 12px;border:1px solid #ccc;border-radius:4px;margin-right:10px}.pagination__link--prev,.pagination__link--next{background-color:#f4f4f4;color:#333;font-weight:bold}.pagination__link--number{background-color:#fff}.pagination__link--active{background-color:#333;color:#fff}@media screen and (max-width:768px){.pagination{flex-direction:column;align-items:flex-start}.pagination__link{margin-bottom:10px}}
这些规则和示例都是建立门户网站 CSS 框架的基础,当您充分理解并且能够熟练运用它们时,就能够更加高效和优雅地设计网站了。
本文链接:http://task.lmcjl.com/news/15832.html