search

博客列表 >仿照一个网站首页-----2018年3月30日

仿照一个网站首页-----2018年3月30日

Nic的博客
Nic的博客原创
2018年03月30日 21:24:33508浏览

网站首页代码，主要实现页面的框架和子块：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 导入重置样式表 -->
	<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">
	<title>首页</title>
</head>
<body>
	<!-- 公共头部 -->
	<div class="header">
		<div class="tape">
			<div class="info">
				<p class="left">欢迎访问某某安防消防工程有限公司~</p>
				<p class="right">咨询电话：020-22043297</p>
			</div>
		</div>

		<div class="info">
			<div class="logo"><img src="images/logo.png"></div>
			<div class="search">
				<input type="text" name="name" placeholder="关键字">
				<button>搜索</button>
			</div>
		</div>

		<!-- 导航 -->
		<div class="menu">
			<div class="info">
				<ul>
					<li><a href="">网站首页</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">新闻动态</a></li>
					<li><a href="">公司产品</a></li>
					<li><a href="">最新案例</a></li>
					<li><a href="">品牌加盟</a></li>
					<li><a href="">客户服务</a></li>
					<li><a href="">人才招聘</a></li>
				</ul>
			</div>
		</div>
	</div> 

	<!-- 首页Banner图 -->
	<div class="banner">
		<img src="images/banner.jpg" alt="图片">
		<div class="line"></div>
	</div>

	<!-- 产品列表 -->
	<div class="product">
		<!-- 标题部分 -->
		<div class="title">
			<h2>产品<img src="images/proicon.png" alt="">中心</h2>
			<p>局域网远程、外网远程、手机远程、让监控 无处不在</p>
		</div>

		<!-- 产品列表 -->
		<ul>
			<li>
				<a href=""><img src="images/product.jpg"></a>
				<a href="">产品应用案例</a>
			</li>
			<li>
				<a href=""><img src="images/product.jpg"></a>
				<a href="">产品应用案例</a>
			</li><li>
				<a href=""><img src="images/product.jpg"></a>
				<a href="">产品应用案例</a>
			</li><li>
				<a href=""><img src="images/product.jpg"></a>
				<a href="">产品应用案例</a>
			</li>

			<br>

			<li>
				<a href=""><img src="images/product.jpg"></a>
				<a href="">产品应用案例</a>
			</li>
			<li>
				<a href=""><img src="images/product.jpg"></a>
				<a href="">产品应用案例</a>
			</li><li>
				<a href=""><img src="images/product.jpg"></a>
				<a href="">产品应用案例</a>
			</li><li>
				<a href=""><img src="images/product.jpg"></a>
				<a href="">产品应用案例</a>
			</li>
			
		</ul>
	</div>

	<!-- 广告 -->
	<div class="ads-img"></div>

	<!-- 我们是做什么的 -->
	<div class="make">
		<img src="images/make.png">
		<div class="refer">
			<p>企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p>

			<button>了解更多</button>
		</div>
	</div>

<hr color="#efefef" size="1">

	<!-- 新闻列表 -->
	<div class="news">
		<div class="left">
			<img src="images/news.jpg" alt="">
		</div>

		<div class="right">
			<ul>
				<li>
					<span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<div class="hehe">本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</div>
				</li></ul>
				<div class="gg"><ul><li><span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<div class="hehe">本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</div></li>
				<li><span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<div class="hehe">本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</div></li>
				<li><span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第八十届广州商</a>
					<div class="hehe">本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</div></li></ul></div>
			
		</div>
	</div>


	<!-- 公共底部 -->
	<div class="footer">
		<div class="top">
			<ul>
				<li><a href="">阿里云</a></li>
				<li><a href="">支付宝</a></li>
				<li><a href="">腾讯QQ</a></li>
				<li><a href="">百度搜索</a></li>
				<li><a href="">PHP中文网</a></li>
				<li><a href="">阿里云</a></li>
				<li><a href="">支付宝</a></li>
				<li><a href="">腾讯QQ</a></li>
				<li><a href="">百度搜索</a></li>
				<li><a href="">PHP中文网</a></li>
			</ul>
		</div>

		<div class="bottom">
			<p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p>
		</div>
	</div>
</body>
</html>

运行实例 »

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

index.css代码是对首页加一些特有的样式：

实例

/*首页专用的css样式表*/
.banner {
  /*border:1px solid red;*/
}

.banner img {
	width: 100%;
	height: 452px;
	vertical-align: top;
}
.banner .line {
	height: 30px;
	background-color: #696969;
	opacity: 0.4;
	margin-top: -30px;
}

/*产品列表*/
.product {
	width: 1140px;
	margin: auto;

	margin-top: 30px;
	margin-bottom: 30px;

	overflow: hidden;
}

.product .title {
	text-align: center;
	background-image: url(../images/title_bg.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}

.product .title img {
	padding: 0 5px;
}

.product li {
	width: 260px;
	height: 282px;
	text-align: center;
	float: left;
	margin: 10px;
}
.product li img {
	width: 260px;
	height: 197px;
	margin-bottom: 10px;
}
.product li img:hover {
	opacity: 0.8;
}

/*广告图片*/
.ads-img {
	width: 100%;
	height: 412px;
	background-image: url(../images/ads.jpg);
	background-repeat: no-repeat;
	margin-bottom: 50px;
}

/*我们做什么*/
.make {
	width: 1140px;
	margin: auto;
	margin-bottom: 50px;
}

.make img {
	width: 286px;
	height: 177px;
	float:left;
	margin-right: 50px;

}

.make .refer p {
	line-height: 2em;
}

.make .refer button {
	width: 130px;
	height: 34px;
	border: none;
	background-color: gray;
	color: #fff;
}
.make .refer button:hover {
	background-color: coral;
	cursor: pointer;
}

/*新闻列表*/
.news {
	width: 1140px;
	margin: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	overflow: hidden;
}

.news .left {
	float:left;
}

.news .left img {
	width: 500px;
	height: 315px;
	margin-top: 18px;
}

.news .right {
	overflow: hidden;
}

.news .right ul {
	margin-left: 50px;
}
.news .right ul li {
	height: 80px;
	border-bottom: 1px dashed lightgray;

}

.news .right li span {
	float:left;
	width: 60px;
	height: 58px;
	background-color: black;
	margin-left: 25px;



}

.news .right li span * {
	color: #fff;
	text-align: center;

}
.news .right li a{
	margin-left: 50px;
	margin-top: 30px;
	
}
.news .right .hehe{
	margin-left: 135px;


}
.news .right .gg .hehe{
	margin-left: 135px;


}
.news .right .gg ul li{
	margin-top: 20px;
}

运行实例 »

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


效果预览图：

G1(G[)}84OC}[BT(}3JEJ{F.png

8VL[J3{92SFIG[CZ54A24%D.png

VP6RLI0B%{D{DJOC(T)54%O.png

HQ_]ZKGG_TUFRWD52PXU[JE.png


总结：网站各种页面之中有些地方是可以公用的，其中首页是很重要的。首页的框架必须有一个细致清楚的架构，要用到多少子块，父级块等。首页有3个样式表，有与其他页面公用的，有清除标签固有属性的，也有自己特有的样式表。对标签进行一定要不能错，不然样式表就无法调用，尽量避免两个或多个相同标签在附近，这样对标签的样式选择会容易出现错误。

上一条：3月27下一条：20180330作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多