HTML5+CSS3热门活动页面
<!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热门活动页面的更多相关文章
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- HTML5/CSS3 第二章页面组件
页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...
- HTML5+CSS3 QQ会员页面导航
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- HTML5+CSS3静态页面项目-PayPaul的总结
学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...
- HTML5+CSS3静态页面项目-BusinessTheme的总结
因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...
- 超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
- 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
随机推荐
- JS-YAML -YAML 1.2 JavaScript解析器/编写器
下载 JS-YAML -YAML 1.2 JavaScript解析器/编写器JS-YAML -YAML 1.2 JavaScript解析器/编写器 在线演示 这是YAML的实现,YAML是一种对人友好 ...
- java之网络编程1-Tcp
一,了解之前先了解一下网络基础 首先理清一个概念:网络编程 != 网站编程,网络编程现在一般称为TCP/IP编程 一般的网络编程都称为Socket编程,Socket的英文意思是"插座&quo ...
- 怎么快速从产品助理/初级 PM 成长为高级 PM?
一般想成为一枚产品经理的同学,如果没有经过系统的学习,都是从产品专员/助理开始做起的~ 那要想快速从产品助理/初级 PM 成长为高级 PM,以下这几点必不可少 直接上干货~ 全文篇幅较长,可以点赞收藏 ...
- SessionStorage、LocalStorage详解
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/sessionstorage-and-localst ...
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
- MeteoInfoLab脚本示例:中尺度气旋散点图
全球长时间序列中尺度气旋数据(http://cioss.coas.oregonstate.edu/eddies/)有netCDF格式,散点数据类型,只有一个很大的维Nobs = 2590938.尝试读 ...
- 扫描仪扫描文件处理-Python批量处理
多进程处理扫描出来的图片,参见: https://github.com/barrer/scan-helper bug问题反馈github提Issues
- nginx安全:配置ssl证书(https证书)
一,配置https证书的意义 https协议是由SSL+http协议构建的安全协议,支持加密传输和身份认证, 安全性比http要更好,因为数据的加密传输,更能保证数据的安全性和完整性 例如:不使用ht ...
- 第五章 NFS、rsync等统一用户相关操作
一.统一用户 1.httpd2.NFS挂载目录3.rsync 1.所有服务器统一创建用户 [root@web01 ~]# groupadd www -g 666[root@web01 ~]# user ...
- Python字典的初识、增删改查及嵌套
为什么要有字典? 列表可以存储大量的数据,但数据间的关联型不强 列表的查询速度相对慢 dict:字典,容器型数据类型 数据类型的分类: 可变与不可变 可变(不可哈希)的数据类型: 列表list,字典d ...