1.认识CSS的 盒子模型。

2.CSS选择器的灵活使用。

3.实例:

a.图片文字用div等元素布局形成HTML文件。

b.新建相应CSS文件，并link到html文件中。

c.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/202.css">

</head>

<body >

     <div>

         <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" >学校荣誉</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" >师生获奖</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">领导关怀</a></div>

         </div>

         <div class="img">

             <a href="http://i.gzcc.cn/cas/login?service=http%3A%2F%2Fi.gzcc.cn%2Fdcp%2Findex.jsp">

                 <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg">

             </a>

             <div class="desc"><a href="http://www.gzcc.cn" >数字广商</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" >话说校园</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" >视频校园</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" >全景校园</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" >校友风采</a></div>

         </div>

     </div>

     <div class="clearfloat">

         <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"><br>

         <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg">

     </div>

</body>

</html>

css代码如下：

        img{

            width: 300px;

        }

       div .img{

            width: 130px;

            border: 1px solid #eeeeee;

            float: left;

            margin: 5px;

        }

        div.img img{

            width: 100%;

            height: auto;

        }

        div.desc{

            text-align: center;

            padding: 5px;

        }

        div.img:hover{

            border: 1px solid #222222;

        }

        .clearfloat{

            clear: both;

        }

结果如下：

CSS实例：图片导航块的更多相关文章

  1. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  2. webpack4 前端框架基础配置实例-解决css分离图片路径问题

    1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...

  3. CSS实例：翻转图片、滚动图片栏、打开大门

    CSS 翻转图片主要用到的技术除了3D翻转和定位 ,还用到了一个属性 backface-visibility:visable|hidden;该属性主要是用来设定元素背面是否可见. 效果图如下: 具体的 ...

  4. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  5. CSS：CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  6. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  7. css图片居中，通过纯css实现图片居中的多种实现方法

    在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...

  8. CSS控制图片大小

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片:    对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...

  9. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

随机推荐

  1. python全栈开发day10

    day10知识点总结 while循环补充: continue,终止当前循环,开始下一次循环 break,终止所有循环 pycharm 技巧1.setting 中搜索 mouse 设置鼠标滚轮 改变字体 ...

  2. monitor

    // ==UserScript== // @name Page Monitor // @namespace http://tampermonkey.net/ // @version 0.1 // @d ...

  3. 实现简单的 u-boot

    根据u-boot-1.1.6启动流程来划分,u-boot功能主要划分为四个部分 1,硬件初始化                        -->start.S  init.c 2,从 fla ...

  4. yaml语言在线可视化翻译

    yaml语言在线可视化翻译 https://editor.swagger.io/

  5. Navigator is deprecated and has been removed from this package

    报错:'Navigator is deprecated and has been removed from this package. It can now be installed ' +     ...

  6. CentOS安装python3.5.0+uwsgi+nginx

    1安装编译工具 yum install zlib-devel bzip2-devel openssl-devel python-devel kernel-devel libffi-devel ncur ...

  7. python按修改时间顺序排列文件

    import os def sort_file_by_time(file_path): files = os.listdir(file_path) if not files: return else: ...

  8. MyBatis——模糊查询

    在mybatis中可以使用三种模糊查询的方式: <!-- 模糊查询 --> <select id="selectListByTitle" parameterTyp ...

  9. sync修饰符的简易说明

    其实这个就说的很好了. sync会自动更新父组件的数据 原本valuechild 的值是222,父页面显示的222,把值传递给子组件 子组件也显示的222, 我点击子组件的按钮 把333传递给父组件, ...

  10. js--script和link中的 integrity 属性

    <link crossorigin="anonymous" integrity="sha256-+hDz/gVbhp24mhOmoIT4Du4F3K5fs9fjjo ...