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. sshd_config配置详解

    sshd_config配置详解 名称 sshd_config - OpenSSH SSH 服务器守护进程配置文件 大纲 /etc/ssh/sshd_config 描述 sshd(8) 默认从 /etc ...

  2. 洛谷P3295 萌萌哒 [SCOI2016] 倍增+并查集

    正解:倍增+并查集 解题报告: 传送门! 首先不难想到暴力?就考虑把区间相等转化成对应点对相等,然后直接对应点连边,最后求有几个连通块就好辣 然后看下复杂度,修改是O(n2)查询是O(n),就比较容易 ...

  3. 007-docker-安装-mysql:5.6

    1.搜索镜像 docker search mysql 2.拉取合适镜像 docker pull mysql:5.6 docker images 3.使用镜像 docker run -p 3306:33 ...

  4. linux find grep tail

    如果在只是想匹配模式的上下几行,grep可以实现. $grep -5 'parttern' inputfile //打印匹配行的前后5行 $grep -C 5 'parttern' inputfile ...

  5. SAP 创建 component

    1: 进入x3c 系统,输入 T-CODE     BSP_WD_CMPWB 2: 输入以Z开头的组件名. 点击create using wizard 3:  输入应用属性 4: 定义 bol mod ...

  6. sap 程序之间的相互调用

    1:首先进入到local object 目录下. 右键>create >function group,创建一个函数组. 右键创建类其它的东西 2:在创建的function group(fu ...

  7. 从原型链看DOM－－Node类型

    前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索 ...

  8. 用lua扩展你的Nginx（整理）-----openresty

    用lua扩展你的Nginx(整理) 首先得声明.这不是我的原创,是在网上搜索到的一篇文章,原著是谁也搞不清楚了.按风格应该是属于章亦春的文章. 整理花了不少时间,所以就暂写成原创吧. 一. 概述 Ng ...

  9. keras学习简单线性回归【1】

    转自:https://morvanzhou.github.io/tutorials/machine-learning/keras/2-1-regressor/ 总的代码的过程就是: 1.导入模块+创建 ...

  10. 调用另一个文件的python代码【转载】

    转自:https://blog.csdn.net/u010412719/article/details/47089883 例如我们有a.py和b.py两个文件,当我们需要在b.py文件中应用a.py中 ...