【小练习06】HTML+CSS--电影公告

最新推荐文章于 2024-04-13 15:54:34 发布

Java仗剑走天涯

最新推荐文章于 2024-04-13 15:54:34 发布

阅读量1.4k

点赞数 1

分类专栏：前端基础HTML5/CSS3 文章标签： html css 练习

本文链接：https://blog.csdn.net/baidu_37107022/article/details/71747637

版权

前端基础HTML5/CSS3 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

要求实现如下效果图：

这里写图片描述

代码演示

<!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;
			}
			.clearfix:after{
				content: '';
				display: block;
				clear: both;
			}
			
			
			section{
				width: 310px;
			}
			section h3{
				height: 28px;
				background: url(images/head_bg.gif);
				font: bold 12px/28px '宋体';
				color: #4c5354;
				padding-left: 38px;
			}
			.imgWrap{
				height: 131px;
				margin: 14px 0;
			}
			.imgLink{
				float: left;
			}
			.imgWrap img{
				padding: 2px;
				margin-right: 12px;
				border: 1px solid #c8c4d3;
			}
			.imgWrap div{
				float: left;
				width: 176px;
			}
			.imgWrap div h4{
				height: 27px;
				line-height: 27px;
			}
			.imgWrap div h4 a{
				font-size: 12px;
				color: #333;
			}
			.imgWrap div span,.imgWrap div p{
				font: 12px/20px "宋体";
				display: block;
				color: #666;
			}
			
			section li{
				height: 22px;
				font: 12px/22px "宋体";
				background: url(images/ico_01.gif) no-repeat 17px 9px;
				padding: 0 18px 0 31px;
			}
			section li a{
				color: #333;
			}
			section li span{
				color: #888;
				float: right;
			}
		</style>
	</head>
	<body>
		<!--
			划分结构
				1、看边框
				2、看距离
				3、看颜色块
				4、看背景图片
				
			结构书写的顺序：从上到下，从左往右
			
			h1			首先，一个页面中只能有一个h1标签，整个页面中找到大标题。如果没有的话，可以选择给logo
			
			浮动
				1、如果想让两个元素在一行中显示，就用浮动
				2、用完了必需要清，给父级加清除浮动
			
			一行中所有的元素都浮动了，如果换行的话，那就是父级的宽度不够了
		-->
		
		<section>
			<h3>明星荐片</h3>
			<div class="imgWrap clearfix">
				<a href="#" class="imgLink"><img src="images/img_01.jpg" alt="" /></a>
				<div>
					<h4><a href="#">让子弹飞一会</a></h4>
					<span>导演：姜文</span>
					<span>主演：姜文 姜文 姜文</span>
					<p>点评：我最近喜欢的要算我最近喜欢的要算我最近喜欢的要</p>
				</div>
			</div>
			<ul>
				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
			</ul>
		</section>
	</body>
</html>

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