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

搜索
博主信息
博文 65
粉絲 3
評(píng)論 4
訪問量 79595
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
夜半酣戰(zhàn)之html+css仿站 03/29 01:29
無恥的魚
原創(chuàng)
1829人瀏覽過

這里是網(wǎng)站鏈接,可以對(duì)比一下,點(diǎn)擊我

總結(jié):

  • 代碼需要常寫,一日不寫就忘記

  • 一些思路以及技巧,就是多日的練習(xí)以及模仿積攢出來的

  • 還是得多寫

    下面來看代碼吧

文件夾放置

1.png

先看dom布局吧

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 重置樣式 -->
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<!-- 公共樣式 -->
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<!-- 本頁(yè)樣式 -->
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<!-- top -->
	<!-- 網(wǎng)站高仿 目標(biāo)位置:http://fashion.le.com/pzt/fiyta/index.shtml-->
	<div class="top"></div>

	<!-- 視頻區(qū) -->
	<div class="video">
		<div class="video-lg"></div>
		<div class="video-sm">
			<ul>
				<li class="ll1"><img src=""></li>
				<li class="lll"><img src="http://fashion.le.com/pzt/fiyta/images/video/v0.jpg"></li>
				<li class="lll"><img src="http://fashion.le.com/pzt/fiyta/images/video/v1.jpg"></li>
				<li class="lll" style="filter: grayscale(0); border-color: #c2a26e;"><img src="http://fashion.le.com/pzt/fiyta/images/video/v2.jpg"></li>
				<li class="lll"><img src="http://fashion.le.com/pzt/fiyta/images/video/v3.jpg"></li>
				<li class="lll"><img src="http://fashion.le.com/pzt/fiyta/images/video/v4.jpg"></li>
				<li class="ll2"></li>
			</ul>
		</div>
	</div>

	<!-- 公共背景 -->
	<div class="bg"></div>

	<!-- 葉子 -->
	<div class="yezi">
		<div class="span">四葉草<br>系列</div>
		<div class="span">四葉草<br>系列</div>
	</div>

	<!-- 四個(gè)手表 -->
	<div class="show">
		<ul>
			<li><small></small><img src="http://fashion.le.com/pzt/fiyta/images/watch/LA8262.GWR.png" alt="" class="aaa">四葉草系列l(wèi)a8262GWR<br><span></span> <br>立即購(gòu)買</li>
			<li><small></small><img src="http://fashion.le.com/pzt/fiyta/images/watch/LA8262.GWR.png" alt="" class="aaa">四葉草系列l(wèi)a8262GWR<br><span></span> <br>立即購(gòu)買</li>
			<li><small></small><img src="http://fashion.le.com/pzt/fiyta/images/watch/LA8262.GWR.png" alt="" class="aaa">四葉草系列l(wèi)a8262GWR<br><span></span> <br>立即購(gòu)買</li>
			<li><small></small><img src="http://fashion.le.com/pzt/fiyta/images/watch/LA8262.GWR.png" alt="" class="aaa">四葉草系列l(wèi)a8262GWR<br><span></span> <br>立即購(gòu)買</li>
		</ul>
	</div>




		<!-- 葉子 -->
	<div class="yezi2">
		<div class="span">圖片<br>展示</div>
	</div>


	<!-- 照片墻 -->
	<div class="photo">
		<div class="photo-bg">
			<ul>
				<li><img src="http://fashion.le.com/pzt/fiyta/images/model/m0.jpg"><br>英國(guó)</li>
				<li><img src="http://fashion.le.com/pzt/fiyta/images/model/m1.jpg"><br>英國(guó)</li>
				<li><img src="http://fashion.le.com/pzt/fiyta/images/model/m2.jpg"><br>英國(guó)</li>
				<li><img src="http://fashion.le.com/pzt/fiyta/images/model/m3.jpg"><br>英國(guó)</li>
				<li><img src="http://fashion.le.com/pzt/fiyta/images/model/m4.jpg"><br>英國(guó)</li>
				<li><img src="http://fashion.le.com/pzt/fiyta/images/model/m5.jpg"><br>英國(guó)</li>
			</ul>
		</div>
	</div>

	<!-- footer -->
	<!-- 現(xiàn)在是午夜1:03 早知道不寫這個(gè)了,非得換個(gè) zzzzz。。。-->
	<div class="footer">
		<div class="black">
			<span>? 2015 飛亞達(dá)(集團(tuán))股份有限公司 版權(quán)所有 粵ICP備05055645號(hào)</span><img src="http://fashion.le.com/pzt/fiyta/images/code.jpg">	
		</div>
		
		
	</div>
</body>
</html>

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

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例  運(yùn)行不起來的需要保存下來

下面是css代碼

每一個(gè)網(wǎng)站都會(huì)有一個(gè)重置樣式的css

reset.css

實(shí)例

/*樣式重置*/
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: none;
}

a:link, a:visited, a:active {
	color: #505050;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	color: #f00;
}

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

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

以及通用css 常是一些公共樣式

commom.css

實(shí)例

.bg{
	width: 100%;
	height:146px;
	background-image: url(http://fashion.le.com/pzt/fiyta/images/video_bg.jpg);
	background-repeat: no-repeat;
	background-position: center; 
	margin: 20px auto;
}
.footer{
	width: 100%;
	
	background-color: #222;
	line-height: 80px;
}
.footer .black{
	width: 1008px;
	height: 80px;
	margin: auto;
}
.footer img{
	float: right;
	margin-top: 30px;
}

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

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

以及咱本頁(yè)面的css

index.css


實(shí)例

.top{
	width: 100%;
	height:1333px;
	background-image: url(http://fashion.le.com/pzt/fiyta/images/banner.jpg);
	background-repeat: no-repeat;
	background-position: center; 
}

/*視頻*/
.video{
	width: 100%;
}
.video-lg{
	width: 815px;
	height:430px;
	background-image: url(http://fashion.le.com/pzt/fiyta/images/video/001.jpg);
	background-repeat: no-repeat;
	margin: 50px auto 0;
}
.video-sm{
	width: 1008px;
	margin: auto;
}
.video ul li{
	display: inline;
	line-height: 73px;
	width: 138px;
	height: 73px;
	filter: grayscale(100%);
	border: 1px solid #fff;
	float:left;
	overflow: hidden;
	margin: 10px 15px;
}
.video ul .ll1{
	margin-top:22px; 
	width: 46px;
	height: 46px;
	background-color: #ccc;
	background-image: url(http://fashion.le.com/pzt/fiyta/images/lt.png);
	background-repeat: no-repeat;
	background-position: center;
}
.video ul .ll2 {
	margin-top:22px; 
	width: 46px;
	height: 46px;
	background-color: #ccc;
	background-image: url(http://fashion.le.com/pzt/fiyta/images/gt.png);
	background-repeat: no-repeat;
	background-position: center;
}


.video ul li:hover{
	border-color: #c2a26e;
	filter: grayscale(0);
}


/*兩個(gè)葉子*/
.yezi{
	width: 1008px;
	height: 147px;
	background: url(http://fashion.le.com/pzt/fiyta/images/wbg.png) repeat-x 0 bottom; 
	text-align: center;
    padding-bottom: 2px;
    margin-top: 61px;
    margin: auto;
    clear: both;
}
.yezi .span{
	margin: 0 40px;
	width: 118px;
	height: 143px;
	display: inline-block;
	background: url(http://fashion.le.com/pzt/fiyta/images/n.png) no-repeat -113px 0 ;
	text-align: center;
	line-height: 1.5em;
	padding-top:35px;
    font-size: 19px;
    font-weight: bold;
}

/*手表出來了*/
.show {
	width: 1008px;
	margin:30px auto;
}
.show ul li{
	margin:14px;
	width: 223px;
	height: 510px;
	float: left;
	border-bottom:1px solid #ccc;
	color: #ccc; 
	text-align: center;

}
.show ul li small{
	display: block;
	width: 223px;
	height: 300px;
	border: 1px solid #ccc;
}
.show ul li:hover small{
	display: block;
	width: 223px;
	height: 300px;
	background-color: #c2a26e;
	border: 1px solid #c2a26e;
}
.show ul li img{
	margin-top:-290px; 
}
.show ul li span{
	width: 38px;
	height: 50px;
	margin-top: 20px;
	display: inline-block;
	background: url(http://fashion.le.com/pzt/fiyta/images/buy.png) no-repeat 0  0 ;
	text-align: center;
	line-height: 1.5em;

}
.show ul li:hover{
	border-bottom:4px solid #c2a26e;
	height: 507px;
	color:  #c2a26e;
}

.show ul li:hover span{
	width: 38px;
	height: 50px;
	margin-top: 20px;
	display: inline-block;
	background: url(http://fashion.le.com/pzt/fiyta/images/buy.png) no-repeat -38px 0 ;
	text-align: center;
	line-height: 1.5em;
}


/*一個(gè)葉子*/
.yezi2{
	width: 1008px;
	height: 147px;
	background: url(http://fashion.le.com/pzt/fiyta/images/wbg.png) repeat-x 0 bottom; 
	text-align: center;
    padding-bottom: 2px;
    margin-top: 61px;
    margin: auto;
    clear: both;
}
.yezi2 .span{
	position: relative;
	top:30px;
	width: 118px;
	height: 143px;
	display: inline-block;
	background: url(http://fashion.le.com/pzt/fiyta/images/n.png) no-repeat -113px 0 ;
	text-align: center;
	line-height: 1.5em;
	padding-top:35px;
    font-size: 19px;
    font-weight: bold;
}

/*照片墻*/
.photo{
	width: 100%;
	height:350px;
	background: url(http://fashion.le.com/pzt/fiyta/images/photo_bg.jpg) no-repeat center; 
	
}

.photo-bg{
	position: relative;
	top: 30px;
	width: 1030px;
    height: 263px;
    background: url(http://fashion.le.com/pzt/fiyta/images/photo_list.png) no-repeat 0 0;
    margin: 0 auto 0;
}
.photo-bg ul{
	width: 930px;
	height: 210px;
	margin: auto;
	position: relative;
	top: 20px;
}
.photo-bg ul li{
	float: left;
	text-align: center;
	line-height: 1.5em;
	margin: 2px;
}

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

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

我再放個(gè)效果圖吧!


Document_看圖王.jpg

批改狀態(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í)者快速成長(zhǎng)!
關(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é)