<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热门活动页面</title>
    <style type="text/css">
        #list{
            width: 680px;
            margin: 0px auto;
            overflow: hidden;
        }
        #list1{
            overflow: hidden;
            width: 640px;
            margin: 0px auto;
        }

        #list2{
            overflow: hidden;
            width: 640px;
            margin: 0px auto;
        }
        #title{

            overflow: hidden;
        }
        /*更多*/
        .more{
            float: right;
        }
        h1:nth-of-type(1){
            margin-left: 50px;
        }
        h1{
            float: left;
            font-size: 14px;
        }
        ul{
            list-style: none;
        }
        .pic1,.pic2,.pic3,.pic4{
            float: left;
        }
        .pic1{
            margin-top:16px;
        }
        li{
            font-size: 12px;
        }
        .pic3,.pic4{
            margin-top: 0px;
        }
        a{
            font-weight: normal;
            color: #5b666b;
            text-decoration: none;
        }

    </style>
</head>
<body>
<div id="list">
    <div id="title">
        <h1>热门活动</h1>
        <h1 class="more"><a href="#"><h1>更多</h1></a></h1>
    </div>
    <div id="list1">
        <ul class="pic1">
            <li><img src="2/img1.png" /></li>
            <li>推荐活动 |原创音乐现金榜T榜</li>
        </ul>
        <ul class="pic2">
            <li><img src="2/img2.png" /></li>
            <li>推荐节目|《TAImusic》爆笑来袭</li>
        </ul>
    </div>
    <div id="list2">
        <ul class="pic3">
            <li><img src="2/img3.png" /></li>
            <li>推荐歌单 | 继续宠爱张国荣</li>
        </ul>
        <ul class="pic4">
            <li><img src="2/img4.png" /></li>
            <li>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</li>
        </ul>
    </div>
</div>
</body>
</html>

HTML5+CSS3热门活动页面的更多相关文章

  1. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  2. HTML5/CSS3 第二章页面组件

    页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...

  3. HTML5+CSS3 QQ会员页面导航

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

  4. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  5. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  6. HTML5+CSS3静态页面项目-PayPaul的总结

    学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...

  7. HTML5+CSS3静态页面项目-BusinessTheme的总结

    因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...

  8. 超棒的HTML5/CSS3单页面响应式模板（支持Bootstrap）

    在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)

  9. 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

随机推荐

  1. nginx完美支持thinkphp3.2.2（需配置URL_MODE=>3 rewrite兼容模式)

    来源:http://www.thinkphp.cn/topic/26637.html 环境:nginx 1.6,thinkphp3.2.2 第一步,修改server块 server { listen ...

  2. TP5发送邮件

    1,前提去qq邮箱开启smtp 2,生成授权码 2,发送短信给 3,附上代码 贴上代码如下 <?phpnamespace app\mails\controller;use \think\Cont ...

  3. 推荐一款IDEA神器！一键查看Java字节码以及其他类信息

    由于后面要分享的一篇文章中用到了这篇文章要推荐的一个插件,所以这里分享一下.非常实用!你会爱上它的! 开始推荐 IDEA 字节码查看神器之前,先来回顾一下 Java 字节码是啥. 何为 Java 字节 ...

  4. 可变数据类型不能作为python函数的参数

    可变数据类型:列表.字典 不可变数据类型:整型.浮点型.字符串.元组 为什么可变数据类型不能作为python函数的参数?请看以下例子: def foo(a=[]): a.append(1) retur ...

  5. ansible用authorized_key模块批量推送密钥到受控主机(免密登录)(ansible2.9.5)

    一,ansible的authorized_key模块的用途 用来配置密钥实现免密登录: ansible所在的主控机生成密钥后,如何把公钥上传到受控端? 当然可以用ssh-copy-id命令逐台手动处理 ...

  6. Ubuntu18.04中安装virtualenv和virtualenvwrapper

    1.安装virtualenv和virtualenvwrapper pip3 install virtualenv pip3 install virtualenvwrapper 2.创建目录用来存放虚拟 ...

  7. QT/C++插件式框架、利用智能指针管理内存空间的实现、动态加载动态库文件

    QT.C++插件式框架.主要原理还是 动态库的动态加载. dlopen()函数.下面为动态加载拿到Plugininstance对应指针.void**pp=(void**)dlsym(handle,&q ...

  8. 《NASA对N+3代先进飞行器概念设计最终报告》阅读笔记

    民用航空的爆炸式增长已是未来的必然,灿烂的前景也意味着巨大的挑战,谁能发掘到未来技术的潜力,谁就能称霸下一个30年的天空! 文章目录 总概述 单双争霸 四点发现 方案分析 多维度分析 设计要求 品质因 ...

  9. 闭包 - Js函数笔记

    闭包 当函数被保存到外部时,将会生成闭包 闭包会导致原有作用域链不释放,造成内存泄漏 类似的代码就叫闭包 闭包的运行作用域 代码 a被执行,b被定义并保存出来 a结束,b被执行时,a的执行期上下文指向 ...

  10. 模板c++

    #define _CRT_SECURE_NO_WARINGS #include <iostream> using namespace std; int main(void) { retru ...