网站首页2018年3月29日作业 - 作业

Home > List of blog posts > 网站首页2018年3月29日作业

Blogger Information

Blog 19

fans 2

comment 0

visits 11937

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<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/common.css">
	<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
	<!--头部图片去-->
	<div class="headerpic">
		<!--头部部分-->
		<div class="header">
			<div class="container">
				<div class="logo">
					<h1><a href="#">Imagination</a></h1>
				</div>
			</div>
			<!--导航部分-->
			<div class="nav">
				<ul>
					<li class="active"><a href="">Homepage</a></li>
					<li class="active"><a href="">Left Sidebar</a></li>
					<li class="active"><a href="">Right Sidebar</a></li>
					<li class="active"><a href="">No Sidebar</a></li>
				</ul>
			</div>
		</div>
		<!--banner部分-->
		<div class="banner">
			<div class="container"></div>
		</div>
	</div>   
	<!--主体区-->
	<div class="main">
		<div class="container">
			<h2>Maecenas luctus lectus</h2>
			<span class="byline">Posuere eleifend odio quisque semper mattis</span>
			<div class="row">
				<div class="right">
					<a href="#" class="image full"><img src="images/pics05.jpg" alt=""></a>
					<p>This is <strong>Imagination</strong>, a responsive HTML5 site template freebie. Released for free</br>under the Creative Commons Attribution</a> license, so use it for whatever (personal or</br>commercial) – just give us credit! Check out more of our stuff at or follow us on.</p>
				</div>
				<div class="left">
					<a href="#" class="image full"><img src="images/pics06.jpg" alt=""></a>
					<p>Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum.</br>Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique</br>senectus aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi purus ac</br>magna. Pellentesque habitant morbi</p>
				</div>	
			</div>
			<div class="diver"></div>
			<a href="#" class="button">View Full Details</a>
		</div>
	</div>
	<!--特别区-->
	<div class="feature">
		<div class="container">
			<section>
					<header>
						<h2>Fusce ultrices fringilla metus</h2>
						<span class="byline">Posuere eleifend odio quisque semper mattis</span>
					</header>
				</section>
			<div class="row">
				<section class="sec">
						<a href="#" class="image full"><img src="images/pics01.jpg" alt=""></a>
						<p>Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.</p>
						<p><a href="#" class="button">View Full Details</a></p>
					</section>
					<section class="sec">
						<a href="#" class="image full"><img src="images/pics03.jpg" alt=""></a>
						<p>Pellentesque tristique ante ut risus. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.</p>
						<p><a href="#" class="button">View Full Details</a></p>
					</section>
					<section class="sec">
						<a href="#" class="image full"><img src="images/pics04.jpg" alt=""></a>
						<p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.</p>
						<p><a href="#" class="button">View Full Details</a></p>
					</section>
			</div>
		</div>
	</div>
	<!--底部区-->
	<div class="footer">
		<div class="container">
			<div class="row">
				<section class="sec">
						<header>
							<h2>Nulla eleifend</h2>
						</header>
						<ul class="default">
							<li><a href="#">Pellentesque quis elit non gravida blandit.</a></li>
							<li><a href="#">Lorem ipsum dolor sit consectetuer adipiscing elit.</a></li>
							<li><a href="#">Phasellus nec erat sit nibh pellentesque congue.</a></li>
							<li><a href="#">Cras vitae metus aliquam pellentesque pharetra.</a></li>
							<li><a href="#">Duis non ante in metus commodo euismod lobortis.</a></li>
						</ul>
					</section>
					<section class="sec">
						<header>
							<h2>Etiam posuere</h2>
						</header>
						<ul class="default">
							<li><a href="#">Pellentesque quis elit non gravida blandit.</a></li>
							<li><a href="#">Lorem ipsum dolor sit consectetuer adipiscing elit.</a></li>
							<li><a href="#">Phasellus nec erat sit nibh pellentesque congue.</a></li>
							<li><a href="#">Cras vitae metus aliquam pellentesque pharetra.</a></li>
							<li><a href="#">Duis non ante in metus commodo euismod lobortis.</a></li>
						</ul>
					</section>
					<section class="sec">
						<header>
							<h2>Mauris vulputate</h2>
						</header>
						<ul class="default">
							<li><a href="#">Pellentesque quis elit non gravida blandit.</a></li>
							<li><a href="#">Lorem ipsum dolor sit consectetuer adipiscing elit.</a></li>
							<li><a href="#">Phasellus nec erat sit nibh pellentesque congue.</a></li>
							<li><a href="#">Cras vitae metus aliquam pellentesque pharetra.</a></li>
							<li><a href="#">Duis non ante in metus commodo euismod lobortis.</a></li>
						</ul>
					</section>
			</div>
		</div>
	</div>
	<!--copyright-->
	<div class="copyright">
		<div class="container">
			Copyright © 2018.Company name All rights reserved.More Templates
		</div>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

公共css代码

实例

.headerpic{
	padding:0px;
	width: 100%;
	height:680px;
	background: #333;
	background-image: url(../images/banner.jpg);
	background-size: cover;
}
.header{
	background: #FFF;
}

.header .container
		{
			width: 70%;
			height: 50%;
			padding-top: 88px;
			margin: 0px auto;
		}

/* Logo */
	.logo
	{
		position: absolute;
		top: 21px;
	}
		.logo a
		{
			color: black;
			display: block;
			text-decoration: none;
			text-transform: lowercase;
			font-weight: 600;
		}
	.logo :hover{
		color: red;
	}


/* Nav*/

	.nav
	{
		position: absolute;
		right: 20%;
		top:21px;
	}
		.nav ul li
		{
			float: left;
		}
		
			.nav > ul > li:last-child
			{
				padding-right: 0;
			}

			.nav  ul  li  a,
			.nav  ul  li  span
			{
				display: block;
				margin-left: 20px;
				padding: 10px 15px;
				text-decoration: none;
				text-transform: uppercase;
				font-size: 16px;
				outline: 0;
				color: #252525;
			}

			.nav li.active a:hover
			{
				background: #c61732;
				border-radius: 5px;
				color: #FFF;
			}

			.nav > ul > li > ul
			{
				display: none;
			}
	
/* Banner*/
	.banner
	{
		text-align: center;
		color: #fff;
	}
	
	.banner .fa
	{
	}

		#banner .fa:before
		{
			padding-bottom: 0.50em;
			font-size: 8em;
		}

	.banner .button
	{
	}
	
		.banner .button:hover
		{
		}

运行实例 »

点击 "运行实例" 按钮查看在线实例

首页css代码

实例

.extra
	{
		padding: 98px 0px;
	}
	
.feature
	{
		padding: 200px 0px;
		background: url(../images/featured-wrapper-bg.jpg) repeat;
		text-align: center;
		margin-top: 70px;
		padding-top: 30px;
		color: #FFF;
	}
	
.footer
	{
		padding: 98px 0px;
	}
.container {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 50px;
    width: 100%;

}
.container h2{
	font-size: 39px;
	font-weight: bold;
}
.container span{
	display: block;
	margin: 7px 0 0 0;
	padding: 7px 0 7px 0 ;
	text-transform: uppercase;
	font-size: 19px;
	color: lightgray;
}
.main
	{
		background: #fff;
	}

.main.container{
	width: 1250px;
	height: 654px;
}
		
.main .left
		{
			text-align: left;
		}
		
.main .right
		{
			text-align: right;
		}
.button{
			display: inline-block;
			margin-top: 7px;
			padding: 14px 21px;
			background: #c61732;
			border-radius: 6px;
			text-decoration: none;
			text-transform: uppercase;
			font-size: 25px;
			color: white;
			cursor: pointer;
		}

.button:hover{
				color: white;
				background: #ad142c;
				text-decoration:underline;
			}
		
.main .button
			{
				display: inline-block;
				margin-top: 56px;
			}
		
.diver
		{
			vertical-align: baseline;
			width: 1300px;
			margin: 56px auto;
			border-bottom: 1px solid rgba(0,0,0,.2);
		}

.row {
	margin: 0px auto;
    width: 1300px;
    height: 320px;

}

.right p{
	font-size: 14px;
}

.left p{
	font-size: 14px;
}

.right{
	float: left;
	width: 625px;
    height: 296px;
    margin-top: 20px; 
    margin-right: 50px;
}

.left
{
	float: left;
	width: 625px;
    height: 296px;
    margin-top: 20px;
}
.row > section{
	/*margin-bottom: 0px;*/
	padding-top: 40px;
	padding-bottom:80px;
}

.row > .sec > p{
	padding: 0px;
	margin-top: 20px;
	line-height:30px;
	font-size: 14px;
	/*width: 367px;*/
}

.sec{
	width: 374px;
	font-size: 15px;
	float: left;
	margin-right: 50px;
}

.footer
	{
		padding: 98px 0px;
		background: url(../images/footer-content-wrapper-bg.jpg) repeat;
	}
	
	.footer header h2
	{
		text-transform: uppercase;
		font-weight: 600;
		font-size: 20px;
		color: #FFF;
		text-align: left;
		margin-bottom: 50px;
	}
	ul.default
		{
			text-align: left;
			list-style: none;
			margin: 0;
			padding: 0;
		}
		
	ul.default li
		{
			padding: 0.80em 0em;
			border-top: 1px solid;
			border-color: rgba(255,255,255,.2);
			font-size: 14px;
		}
			
	ul.default li:first-child
		{
			padding-top: 0em;
			border-top: none;
		}
			
	ul.default a
		{
			text-decoration: none;
			color: rgba(255,255,255,.6);
		}
	ul.default a:hover{
		text-decoration: underline;
	}

	.footer .container{
		margin:0px;
	}

	.footer .container .row .sec{
		padding-bottom:40px;

	}

	.copyright
	{
		padding: 3em 0em;
		text-align: center;
		background-color: black;
		color: rgba(255,255,255,.4);
	}
	.copyright .container{
		padding: 0;
		margin:0;
	}

运行实例 »

点击 "运行实例" 按钮查看在线实例

清楚样式css代码

实例

html {
	overflow-y: auto;
	overflow-x: hidden;
}

body, h1,h2,h3, ul,li,p {
	margin: 0;
	padding: 0;
	/*font-family: 'microsoft yehei', Verdana, Arial;*/
}

ul, li {
	list-style-type: none;
}

a:hover {
	text-decoration: none;
	/*color: #ff0000;*/
	color: #f00;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

首页效果图

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

day01作业

2018-03-16 13:57:54