HTML+CSS—图片

    • 简单的
      插入一张图片:
      <img src=”LKS01.jpg” width=”200px” alt=”LKS” />
      src代表图片路径
      width、height代表图片尺寸
      alt在浏览器无法载入图像时,该属性告诉读者她们失去的信息。
    • 创建图片库
      平常浏览网站时,看到好看的图片,会点击一下,我们会发现网页会跳转到另一个地址,该地址显示较大的该图片信息。
       W3C上看到的例子,很好,练一下手。
      【第一步:明确任务】前端工程师需要做的是根据设计师的设计原型,进行编写网页代码,设计师的设计原型里不仅包括外观,还应该包括交互。
      参考下图,制作当用户鼠标经过图片,图片边框突出,点击图片,进入另一地址,可以观看大图。

      参考
      【第二步:构建html结构】
      <div>
      <a target=”_blank” href=”LKS01.jpg”>
      <img src=”LKS01.jpg” width=”300px”/>
      </a>
      <div>在此处添加对图像的描述</div>
      </div>没有css修饰的效果
      【第三步:添加CSS修饰】

    • 为最外层div添加class="img"标记,方便指定样式。
      .img{
      border: 1px solid #bebebe;
      float: left;
      margin: 10px;
      text-align: center;
      }
      两个,可以观察浮动
    • 为链接内的图片添加样式
      .img>a>img{
      margin: 5px;
      border: 1px solid #bebebe;
      }
  • 为图片添加鼠标经过样式
    .img>a:hover>img{
    border: 1px solid #333333;
    }

第一章为图片经过效果
【优化】我将原来的dom结构做了一点修改,将内层div替换为input标签,这样可以方便用户输入,同时进行增加。

 

        [type=text]{
            display: block;
            font-size: 1rem;
            font-family: "微软雅黑";
            border-width: 0px;
            margin: 5px auto 15px;
            text-align:center;
        }

采用属性选择符,选择input标签,更改display属性值,原来默认为行内元素,更改为块级元素。
[type=text]:focus{
outline: none;
border: 1px solid #bebebe;
}
采用伪类加属性选择符,修改input默认的样式。

©️李联华的博客网 当前IP地址:44.201.97.224,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/htmlcss-picture.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...