JavaWeb学习之路(50)–CSS应用实例之图片

简介: 本文目录1. 前言2. 普通图片3. 圆角图片4. 缩略图效果5.小结

1. 前言

上一篇我们详细讲解了如何利用CSS,来制作一个好看的按钮。


本篇我们来研究下如何用CSS美化图片。


2. 普通图片

普通情况下,我们给图片设置个宽度和高度即可。


普通图片:<br>

   <img src="1.jpg" class="img"><br>


对应CSS:


  .img {

           width: 400px;

           height: 300px;

       }


此时效果如下,比较生硬,难言美观:



3. 圆角图片

我们可以通过为图片添加圆角,让图片变得不那么生硬,虽然是一个小的改变,但是效果不错:


 圆角图片:<br>

   <img src="1.jpg" class="img img-round"><br>


对应CSS:


  .img-round {

           border-radius: 16px;

       }


效果如下:



4. 缩略图效果

还可以借助边框、内边距,实现一种好看且常用的缩略图效果,如下:


 缩略图:<br>

   <img src="1.jpg" class="img img-thumbnail"><br>


对应CSS:


      .img-thumbnail {

          border: 1px solid grey;

          border-radius: 16px;

          padding: 4px;

      }


此时效果如下,很明显缩略图的方式,看起来还是比较大气的。



5.小结

本节简单的讲解了如何使用CSS美化图片效果,虽然简单,但比较实用。


相关文章
|
17天前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
66 0
|
17天前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
51 1
|
17天前
|
XML 前端开发 数据格式
CSS应用
CSS应用
19 0
|
7天前
|
XML 前端开发 JavaScript
学习css
【5月更文挑战第25天】学习css
11 1
|
17天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
17天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
17天前
|
前端开发 UED 开发者
【专栏:HTML与CSS实战项目篇】制作一个响应式图片画廊
【4月更文挑战第30天】本文介绍了如何使用HTML和CSS创建响应式图片画廊。响应式画廊能根据用户设备屏幕大小自动调整布局。首先规划结构,包含一个图片容器和每张图片元素,并为图片提供替代文本。接着设计样式,设置图片大小、间距和视觉效果。然后通过媒体查询实现响应式设计,根据不同屏幕尺寸调整图片排列。同时考虑性能优化,如压缩图片和使用懒加载技术。最后,测试和调试确保画廊在各种设备上正常工作。这个过程强调了响应式设计和用户体验的重要性。
|
17天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】HTML与CSS在电商网站中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在电商网站中的关键作用。HTML作为基础结构,定义网页内容和布局,用于页面布局、内容展示和表单处理;而CSS则负责样式设计和美化,包括响应式设计、交互效果和模块化,两者结合创建出功能齐全、视觉吸引力强的在线购物环境,提升用户体验。
|
17天前
|
前端开发 JavaScript 安全
【亮剑】探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式。文章分为三部分:首先解释了样式传递的必要性,包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践,展示了一个使用内联样式自定义按钮颜色的例子。最后,讨论了使用CSS模块和TypeScript接口处理复杂样式的方案,强调了它们在组织和重用样式方面的优势。结合TypeScript,确保了样式的正确性和可维护性,为开发者提供了灵活的样式管理策略。
|
17天前
|
存储 监控 前端开发
局域网管理软件的前端设计与实现:HTML/CSS在网络拓扑展示中的应用
本文探讨了局域网管理软件的前端设计,强调了HTML/CSS在网络拓扑展示中的作用。通过HTML/CSS创建设备节点和绘制连线,实现清晰的网络设备连接展示。此外,利用JavaScript定时收集监控数据,并通过HTTP请求自动提交到网站,便于管理员进行数据分析,提升了局域网管理效率。
109 3
http://www.vxiaotou.com