m0_57532232的博客

开发四部曲：创建文件夹结构创建html骨架结构引入相关样式文件书写内容。

【代码】CSS视口标签及初始化样式。

文章摘要：本文介绍了CSS中的rem单位（相对于根元素字体大小）和媒体查询（针对不同屏幕尺寸设置样式），指出CSS缺乏编程特性的弊端。重点讲解了LESS预处理语言，包括变量、嵌套规则和运算功能。最后阐述了rem适配方案，通过媒体查询或flexible.js动态调整html字体大小，使页面元素等比缩放以适应不同设备。主要技术方案有LESS+媒体查询+rem和更简单的flexible.js+rem两种实现方式。

flex意味弹性布局，父盒子设置为flex后，子元素的float clear vertical-align属性将会失效。flex-end和row-reverse的区别，前者让所有的元素只会靠右，后者是让盒子反序后再靠右。优点：布局简单，移动端应用广泛。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。order属性： 如果想要改变三个盒子的顺序。左右两个盒子固定，中间的一个盒子为圣杯。space-between效果。align-sellf的使用。案例： 淘宝的 圣杯布局。

摘要： 移动端开发的关键技术包括理想视口适配和样式初始化。理想视口由乔布斯提出，通过<meta>标签设置width=device-width实现设备宽度自适应。移动端方案涉及背景缩放、初始化库（如Normalize.css）统一默认样式，以及CSS3盒子模型（box-sizing: border-box）。特殊样式需处理点击高亮（-webkit-tap-highlight-color）、IOS表单外观（-webkit-appearance）和禁用长按菜单（-webkit-touch-callou

摘要：本文介绍了CSS3中2D和3D转换功能的应用。2D转换包括位移(translate)、旋转(rotate)和缩放(scale)，可实现元素移动、旋转和大小变化。文章详细讲解了transform-origin设置旋转中心点的方法，并给出了盒子居中等实用案例。在3D转换方面，介绍了translate3d、rotate3d等三维变换效果，以及perspective透视和transform-style属性，提供了3D导航栏和旋转木马等视觉效果的实现代码。动画部分包含@keyframes定义和animation

品优购电商网站项目概述 该项目是一个完整的电商网站开发案例，包含首页、列表页、注册页等多个功能模块。项目通过HTML5、CSS3等技术实现了响应式布局和交互效果，具有以下特点： 页面结构完整：包含导航栏、商品展示区、楼层分类、底部信息等电商标准模块 交互元素丰富：实现搜索框、购物车、商品分类等常见电商功能 样式设计规范：采用模块化CSS编写，包含base.css公共样式和页面专用样式 代码优化 项目已部署在线上，可通过访问 http://zhousunyu.3vdo.club

本文介绍了SEO搜索引擎优化的核心方法，重点讲解了TDK三大标签（Title、Description、Keywords）的作用和使用规范。Title作为网页首要标签需包含网站名和简介；Description用于概括主营业务；Keywords应控制在6-8个并用英文逗号分隔。此外，文章还详细说明了Logo优化的4个技巧：通过h1标签提升权重、链接到首页、隐藏文字显示（使用text-indent或font-size方法）以及添加title属性提示文字。这些方法能有效提升网站在搜索引擎中的自然排名。

本文介绍了三种使用伪元素（::before 和 ::after）的常见场景。首先，通过伪元素实现字体图标效果，利用 @font-face 引入图标字体，并通过 content 属性插入图标。其次，仿照旧土豆网设计，使用伪元素实现图片半透明遮罩层，鼠标悬停时显示遮罩层。最后，伪元素选择器可用于清除浮动，替代传统的额外标签法，提升代码简洁性。这些方法展示了伪元素在网页设计中的灵活应用。

网页元素的显示与隐藏是网页设计中常见的功能，主要通过CSS属性实现。常用的方法包括display、visibility和overflow。display: none可以完全隐藏元素且不占据空间，而display: block则使元素显示。visibility: hidden隐藏元素

本文介绍了HTML表单属性和CSS新增的选择器。在HTML中，input表单属性用于定义用户输入字段的行为和样式。CSS新增的属性选择器允许根据元素的属性值进行样式设置，而结构伪类选择器如nth-child和nth-of-type则用于根据元素在父容器中的位置进行样式控制。特别需要注意的是，nth-child会考虑所有子元素，而nth-of-type仅针对指定类型的元素。例如，section div:nth-of-type(1)会选择section中第一个div元素并设置背景颜色为蓝色。

html5支持的音频格式的文件。

本文介绍了三种常见的网页布局技巧。首先，通过浮动和负边距解决盒子之间的缝隙和边框叠加问题，并使用z-index控制悬停效果。其次，利用浮动实现图片和文字的环绕效果，展示了浮动布局的灵活性。最后，演示了页码布局的设计技巧，包括按钮样式、输入框和分页功能的实现。这些技巧有助于优化网页布局，提升用户体验。

有较大的兼容性问题，适用于Webkit为内核的浏览器软件，或者移动端的（大部分也是webkit）三、图片底侧空白缝隙的修复技巧（仅行内元素和行内块元素会存在）一、 单行文字溢出、省略号显示。二、 多行文字溢出，省略号显示。此效果建议后端人员开发。

css精灵图和字体图标的使用

为何清除浮动？对于浮动的元素，其父类盒子的高度往往不能输入一个固定的值（因为很多网页内容有多有少），但如此就无法识别到浮动的元素，此时高度自动变成0，除去浮动的元素外的其他元素会挤压此父元素（出现本来是footer的元素被浮动元素压住的情况），故需清除浮动。

font：font-style(italic normal) font-weight font-size/line-height font-family [各个属性之间使用空格隔开] 举例： italic 700 16px ‘Microsoft yahei’注意：不需要的属性可以进行省略，但是font-size和font-family属性必须要保留。举例：div{ text-decoration: under-line;举例：div{ text-align: center }

• 浮动特性• 定位特性• 普通流或标准流（没错，是篇水文）

CSS中背景的总结

CSS常用的复合选择器总结