任務01-03

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link href="css/index.css" target="_blank" rel="external nofollow"  type="text/css" rel="stylesheet"/>
		<title></title>
	</head>
	<body>
		<div class="main">
			<!-- 導覽列 -->
			<div class="nav">
				<img src="img/a.png" />
				<a href="###" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="nav_frist">首頁</a>
				<a href="###" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >招投标</a>
				<a href="###" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >機械加盟</a>
				<a href="###" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >行業資訊</a>
				<a href="###" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >關于我們</a>
			</div>
			<!-- 圖檔 -->
			<img src="img/k.png" />
			<!-- 招标資訊 -->
			<p class="wenzi"><b>最新招标</b></p>
			<div class="content">
				<!-- 第一個子產品 -->
				<div class="one">
					<img src="img/j.png" />
					<p class="one_font">科技出手，功力雙收</p>
					<p>将軍閉目彈整德，隻因眼前無敵手。
					筆落才氣沖星鬥，龍翔鳳霹勢難收。
					滿堂花醉三千客，一劍寒霜十四州。
					鼓角揭天嘉氣冷，風濤地動海山秋。
					将軍閉目彈籮筷，隻因眼前無敵手。
					筆落才氣沖星鬥，龍翔鳳嘉勢難收。
					滿堂花醉三千客，一劍寒霜十四州。
					鼓角揭天嘉氣冷，風濤地動海山秋。</p>
					<div class="detail">
						了解詳情>
					</div>
					<!-- 第二個子產品 -->
					<div class="two">
					<img src="img/g.png" />
					<p class="one_font">科技出手，功力雙收</p>
					<p>将軍閉目彈整德，隻因眼前無敵手。
					筆落才氣沖星鬥，龍翔鳳霹勢難收。
					滿堂花醉三千客，一劍寒霜十四州。
					鼓角揭天嘉氣冷，風濤地動海山秋。
					将軍閉目彈籮筷，隻因眼前無敵手。
					筆落才氣沖星鬥，龍翔鳳嘉勢難收。
					滿堂花醉三千客，一劍寒霜十四州。
					鼓角揭天嘉氣冷，風濤地動海山秋。</p>
					<div class="detail">
						了解詳情>
					</div>
					</div>
					<!-- 第三個子產品 -->
					<div class="one">
					<img src="img/f.png" />
					<p class="one_font">科技出手，功力雙收</p>
					<p>将軍閉目彈整德，隻因眼前無敵手。
					筆落才氣沖星鬥，龍翔鳳霹勢難收。
					滿堂花醉三千客，一劍寒霜十四州。
					鼓角揭天嘉氣冷，風濤地動海山秋。
					将軍閉目彈籮筷，隻因眼前無敵手。
					筆落才氣沖星鬥，龍翔鳳嘉勢難收。
					滿堂花醉三千客，一劍寒霜十四州。
					鼓角揭天嘉氣冷，風濤地動海山秋。</p>
					<div class="detail">
						了解詳情>
					</div>
					</div>
					<p class="wenzi"><b>招标資訊</b></p>
					<!-- 第二個大闆塊 -->
					<div class="content_two">
						<div class="two_one">
						<img src="img/i.png" />
						<p class="one_font">科技出手，功力雙收</p>
						<p>将軍閉目彈整德，隻因眼前無敵手。
						筆落才氣沖星鬥，龍翔鳳霹勢難收。
						滿堂花醉三千客，一劍寒霜十四州。
						鼓角揭天嘉氣冷，風濤地動海山秋。
						将軍閉目彈籮筷，隻因眼前無敵手。
						筆落才氣沖星鬥，龍翔鳳嘉勢難收。
						滿堂花醉三千客，一劍寒霜十四州。
						鼓角揭天嘉氣冷，風濤地動海山秋。</p>
					</div>
					<div class="two_two">
						<img src="img/h.png"/>
						<p class="one_font">科技出手，功力雙收</p>
						<p>将軍閉目彈整德，隻因眼前無敵手。
						筆落才氣沖星鬥，龍翔鳳霹勢難收。
						滿堂花醉三千客，一劍寒霜十四州。
						鼓角揭天嘉氣冷，風濤地動海山秋。
						将軍閉目彈籮筷，隻因眼前無敵手。
						筆落才氣沖星鬥，龍翔鳳嘉勢難收。
						滿堂花醉三千客，一劍寒霜十四州。
						鼓角揭天嘉氣冷，風濤地動海山秋。</p>
					</div>
					<div class="two_three">
						<img src="img/d.png"/>
						<p class="one_font">科技出手，功力雙收</p>
						<p>将軍閉目彈整德，隻因眼前無敵手。
						筆落才氣沖星鬥，龍翔鳳霹勢難收。
						滿堂花醉三千客，一劍寒霜十四州。
						鼓角揭天嘉氣冷，風濤地動海山秋。
						将軍閉目彈籮筷，隻因眼前無敵手。
						筆落才氣沖星鬥，龍翔鳳嘉勢難收。
						滿堂花醉三千客，一劍寒霜十四州。
						鼓角揭天嘉氣冷，風濤地動海山秋。</p>
					</div>
					<div class="two_four">
						<img src="img/c.png"/>
						<p class="one_font">科技出手，功力雙收</p>
						<p>将軍閉目彈整德，隻因眼前無敵手。
						筆落才氣沖星鬥，龍翔鳳霹勢難收。
						滿堂花醉三千客，一劍寒霜十四州。
						鼓角揭天嘉氣冷，風濤地動海山秋。
						将軍閉目彈籮筷，隻因眼前無敵手。
						筆落才氣沖星鬥，龍翔鳳嘉勢難收。
						滿堂花醉三千客，一劍寒霜十四州。
						鼓角揭天嘉氣冷，風濤地動海山秋。</p>
					</div>
					</div>
				</div>
				</div>
			</div>
			<p class="wenzi"><b>中标告示</b></p>
			<div class="content_three">
				<div class="three_one">
					<p style="font-size: 30px;">09</p>
					<p >2018年03月</p><br />
					<hr width="50px" color="black" class="jianju"/><br />
					<p>筆落才氣沖星鬥，龍翔鳳嘉勢難收。
					滿堂花醉三千客，一劍寒霜十四州。</p>
					<div class="detail_two">詳細></div>
				</div>
				<div class="three_two">
					<p style="font-size: 30px;">09</p>
					<p >2018年03月</p><br />
					<hr width="50px" color="black" class="jianju"/><br />
					<p>筆落才氣沖星鬥，龍翔鳳嘉勢難收。
					滿堂花醉三千客，一劍寒霜十四州。</p>
					<div class="detail_two">詳細></div>
				</div>
				<div class="three_three">
					<p style="font-size: 30px;">09</p>
					<p >2018年03月</p><br />
					<hr width="50px" color="black" class="jianju"/><br />
					<p>筆落才氣沖星鬥，龍翔鳳嘉勢難收。
					滿堂花醉三千客，一劍寒霜十四州。</p>
					<div class="detail_two">詳細></div>
				</div>
				<div class="sanjiaoxing"></div>
				<div class="erweima" align="center">
					<img src="img/b.png" /><br />
					<span>二維碼</span>
				</div>
				<div class="last">
					<img src="img/a.png" style="margin-top: 100px; margin-left: 100px;"/><br />
					<span class="top">工作用戶端</span>
					<span class="top">機械用戶端</span><br />
					<div class="hezi">AppStore下載下傳</div>
					<div class="hezi1">AppStore下載下傳</div><br />
					<div class="hezi">AppStore下載下傳</div>
					<div class="hezi1">AppStore下載下傳</div>
				</div>
				<div class="banquan">
					<p>Copyright c 2015-2018轟隆隆honglonglong.All Rights Reserved.</p>
					<p class="banquan_one">京ICP備15045098号</p>
				</div>
			</div>
		</div>
	</body>
</html>

css:

.main{
	overflow: hidden;
}
.main .nav{
	height: 55px;
	background-color: rgb(50,72,128);
}
.nav img{
	margin-left: 200px;
	float: left;
}
.nav a{
	/* 去掉a标簽下面的下劃線 */
	text-decoration: none;
	margin-left: 100px;
	text-align: center;
	line-height: 55px;
	color: rgb(240,240,242);
}
.nav .nav_frist{
	margin-left: 200px;
}
.wenzi{
	text-align: center;
	font-size: 18px;
}
.content{
	margin-left: 320px;
}
.content .one{
	height: 295px;
	width: 1000px;
	border: 3px solid rgb(137,134,134);
	background-color: rgb(234,234,234);
}
.content .two{
	height: 295px;
	width: 1000px;
	border: 3px solid rgb(137,134,134);
	background-color: rgb(234,234,234);
	margin-top: 150px;
	margin-bottom: 10px;
}
.one img{
	float: left;
	margin-right: 25px;
}
.two img{
	float: right;
	margin: 0;
	margin-left: 20px;
}
.two p{
	margin-left: 20px;
}
.one_font{
	font-size: 20px;
	font-weight: bold;
}
.one .detail{
	width: 130px;
	height: 50px;
	border: 2px solid rgb(128,130,131);
	float: right;
	text-align: center;
	line-height: 50px;
	margin-right: 50px;
	margin-top: 30px;
	font-size: 20px;
}
.two .detail{
	width: 130px;
	height: 50px;
	border: 2px solid rgb(128,130,131);
	float: left;
	text-align: center;
	line-height: 50px;
	margin-left: 10px;
	margin-top: 30px;
	font-size: 20px;
}
.content_two .two_one{
	width: 500px;
	height: 250px;
	border: 1px solid white;
	float: left;
}
.content_two .two_three{
	width: 500px;
	height: 250px;
	float: left;
}
.content_three .three_one{
	width: 250px;
	height: 300px;
	background-color: rgb(244,247,251);
	margin-left: 320px;
}
.content_three .three_two{
	width: 250px;
	height: 300px;
	background-color: rgb(244,247,251);
	margin-left: 670px;
	margin-top: -330px;
}
.content_three .three_three{
	width: 250px;
	height: 300px;
	background-color: rgb(244,247,251);
	margin-left: 990px;
	margin-top: -330px;
}
.content_three .three_one p{
	margin-left: 10px;
}
.content_three .three_two p{
	margin-left: 10px;
}
.content_three .three_three p{
	margin-left: 10px;
}
.content_three .three_one .jianju{
	margin-left: 10px;
}
.content_three .three_two .jianju{
	margin-left: 10px;
}
.content_three .three_three .jianju{
	margin-left: 10px;
}
.content_three .three_one hr{
	float: left;
}
.content_three .three_two hr{
	float: left;
	margin-top: -110px;
}
.content_three .three_three hr{
	float: left;
	margin-top: -110px;
}
.content_three .three_one .detail_two{
	float: left;
	margin-left: 20px;
}
.content_three .three_two .detail_two{
	float: left;
	margin-left: 20px;
}
.content_three .three_three .detail_two{
	float: left;
	margin-left: 20px;
}
.last{
	height: 300px;
	background-color: rgb(50,72,128);
	margin-top: 200px;

}
.last img{
	float: left;
}
.last .top{
	margin-left: 100px;
	color: #FFFFFF;
}
.last .hezi{
	width: 110px;
	height: 30px;
	border:  1px solid #FFFFFF;
	margin-left: 100px;
	color: #FFFFFF;
	margin-bottom: 20px;
	display: inline-block;
	margin-top: 10px;
}
.last .hezi1{
	width: 110px;
	height: 30px;
	border:  1px solid #FFFFFF;
	margin-left: 50px;
	color: #FFFFFF;
	margin-bottom: 20px;
	display: inline-block;
	margin-top: 10px;
}
.banquan{
	height: 50px;
	background-color: black;
}
.banquan p{
	color: #FFFFFF;
	margin-left: 350px;
	text-align: center;
	display: inline-block;
}
.banquan .banquan_one{
	margin-left: 100px;
}
.erweima{
	width: 200px;
	height: 200px;
	float: right;
	background-color: #000000;
	margin-top:150px;
	margin-right: 150px;
	position: relative;
}
.erweima img{
	margin-top: 35px;
}
.erweima span{
	color: #FFFFFF;
	text-align: center;
}
.sanjiaoxing{
	width: 0px;
	border-bottom: 25px solid black;
	border-right: 25px solid black;
	border-left: 25px solid transparent;
	border-top: 25px solid transparent;
	margin-top: 150px;
	position: absolute;
	margin-left: 1480px;

}

案例展示：

任務01-03

任務01-03

繼續閱讀

CSS----對字号的控制:Points, ems, pixels, 及其它機關,關鍵字,比例參數

龍珠訓練營task04

趕工心得（一）

兩種清除浮動的方法

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

如何成為一名.net 工程師?

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden