亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 250
粉絲 3
評論 0
訪問量 381384
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
2018/03/28html大作業(yè)（仿企業(yè)站點）
梁凱達的博客
原創(chuàng)
1536人瀏覽過

實現(xiàn)效果：

Document.png

代碼部分：

實例

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<link rel="stylesheet" type="text/css" href="css/comnon.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<div class="body">
			<div class="head">
				<ul class="headul">
					<li>
						<a class="title" href="">成長測評</a>
					</li>
					<li>
						<a class="title" href="">寶寶課堂</a>
					</li>
					<li>
						<a class="title" href="">父母學校</a>
					</li>
					<li>
						<a class="title" href="">寶寶商城</a>
					</li>
					<li>
						<a class="title" href="">育兒問答</a>
					</li>
				</ul>
			</div>
			<div class="mainleft">
				<div class="headleft">
					<div class="toppic">
						<ul class="toppicul">
							<li>
								<a href=""><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/jiang.jpg">言語 Language</a>
							</li>
							<hr>
							<li>
								<a href=""><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/jiang.jpg">運動 Movement</a>
							</li>
							<hr>
							<li>
								<a href=""><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/jiang.jpg">藝術(shù) Art</a>
							</li>
							<hr>
							<li>
								<a href=""><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/jiang.jpg">社會 Sociality</a>
							</li>
							<hr>
						</ul>
					</div>
					<div class="piccentent">
						<a href=""><img class="img01" src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/mougu.jpg"></a>
					</div>
					<div class="piccentent02">
						<div class="pic03">
							<div class="picul01">
								<ul>
									<li>
										<a href="">1、四只熊</a>
									</li>
									<hr>
									<li>
										<a href="">2、小蛋殼托兒所</a>
									</li>
									<hr>
									<li>
										<a href="">3、一望二三里</a>
									</li>
									<hr>
									<li>
										<a href="">4、拖地板(錄音)</a>
									</li>
									<hr>
									<li>
										<a href="">5、黑色的雪花</a>
									</li>
									<hr>
								</ul>
							</div>
							<div class="picul02">
								<ul>
									<li>
										<a href="">6、小草偷偷地笑了</a>
									</li>
									<hr>
									<li>
										<a href="">7、星星警察 </a>
									</li>
									<hr>
									<li>
										<a href="">8、尋寶迷宮</a>
									</li>
									<hr>
									<li>
										<a href="">9、大皮鞋 </a>
									</li>
									<hr>
									<li>
										<a href="">10、烏鴉喝水</a>
									</li>
									<hr>
								</ul>
								<div class="picul03">
									<ul>
										<li>
											<a href="">11、雪兔</a>
										</li>
										<hr>
										<li>
											<a href="">12、小熊拔牙</a>
										</li>
										<hr>
										<li>
											<a href="">13、司馬光 </a>
										</li>
										<hr>
										<li>
											<a href="">14、一望二三里 </a>
										</li>
										<hr>
										<li>
											<a href="">15、小兔乖乖</a>
										</li>
										<hr>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="centent03">
						<a href="" style="font-size: 1em;">點擊關(guān)注</a>
					</div>
					<div class="picbuttom">
						<ul>
							<li>
								<a href="">[專題]對孩子的任性說不</a>
							</li>
							<hr>
							<li>
								<a href="">[視頻]如何制止孩子間沖突</a>
							</li>
							<hr>
							<li>
								<a href="">[視頻]親子游戲：玩小鈴鐺 </a>
							</li>
							<hr>
							<li>
								<a href="">[案例]愛哭鼻子的小姑娘 </a>
							</li>
							<hr>
							<li>
								<a href="">[藝術(shù)]學樂器的最佳年齡？</a>
							</li>
							<hr>
						</ul>
					</div>
				</div>
			</div>
			<div class="mainright">
				</p>
				<div class="rightmaintop">
					<p>
						<a href="">首頁 > 寶寶課堂 > 課件分類</a>
					</p>
					<div class="rightmainbox">
						<span>言語 Language </span>
					</div>
					<div class="rightmaincentent">
						<div class="cenleft"><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/044.jpg" /></div>
						<div class="cenright">
							<div class="cenrighttop">
								<ul>
									<li class="li1"><span class="span1">小寶寶睡覺覺</span></li>
									<li><span class="span1">課件格式： 動畫</span></li>
									<li><span class="span1">適用月齡： 1-36月</span></li>
									<li><span class="span1">觀看次數(shù)： 924</span></li>
									<li><span class="span1">難度：初級</span></li>
									<li>
										<a href=""><span class="span1">添加到點播單</span></a>
									</li>
								</ul>
							</div>
							<div class="cenrightbuttom">
								<img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/dian8.jpg" />
							</div>
							<div class="cententbox">
								<div class="cententboxtop">
									<span><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/2.jpg" alt="" />課件說明</span>
								</div>
								<div class="cententboxcen">
									<pre>
<p class="p01">小寶睡覺覺</p>


	小風輕輕吹
	小鳥低低叫
	小狗慢慢跑
	小貓偷偷笑
	小屋靜悄悄



<p class="p01">課件使用說明</p>　　
      幼兒觀看兒歌動畫，聽兒歌，家長可給幼兒講解兒歌，根據(jù)兒歌內(nèi)容提問，請幼兒回答。可以在幼兒快睡覺
 時反復念給幼兒聽。2歲前是幼兒學習語言的關(guān)鍵階段，學習簡單的兒歌能夠有效地幫助幼兒提高言語能力，家長
可給幼兒反復播放兒歌，寶寶很快就會學會接尾音、接句子，進而背誦整首兒歌。 2-3歲幼兒，家長可指導孩子觀
看動畫，背誦兒歌，并點指字幕學習漢字。

									</pre>
								</div>
							</div>
							<div class="cententboxtow">
								<div class="cententboxtowtop">
								<span><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/3.jpg" alt="" />課件說明</span>
								</div>
								<div class="cententboxtowbuttom">
									<div class="ul">
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/011.jpg" alt="" /><br><a href="">小兔子</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/007.jpg" alt="" /><br><a href="">吃飯</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/008.jpg" alt="" /><br><a href="">伙伴們</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/009.jpg" alt="" /><br><a href="">青州草花</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/010.jpg" alt="" /><br><a href="">懂禮貌</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/012.jpg" alt="" /><br><a href="">拍球</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/013.jpg" alt="" /><br><a href="">大家好</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/014.jpg" alt="" /><br><a href="">拍球</a></li>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="footertop">
					<span>關(guān)于我們 | 官方博客 | 聯(lián)系我們 | 本站聲明 | 加盟招商 | 網(wǎng)站地圖 | 友情鏈接</span>
				</div>
				<div class="footerbuttom">
					<span>Copyright ? 2008 www.babygrow.cn All Rights reserved</span>
				</div>
			</div>
		</div>
	</body>

</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

-

公共樣式表：

實例

*{
	padding: 0;
	margin: 0;
}
a{
	text-decoration: none;
	color: black;
	font-size: 0.8em;
	font-family: "微軟雅黑";
}
a:hover{
	color:  #E9E9E9;
}
/*以上用于樣式表格重置*/
.body{
	width: 951px;
	height: 1800px;
	border: solid black 1px;
	margin: auto;
}
.head{
	width: 949px;
	height: 350px;
	background: url(../img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/head.jpg);
	float: left;
	overflow: hidden;
}
.headnav{
}
.headul{
	position: relative;
	top: 70px;
	left: 325px;
}

li{
	float: left;
	margin-left: 5px;
	list-style-type: none;
	margin-right: 30px;
}
.title{
	text-decoration: none;
	color: white;
	font-weight: bold;
}
.title:hover{
	color: #000000;
}
.footertop span ,.footerbuttom span{
	width: 899px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	display: block;
	margin-bottom: 15px;
}
.footertop span {
	border: solid 1px;
}
.footer{
	width: 952px;
	height: 70px;
	float: left;
	position: relative;
	top: 100px;

}

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

-

主頁樣式表：

實例

.mainleft{
	width: 245px;
	height: 1200px;
	background: white;
	float: left;
}
.mainright{
	width: 704px;
	height: 1200px;
	float: left;
}
.headleft{
	width: 245px;
	height: 255px;
	background:url(../img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/left.jpg);
}
.toppic{
	width: 179px;
	height: 157px;
	border: 1px solid #e9e9e9;
	border-radius: 15px;
	position: relative;
	top: 75px;
    margin: auto;
}

.toppicul{
	margin-top: 12px;
}
.toppicul li{
	width: 179px;
	text-align:left;
	line-height: 32px;
	padding-left: 6px;
}
hr{
	width: 85%;
	margin:auto;
	border: dashed 1px silver;
}
.piccentent{
	width: 225px;
	height: 100px;
	position: relative;
	top: 100px;
	
}
.img01{
	position: relative;
}
.piccentent02{
	width: 245px;
	height: 428px;
	position: relative;
	top: 120px;
}
.pic03{
	width: 180px;
	height: 440px;
	position: relative;
	background: url(../img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/kuai2.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: auto;
	line-height:20px;
	padding: 10px;
}
.pic03 li{	
	width: 180px;
	padding: 3px;
}
.centent03{
	width: 179px;
	height: 39px;
	line-height: 39px;
	font-weight: bold;
	text-align: center;
	position: relative;
	top: 170px;
	border: solid #C0C0C0 1px;
	margin: auto;
	border-radius: 10px;
	box-shadow: 10px 10px 10px  #C0C0C0;
	
}
.picbuttom{
	position: relative;
	top: 200px;
	width: 195px;
	height: 212px;
	margin: auto;
	line-height: 37px;
	border: solid #C0C0C0 1px;
	border-radius: 10px;
}
.picbuttom li{
	width: 195px;
	margin-left: 15px;
}
.rightmaintop{
	width: 704px;
	height: 194px;
	background: url(../img/兒童網(wǎng)站-網(wǎng)頁設計大作業(yè)/right.jpg);
}
p{
	text-align: right;
	margin-right: 20px;
	font-weight: bold;
}
.rightmainbox{
	width: 650px;
	height: 40px;
	border: solid #cccccc 1px;
	border-radius: 10px;
	line-height: 40px;
	position: relative;
	top: 120px;
	left: 20px;
	box-shadow: 3px 3px 3px  #C0C0C0;
	color:#73933f;
	font-weight: bold;
}
span{
	padding: 20px;
}
.rightmaincentent{
	width: 605px;
	height: 270px;
	border: 15px solid #E9E9E9;
	position: relative;
	top: 150px;
	margin: auto;
}
.cenleft{
	width:355px;
	height: 100%;
	float: left;
}
.cenright{
	width:250px;
	height: 100%;
	float: left;
	
}
.cenleft img{
	border: solid black 1px;
	width: 355px;
	height: 100%;
	margin-left: 5px;
	display: block;
}
.cenrighttop{
	width:250px;
	height:170px;
	line-height: 28px;
	background: url();
	float: left;
	margin-top: 20px;
}
.cenrighttop li{
	width: 200px;
	margin-left:35px;
	font-size: 0.8em;
	color: blueviolet;
	list-style: disc;
	border-bottom:dashed 1px;
}
.cenrighttop .li1{
	color: chocolate;
}
.cenrighttop li{
	color: crimson;
}
.span1{
	margin:0;
	padding:0;
	color: #8A2BE2;
}
.hr1{
	border:  dashed 1px black;
}
.cenrightbuttom{
	width: 250px;
	height: 100px;
	float: left;
}
.cenrightbuttom img{
	position: relative;
	top: 10px;
	left: 20px;
}
.cententbox{
	width: 650px;
	height: 418px;
	border: solid 1px  #C0C0C0;
	border-radius: 5px;
	float: left;
	position: relative;
	top: 20px;
	left: -370px;
}
..cententboxtop{
	width: 650px;
}
.cententboxtop span,.cententboxtowtop span{
	display: block;
	border-bottom: dashed 1px black;
	width: 100%;
	line-height: 40px;
	margin: 0;
	padding: 0;
	color: #DC143C;
	font-weight: bold;
}
.cententboxtop img{
	position: relative;
	top:4px;
}
.cententboxcen{
	width: 650px;
	height: 380px;
	float: left;
}
.p01{
	text-align: left;
	color: #DC143C;
	font-size: 1.3em;
	margin: 20px 0px 0px 10px;
}
.cententboxtow{
	width: 650px;
	height: 300px;
	border: solid 1px #CCCCCC;
	border-radius: 5px;
	float: left;
	position: relative;
	top: 30px;
	left: -370px;
}
.cententboxtowtop{
	border-bottom: dashed 1px  #CCCCCC;
	line-height: 40px;
}
.cententboxtowtop img{
	position: relative;
	top: 5px;
	margin-right: 7px;
}
.cententboxtowbuttom img{
	margin-left: 10px;
}
.cententboxtowbuttom li{
	text-align: center;
	font-weight: bold;
}

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例


批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關(guān)注服務號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學