孙萍管理团队
-
css布局基础：浮动和清除浮动练习1
主要知识点： 1、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法： 方法1：通过overflow属性 方法2：通过clear属性 方法3：通过伪元素选择器（推荐） 效果图： 参考： <!DOCTYPE html> &…
-
css布局基础：定位练习1
主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。 效果图： 效果说明：故宫文字段落设置背景色黑色透明，覆盖在图片底部。 …
-
css布局基础：盒子模型练习
主要知识点： 1、盒子在页面的显示=margin+border+padding+width/height 2、每个html元素都可以抽象为一个盒子 效果图： 参考： css布局基础：盒子模型练习|www.125jz.com 家电 冰箱 洗衣机 空调 洗护 洗衣液 牙膏 护发素 衣物 男装 女装 童装
-
css布局基础：浮动和清除浮动练习2
主要知识点： 1、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法： 方法1：通过overflow属性 方法2：通过clear属性 方法3：通过伪元素选择器（推荐） 效果图： 参考： <header> <img …
-
css布局基础：定位综合练习
主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图： 效果说明： 1、随着网页向下滚动，当导航到达窗口顶端（t…
-
css布局基础：行内元素、块级元素练习
主要知识点： 1、理解什么是行内元素？什么是块级元素？ 2、知道块级元素能够设置宽高，行内元素不可设置宽高（替换元素可以）。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展： 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图： 参考： <nav> <ul> <li><…