CSS实例：图片导航块

最新推荐文章于 2023-07-18 01:12:41 发布
最新推荐文章于 2023-07-18 01:12:41 发布
阅读量65 收藏
点赞数
原文链接：http://www.cnblogs.com/Qzlhxxx/p/7699203.html
版权
  1. 认识CSS的 盒子模型。
  2. CSS选择器的灵活使用。
  3. 实例:
    1. 图片文字用div等元素布局形成HTML文件。
    2. 新建相应CSS文件，并link到html文件中。
    3. CSS文件中定义样式
      1. div.img：border,margin,width,float
      2. div.img img：width，height
      3. div.desc：text-align,padding
      4. div.img:hover：border
      5. div.clearfloat：clear

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHOTO</title>
    <link rel="stylesheet" type="text/css" href="../static/css/1020.css">
</head>
<body>
<div class="logo">
    <div class="small">
        <a href="https://bangumi.bilibili.com/anime/2580?from=search&seid=18070620123919499344">
            <img src="https://i0.hdslb.com/bfs/bangumi/207b3c90f16629eb54f060d54d5efb7d29bb9563.jpg_225x300.jpg"></a>
        <div class="describe"><a href="https://bangumi.bilibili.com/anime/2580?from=search&seid=18070620123919499344">干物妹小埋</a></div>
    </div>
    <div class="small">
        <a href="https://bangumi.bilibili.com/anime/1660">
            <img src="https://i0.hdslb.com/bfs/bangumi/d3ce7564ddf58b2f7245b104fb578a5655e55168.jpg_225x300.jpg"></a>
        <div class="describe"><a href="https://bangumi.bilibili.com/anime/1660">夏目友人帐</a></div>
    </div>
    <div class="small">
        <a href="https://bangumi.bilibili.com/anime/1586">
            <img src="https://i0.hdslb.com/bfs/bangumi/e1f891ad2602265655f3ef181e343e253f017fce.jpg_225x300.jpg"></a>
        <div class="describe"><a href="https://bangumi.bilibili.com/anime/1586">Fate/stay night</a></div>
    </div>
    <div class="small">
        <a href="https://bangumi.bilibili.com/anime/3450">
            <img src="https://i0.hdslb.com/bfs/bangumi/14ba6643f22405e2777cca992002cc6411601334.jpg_225x300.jpg"></a>
        <div class="describe"><a href="https://bangumi.bilibili.com/anime/3450">在下坂本</a></div>
</div>
    <div class="clean">
        <img src="https://i0.hdslb.com/bfs/bangumi/207b3c90f16629eb54f060d54d5efb7d29bb9563.jpg_225x300.jpg">
        <img src="https://i0.hdslb.com/bfs/bangumi/d3ce7564ddf58b2f7245b104fb578a5655e55168.jpg_225x300.jpg">
        <img src="https://i0.hdslb.com/bfs/bangumi/e1f891ad2602265655f3ef181e343e253f017fce.jpg_225x300.jpg">
        <img src="https://i0.hdslb.com/bfs/bangumi/14ba6643f22405e2777cca992002cc6411601334.jpg_225x300.jpg">
</div>

</body>
</html>

CSS

div.small{
    width:200px;
    float:left;
    margin:20px;}
div.small img{
    width:100%;
    height:auto;
    }
div.describe{
    text-align:center;
    padding:2px;}
div.small:hover{
    border:1px solid #777777;}
div.clean{
    clear: both;
}

运行结果

转载于:https://www.cnblogs.com/Qzlhxxx/p/7699203.html

awsau6326
关注
CSS3 伪元素与伪类选择器区别、详解与应用实例
JINGWHALE
05-20 970
本文详细介绍了CSS3 伪元素与伪类选择器区别、API与应用实例。熟练掌握以上CSS3伪类与伪元素选择器及其应用场景，开发者能够编写出更高效、更具表现力和交互性的CSS代码，提升网站的用户体验和视觉效果。伪元素 能够通过 content 属性添加或替换内容。例如，:before 和 :after 可以插入文本、图像或其他生成的内容。伪类 仅影响元素的样式，而不添加或修改内容。它们基于用户的交互、文档结构或其他逻辑条件来改变元素的表现。
css设置图标居左_css入门：布局与定位
weixin_42509518的博客
01-14 1047
看完这篇博客，你将了解：1.块级元素的高度是由什么决定的2.内联元素的高度是由什么决定的3.postion:fixed的bug解决套路4.局部背景图片怎么添加？半透明色罩效果怎么实现？5.纯CSS画三角形6.内部元素外移套路7.fonticon网引入图标的方法----------------------------------------------------------------一、块级元素...
CSS技能点--垂直导航栏实例
程序员大阳
07-21 2560
垂直导航栏可以说是相当常见，尤其是在一些管理系统中，左侧往往是一个垂直导航栏，便于用户快速切换菜单。 本篇就来实现一个简单的垂直导航栏
图文混排作品HTML5利用css样式,DivCSS布局实例：很实用的图文混排CSS列表
weixin_32440005的博客
06-02 1601
CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。　　今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。列表的效果如图所示：　　最顶部是栏目名称“模板无忧 MB5U.com ”与栏目导航“CSS酷站欣赏 DivCSS教程 C...
使用CSS3制作倾斜导航条和毛玻璃效果
front_end_fan
09-12 2688
导航条对于每一个Web前端攻城狮来说并不陌生，但是毛玻璃可能会相对陌生一些。简单的说，毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。 本次分享的主题：通过CSS3来制作类似下面的导航条和毛玻璃效果。 导航条是梯形形状的。背景区域的毛玻璃效果。把导航条和毛玻璃效果在一篇文章中分享其实是有原因的。因为这两个效果的实现离不开一个重要的思想。 用语言来描述
DivCSS布局实例：很实用的图文混排CSS列表
05-08 504
一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。 　　最顶部是栏目名称“模板无忧 ”与栏目导航“CSS酷站欣赏 DivCSS教程 CSS模板下载”。栏目名称用标题元素Hx来表示，栏目导航可以用ul li的无序列表。 下部的三个链接区域形式基本雷同，左侧是图片链接，右侧是文章列表元素。将左侧的图片与文字看成是一个段落...
divcss布局实例之完整切图
陈飞老师
07-30 776
divcss布局实例之完整切图 今天我要带领大家使用DIV+CSS切一个普通企业网站的首页，同时也是考量大家对之前所学CSS知识的一个理解程度。 首先大家先看一下咱们要完成的网页切图图片如下所示： 我们先分析一下这个网页布局，大的部分我们可以分为头部，导航部分，BANNER部分，然后是主体内容区，最后是尾部，如下图。而在主体内容区域按照布局是一个典型的两列布局，然后在左侧内容区域又分为一个两列布局。我们可以把它理解为两列套两列 然后在开始动手编代码： 第一步:大家可能都知道我们的HTML标
＜CSS＞一级导航栏和二级导航栏
热门推荐
Snowyufly的博客
07-18 1万+
二级导航栏的制作
第三天 DIV+CSS布局实例
天青云月白，海浅鱼龙跃
10-18 732
首先确定整体布局，一般分为头部，侧栏，主要内容和尾部等...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
16.jQuery动态切换网页背景的大块图片的导航栏代码 17.jquery图文排行混合互相切换效果(仿Vancl效果) 18.jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19.jQuery图片自动轮播淡入淡出的幻灯插件...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
DIV+CSS布局教程：实例大全与实践技巧
- Div+CSS布局大全：这个文件可能包含了大量的DIV+CSS布局的实例代码和详细解释，为学习者提供了一个丰富的学习资源。 通过以上知识点，可以看出DIV+CSS布局是现代网页设计中的核心技术之一，它在提高网站的可访问...
java项目，课程设计-ssm病人跟踪治疗信息管理系统
11-13
病人跟踪治疗信息管理系统采用B/S模式，促进了病人跟踪治疗信息管理系统的安全、快捷、高效的发展。传统的管理模式还处于手工处理阶段，管理效率极低，随着病人的不断增多，传统基于手工管理模式已经无法满足当前病人需求，随着信息化时代的到来，使得病人跟踪治疗信息管理系统的开发成了必然。 本网站系统使用动态网页开发SSM框架，Java作为系统的开发语言，MySQL作为后台数据库。设计开发了具有管理员；首页、个人中心、病人管理、病例采集管理、预约管理、医生管理、上传核酸检测报告管理、上传行动轨迹管理、分类管理、病人治疗状况管理、留言板管理、系统管理，病人；首页、个人中心、病例采集管理、预约管理、医生管理、上传核酸检测报告管理、上传行动轨迹管理、病人治疗状况管理，前台首页；首页、医生、医疗资讯、留言反馈、个人中心、后台管理、在线咨询等功能的病人跟踪治疗信息管理系统。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
liunx project 5
11-13
liunx project 5
PostgreSQL DBA实战视频教程（完整10门课程合集）
11-13
分享课程——PostgreSQL DBA实战视频教程（完整10门课程合集）
计算机科学基础期末考试试题
11-13
计算机科学基础期末考试试题
c语言实验设备管理系统
最新发布
11-13
练习与巩固《C语言程序设计》理论知识，通过实践检验和提高实际能力，进一步培养自己综合分析问题和解决问题的能力。掌握运用C语言独立地编写调试应用程序和进行其它相关设计的技能。
提高图像在低光照条件下的清晰度和可见性，使用CNN的图像重建网络，来实现亮度调节，可用于小白学习
11-13
1. 数据集资源 公开低光照数据集：用于模型训练的低光照图像数据集，这些数据集包含了多种低光照条件下的图像，并附有增强后的高质量图像。 合成数据：在不足数据的情况下，可以通过对高亮度图像进行暗化处理生成低光图像对，以增强数据量。 自建数据集：对于特定场景，如安防、医疗等，可以拍摄或收集特定条件下的低光照图像来创建数据集，满足特定应用需求。 2. 硬件资源 GPU：大规模模型训练需要高性能计算，以支持大规模图像处理和神经网络训练。 数据存储：由于图像数据较大，需要大容量的存储设备如HDD或SSD来存储数据集及中间结果。 3. 深度学习框架及工具 PyTorch：支持构建和训练神经网络模型，尤其适合卷积神经网络（CNN）和生成对抗网络（GAN）的实现。 CUDA和cuDNN：为GPU加速库，在模型训练时可显著提升运行效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值