【小练习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 万个.这是一个巨大的 ...
随机推荐
- Java异常分类及处理
1.Throwable是所有异常的根(java.lang.Throwable)2.Error是错误(java.lang.Error) 当程序发生不可控的错误时,程序会报错,Error及其子类的对象不应 ...
- 细谈UITabBarController
1.简述 UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,UITabB ...
- iOS WebView你需要的问题答案
一.UIWebView 可以加载和显示某个URL的网页,也可以显示基于HTML的本地网页或部分网页: a. 加载 URL WebView = [[UIWebView alloc] initWithFr ...
- Dora.Interception: 一个为.NET Core度身定制的AOP框架
多年从事框架设计开发使我有了一种强迫症,那就是见不得一个应用里频繁地出现重复的代码.之前经常Review别人的代码,一看到这样的程序,我就会想如何将这些重复的代码写在一个地方,然后采用“注入”的方式将 ...
- 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
- 谈谈一些有趣的CSS题目（十七）-- 不可思议的颜色混合模式 mix-blend-mode
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- W10上面DOSBOX安装
第一步:下载好MASM.exe.debug.exe.link.exe.将其放在根目录下面.我们以后自己编写的汇编代码也是在此目录下.如图: 第二步:我这里的文件夹名称是Assembly那么这个也就是待 ...
- hadoop配置文件的作用
core-site.xml <property> //指定hdfs的主端口 namenode要放在哪台机器上 <name>fs.defaultFS</name> & ...
- vue视频学习笔记01
video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...
- java之反射
初学反射,也是第二次写博客了把,就简单记录一下. Reflection(反射)是被视为动态语言的关键,反射机制允许程序在执行期借助于Reflection API取得任何类的内部信息,并能直接操作任意对 ...