您的位置：首页 > Web前端 > > 正文

div css实例列表（DIV+CSS实现电台列表设计的示例代码）

更多时间：2022-03-30 09:20:09 类别：Web前端浏览量：2503

div css实例列表

DIV+CSS实现电台列表设计的示例代码

CSS Spite技术：也就是CSS精灵技术，实际上CSS的精灵就是图片里的一个个的图标元素，这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术，可有效减少传输请求次数，所需要的图标汇总在一张图片中，一次下载即可整个页面应用

以下示例主要是CSS精灵技术的应用，直接Po代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>酷狗电台列表设计</title>
    <style>
        #frm{
            margin:0;
            padding:0;
            list-style-type: none;
            width: 500px;
            border:1px solid #000;
            overflow: hidden;
        }
        #frm *{
            margin:0;
            padding: 0;
            font-size: 12px;
        }
        #frm li{
            padding:4px 0;
            width: 47%;
            float: left;
            margin:5px 15px 5px 0;
            cursor: pointer;
        }
        #frm li span{
            color:#999;
            position: relative;
        }
        #frm li .d{
            width: 38px;
            height: 38px;
            float: left;
            margin:0px 12px 6px 0;
            background-image: url(img/spite2.jpg" alt="div css实例列表（DIV+CSS实现电台列表设计的示例代码）" border="0" />

生成效果：

div css实例列表（DIV+CSS实现电台列表设计的示例代码）