m0_74427236的博客

本文介绍了小米商城网页开发实践，通过CSS和HTML构建了完整的页面布局。首先初始化CSS样式，引入阿里巴巴矢量图标库的字体图标，并采用弹性盒子模型实现元素居中。页面包含顶部广告、黑白导航栏、轮播图、产品展示区等模块，其中导航栏运用了悬浮下拉菜单效果，产品展示区实现了商品卡片布局。针对元素居中问题，分析了三种解决方案：弹性盒子(Flexbox)、定位(position)和表格布局，推荐使用Flexbox作为现代简洁的方案，同时提供兼容性更好的定位方案作为备选。该实践展示了响应式网页开发的关键技术，包括CSS

摘要：文章展示了两个CSS动画效果实现过程。首先通过正方形和半圆组合创建跳动的心形，使用transform:rotate(45deg)和scale动画实现心跳效果。随后详细描述了火柴人跑步动画的制作过程，遇到rotate3d和transform-origin应用难题，通过反复调试最终完成。文中包含完整的HTML/CSS代码，并总结了transform函数的使用方法，包括rotate、scale、skew等2D/3D变换技巧，特别强调了transform-origin对变形基准点的重要影响。

本文介绍了三种前端优化技术：雪碧图通过合并小图标减少HTTP请求，使用background-position定位；字体图标将图标转为字体文件，支持CSS样式调整，推荐使用阿里巴巴矢量图标库；滑动门技术利用CSS背景和定位实现弹性UI效果。文中包含具体代码示例，展示了小米商城风格的滑动菜单实现。作者对这些技术感到新奇有趣，计划未来制作照片集并加入音乐收藏功能。

本文介绍了CSS3的主要新特性及其应用：1）圆角边框border-radius的多种参数设置方式；2）阴影效果box-shadow的参数配置；3）动画制作方法，包括@keyframes关键帧定义和animation属性控制；4）媒体查询@media实现响应式设计；5）其他重要特性如弹性布局、网格布局、变换动画等。文章通过具体代码示例展示了如何实现呼吸动画效果UI效果，并详细说明了各属性的参数配置方法。

CSS文档流是页面元素的默认布局方式，元素按HTML顺序从上到下排列。块级元素独占一行，行内元素同行排列。文档流存在对齐、空格和图片间隙等问题，可通过浮动、绝对定位或固定定位脱离文档流。浮动能实现多栏布局但会导致父元素高度塌陷，可通过设置高度、clear属性、overflow或伪类清除。定位分为相对、绝对和固定定位，绝对和固定定位会脱离文档流。z-index可控制定位元素的层叠顺序，数值越大越靠前，但仅对非static定位有效。这些方法能灵活解决文档流带来的布局问题。

CSS盒模型将元素视为由内容区、内边距、边框和外边距组成的矩形盒子。弹性盒模型（flexbox）是CSS3的布局方式，通过display:flex创建弹性容器，其子元素成为弹性项目。主要属性包括：flex-direction控制项目排列方向（水平/垂直），align-items控制交叉轴对齐方式（顶部/底部/居中），flex-grow定义项目占据剩余空间的比例（如3/5和1/5分配）。弹性布局能灵活适应不同屏幕尺寸，实现更优的响应式设计。

摘要：本文整理了CSS常用样式属性，包括字体、背景、文本和表格相关的核心属性。字体部分涵盖font-family、font-size等基础属性及简写方法；背景属性介绍背景颜色、图片等设置；文本属性包含对齐、装饰等样式控制；表格部分解析HTML标签结构与CSS边框合并、对齐等关键属性。重点说明复合属性的使用规范和顺序要求，如font需按style-variant-weight-size/line-height-family顺序书写。提供实用示例和注意事项，适合前端开发者快速查阅CSS样式设置要点。（149字）

摘要：本文介绍了CSS的几种基本选择器及其使用方式。全局选择器(*)优先级最低，用于初始化样式；元素选择器针对特定HTML标签；类选择器(.class)最灵活，可重复使用；ID选择器(#id)具有唯一性。还讲解了合并选择器的使用方式以及选择器优先级规则：行内样式>ID>类>元素选择器。通过代码示例展示了各类选择器的实际应用效果，包括样式继承和覆盖的特性。

今天下午和同学去玩了，晚上挤了一个小时学习一下。内容就是css概念和怎们加在html里面，有一个大概认识。

HTML5基础大全，一个下午终于看完了，累死姐了

跟着一个b站博主的视频，从0开始学，第一天（内容较基础，我觉得没啥好练的，看看跳过就行）