简易电影界面

最新推荐文章于 2024-06-13 10:09:50 发布

White@Plum

最新推荐文章于 2024-06-13 10:09:50 发布

阅读量1.6k

点赞数 6

分类专栏：前端基础文章标签： css html

本文链接：https://blog.csdn.net/White100/article/details/105969553

版权

前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这只是一个简易的电影界面，但是也是我用我目前可以使用的方法做出来的，前前后后算下来，做了整整三天，花了很多时间去修改，但是还是没有达到我想要的效果，跟上次做的登录界面是一起的。

求指点！

代码如下：

1、结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>电影界面</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
	</head>
	<body>
		<div class="all">
			<!-- header开始 -->
			<div class="header width clearfix">
				<a href="#" class="logo"></a>
				<a href="#" class="menu"></a>
				<form action="#">
					<input type="text">
					<button></button>
				</form>
				<a href="#" class="head"></a>
				<a href="#" class="text">Welcome John</a>
			</div>
			<!-- header结束 -->
			<!-- content开始 -->
			<div class="content width clearfix">
				<!-- 第一行第一个开始 -->
				<div class="box11">
					<img class="img1" src="img/content/pic1.jpg" alt="girl">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Movies</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第一行第一个结束 -->
				
				<!-- 第一行第二个开始 -->
				<div class="box12">
					<img class="img1" src="img/content/pic2.jpg" alt="male">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Movies</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第一行第二个结束 -->
				
				<!-- 第一行第三个开始 -->
				<div class="box13">
					<img class="img1" src="img/content/pic3.jpg" alt="female">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Animations</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第一行第三个结束 -->
				
				<!-- 第一行第四个开始 -->
				<div class="box14">
					<img class="img1" src="img/content/pic4.jpg" alt="horse">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">3D Animations</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第一行第四个结束 -->
				
				<!-- 第二行第一个开始 -->
				<div class="box21">
					<img class="img1" src="img/content/pic4.jpg" alt="horse">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Kids movies</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第二行第一个结束 -->
				
				<!-- 第二行第二个开始 -->
				<div class="box22">
					<img class="img1" src="img/content/pic3.jpg" alt="female">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Movies</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第二行第二个结束 -->
				
				<!-- 第二行第三个开始 -->
				<div class="box23">
					<img class="img1" src="img/content/pic1.jpg" alt="girl">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Animations</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第二行第三个结束 -->
				
				<!-- 第二行第四个开始 -->
				<div class="box24">
					<img class="img1" src="img/content/pic2.jpg" alt="male">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Movies</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第二行第四个结束 -->
				
				<!-- 第三行第一个开始 -->
				<div class="box31">
					<img class="img1" src="img/content/pic4.jpg" alt="horse">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Kids movies</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第三行第一个结束 -->
				
				<!-- 第三行第二个开始 -->
				<div class="box32">
					<img class="img1" src="img/content/pic3.jpg" alt="female">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Movies</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第三行第二个结束 -->
				
				<!-- 第三行第三个开始 -->
				<div class="box33">
					<img class="img1" src="img/content/pic4.jpg" alt="horse">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Kids movies</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第三行第三个结束 -->
				
				<!-- 第三行第四个开始 -->
				<div class="box34">
					<img class="img1" src="img/content/pic3.jpg" alt="female">
					<ul>
						<li>
							<a class="h1" href="#">Animation films</a>
						</li>
						<li class="li1">
							<a class="h2" href="#">Movies</a>
						</li>
						<li class="h3">Lorem Ipsum is simply dummy text of the printing & typesetting industry. </li>
					</ul>
					<img class="img2" src="img/content/star1.jpg" alt="star">
					<a class="a1" href="#"></a>
				</div>
				<!-- 第三行第四个结束 -->
			</div>
			<!-- content结束 -->
			
			<!-- footer开始 -->
			<div class="footer">
				<ul>
					<li>Page Loading</li>
				</ul>
			</div>
			<!-- footer结束 -->
		</div>
	</body>
</html>

2、清除浏览器默认样式（还是之前那个，哈哈哈）

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3、页面样式

/* 设置主题背景 */
body{
	background-color: black;
}
/* 全部内容box */
.all{
	width: 1280px;
	height: 1750px;
	margin: 0 auto;
	background: url(../img/header/bg.gif) no-repeat;
	background-color: #f0efee;
}
/* 内容宽度 */
.width{
	width: 1024px;
	margin: 0 auto;
}
/* 解决高度塌陷和父子元素外边距问题 */
.clearfix:before,
.clearfix:after{
	content:"";
	display:table;
	clear:both;
}
/*兼容IE浏览器*/
.clearfix{
   zoom:1;
}
/* 所有超链接共同点 */
.content a{
	text-decoration: none;
}
.content a:hover{
	color: red;
	text-decoration: underline;
}

/* 设置标题 */
.header{
	height: 97px;
	margin: 0px auto;
	margin-top: 100px;
	/* 辅助设计 */
	/* background-color: #bfa; */
}
/* logo图标 */
.logo{
	float: left;
	width: 162px;
	height: 59px;
	background: url(../img/header/logo.png);
	margin: 26px 0px 15px 14px;
}
/* 三杠菜单 */
.header .menu{
	float: left;
	width: 48px;
	height: 34px;
	background: url(../img/header/menu.gif) no-repeat;
	margin: 37px 0px 28px 74px;
}
/* 表单输入框 */
.header input{
	float: left;
	width: 380px;
	height: 32px;
	background: url(../img/header/input.gif) no-repeat 0px 1px;
	margin: 37px 0px 28px 74px;
	padding-right: 40px;
}
/* 表单按钮 */
.header button{
	float: left;
	width: 27px;
	height: 32px;
	background: url(../img/header/search.png) no-repeat;
	border: none;
	padding-right: 34px;
	position: relative;
	left: -40px;
	top: 40px;
	cursor: pointer;
}
/* 头像 */
.header .head{
	float: right;
	width: 38px;
	height: 38px;
	border: none;
	background: url(../img/header/head.png) no-repeat;
	margin: 34px 140px 26px 0px;
}
/* 文字 */
.header .text{
	float: right;
	color: #8c8c8c;
	font: 16px Tahoma;
	text-decoration: none;
	position: relative;
	left: -27px;
	top: -55px;
}
/* 文字移入效果 */
.header .text:hover{
	color: red;
	text-decoration: underline;
}

/* 设置内容 */
.content div{
	float: left;
	margin-right: 10px;
}
/* 第一行文字 */
.content .h1{
	color: #717171;
	font: 18px Tahoma;
	margin: 0px 0px 8px 19px;
}
/* 第二行文字 */
.content .li1{
	margin: 5px 0px 20px 38px;
	list-style: url(../img/content/map.png);
}
.content .h2{
	color: #acaaaa;
	font: 14px Tahoma;
	margin-bottom: 20px;
}
/* 第三段文字 */
.content .h3{
	color: #acaaaa;
	font: 13px Tahoma;
	padding-right: 20px;
	margin: 0px 0px 19px 24px;
}
/* 设置底部星星 */
.content .img2{
	border-top: 1px solid #e9e9e9;
	margin-left: 3px;
}
/* 设置fb按钮效果 */
.content .a1{
	float: right;
	width: 24px;
	height: 21px;
	background: url(../img/content/f.jpg) no-repeat;
	position: relative;
	left: -31px;
	top: -35px;
}
/* 第一行第一个 */
.content .box11{
	width: 246px;
	height: 350px;
	background: url(../img/content/bg1.png);
	margin-top: 17px;
}
.box11 .img1{
	padding-left: 2px;
	margin-bottom: 17px;
}
/* 第一行第二个 */
.content .box12{
	width: 246px;
	height: 440px;
	background: url(../img/content/bg2.png) no-repeat;
	margin-top: 23px;
	padding: 0px;
}
.box12 .img1{
	padding-left: 3px;
	margin-top: -6px;
	margin-bottom: 17px;
}
/* 第一行第三个 */
.content .box13{
	width: 246px;
	height: 350px;
	background: url(../img/content/bg3.png) no-repeat;
	margin-top: 23px;
	padding: 0px;
}
.box13 .img1{
	padding-left: 3px;
	margin-top: -6px;
	margin-bottom: 17px;
}
/* 第一行第四个 */
.content .box14{
	float: right;
	width: 246px;
	height: 510px;
	background: url(../img/content/bg4.png) no-repeat;
	margin-top: 23px;
	padding: 0px;
}
.box14 .img1{
	padding-left: 3px;
	margin-top: -6px;
	margin-bottom: 17px;
}
/* 第二行第一个 */
.content .box21{
	width: 246px;
	height: 510px;
	background: url(../img/content/bg4.png) no-repeat;
	margin-top: 23px;
	padding: 0px;
	position: relative;
	left: -512px;
	top: 17px;
}
.box21 .img1{
	padding-left: 3px;
	margin-top: -13px;
	margin-bottom: 17px;
}
/* 第二行第二个 */
.content .box22{
	
	width: 246px;
	height: 350px;
	background: url(../img/content/bg3.png) no-repeat;
	margin-top: 23px;
	padding: 0px;
	position: relative;
	left: -512px;
	top: -53px;
}
.box22 .img1{
	padding-left: 3px;
	margin-top: -13px;
	margin-bottom: 17px;
}
/* 第二行第三个 */
.content .box23{
	width: 246px;
	height: 350px;
	background: url(../img/content/bg1.png);
	margin-top: 17px;
	position: relative;
	left: 512px;
	top: -519px;
}
.box23 .img1{
	padding-left: 2px;
	margin-bottom: 17px;
}
/* 第二行第四个 */
.content .box24{
	float: right;
	width: 246px;
	height: 440px;
	background: url(../img/content/bg2.png) no-repeat;
	margin-top: 23px;
	padding: 0px;
	position: relative;
	top: -361px;
}
.box24 .img1{
	padding-left: 3px;
	margin-top: -6px;
	margin-bottom: 17px;
}
/* 第三行第一个 */
.content .box31{
	width: 246px;
	height: 510px;
	background: url(../img/content/bg4.png) no-repeat;
	margin-top: 23px;
	padding: 0px;
	position: relative;
	left: -256px;
	top: 29px;
}
.box31 .img1{
	padding-left: 3px;
	margin-top: -13px;
	margin-bottom: 17px;
}
/* 第三行第二个 */
.content .box32{
	
	width: 246px;
	height: 350px;
	background: url(../img/content/bg3.png) no-repeat;
	margin-top: 23px;
	padding: 0px;
	position: relative;
	left: -256px;
	top: -39px;
}
.box32 .img1{
	padding-left: 3px;
	margin-top: -13px;
	margin-bottom: 17px;
}
/* 第三行第三个 */
.content .box33{
	width: 246px;
	height: 510px;
	background: url(../img/content/bg4.png) no-repeat;
	margin-top: 23px;
	padding: 0px;
	position: relative;
	top: -503px;
}
.box33 .img1{
	padding-left: 3px;
	margin-top: -13px;
	margin-bottom: 17px;
}
/* 第三行第四个 */
.content .box34{
	
	width: 246px;
	height: 350px;
	background: url(../img/content/bg3.png) no-repeat;
	margin-top: 23px;
	padding: 0px;
	position: relative;
	top: -345px;
}
.box34 .img1{
	padding-left: 3px;
	margin-top: -13px;
	margin-bottom: 17px;
}
/* 设置footer */
.footer li{
	float: left;
	width: 120px;
	height: 26px;
	list-style: url(../img/footer/round.png);
	color: #717171;
	font: 18px Tahoma;
	position: absolute;
	left: 592px;
	top: 1740px;
}

效果图：
在这里插入图片描述

做完之后，感觉很繁琐，但是有不知道从哪里简化不会影响效果，尴尬！
以上内容纯属参考！
图片链接：
链接：https://pan.baidu.com/s/1pzU1GPdepwldpbcvIZ0dPw
提取码：1q9c

White@Plum

关注

6
点赞
踩
41

收藏

觉得还不错? 一键收藏
5
评论
简易电影界面

这只是一个简易的电影界面，但是也是我用我目前可以使用的方法做出来的，前前后后算下来，做了整整三天，花了很多时间去修改，但是还是没有达到我想要的效果，跟上次做的登录界面是一起的。求指点！代码如下：1、结构<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title&g...
复制链接

扫一扫