不二如是 发表于 2020-5-5 08:28:14

044 - 我们是优雅生活的践行者（上）

本帖最后由 不二如是 于 2020-5-15 16:45 编辑

上一集： 043 - 道可道，非常道（下）



哈哈，废话不多说了，#敲黑板时刻！{:10_281:}



在线视频：传送门



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



这节课所有内容：



所有块级元素和行内元素都可以设置边框。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
    <style type="text/css">
      p{
            width: 111px;
      }
      .dotted {border-style: dotted}
      .dashed {border-style: dashed}
      .solid {border-style: solid}
      .double {border-style: double}
      .groove {border-style: groove}
      .ridge {border-style: ridge}
      .inset {border-style: inset}
      .outset {border-style: outset}
    </style>
</head>
<body>
   <p class="dotted">A dotted border</p>
   <p class="dashed">A dashed border</p>
   <p class="solid">A solid border</p>
   <p class="double">A double border</p>
   <p class="groove">A groove border</p>
   <p class="ridge">A ridge border</p>
   <p class="inset">An inset border</p>
   <p class="outset">An outset border</p>
</body>
</html>
演示效果参看：传送门

重点要知道为每一条边框单独设置样式、宽度和颜色时，不同值是有不同的设置顺序滴：


[*]4 个值：上、右、下、左（顺时针方向）
[*]3 个值：上、右左、下
[*]2 个值：上下、右左

这个顺序在 CSS 中诸多属性上都通用，请牢记。



课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

下一集：045 - 我们是优雅生活的践行者（下）



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ）

永恒的蓝色梦想 发表于 2020-5-5 08:33:38

来啦

liuzhengyuan 发表于 2020-5-5 08:42:08

又更新了！{:10_257:}

qiuyouzhi 发表于 2020-5-5 08:42:54

地板

乘号 发表于 2020-5-5 09:10:19

下水道

乘号 发表于 2020-5-5 09:42:55

这贴沉了？？？！！！顶一下{:10_256:}我猜是因为没有回帖奖励。。。

乘号 发表于 2020-5-5 09:44:10

而且课后作业传送门失灵。。。。

WangJS 发表于 2020-5-5 10:01:40

来自地狱的支持{:10_256:}

weiter 发表于 2020-5-5 10:03:53

来自虚空的顶！{:10_256:}

weiter 发表于 2020-5-5 10:04:45

可算是更了呢~{:10_266:}

高山 发表于 2021-6-26 07:15:43

加油！！！{:7_132:}
点赞不二如是

QBR 发表于 2024-11-25 09:02:56

感谢整理，思维导图画的很好，学习了{:10_261:}。
页: [1]
查看完整版本: 044 - 我们是优雅生活的践行者（上）