鱼C论坛

 找回密码
 立即注册
查看: 5602|回复: 26

[庖丁解牛] 0 0 2 5 - 图片边框 - 这就是高B格的H5+C3!

[复制链接]
发表于 2017-1-16 21:36:27 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2021-8-11 09:18 编辑

还记得在04中,我们懵懂无知的就这么把第一次。。。

哈哈,表想歪,是第一次调用本地图片!(如果你想歪了,证明你是老司机,给你看个东西,传送门

16中,我们在figuer中,也调用了一下下。

这次,我们利用边框样式,为鱼C,Logo,提神下B格!

在此之前,重温下,两种调图方式

----------------第一种----------------


代码如下:
  1. <!doctype html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.                 html,body{
  7.                         height: 100%;
  8.                 }
  9.                 body{
  10.                         background: url(FishC.png)center center;
  11.                         background-repeat:no-repeat       
  12.                 }
  13.         </style>
  14. </head>
  15. <body>
  16. </body>
复制代码

效果图,纯粹版的:
Snip20170116_20.png


简单解释下background-repeat:no-repeat       

如果不设置下的话,就会满屏都是Logo,效果立刻很恶心。。。

Snip20170116_21.png


是不是一下就把咱们鱼C高贵的气质,拉下来了!

这样怎么对得起小甲鱼老湿的信任呢~

----------------第二种----------------


现在,用<img>在实现下上面的效果。

有言在先,有几点注意的,之前没说。

请注意:

img 元素向网页中嵌入一幅图像,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。

<img> 标签创建的是被引用图像的占位空间。

<img> 标签有个必需的属性:src 属性

你可以这么理解,src‘调取’本地图片。

另一个, alt 属性,就是添加图片名而已,可你自己了。

上代码:
  1. <!doctype html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.                 html,body{
  7.                         height: 100%;
  8.                         text-align: center;
  9.                 }

  10.         </style>
  11. </head>
  12. <body>
  13.         <img src="FishC.png">
  14. </body>
复制代码

看一下效果,其实没啥太大变化:
Snip20170116_22.png



好了,复习深化结束!

可以正式设计边框样式了。


  • 矩形边框


  • 在CSS中设计边框,就是border

    有三个常用属性,边框宽度点/线颜色

    直接在CSS格式中,实践下:点框、宽度为6px、颜色#6F6(鱼C主色)
    1. <!doctype html>
    2. <html>
    3. <head>
    4.         <meta charset="utf-8">
    5.         <style type="text/css">
    6.                 html,body{
    7.                         height: 100%;
    8.                         text-align: center;
    9.                 }
    10.                 img{
    11.                         border: 6px dotted #6F6;

    12.                 }
    13.         </style>
    14. </head>
    15. <body>
    16.         <img src="FishC.png">
    17. </body>
    复制代码

    效果图:
    Snip20170116_24.png


    只需要将dotted(虚点的)修改为solid(实心的)
    1.         img{
    2.                         border: 6px solid #6F6;

    3.                 }
    复制代码

    效果图:
    Snip20170116_25.png


    好方阿!

    赶紧修改成最Fashion的圆角矩形,border-radius。

    唯一要注意的是,这个属性值,要用%,多用几遍就知道什么时候用%了
    1.         img{
    2.                         border: 6px solid #6F6;
    3.                         border-radius: 6%;

    4.                 }
    复制代码

    效果图:
    Snip20170116_26.png


    嗯,这才对嘛,整个世界都祥和



  • 圆形边框


  • radius啥意思?

    半径!

    So,当border-radius的值,大于等于50%时,就是圆形了。

    就这么简单
    1. img{
    2.                         border: 6px solid #6F6;
    3.                         border-radius: 51%;

    4.                 }
    复制代码

    效果图:
    Snip20170116_28.png



这位鱼油,如果喜欢本帖子,请订阅 专辑-->传送门)(不喜欢更要订阅


官方 Web 课程:

评分

参与人数 3荣誉 +10 鱼币 +15 贡献 +8 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!
华丽转身123 + 5 + 5 + 3 支持楼主!
alltolove + 5 + 2 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-4-21 15:50:21 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Css边框</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         text-align: center;
  10.                         background-color: beige;
  11.                 }
  12.                 img{  
  13. /*border 简写属性在一个声明设置所有的边框属性。
  14. 可以按顺序设置如下属性:
  15. border-width
  16. border-style
  17. border-color
  18. 如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。
  19. */
  20.                         margin-top: 100px;
  21.                         border: 6px solid #a5bef9;
  22.                         border-radius: 6%;                /*当border-radius的值,大于等于50%时,就是圆形了*/
  23.                 }
  24.         </style>
  25. </head>
  26. <body>
  27.         <img src="FishC.jpg">
  28. </body>
  29. </html>
复制代码

0019Css边框.png

点评

我很赞同!: 5.0
我很赞同!: 5
矩形也不错~  发表于 2017-4-21 22:32
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-15 13:37:43 | 显示全部楼层
本帖最后由 MSK 于 2017-7-15 13:42 编辑

交作业~

捕获.PNG

点评

我很赞同!: 5.0
我很赞同!: 5
嘘~  发表于 2017-7-15 14:10
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-1-17 10:03:32 | 显示全部楼层
小甲鱼要改行做设计了?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-1-17 10:46:21 | 显示全部楼层
我与戈多 发表于 2017-1-17 10:03
小甲鱼要改行做设计了?

小甲鱼老湿,业余爱好~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-1-17 10:46:25 | 显示全部楼层
我与戈多 发表于 2017-1-17 10:03
小甲鱼要改行做设计了?

小甲鱼老湿,业余爱好~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-1 00:21:29 | 显示全部楼层
本帖最后由 joker11111 于 2017-3-1 00:22 编辑

22222.jpg

我会告诉你找不到图片然后我把鱼C工作室微信公众号头像给扒拉下来吗?哈哈哈哈哈哈,逃。。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-1 08:40:38 | 显示全部楼层
joker11111 发表于 2017-3-1 00:21
我会告诉你找不到图片然后我把鱼C工作室微信公众号头像给扒拉下来吗?哈哈哈哈哈哈,逃。。。
...

哈哈哈,我能说聪明吗~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-1 08:43:24 | 显示全部楼层
不二如是 发表于 2017-3-1 08:40
哈哈哈,我能说聪明吗~

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-27 19:21:32 | 显示全部楼层
一刷至此。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-30 00:09:17 | 显示全部楼层
轻踩油门,注意速度,保持直线。

0025-图片引用和边框样式

0025-图片引用和边框样式

从网页上截图,然后修改的,
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-15 02:32:16 | 显示全部楼层
交作业!
025.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-7-15 14:10

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-15 13:36:22 | 显示全部楼层
原来鱼Clogo是这么搞的啊

捕获.PNG
捕获1.PNG
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-6-6 21:26:26 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3. <head>
  4.          <meta charset="utf-8">
  5.         <title>025-圖片</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         text-align: center;
  10.                 }
  11.         img{
  12.                 border:10px dotted #FF0000;
  13.                 border-radius:51%;
  14.         }
  15.         </style>
  16. </head>
  17. <body>
  18.         <img src="FishC.png" width="250px" height="250px">
  19. </body>
  20. </html>
复制代码


025.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-6-7 08:34

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-16 18:26:25 | 显示全部楼层
呃,我这个可能不是原图?
  1. <!doctype html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5.         <title>WEB lesson 0025</title>
  6.         <style type="text/css">
  7.                 html,body
  8.                 {
  9.                         height:100%;
  10.                         text-align:center;
  11.                 }
  12.                 img
  13.                 {
  14.                         border:6px solid #78e;
  15.                         border-radius: 50%;
  16.                 }
  17.         </style>
  18. </head>       

  19. <body>
  20.         <img src="fishC.png">
  21. </body>
  22. </html>
复制代码

微信截图_20180716182603.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-9 21:37:08 | 显示全部楼层
logo就够绿的了。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-9 23:03:54 | 显示全部楼层
视频更新的慢,还是看你这个来的快
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-17 23:39:33 | 显示全部楼层
本帖最后由 soulwyb 于 2018-10-17 23:41 编辑
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>Page Title</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <style type="text/css">
  9.         html,
  10.         body {
  11.             height: 100%;
  12.             text-align: center;
  13.         }
  14.         
  15.         img {
  16.             /* border: 6px dotted #6f6; */
  17.             border: 6px solid #6f6;
  18.             /* border-radius: 6%; */
  19.             border-radius: 50%;
  20.         }
  21.         /* body {
  22.             background: url(./timg.jpg) center center;
  23.             background-repeat: no-repeat;
  24.         } */
  25.     </style>
  26. </head>

  27. <body>
  28.     <img src="./timg.jpg">
  29. </body>

  30. </html>
复制代码


                               
登录/注册后可看大图
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-11-16 14:41:09 | 显示全部楼层
继续交作业,交完作业该去写学校的作业了,天天向上。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>025_2</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         text-align: center;
  10.                 }
  11.                 img{
  12.                         border: 6px solid #0F8;
  13.                         border-radius: 50%;
  14.                 }
  15.         </style>
  16. </head>
  17. <body>
  18.         <img src="xiaowu2.jpg" alt="此处是小乌">
  19. </body>
  20. </html>
复制代码
025_2.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-16 17:10:54 | 显示全部楼层
本帖最后由 542624047 于 2019-1-16 17:12 编辑

好多绿色,为啥大佬交作业都不改个色号紫色#FF00FF也不错啊~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 18:32

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表