使用SmoothGallery创建相册

最新推荐文章于 2024-09-28 19:02:23 发布
最新推荐文章于 2024-09-28 19:02:23 发布
阅读量175 收藏
点赞数
文章标签： 列表 css python html js ViewUI
原文链接：https://www.script-tutorials.com/creating-photo-albums-using-smoothgallery/
版权
Creating photo albums using SmoothGallery
Creating photo albums using SmoothGallery

SmoothGallery photo gallery. Today we will continue creating photo albums using different plugins. Next gallery will SmoothGallery. This is free plugin too. This plugin don`t using jQuery how we can expect last time, but it using mootools library. This gallery is html library (not flash), but, anyway – it have very nice interface and rich possibilities. I will tell you how you can apply this gallery for your projects using PHP for generation necessary code.

SmoothGallery图片库。 今天，我们将继续使用不同的插件创建相册。 下一个画廊将是SmoothGallery 。 这也是免费的插件。 这个插件没有使用jQuery，我们上次是怎么期望的，而是使用mootools库。 这个画廊是html库(不是Flash)，但是无论如何-它具有非常好的界面和丰富的可能性。 我将告诉您如何使用PHP为您的项目应用此库，以生成必要的代码。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示
现场演示2

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. PHP (Step 1. PHP)

Today we will prepare all necessary code directly in single PHP file. Here are code for first sample:

今天，我们将在单个PHP文件中直接准备所有必需的代码。 这是第一个示例的代码：

index.php (index.php)

<?
$sTemplate = <<<XML
<div class="imageElement">
    <h3>{title}</h3>
    <p>{description}</p>
    <a href="#" title="open image" class="open"></a>
    <img src="{fileurl}" class="full" />
    <img src="{fileurl}" class="thumbnail" />
</div>
XML;
$aUnits = array(
    'image 1' => array('Image 1 description', 'pic1.jpg'),
    'image 2' => array('Image 2 description', 'pic2.jpg'),
    'image 3' => array('Image 3 description', 'pic3.jpg'),
    'image 4' => array('Image 4 description', 'pic4.jpg'),
    'image 5' => array('Image 5 description', 'pic5.jpg')
);
$sGalleryObjects = '';
$sFolder = 'data_images/';
foreach ($aUnits as $sTitle => $aUnitInfo) {
    list($sDescription, $sFileName) = $aUnitInfo;
    $sFilePath = $sFolder . $sFileName;
    $sGalleryObjects .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{description}' => $sDescription));
}
echo <<<EOF
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" />
<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script>
<div class="example">
    <h3><a href="#">SmoothGallery examples. First - single gallery, second - multiple galleries</a></h3>
    <div>
        <div id="single_gallery">
            {$sGalleryObjects}
        </div>
        <script type="text/javascript">
            function startGallery() {
                var myGal1 = new gallery($('single_gallery'), {
                    timed: true,
                    delay: 5000,
                    embedLinks: false
                });
            }
            window.addEvent('domready',startGallery);
        </script>
    </div>
</div>
EOF;
?>


<?
$sTemplate = <<<XML
<div class="imageElement">
    <h3>{title}</h3>
    <p>{description}</p>
    <a href="#" title="open image" class="open"></a>
    <img src="{fileurl}" class="full" />
    <img src="{fileurl}" class="thumbnail" />
</div>
XML;
$aUnits = array(
    'image 1' => array('Image 1 description', 'pic1.jpg'),
    'image 2' => array('Image 2 description', 'pic2.jpg'),
    'image 3' => array('Image 3 description', 'pic3.jpg'),
    'image 4' => array('Image 4 description', 'pic4.jpg'),
    'image 5' => array('Image 5 description', 'pic5.jpg')
);
$sGalleryObjects = '';
$sFolder = 'data_images/';
foreach ($aUnits as $sTitle => $aUnitInfo) {
    list($sDescription, $sFileName) = $aUnitInfo;
    $sFilePath = $sFolder . $sFileName;
    $sGalleryObjects .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{description}' => $sDescription));
}
echo <<<EOF
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" />
<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script>
<div class="example">
    <h3><a href="#">SmoothGallery examples. First - single gallery, second - multiple galleries</a></h3>
    <div>
        <div id="single_gallery">
            {$sGalleryObjects}
        </div>
        <script type="text/javascript">
            function startGallery() {
                var myGal1 = new gallery($('single_gallery'), {
                    timed: true,
                    delay: 5000,
                    embedLinks: false
                });
            }
            window.addEvent('domready',startGallery);
        </script>
    </div>
</div>
EOF;
?>

So, what I doing here: In begining – I defined template for units of images for gallery. After – defined array of used images. This is only for current sample. In your script all can be different (should be). In result – in foreach cycle we prepared list of images using our template for our gallery. And, after, drawing our result. Pay attention to our javascript, where we perform initialization of our gallery. Don`t forget, that today we don`t using jQuery, but using mootools library (it using $ symbol too). In params I set that images will switching by time with delay in 5 second. This gallery can accept very many different params, here are several of them:

因此，我在这里所做的事情：一开始-我定义了用于画廊图像单位的模板。 之后–定义已使用图像的数组。 这仅适用于当前样本。 在脚本中，所有内容都可以不同(应该是)。 结果–在foreach周期中，我们使用了用于画廊的模板来准备图像列表。 然后，得出我们的结果。 请注意我们JavaScript，我们在其中执行画廊的初始化。 不要忘记，今天我们不使用jQuery，而是使用mootools库(它也使用$符号)。 在参数中，我设置为图像将在5秒内按时间切换。 这个画廊可以接受很多不同的参数，其中有几个：

  • showArrows – show navigation arrows?, default value ‘true’

    showArrows –显示导航箭头？，默认值为“ true”
  • showCarousel – show carousel?, default value ‘true’

    showCarousel –显示轮播吗？，默认值为'true'
  • showInfopane – show info panel?, default value ‘true’

    showInfopane –显示信息面板？，默认值为“ true”
  • fadeDuration – fade duration, default value ‘500’

    fadeDuration –淡入时间，默认值为“ 500”
  • timed – are images switching by time?, default value ‘false’

    定时-图像是否按时间切换？默认值为“ false”
  • delay – delay between images, default value ‘9000’

    延迟–图像之间的延迟，默认值为'9000'
  • titleSelector – selector for title elements (check our template for units), default value ‘h3’

    titleSelector –标题元素的选择器(检查我们的模板的单位)，默认值为“ h3”
  • slideInfoZoneOpacity – default value ‘0.7’

    slideInfoZoneOpacity –默认值“ 0.7”
  • slideInfoZoneSlide – default value ‘true’

    slideInfoZoneSlide –默认值“ true”
  • carouselMinimizedOpacity – min opacity in carousel, default value ‘0.4’

    carouselMinimizedOpacity –轮播中的最小不透明度，默认值为'0.4'
  • carouselMaximizedOpacity – max onhover opacity in carousel, default value ‘0.9’

    carouselMaximizedOpacity –轮播中的最大悬停不透明度，默认值为'0.9'
  • textShowCarousel – title to carousel element, default value ‘Pictures’

    textShowCarousel –轮播元素的标题，默认值为'Pictures'
  • textPreloadingCarousel – title for preloading of carousel, default value ”Loading…’

    textPreloadingCarousel –轮播的预加载标题，默认值为“ Loading…”

I hope that you will able to apply necessary custom params by self. Now, want to tell, that this plugin allow to draw not only single gallery, but also multiple galleries too, here are sources of our second sample:

我希望您能够自行应用必要的自定义参数。 现在，要告诉我们的是，此插件不仅可以绘制单个画廊，而且还可以绘制多个画廊，这是我们第二个示例的来源：

index-2.php (index-2.php)

<?
$sTemplate = <<<XML
<div class="imageElement">
    <h3>{title}</h3>
    <p>{description}</p>
    <a href="#" title="open image" class="open"></a>
    <img src="{fileurl}" class="full" />
    <img src="{fileurl}" class="thumbnail" />
</div>
XML;
$aUnits = array(
    'Album #1' => array(
        'image 1' => array('Image 1 description', 'pic1.jpg'),
        'image 2' => array('Image 2 description', 'pic2.jpg'),
        'image 3' => array('Image 3 description', 'pic3.jpg'),
        'image 4' => array('Image 4 description', 'pic4.jpg'),
        'image 5' => array('Image 5 description', 'pic5.jpg'),
        'image 6' => array('Image 6 description', 'pic6.jpg')
    ),
    'Album #2' => array(
        'image 7' => array('Image 7 description', 'pic7.jpg'),
        'image 8' => array('Image 8 description', 'pic8.jpg'),
        'image 9' => array('Image 9 description', 'pic9.jpg'),
        'image 10' => array('Image 10 description', 'pic10.jpg'),
        'image 11' => array('Image 11 description', 'pic11.jpg'),
        'image 12' => array('Image 12 description', 'pic12.jpg')
    ),
    'Album #3' => array(
        'image 13' => array('Image 13 description', 'pic13.jpg'),
        'image 14' => array('Image 14 description', 'pic14.jpg'),
        'image 15' => array('Image 15 description', 'pic15.jpg'),
        'image 16' => array('Image 16 description', 'pic16.jpg'),
        'image 17' => array('Image 17 description', 'pic17.jpg'),
        'image 18' => array('Image 18 description', 'pic18.jpg')
    )
);
$sGalleryObjects = '';
$sFolder = 'data_images/';
foreach ($aUnits as $sAlbumTitle => $aAlbums) {
    $sGalleryObjects .= '<div id="'.$sAlbumTitle.'" class="galleryElement"><h2>'.$sAlbumTitle.'</h2>';
    foreach ($aAlbums as $sTitle => $aUnitInfo) {
        list($sDescription, $sFileName) = $aUnitInfo;
        $sFilePath = $sFolder . $sFileName;
        $sGalleryObjects .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{description}' => $sDescription));
    }
    $sGalleryObjects .= '</div>';
}
echo <<<EOF
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" />
<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script>
<script src="js/jd.gallery.set.js" type="text/javascript"></script>
<div class="example">
    <h3><a href="#">SmoothGallery examples. First - single gallery, second - multiple galleries</a></h3>
    <div>
        <div id="multiple_galleries">
            {$sGalleryObjects}
        </div>
        <script type="text/javascript">
            function startGallery() {
                var myGal2 = new gallerySet($('multiple_galleries'), {
                    timed: true,
                    delay: 5000,
                    embedLinks: false
                });
            }
            window.addEvent('domready',startGallery);
        </script>
    </div>
</div>
EOF;
?>


<?
$sTemplate = <<<XML
<div class="imageElement">
    <h3>{title}</h3>
    <p>{description}</p>
    <a href="#" title="open image" class="open"></a>
    <img src="{fileurl}" class="full" />
    <img src="{fileurl}" class="thumbnail" />
</div>
XML;
$aUnits = array(
    'Album #1' => array(
        'image 1' => array('Image 1 description', 'pic1.jpg'),
        'image 2' => array('Image 2 description', 'pic2.jpg'),
        'image 3' => array('Image 3 description', 'pic3.jpg'),
        'image 4' => array('Image 4 description', 'pic4.jpg'),
        'image 5' => array('Image 5 description', 'pic5.jpg'),
        'image 6' => array('Image 6 description', 'pic6.jpg')
    ),
    'Album #2' => array(
        'image 7' => array('Image 7 description', 'pic7.jpg'),
        'image 8' => array('Image 8 description', 'pic8.jpg'),
        'image 9' => array('Image 9 description', 'pic9.jpg'),
        'image 10' => array('Image 10 description', 'pic10.jpg'),
        'image 11' => array('Image 11 description', 'pic11.jpg'),
        'image 12' => array('Image 12 description', 'pic12.jpg')
    ),
    'Album #3' => array(
        'image 13' => array('Image 13 description', 'pic13.jpg'),
        'image 14' => array('Image 14 description', 'pic14.jpg'),
        'image 15' => array('Image 15 description', 'pic15.jpg'),
        'image 16' => array('Image 16 description', 'pic16.jpg'),
        'image 17' => array('Image 17 description', 'pic17.jpg'),
        'image 18' => array('Image 18 description', 'pic18.jpg')
    )
);
$sGalleryObjects = '';
$sFolder = 'data_images/';
foreach ($aUnits as $sAlbumTitle => $aAlbums) {
    $sGalleryObjects .= '<div id="'.$sAlbumTitle.'" class="galleryElement"><h2>'.$sAlbumTitle.'</h2>';
    foreach ($aAlbums as $sTitle => $aUnitInfo) {
        list($sDescription, $sFileName) = $aUnitInfo;
        $sFilePath = $sFolder . $sFileName;
        $sGalleryObjects .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{description}' => $sDescription));
    }
    $sGalleryObjects .= '</div>';
}
echo <<<EOF
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" />
<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script>
<script src="js/jd.gallery.set.js" type="text/javascript"></script>
<div class="example">
    <h3><a href="#">SmoothGallery examples. First - single gallery, second - multiple galleries</a></h3>
    <div>
        <div id="multiple_galleries">
            {$sGalleryObjects}
        </div>
        <script type="text/javascript">
            function startGallery() {
                var myGal2 = new gallerySet($('multiple_galleries'), {
                    timed: true,
                    delay: 5000,
                    embedLinks: false
                });
            }
            window.addEvent('domready',startGallery);
        </script>
    </div>
</div>
EOF;
?>

As you can see, our main array now contain 1 more level, and now we can see here and albums and its photos. Plus, I changed parser a little too. Also, pay attention to javascript initialization – it changed a little too. But, commonly all still same, just few another custom params like:

如您所见，我们的主阵列现在包含了另外1个关卡，现在我们可以在这里看到专辑和它的照片。 另外，我也稍微改变了解析器。 另外，请注意javascript初始化-它也发生了一些变化。 但是，通常都还是一样，只有几个其他自定义参数，例如：

  • galleryTitleSelector – selector for gallery title, default value ‘h2’

    galleryTitleSelector –画廊标题的选择器，默认值为“ h2”
  • textGallerySelector – main title at list of albums, default value ‘Galleries’

    textGallerySelector –相册列表中的主要标题，默认值为“ Galleries”
  • textShowCarousel – title in carousel, default value ‘{0}/{1} Pictures’

    textShowCarousel –轮播中的标题，默认值为'{0} / {1}图片'

步骤2. CSS (Step 2. CSS)

Here are used CSS files for our demo:

这是我们的演示使用CSS文件：

css / main.css (css/main.css)

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.example #single_gallery, .example #multiple_galleries {
border: 1px solid #000000;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
height: 500px;
width: 100%;
overflow:hidden;
}
/*small fixes for gallery itself using css3*/
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail {
background-size:100px 75px !important;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview {
background-size:40px 40px !important;
}


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.example #single_gallery, .example #multiple_galleries {
border: 1px solid #000000;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
height: 500px;
width: 100%;
overflow:hidden;
}
/*small fixes for gallery itself using css3*/
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail {
background-size:100px 75px !important;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview {
background-size:40px 40px !important;
}

As you can see – I made 2 small fixes for styles of this gallery – it will allow us don`t use small images for thumbs in carousel and for list of albums

如您所见-我为该画廊的风格做了2个小修正-它使我们不要将小图像用于轮播中的拇指和专辑列表

css / jd.gallery.css (css/jd.gallery.css)

This file belong to our plugin and already available in package

该文件属于我们的插件，已经在软件包中提供

步骤3. JS (Step 3. JS)

All JS files (of this plugin) located in ‘js’ folder:

位于“ js”文件夹中的所有(该插件的)JS文件：

js / jd.gallery.js，js / jd.gallery.set.js，js / mootools-1.2-more.js和js / mootools-1.2.1-core-yc.js (js/jd.gallery.js, js/jd.gallery.set.js, js/mootools-1.2-more.js and js/mootools-1.2.1-core-yc.js)

All these files available in download package.

所有这些文件都在下载包中。

步骤4.图片 (Step 4. Images)

All our images located in ‘data_images’ folder. Of course, you can use another folder path and name. Just don`t forget to correct php files in this case too.

我们所有的图像都位于“ data_images”文件夹中。 当然，您可以使用其他文件夹路径和名称。 只是不要忘了在这种情况下也要更正php文件。

现场演示
现场演示2

结论 (Conclusion)

Today I told you how you can create photo albums for your websites. Sure that it was interesting. Good luck!

今天，我告诉您如何为您的网站创建相册。 当然，这很有趣。 祝好运！

翻译自: https://www.script-tutorials.com/creating-photo-albums-using-smoothgallery/

cukeoumuqian0413
关注
signature=5a33271e0175ec6f00b18692819b04f0,member-systeam/yarn.lock at master · yenanfromtree/member...
weixin_28881575的博客
05-30 5万+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.# yarn lockfile v1"@ant-design/icons-react@~1.1.2":version "1.1.2"resolved "http://registry.npm.taobao.org/@ant-design/icons-react/downl...
12个Javascript图片相册画廊网
--
12-29 1035
<br />现在有大量的基于Flash的画廊展示程序，但很多时候，Flash能够创造更精美的效果，却不是那么方便用户，尤其是速度问题还有待解决。所以我们还是钟爱着javascript和CSS 。这里是综合了一些较好的JavaScript和ajax技术为基础的图片画廊程序解决方案，当然，它们中的一些不单是可以用来展示图片，还可以展示视频，html文档或是其它格式的多媒体内容。(via 12 javascript images gallries)<br />(E)2 Photo Gallery Made Wit
SmoothGallery
hhccth的专栏
06-15 445
SmoothGallery是一套非常专业的相片展示网页。下载地址是：http://smoothgallery.jondesign.net/download/介绍css：layout.css控制页面结构与总体外观的作用。jd.gallery.css控制相框的基本样式 缩略图样式 图片导航 和打开全图连接  图片标题和说明
mootools做的一个相册，基于 SmoothGallery 和 LightWindow
mplive112的博客
10-07 118
之前用 SmoothGallery 和 LightWindow，虽然都不错，但是毕竟一个是mootools的东西，一个是prototype的东西，用起来难免不方便，所以动手用mootools重新实现了一下，风格和特效还是沿用它们的 演示demo地址：http://www.onshowing.net/demo(2009年9月后无效) 对js相册感兴趣的朋友可以看看 对 Smooth...
Android HorizontalScrollView 实现3D Gallery
我的专栏
10-28 2455
由于Gallery每次切换图片时都要新建视图，造成太多的资源浪费，所以Gallery已经被谷歌弃用(Deprecated API-16)，Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果。 注意：HorizontalScrollView可以实现Gallery的效果，但是HorizontalScrollView存在一个很大的问题：Horiz
27款开源图片相册管理系统
热门推荐
tkhhappyboy的专栏
07-19 1万+
singapore singapore是一个开源，多语言支持，模板驱动的图片管理器。它不需要数据库，所有图片信息都存储在CSV文件中。 SPGM SPGM(Simple Picture Gallery Manager)该基于Web的图片管理器支持为图片加说明，不限制图片分类目录，支持对每个目录进行配置(支持继承)，随机或固定缩略图，对新图片加亮 显示，支持EXIF，提供幻灯片浏览模式，易于集
php相册系统
weixin_33978016的博客
10-23 1200
不管你是想要怎么样来表达对图片的感情，是建一个专业的Gallery站点，还是为自己的网站添加一个独立的相册功能，想必你都会利用到下面东西，希望对大家有用吧。 singaporesingapore是一个开源，多语言支持，模板驱动的图片管理器。它不需要数据库，所有图片信息都存储在CSV文件中。 SPGMSPGM(Simple Picture Gallery...
超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
无界编程
07-28 9579
Farbtastic <br /><br />Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件，然后每个控件关联到页面中的一个元素比如：文本输入框。<br /><br /><br />Farbtastic<br />jQuery Color Picker 21世纪开运网在线排盘星座就成功运用这些技巧，www.21kaiyun.com<br /><br />一个简单的颜色选择控件。操作方式与Adobe Photoshop中颜色选择操作置。<br /><br /><
SmoothGallery javascript效果源码
11-10
这个插件特别适合那些希望在网站上创建专业级相册或画廊的开发者。 2. **核心功能** - **滑动过渡**：SmoothGallery的亮点在于其平滑的图片滑动效果，使得图片之间的切换如同翻书一般自然。 - **触屏支持**：适应...
基于jquery的15款幻灯片插件
12-02
1. **Galleriffic**：这款插件利用jQuery Cycle plugin来创建图片展示，提供了缩略图、标题和描述等功能，非常适合创建高质量的在线相册或画廊。用户可以通过鼠标悬停或点击缩略图来浏览详细信息。 2. **ZoomImage*...
php 开源图片管理系统,PHP开源项目:图片管理_php开源项目网
weixin_42631411的博客
03-12 1341
当前位置: php开源项目网 > 图片管理 > 开源项目:图片管理Gallery是一个开源基于Web的相簿管理器。用户可以使用Web浏览器上传图片(缩略图也同时被创建)，评价图片，添加注释和发送电子贺卡。管理员可以批量添加已经上传到FTP服务器上的图片。...浏览全部栏目:图片管理浏览(8)评论(0)Moa是一个轻量级、易于使用的个人相册。支持按文件目录的方式拆分成多个子相册。....
【CSS in Depth 2 精译_039】6.3 CSS 定位技术之：相对定位（上）
PeacefulWinter的博客
09-25 901
本篇主要介绍了CSS的相对定位技术（relative positioning），通过一个下拉菜单的简单示例，详细讨论了相对定位的特点及适用场景，以及应用过程中需要考虑的一些问题（如页面可访问性等）。本节对上一版作了大幅更新，最后还针对正文提到了一个功能点进行了补充完善。感兴趣的朋友不妨动手试试，一定会有新的收获。建议先收藏！
CSS 的背景样式
m0_74012211的博客
09-28 102
CSS 的背景
CSS05-复合选择器
qq_31532983的博客
09-24 266
后代选择器、子类选择器、并集选择器、伪类选择器（链接伪类、focus伪类）
基于Next.js和TailwindCss的TailwindCss
hanzi552200的博客
09-25 267
最近在研究 Next.js 和 TailwindCss ，这两天没事的时候就搞了一个 c。目前工具部署在 Vercel ，欢迎各位体验（能提出意见更好嘿嘿）
如何只用 CSS 制作网格？
偶尔记一下 - mybatis.io
09-24 1059
在看这篇文章时，对其中的网格比较好奇，作者提供了 stackoverflow 的链接，就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较喜欢的样式，贴在下面展示。
css 数字比汉字要靠上
最新发布
qq_38210427的博客
09-28 131
这个问题通常是由于数字字体的下排的问题造成的，也就是数字的底部边缘位置比汉字的顶部边缘位置更靠下。如果是在网页中出现的问题，可以尝试使用等宽字体，这样可以避免字体本身的下排问题。请根据实际情况选择合适的方法，并结合具体的HTML结构和设计需求进行调整。属性来减小行高，使得行间的距离减小，看起来数字比汉字要靠上。属性来调整对齐方式。例如，可以将数字的对齐方式设置为。，可以使容器内的项目垂直方向上对齐到容器的顶部。值来拉动数字使其更靠上。(代码里使用了这个)使用Flexbox布局模型，并设置。
CSS04-Chrome调试工具
qq_31532983的博客
09-24 326
Chrome调试工具
提升开发效率：56款AJAX图片展示框架精选（1/2）
5. **JonDesign's SmoothGallery**：这个框架注重标准合规性，可以使用自定义CSS选择器编辑，并且轻量级，JavaScript文件只有16KB，意味着它在性能上表现优秀。 6. **AjaxPhotoGallery**：它是AgileGallery的AJAX...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值