门户网站构建CSS框架的规则

当我们构建门户网站时，CSS框架是必不可少的，因为它能够使网站的样式表现更为一致和美观。下面是建立门户网站 CSS 框架的规则和示例说明。

规则

1. 样式重置： 不同浏览器的默认样式各不相同，为了让不同页面在不同浏览器上展示相同的外观，首先需要进行样式重置。
2. BEM 命名规范：使用 BEM 命名约定可以让代码更为清晰、易于理解和维护。BEM 规范是由块 (block)、元素 (element) 和修饰符 (modifier) 三部分组成，格式为 .block__element--modifier 。
3. 媒体查询：当网站在不同分辨率下的显示效果不同，为了避免出现页面排版混乱的情况，需要使用最小宽度媒体查询，以便根据屏幕宽度应用 CSS 样式。
4. 样式表压缩：在网站部署前需要对样式表进行压缩，以减小文件大小并加速页面加载速度。

示例

下面是两个示例，以帮助更好的理解规则。

示例 1

在门户网站上，有一个标题栏，包含两个链接：登录和注册。根据以上规则，可以按照如下步骤编写代码。

1. 编写 HTML 代码，使用 BEM 命名约定。

<div class="header">
   <a class="header__login" href="#">登录</a>
   <a class="header__register" href="#">注册</a>
</div>

1. 编写 CSS 样式，应用样式重置、媒体查询和样式表压缩。

/* 样式重置 */
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}}

示例 2

在门户网站上还有一个分页器，根据以上规则，可以按照如下步骤编写代码。

1. 编写 HTML 代码，使用 BEM 命名约定。

<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>

1. 编写 CSS 样式，应用样式重置、BEM命名、媒体查询和样式表压缩。

/* 样式重置 */
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 框架的基础，当您充分理解并且能够熟练运用它们时，就能够更加高效和优雅地设计网站了。