做好一个网站顺序

版心居中

网页制作思路

头部

logo制作技巧

转block目的：让宽高生效。

导航制作技巧

搜索区域

earch input{

    /* 所有.flex-item的子元素将等分容器的宽度 */

    flex: 1;

    border: 0;

    /* 背景色是透明的 */

    background-color: transparent;

    /* 去掉了表单控件焦点框 */

    outline: none;

}

用户区域

  /* 专门用来处理。行内块和行内垂直方向对齐方式 */

    vertical-align: middle;

banner版心布局

导航

/* 块级宽度是父级的百分之百 */

font-weight: 700;不加px

height: 100px; /* 容器的高度 */ line-height: 100px; /* 行高与容器高度相同，实现垂直居中 */

text-align: center; /* 水平居中文本或内联块元素 

使用transform

通过CSS的transform属性，可以移动元素而不脱离文档流。

.element { transform: translateY(20px); /* 向下移动20像素 */ }

精品推荐

   /* 所有.item元素将平等地分享容器的空间 */

    flex: 1;

精品课程

 width: 100%; /* 图片宽度占满div宽度 */

    height: 100%; /* 图片高度占满div高度 */

    object-fit: fill; /* 拉伸图片填满整个容器 */

<i>标签在HTML中代表“斜体”，它通常用于显示斜体文本。在传统上，这个标签被用来表示斜体文本，比如书籍标题中的卷号，或者用于强调某些词语。