AI摘要

由 Deepseek提供支持

• 简单的
  
  插入一张图片：
  
  <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默认的样式。

广告

距本场结束剩 00天 00时 00分 00秒

轻量应用服务器 2核2G

200M峰值带宽，适用于网站搭建、Web应用、容器环境、电商独立站等

立即前往

扫描二维码购买