【小练习06】HTML+CSS--教学大讲堂

最新推荐文章于 2022-12-12 21:56:57 发布
最新推荐文章于 2022-12-12 21:56:57 发布
阅读量852 收藏 2
点赞数
分类专栏： 前端基础HTML5/CSS3 文章标签： html css 练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_37107022/article/details/71747682
版权

要求实现如下效果图：

这里写图片描述

代码演示

<!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="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="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="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="images/img_03.jpg"/></a>
					<h4><a href="#">进水届枯城</a></h4>
					<p>讲师：<a href="#">张在</a></p>
					<p>类型：生活</p>
				</li>
				<li>
					<a href="#"><img src="images/img_03.jpg"/></a>
					<h4><a href="#">进水届枯城</a></h4>
					<p>讲师：<a href="#">张在</a></p>
					<p>类型：生活</p>
				</li>
				<li>
					<a href="#"><img src="images/img_03.jpg"/></a>
					<h4><a href="#">进水届枯城</a></h4>
					<p>讲师：<a href="#">张在</a></p>
					<p>类型：生活</p>
				</li>
				<li>
					<a href="#"><img src="images/img_03.jpg"/></a>
					<h4><a href="#">进水届枯城</a></h4>
					<p>讲师：<a href="#">张在</a></p>
					<p>类型：生活</p>
				</li>
				<li>
					<a href="#"><img src="images/img_03.jpg"/></a>
					<h4><a href="#">进水届枯城</a></h4>
					<p>讲师：<a href="#">张在</a></p>
					<p>类型：生活</p>
				</li>
				<li>
					<a href="#"><img src="images/img_03.jpg"/></a>
					<h4><a href="#">进水届枯城</a></h4>
					<p>讲师：<a href="#">张在</a></p>
					<p>类型：生活</p>
				</li>
			</ul>
		</section>
	</body>
</html>

源码地址：http://download.csdn.net/detail/baidu_37107022/9840940

Java仗剑走天涯
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html的一些小练习
08-16
html的一些小练习，javascript的一些小应用，
HTML小练习
littielucky的博客
12-09 862
HTML简历 HTML小练习 利用HBuilder写一份简单的简历表 主要练习HTML里表格的用法 如图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 我的简历 </title> </head> <body ...
HTML小练习(一)
屈帅波的技术博客
05-09 509
一 标签练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例1</title> </head> <body> <h1>腾讯科技高级web前端开发岗位</h1> <br> <h2>职位描述</h2> <p>负责重点项目的前端技术方案和架
＜HTML＞简单html小练习
Kuangqiu的博客
12-29 1216
js // function creatjs(){ // var name1=prompt("please input a num1"); // var fuhao=prompt("please input a fuhao"); // var name2=prompt("please input a num2"); // var n1 =parseFloat(name1); // var n2
小练习06HTML+CSS-电影公告
05-12
【标题】"小练习06HTML+CSS-电影公告"是一个关于使用HTML和CSS来创建一个电影公告样式的练习项目。这个练习旨在帮助学习者掌握基础的网页布局、文本处理、图像展示以及CSS样式设计技巧。 【HTML】是HyperText ...
HTML+CSS-练习作业-学成在线网站.zip
01-01
HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业...
诸多 - html+js+css - 小实例
07-02
# 50 Projects in 50 Days - HTML/CSS and JavaScript This is the main repository for all of the projects in the course. # 50 Projects in 50 Days - HTML/CSS and JavaScript This is the main repository ...
52个 - html+js+css - 小实例
07-02
# 50 Projects in 50 Days - HTML/CSS and JavaScript This is the main repository for all of the projects in the course. # 50 Projects in 50 Days - HTML/CSS and JavaScript This is the main repository ...
html+js+css-detection-m笔记
最新发布
07-24
html+js+css-detection-m笔记
HTML随手小练习
12-19
一些HTML的标签，做了一个小练习，上面用到如简单的表格表单标签等
HTML练习题
05-07
这是我自己整理出来的HTML练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
关于html 的一些小练习
weixin_34033624的博客
10-18 92
第1题 考察title标签<title>出现在<head>里面，表示页面的标题。直观上，我们可以在浏览器的标题栏（标签栏）中看见。B正确。第2题 考察的就是HTML的本质答案：D解析：首先HTML只依靠标签对儿表达语义，和是否缩进、换行没有任何关系；只要是标签有正确的嵌套关系，正确的父子关系，那么就是一个合法的HTML结构，不一定要缩进。百度的首页，...
HTML网页小练习
qq_44376244的博客
06-01 442
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为
HTML 项目小练习
星空椰
12-12 1217
【代码】HTML 项目小练习。
html---css小练习（1）
loringray的博客
04-04 865
预览效果图： 代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>homework1-1</title> <meta ...
Html 入门小练习
qq_39075467的博客
02-21 271
<!DOCTYPE html> <!-- docment type 文档声明--> <html> <head> <meta charset="utf-8"><!--char set--> <meta http-equiv="Content-Type" content="text/html;charse...
HTML小练习（课程表）
qiaoge66的博客
03-10 173
html小练习 课程表练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 表格： 用来展示数据 table 标签 tr 行 td 表格体单
HTML 基础学习- 小实例练习
hewenqing
02-05 729
这里学习用的IDE工具：HBuilder 什么是HBuilder？ HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值