CSS实例：图片导航块

最新推荐文章于 2022-03-24 19:23:12 发布
最新推荐文章于 2022-03-24 19:23:12 发布
阅读量63 收藏
点赞数
原文链接：http://www.cnblogs.com/1257-/p/7699365.html
版权

 

  1. 认识CSS的 盒子模型。
  2. CSS选择器的灵活使用。
  3. 图片文字用div等元素布局形成HTML文件。
  4. 新建相应CSS文件，并link到html文件中。
  5. 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>图片导航</title>
    <link rel="stylesheet" type="text/css" href="../static/css/test1.css">
</head>
<body>
<h2>用户导航</h2>
<hr>
<div class="daohang">

    <div class="img">
        <a href="http://www.gzcc.cn/html/xueyuanrongyu/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xueyuanrongyu/">学校荣誉</a>
        </div>
    </div>


    <div class="img">
        <a href="http://www.gzcc.cn/html/banxuechengguo/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/banxuechengguo/">师生获奖</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/xygk/ldgh/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xygk/ldgh/">领导关怀</a>
        </div>
    </div>


    <div class="img">
        <a href="http://i.gzcc.cn" target="_blank">
            <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a>
        <div class="desc">
            <a href="http://i.gzcc.cn" target="_blank">数字广商</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">画说校园</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">视频广商</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">
            <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">全景校园</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">校友风采</a>
        </div>
    </div>

</div>

<div class="clearfolat">
    <div class="img">
        <a href="http://www.gzcc.cn/html/xueyuanrongyu/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn/html/banxuechengguo/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn/html/xygk/ldgh/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a>
    </div>
    <div class="img">
        <a href="http://i.gzcc.cn" target="_blank">
            <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a>

    </div>
    <div class="img">
        <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">
            <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
    </div>

</div>
</body>
</html>

 

css代码如下：

.daohang{
    align-content: center;
    padding: 20px;
}
img {
    width: 400px;
}

div.img {
    border: 1px solid #cccccc;
    float: left;
    margin: 30px;
    width: 260px;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    background-color:cadetblue;
    text-align: center;
    padding: 5px;
}

div.img:hover {
    border: 1px solid #000000;
}

div.desc:hover {
    border: 1px solid #000000;
}

div.clearfolat {
    clear: both;
}

 

转载于:https://www.cnblogs.com/1257-/p/7699365.html

weixin_34023982
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css基础导航案例
m0_61044901的博客
12-29 161
;简单的标题导航案例1;简单的标题导航案例2;网页新闻列表案例;网页导航案例
CSS导航
qq_43327962的博客
03-15 112
css导航练习 运行效果如下： index.html如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
带图片式导航html,js,css
06-23
带图片式导航，带图片式导航html,js,css
css 一张图片做导航
weixin_30642267的博客
03-22 252
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><style type="text/css"> <!-...
CSS图片导航
weixin_34128411的博客
11-15 200
原理：通过CSS图片背景的position定位，来实现图片导航； <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: ...
纯CSS图片导航
海天鹰
03-24 1416
参考：纯css实现tab导航 - WayneLiu123 - 博客园 1.通过 链接# 触发 #id:target 样式。 2.通过 #id:target ~ ... 锁定兄弟元素样式。 <html> <title>腾讯视频</title> <head> <link rel="shortcut icon" href="http://v.qq.com/favicon.ico"> <style> body { mar
图文混排作品HTML5利用css样式,DivCSS布局实例：很实用的图文混排CSS列表
weixin_32440005的博客
06-02 1548
CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。　　今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。列表的效果如图所示：　　最顶部是栏目名称“模板无忧 MB5U.com ”与栏目导航“CSS酷站欣赏 DivCSS教程 C...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
16.jQuery动态切换网页背景的大块图片的导航栏代码 17.jquery图文排行混合互相切换效果(仿Vancl效果) 18.jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19.jQuery图片自动轮播淡入淡出的幻灯插件...
HTML CSS零基础入学宝典：实例：居中五环,两栏布局,两个常见bug,BFC
HTML和CSS基础入门 ## 1.1 HTML基础知识介绍 HTML（HyperText Markup Language）是用来描述网页结构的标记语言。通过使用标签和属性，可以创建出整个网页的结构。在学习HTML之前，需要了解以下几个基本概念： - ...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
demo-html-css：超好看的前端模板（学习用）
02-03
【标签】"css html demo HTMLHTML"突出了主要技术领域，即HTML和CSS，并强调了“demo”这一特性，意味着它包含演示或实例代码。HTML是超文本标记语言，用于构建网页结构，而CSS则是层叠样式表，用于控制网页的外观和...
ant-design-vue-1.1.10-beta.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
基于flask实现的社交博客项目--《FlaskWeb开发》.zip
最新发布
08-26
基于flask实现的社交博客项目--《FlaskWeb开发》.zip
校园二手交易平台小程序源码 （优秀毕业设计源码）
08-26
1. 校园二手交易平台小程序代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：java，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
ant-design-vue-3.1.0.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
399、基于单片机protues仿真的多功能计步器设计（仿真图、源代码、讲解视频）
08-26
399、基于单片机protues仿真的多功能计步器设计（仿真图、源代码、讲解视频） 计步器功能的实验测试： 采用USB电源线连接移动电源给系统进行供电。首先打开电源开关，系统初始化后，将开始进行计步。在液晶显示屏上输入用户的身高体重，然后佩戴计步器步行，开始测试行走步数、速度以及消耗卡路里。计步器实物图及介绍如下， 按键从左到右依次是： ⑴设置键：按下按键进入设置身高体重页面； ⑵加值键：设置时，按下该按键对应参数+1 ； ⑶ 减值键：设置时，按下该按键对应参数-1 ； ⑷ 复位键：按下该按键单片机复位。 实际测试效果如下： (1)实物联电后打开开关的初始状态如图5-3所示。“V”代表当前瞬时速度，“B”代表当前行走步数，代表当前行走里程，代表当前行走所消耗的卡路里。 (2)按下按键1设置键设置身高170cm ，再按下按键1设置体重48kg ,设置好后再按一下退出。 ⑶ 检测运动后的实验图如图5-6所示，传感器采集到的运动加速度，显示步数为，总里程为，瞬时速度为，消耗的卡路里为。瞬时速度在停下运动后，逐渐降为0。其他示数不变。 ⑷ 按下右侧复位键后的实验图如图5-7所示，行走步
ant-design-vue-0.5.4.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
ssm530便民自行车管理系统的开发与实现+vue.zip
08-26
本系统为便民自行车管理系统，是采用计算机和网络技术进行开发的在线租用平台，可以实现自行车的查询、租用、归还管理等。本系统采用Java语言，数据库为Mysql，运行环境为Idea。使用角色分为用户、管理员，本系统的功能包括车辆管理、订单管理、车辆损耗管理、车辆类型管理和用户管理等。其中，用户负责浏览信息、租用自行车、管理租用订单，管理员可以审核用户信息、管理自行车信息、车辆损耗信息等。本系统实现了自行车的在线出租与管理，方便了用户和管理员双方的利益，提高自行车租用的效率，更符合现代人生活。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值