【小练习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 万个.这是一个巨大的 ...
随机推荐
- Docker aufs存储驱动layer、diff、mnt目录的区别
Docker基础信息 首先,先查询Docker使用的后端存储.使用命令docker info,主要关注Storage Driver相关的部分. $ docker info ... Server Ver ...
- 第一章 自定义MVC框架
第一章 自定义MVC框架1.1 MVC模式设计 组成:Model:模型,用于数据和业务的处理 View :视图,用于数据的显示 Controller:控制器 ...
- 安装ruby compass失败
安装compass失败 ERROR: Could not ), here is why: Unable to download data from https://rubygems.org/ - SS ...
- less的基本操作
less的四大特性及示例 1.特性一(变量) less写法 @color:#ffffff: body{background-color:@color:} 生成的css body{background- ...
- Python实现二叉树的四种遍历
对于一个没学过数据结构这门课程的编程菜鸟来说,自己能理解数据结构中的相关概念,但是自己动手通过Python,C++来实现它们却总感觉有些吃力.递归,指针,类这些知识点感觉自己应用的不够灵活,这是自己以 ...
- React-Native 之 redux 与 react-redux
前言 本文 有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关,如文中内 ...
- 简谈-Python一些常用的爬虫技巧
第一种:基本的网页抓取 get方法 import urllib2url = "链接response = urllib2.urlopen(url)print response.read() p ...
- [内存管理]linux X86_64处理器的内存布局图
linux X86 64位内存布局图
- 关于Content-Type的问题
今天我在编写html表单提交到 php时,出现了一个很奇怪的现象. 为了让php文件的字符编码与html一致,我在php文件加了一句 header("Content-Type:html/te ...
- Java基础之equals方法和"= ="的区别
==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同,要比较两个基本类型的数据或两个引用变量是否相等,只能用==操作符. 如果一个变量指向的数据是对象类型的 ...