【小练习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 万个.这是一个巨大的 ...
随机推荐
- html 选择器之属性选择器
属性选择器的主要作用个人的理解就是对带有指定属性的元素设置css样式. 使用css3的属性选择器,可以指定元素的某个属性,也可以指定某个属性和这个属性所对应的值. css3的属性选择器主要包括下面几种 ...
- IP设置
由于家里的IP地址与公司的不一样,每次都要修改很麻烦,所以自己只做了一个IP修改bat. 打开记事本,把一下代码复制到记事本里,保存成bat就OK了.在23行设置自己的IP地址就可以了. @echo ...
- netty——私有协议栈开发案例
netty--私有协议栈开发案例 摘要: 在学习李林峰老师的Netty权威指南中,觉得第十二章<私有协议栈开发>中的案例代码比较有代表性,讲的也不错,但是代码中个人认为有些简单的错误,个人 ...
- window系统下sbt的安装
最近进了一个新公司,用playframework,不用maven,用sbt,然后就来写一下自己的心酸sbt安装进程吧. 第一步: 安装java8,配置好环境变量,这些不用多说吧,之所以是要8版本,是因 ...
- 玩转spring boot——ajax跨域
前言 java语言在多数时,会作为一个后端语言,为前端的php,node.js等提供API接口.前端通过ajax请求去调用java的API服务.今天以node.js为例,介绍两种跨域方式:Cross ...
- druid抛出的异常------javax.management.InstanceAlreadyExistsException引发的一系列探索
最近项目中有个定时任务的需求,定时检查mysql数据与etcd数据的一致性,具体实现细节就不说了,今天要说的就是实现过程中遇到了druid抛出的异常,以及解决的过程 异常 异常详细信息 五月 05, ...
- [.NET] 《Effective C#》快速笔记 - C# 高效编程要点补充
<Effective C#>快速笔记 - C# 高效编程要点补充 目录 四十五.尽量减少装箱拆箱 四十六.为应用程序创建专门的异常类 四十七.使用强异常安全保证 四十八.尽量使用安全的代码 ...
- TPshop用户模块的数据库表关系
看到后台数据库一大坨表项,不熟悉的还真难以下手(如下). 下面讲讲用户模块(User)的数据库表之间的简单关系. 如果安装TPshop官方的学习工程,可以在下面链接进入用户界面: 手机版:http:/ ...
- Azure Event Bus 技术研究系列1-Event Hub入门篇
前两个系列研究了Azure IoT Hub和Azure Messaging.最近准备继续研究Azure Event Bus,即Azure的事件中心.首先, Azure Event Hub的官方介绍: ...
- CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...