3.28 实战 - 作业

Home > List of blog posts > 3.28 实战

Blogger Information

Blog 19

fans 0

comment 0

visits 10554

Special Recommendation

More>

Related recommendations

实例

<!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">欢迎访问xx安防消防有限公司~</p>
				<p class="right">咨询电话：010-12345678</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="">本公司参加第8000届广州厂商</a>
					<p>本公司参加第8000届广州厂商交易会本公司参加第8000届广州厂商交易会</p>
				</li>
				<li>
					<span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第8000届广州厂商</a>
					<p>本公司参加第8000届广州厂商交易会本公司参加第8000届广州厂商交易会</p>
				</li>
				<li>
					<span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第8000届广州厂商</a>
					<p>本公司参加第8000届广州厂商交易会本公司参加第8000届广州厂商交易会</p>
				</li>
				<li>
					<span><h1>25</h1><p>2010-1</p></span>
					<a href="">本公司参加第8000届广州厂商</a>
					<p>本公司参加第8000届广州厂商交易会本公司参加第8000届广州厂商交易会</p>
				</li>
			</ul>
		</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="">Google</a></li>
				<li><a href="">新浪</a></li>
			</ul>
		</div>
		<div class="bottom">
			<p>CopyRinght 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;
	margin-top: -30px;
	opacity: 0.4;
}
/*产品列表*/
.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;
}
/*li格式*/
.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 {
	margin-top: 30px;
	width: 130px;
	height: 34px;
	/*去边框*/
	border: none;
	/*背景，字体颜色*/
	background-color: gray;
	color: white;
}
/*鼠标移动到按钮交互*/
.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;
}
.news .right {
	overflow: hidden;
} 
.news .right ul {
	margin-left: 50px;
}
.news .right ul li {
	height: 80px;
}
.news .right li span {
	float: left;
	width: 60px;
	height: 58px;
	background-color: black;
	margin-right: 30px;
}
.news .right li span * {
	color: white;
	text-align: center;
}
.news .right li a:hover {
    color: coral;
}
.news .right li p {
	margin-top: 5px;
	font-size: 0.7em;
}
.news .right li {
	border-bottom: 1px dotted #efefef;
}

运行实例 »

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

common.css:

实例

/*公共样式表*/
/*公共头部的样式*/
.header {
	/*宽度*/
	width: 100%;
	/*高度*/
	height: 170px;
}

.header .tape {
	/*高度*/
	height: 28px;
	/*上边框*/
	border-top: 1px solid #f5f5f5;
	/*下边框*/
	border-bottom: 1px solid #f5f5f5;
	/*背景色*/
	background-color: #fbfbfb;
}

.info {
	/*宽度*/
	width: 1140px;
	/*居中*/
	margin: auto;
	/*清楚浮动 BFC：块级格式化上下文*/
	overflow: hidden;
}

.header .tape .info .left {
	/*左浮动*/
	float: left;
}
.header .tape .info .right {
	/*右浮动*/
	float: right;
}

.header .info .logo {
	width: 440px;
	height: 88px;
	/*左浮动*/
	float: left;
}
.header .info .search {
	/*右浮动*/
	float: right;
	height: 88px;
	/*右边距离*/
	margin-right: 100px;
	/*上边距离*/
	margin-top: 10px;
}
.header .info .search input {
    width: 200px;
    height: 26px;
    border: 2px solid coral;
    margin: 18px 0;
}
.header .info .search button {
	width: 40px;
	height: 33px;
	background-color: coral;
	/*边框干掉*/
	border: none;
	color: white;
	/*按键移动位置*/
	margin-left: -40px;
}

/*头部菜单*/
.header .menu {
	width: 100%;
	height: 50px;
	background-color: black;
}

.header .menu ul li {
	/*浮动 导航横起来*/
	float: left;
	/*设置行高居中*/
	line-height: 50px;
	/*中间间距*/
	padding: 0 40px;
}
.header .menu ul li a {
	/*字体大小*/
	font-size: 1.1em;
	/*文本颜色*/
	color: #fff;
}
/*鼠标指针移动到标签上变颜色*/
.header .menu ul li:hover {
	background-color: coral;
	/*鼠标小手*/
	cursor: pointer;
}
/*公共底部*/
.footer .top {
	width: 100%;
	height: 40px;
	background-color: #3e3e3e;
	margin: auto;
}
.footer .top ul {
	width: 1140px;
	margin: auto;
}
.footer .top li {
	float: left;
}
.footer .top li a {
	height: 100%;
	padding: 0 20px;
	color: #fff;
	text-align: center;
	line-height: 40px;
}
.footer .bottom {
	width: 100%;
	height: 92px;
	background-color: black;
	text-align: center;
}
.footer .bottom p {
	color: white;
	line-height: 92px;
}

运行实例 »

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

reset.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;
	/*文本基本颜色*/
	color: #505050;
}

p, li, a {
	/*字体大小*/
	font-size: 14px;
}

ul, li {
	/*列表基本样式干掉*/
	list-style-type: none;
}
/*链接，访问过的样子，鼠标单击的样子*/
a:link, a:visited, a:active {
	color: #505050;
	/*修饰*/
	text-decoration: 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

3.16作业

2018-03-18 20:38:58