自己做一个网站多少钱网站设计的基本原则
CSS 知识点总结１
今天写了两个页面,用到的知识点,总结一下
1. Flexbox 布局
display: flex;：启用 Flexbox 布局，用于创建灵活的容器。flex-direction: column;：将子元素垂直排列。justify-content：控制子元素在主轴上的对齐方式。justify-content: space-between;：子元素在主轴两端对齐，剩余空间均匀分布。justify-content: center;：子元素在主轴居中。
align-items：控制子元素在交叉轴上的对齐方式。align-items: center;：子元素在交叉轴居中。align-items: flex-end;：子元素在交叉轴末端对齐。
gap: 10px;：设置子元素之间的间距。
2. Grid 布局
display: grid;：启用 Grid 布局，用于创建网格容器。grid-template-columns: repeat(2, 1fr);：定义两列，每列宽度相等。gap: 30px;：设置网格项之间的间距。
3. 盒模型
padding: 20px;：设置内边距。margin: 20px;：设置外边距。margin: 0 auto;：水平居中元素。border-radius: 10px;：设置圆角。border: 1px solid #ddd;：设置边框。
4. 定位
position: relative;：设置相对定位，为子元素的绝对定位提供参考。position: absolute;：设置绝对定位，脱离文档流。left: 12px;：距离左侧 12px。top: 50%;：距离顶部 50%。transform: translateY(-50%);：精确垂直居中。
5. 过渡效果
transition: box-shadow 0.3s ease;：设置box-shadow属性的过渡效果。transition: border-color 0.3s ease;：设置border-color属性的过渡效果。
6. 字体和颜色
font-family: Arial, sans-serif;：设置字体。font-size: 16px;：设置字体大小。color: #333;：设置字体颜色。background-color: #fbfbfadd;：设置背景颜色（带透明度）。
7. 响应式设计
max-width: 800px;：限制容器的最大宽度，确保在不同屏幕尺寸下保持布局。width: 90%;：设置宽度为父容器的 90%。
8. 其他
min-height: 100vh;：设置容器的最小高度为视口高度。cursor: pointer;：设置鼠标悬停时为手型，表示可点击。outline: none;：移除聚焦时的默认边框。
总结
- 布局：广泛使用 Flexbox 和 Grid 布局，创建灵活的页面结构。
- 定位：使用相对定位和绝对定位，精确控制元素的位置。
- 盒模型：通过
padding、margin和border控制元素的间距和边框。 - 响应式设计：通过
max-width和百分比宽度，确保页面在不同设备上表现良好。 - 过渡效果：为交互元素添加平滑的过渡效果，提升用户体验。