前言

• 系列文章目录：
  • [目录]HTML CSS JS
• 根据视频和PPT整理
• 视频及对应资料：
• HTML CSS
  • 老师笔记： https://gitee.com/xiaoqiang001/html_css_material.git
  • 视频：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程
  • 视频对应资源
  • 链接：【https://pan.baidu.com/s/1k1dpC6iGA93c6gVsUvPqYw】
  • 提取码：1234
  • 【GitHub 仓库链接】

文章目录

• 前言
• 1. margin负值的运用
• 2. 文字围绕浮动元素
• 3. 行内块的巧妙运用
• 4. CSS三角强化

1. margin负值的运用

多个盒子进行浮动，同时为每个盒子设置边框，会导致相邻盒子相接触的位置边框变粗。

此时可以使用margin将其值设置为负数，对上一个的边框进行覆盖，使得相邻位置的边框没有那么粗。

代码示例：

实现鼠标经过，盒子的边框颜色改变：

2. 文字围绕浮动元素

实现下图效果，是利用浮动元素不会压住文字。

hello world! hello world! hello world! hello world! 

3. 行内块的巧妙运用

使用行内块元素实现下图效果：

  
<<上一页12345...>>下一页到第页确定

4. CSS三角强化

实现下图效果：

三角形实现：

案例效果实现：

￥1650￥5650