CSS实例：图片导航块

灰太狼 2021-12-24 05:57 201阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="../static/css/img.css">
    </head>
    <body>
    <div class="recommand">
        <div class="img">
        <a href="www.gzcc.cn"><img src="http://p4.so.qhimgs1.com/t0181469b166e712084.jpg"> </a>
        <div class="desc"><a href="www.gzcc.cn">看这里</a> </div>
        <div class="img">
        <a href="www.gzcc.cn"><img src="http://p2.so.qhimgs1.com/t016124241a929b8a82.jpg"> </a>
        <div class="desc"><a href="www.gzcc.cn">看这里</a> </div>
        <div class="img">
        <a href="www.gzcc.cn"><img src="http://p3.so.qhimgs1.com/t0121f197d096b708e3.jpg"> </a>
        <div class="desc"><a href="www.gzcc.cn">看这里</a> </div>
        <div class="img">
        <a href="www.gzcc.cn"><img src="http://p4.so.qhimgs1.com/t01c311fb97583e35d4.jpg"> </a>
        <div class="desc"><a href="www.gzcc.cn">看这里</a> </div>
        </div>
        </div>
        </div>
        </div>
    </div>

img{
       
        width: 300px;
    }
    div.img{
       
        border: 1px solid;
        width: 280px;
        float: left;
        margin: auto;
    }
    div.img img{
       
        width:100%;
        height: auto;
    }
    div.desc{
       
        text-align: center;
        padding: 5px;
    }
    div img:hover{
       
        border: 1px solid;
    }
    div clearfloat{
       
        clear: both;
    }

</body>
    </html>

转载于:https://www.cnblogs.com/Sun584125503/p/7697966.html

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 css导航栏_使用CSS的导航栏

css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing

系统管理员/ 2023年03月05日 10:59/ 0 赞/ 86 阅读

相关 CSS块元素

什么是css块元素？块级元素是独占一行显示的。它的兄弟元素必定不会与其在同一行中（除非脱离了文档流）。通俗点来说，就是块元素(block element)一般是其他元素

古城微笑少年丶/ 2023年01月05日 15:26/ 0 赞/ 231 阅读

相关 css层叠导航栏

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F

以你之姓@/ 2022年12月23日 15:20/ 0 赞/ 272 阅读

相关 css 四级导航

附上一份四级导航 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

小灰灰/ 2022年11月27日 12:21/ 0 赞/ 117 阅读

相关 css块里面定义块,css块级元素的定义是什么？css块级元素有哪些？

css块级元素是什么？对于一些刚学习css的朋友们来说，这个问题可能不太了解，那么，接下来这篇文章就来给大家介绍一下关于css块级元素的定义，以及css块级元素有哪些？ cs

ゝ一纸荒年。/ 2022年09月03日 01:27/ 0 赞/ 225 阅读

相关图片导航轮播

1.建立一个html页面 2.引入jquery.js 3.建立一个tab.js,里边写所需的样式代码实现： tab.html <!DOCTYPE html

Dear 丶/ 2022年08月21日 11:56/ 0 赞/ 233 阅读

相关 css 导航菜单

body部分，创建一个外部大盒子，里面有一个存放logo的盒子，还有一个存放菜单的盒子 <body> <div id="top"> <div id="logo"><i

曾经终败给现在/ 2022年06月14日 06:29/ 0 赞/ 341 阅读

相关 CSS-包含块

包含块:是视觉格式化模型的一个重要概念，它与盒模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块

古城微笑少年丶/ 2022年05月24日 03:49/ 0 赞/ 223 阅读

相关 CSS实例：图片导航块

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

灰太狼/ 2021年12月24日 05:57/ 0 赞/ 202 阅读

相关 CSS固定定位生成网页顶部导航栏实例

固定定位 position:fixed 固定定位是相对与浏览器窗口来定位, 就算页面滚动, 固定定位元素的位置不会变固定定位元素脱离了标准文档流, 会雅盖主标准文档流

迈不过友情╰/ 2021年10月19日 10:12/ 0 赞/ 494 阅读