Day2-CSS- 图片廊

一、以下是使用 CSS 创建图片廊:

效果就是“这样的点击图片之后,就可以打开新的页面显示高清图片了”

Day2-CSS- 图片廊_第1张图片

    <div class="responsive">
        <div class="img">
            <a href="../image/view1.jpg" target="_blank">
            <img src="../image/view1.jpg" alt="图片文本表述">
            a>
            <div class="desc">这里添加图片文本描述div>
        div>
    div>
    <div class="responsive">
        <div class="img">
            <a href="../image/view2.jpg" target="_blank">
            <img src="../image/view2.jpg" alt="图片文本表述">
            a>
            <div class="desc">这里添加图片文本描述div>
        div>
    div>
    <div class="responsive">
        <div class="img">
            <a href="../image/view6.jpg" target="_blank">
            <img src="../image/view6.jpg" alt="图片文本表述">
            a>
            <div class="desc">这里添加图片文本描述div>
        div>
    div>
HTML
 
CSS

二、响应式图片廊

效果图:开始的时候四个一行,缩小陆续变成两个、一个一行

 

Day2-CSS- 图片廊_第2张图片

<body>
    <h2 style="text-align:center">响应式图片相册h2>
    <div class="responsive">
        <div class="img">
            <a href="../image/view1.jpg" target="_blank">
            <img src="../image/view1.jpg" alt="图片文本表述">
            a>
            <div class="desc">这里添加图片文本描述div>
        div>
    div>
    <div class="responsive">
        <div class="img">
            <a href="../image/view9.jpg" target="_blank">
            <img src="../image/view9.jpg" alt="图片文本表述">
            a>
            <div class="desc">这里添加图片文本描述div>
        div>
    div>
    <div class="responsive">
        <div class="img">
            <a href="../image/view10.jpg" target="_blank">
            <img src="../image/view10.jpg" alt="图片文本表述">
            a>
            <div class="desc">这里添加图片文本描述div>
        div>
    div>
    <div class="responsive">
        <div class="img">
            <a href="../image/view5.jpg" target="_blank">
            <img src="../image/view5.jpg" alt="图片文本表述">
            a>
            <div class="desc">这里添加图片文本描述div>
        div>
    div>

    <div class="clearfix">div>

<div style="padding:6px;">
  
  <h4>重置浏览器大小查看效果h4>
div>
body>
HTML

 

你可能感兴趣的:(Day2-CSS- 图片廊)