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

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

實(shí)現(xiàn)效果:

Document.png

代碼部分:

實(shí)例

<!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="">成長測(cè)評(píng)</a>
					</li>
					<li>
						<a class="title" href="">寶寶課堂</a>
					</li>
					<li>
						<a class="title" href="">父母學(xué)校</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)頁設(shè)計(jì)大作業(yè)/jiang.jpg">言語 Language</a>
							</li>
							<hr>
							<li>
								<a href=""><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/jiang.jpg">運(yùn)動(dòng) Movement</a>
							</li>
							<hr>
							<li>
								<a href=""><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/jiang.jpg">藝術(shù) Art</a>
							</li>
							<hr>
							<li>
								<a href=""><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/jiang.jpg">社會(huì) Sociality</a>
							</li>
							<hr>
						</ul>
					</div>
					<div class="piccentent">
						<a href=""><img class="img01" src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(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;">點(diǎn)擊關(guān)注</a>
					</div>
					<div class="picbuttom">
						<ul>
							<li>
								<a href="">[專題]對(duì)孩子的任性說不</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ù)]學(xué)樂器的最佳年齡?</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)頁設(shè)計(jì)大作業(yè)/044.jpg" /></div>
						<div class="cenright">
							<div class="cenrighttop">
								<ul>
									<li class="li1"><span class="span1">小寶寶睡覺覺</span></li>
									<li><span class="span1">課件格式: 動(dòng)畫</span></li>
									<li><span class="span1">適用月齡: 1-36月</span></li>
									<li><span class="span1">觀看次數(shù): 924</span></li>
									<li><span class="span1">難度:初級(jí)</span></li>
									<li>
										<a href=""><span class="span1">添加到點(diǎn)播單</span></a>
									</li>
								</ul>
							</div>
							<div class="cenrightbuttom">
								<img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/dian8.jpg" />
							</div>
							<div class="cententbox">
								<div class="cententboxtop">
									<span><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/2.jpg" alt="" />課件說明</span>
								</div>
								<div class="cententboxcen">
									<pre>
<p class="p01">小寶睡覺覺</p>


	小風(fēng)輕輕吹
	小鳥低低叫
	小狗慢慢跑
	小貓偷偷笑
	小屋靜悄悄



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

									</pre>
								</div>
							</div>
							<div class="cententboxtow">
								<div class="cententboxtowtop">
								<span><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/3.jpg" alt="" />課件說明</span>
								</div>
								<div class="cententboxtowbuttom">
									<div class="ul">
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/011.jpg" alt="" /><br><a href="">小兔子</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/007.jpg" alt="" /><br><a href="">吃飯</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/008.jpg" alt="" /><br><a href="">伙伴們</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/009.jpg" alt="" /><br><a href="">青州草花</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/010.jpg" alt="" /><br><a href="">懂禮貌</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/012.jpg" alt="" /><br><a href="">拍球</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(yè)/013.jpg" alt="" /><br><a href="">大家好</a></li>
										<li><img src="img/兒童網(wǎng)站-網(wǎng)頁設(shè)計(jì)大作業(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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

-

公共樣式表:

實(shí)例

*{
	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)頁設(shè)計(jì)大作業(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;

}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

-

主頁樣式表:

實(shí)例

.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)頁設(shè)計(jì)大作業(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)頁設(shè)計(jì)大作業(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)頁設(shè)計(jì)大作業(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;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


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

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

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

  • 登錄PHP中文網(wǎng),和優(yōu)秀的人一起學(xué)習(xí)!
    全站2000+教程免費(fèi)學(xué)