【小练习06】HTML+CSS--教学大讲堂
要求实现如下效果图：
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h3,h4,p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: middle;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
body{
background: #f1f1f1;
}
section{
width: 980px;
border: 1px solid #ddd;
background: #fff url(images/section_bg.gif) repeat-x;
}
section h3{
height: 54px;
font: bold 16px/54px '宋体';
color: #333;
padding-left: 15px;
margin-bottom: 3px;
}
.list1{
padding-left: 39px;
}
.list1 li{
width: 272px;
height: 134px;
float: left;
}
.space{
margin: 0 43px;
}
.imgLink{
float: left;
}
.imgLink img{
padding: 1px;
margin-right: 16px;
border: 1px solid #c7c7c7;
}
.list1 li div{
float: left;
width: 157px;
}
.list1 li h4{
height: 13px;
line-height: 13px;
margin-bottom: 5px;
font-size:11px ;
font-weight: normal;
}
.list1 li span,.list1 li p{
font: 11px/22px '字体';
display: block;
}
.list1 li p.btn{
line-height: 20px;
}
.btn a{
display: inline-block;
width: 44px;
height: 20px;
margin-top: 8px;
background: url(images/btn_01.gif);
font-size: 0;
}
.btn a.preview{
background: url(images/btn_02.gif);
margin-left: 9px;
}
.list2{
margin: 30px 0 21px 0;
padding-left: 39px;
}
.list2 li{
width: 124px;
float: left;
margin-right: 32px;
}
.list2 li img{
padding: 1px;
border: 1px solid #c7c7c7;
}
.list2 h4{
height: 25px;
line-height: 25px;
margin-top: 10px;
}
.list2 h4 a{
font-size: 11px;
color: #0b57ab;
}
.list2 p{
font: 11px/23px "宋体";
}
.list2 p a{
color: #0b57ab;
}
</style>
</head>
<body>
<section>
<h3>本周主打</h3>
<ul class="list1 clearfix">
<li>
<a href="#" class="imgLink"><img src="data:images/img_02.jpg"/></a>
<div>
<h4><a href="#">妙用性格</a></h4>
<span>讲师：<a href="#">张在</a></span>
<span>技术：花12集</span>
<span>类型：生活</span>
<p>性格 工顶替枯奇才标有顶替</p>
<p class="btn"><a href="#">购买</a><a href="#" class="preview">预览</a></p>
</div>
</li>
<li class="space">
<a href="#" class="imgLink"><img src="data:images/img_02.jpg"/></a>
<div>
<h4><a href="#">妙用性格</a></h4>
<span>讲师：<a href="#">张在</a></span>
<span>技术：花12集</span>
<span>类型：生活</span>
<p>性格 工顶替枯奇才标有顶替</p>
<p class="btn"><a href="#">购买</a><a href="#" class="preview">预览</a></p>
</div>
</li>
<li>
<a href="#" class="imgLink"><img src="data:images/img_02.jpg"/></a>
<div>
<h4><a href="#">妙用性格</a></h4>
<span>讲师：<a href="#">张在</a></span>
<span>技术：花12集</span>
<span>类型：生活</span>
<p>性格 工顶替枯奇才标有顶替</p>
<p class="btn"><a href="#">购买</a><a href="#" class="preview">预览</a></p>
</div>
</li>
</ul>
<ul class="list2 clearfix">
<li>
<a href="#"><img src="data:images/img_03.jpg"/></a>
<h4><a href="#">进水届枯城</a></h4>
<p>讲师：<a href="#">张在</a></p>
<p>类型：生活</p>
</li>
<li>
<a href="#"><img src="data:images/img_03.jpg"/></a>
<h4><a href="#">进水届枯城</a></h4>
<p>讲师：<a href="#">张在</a></p>
<p>类型：生活</p>
</li>
<li>
<a href="#"><img src="data:images/img_03.jpg"/></a>
<h4><a href="#">进水届枯城</a></h4>
<p>讲师：<a href="#">张在</a></p>
<p>类型：生活</p>
</li>
<li>
<a href="#"><img src="data:images/img_03.jpg"/></a>
<h4><a href="#">进水届枯城</a></h4>
<p>讲师：<a href="#">张在</a></p>
<p>类型：生活</p>
</li>
<li>
<a href="#"><img src="data:images/img_03.jpg"/></a>
<h4><a href="#">进水届枯城</a></h4>
<p>讲师：<a href="#">张在</a></p>
<p>类型：生活</p>
</li>
<li>
<a href="#"><img src="data:images/img_03.jpg"/></a>
<h4><a href="#">进水届枯城</a></h4>
<p>讲师：<a href="#">张在</a></p>
<p>类型：生活</p>
</li>
</ul>
</section>
</body>
</html>
【小练习06】HTML+CSS--教学大讲堂的更多相关文章
- 小奶狗给小喵咪上CSS课程
小奶狗给小喵咪上CSS课程 小奶狗,你好啊? 小喵咪你好~ 听说学习HTML,要学习CSS是吗? 是的,小甜心~ 那么CSS是什么呢? CSS是Cascading Style Sheet英文的缩写,中 ...
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
- 前端小白页面开发注意事项及小工具（html\css\js）
技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...
- SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用
通常在我们的项目中,都会涉及到母版页的定制.并且必不可少的,需要配合以一套自己的JavaScript框架和CSS样式.你有没有遇到过这样的情况呢,在开发环境和UAT时都还算顺利,但是当最终部署到生产服 ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 微信小程序之菜鸟入门教学（二）
昨天学习了一些简单的概念,今天开始实际操作,通过搭建简单的计算器来学习小程序的架构 一.小程序框架 程序框架如上图所示.由此可见,框架的基本构成为: 1. app.js . app.wxss 2. a ...
- 前端小例子 基础js css html练习
前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...
- 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）
类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...
- 前端笔记之微信小程序（一）初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的 ...
随机推荐
- Nginx Access Log日志统计分析常用命令
Nginx Access Log日志统计分析常用命令 IP相关统计 统计IP访问量 awk '{print $1}' access.log | sort -n | uniq | wc -l 查看某一时 ...
- 第八章 Hibernate数据操作技巧
第八章 Hibernate数据操作技巧8.1 分组统计数据 语法:[select]... from ...[where] [group by...[having...]] [order by ...
- Redis技术分享
环境介绍: 开发环境: spring3+tomcat7+maven3+redis-3.0.7 运行环境: Linux 前言: 项目中引入redis背景: 项目中最初将科目.打印.利润表.资产负债表.现 ...
- Linux - 进程间通信 - 命名管道
1.命名管道的特点: (1)是管道,可用于非血缘关系的进程间的通信 (2)使用命名管道时,梁金成需要用路径表示通道. (3)命名管道以FIFO的文件形式存储于文件系统中.(FIFO:总是按照先进先出的 ...
- 有关 json对象 取出其中数据问题
这几天,在做一个ajax异步提交的小功能,发现从ashx中传递过来的string 类型的数据,一直拿不到(当时是指的是json点不出来),傻傻的自己,一直在找其他的方法,看看其他那里出了错误,最后,那 ...
- java运算符 与（&）、非（~）、或（|）、异或（^）
最近看HashMap源码,遇到了这样一段代码: static final int hash(Object key) { int h; return (key == null) ? 0 : (h = k ...
- cannot locate symbol "atof" referenced by错误分析
ndk从r8升级到r10后, 使用eclipse编译出来的so库报错了,加载库的时候报错cannot locate symbol "atof" referenced by 原因:A ...
- 需求收集实例三之 FM
暂且叫这个项目叫FM.FM项目采用敏捷模式,需求的表现形式是Story. 此项目需求收集过程如下: 亮点:在公司第一次实践敏捷.用Story 而非 需求说明文档呈现需求. 败笔:没有处理好Story ...
- poj1751最小生成树
The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has a very poor system of p ...
- Java IO最详解
初学java,一直搞不懂java里面的io关系,在网上找了很多大多都是给个结构图草草描述也看的不是很懂.而且没有结合到java7 的最新技术,所以自己来整理一下,有错的话请指正,也希望大家提出宝贵意见 ...