一以清、??作品介紹
HTML實(shí)例網(wǎng)頁(yè)代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)典格。該實(shí)例里面有設(shè)置了css的樣式設(shè)置廓潜，有div的樣式格局母怜，這個(gè)實(shí)例比較全面余耽，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開(kāi)始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)。
二苹熏、??作品效果
??視頻演示
https://live.csdn.net/v/embed/239879
(title-C129JP 水果商城7頁(yè)碟贾，帶js 帶jquery帶輪播圖币喧，帶購(gòu)物車(chē)，表單袱耽，地圖點(diǎn)擊詳情查看)]
?? 截圖演示
07.png
06.png
05.png
04.png
03.png
02.png
01.png
三粱锐、?? 作品代碼
??HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="order by dede58.com">
<title>果然新鮮</title>
<link href="css/index.css" rel="stylesheet">
<link href="css/share.css" rel="stylesheet">
<script src="js/js.js" type="text/javascript" ></script>
<script src="js/jquery-1.12.3.js"></script>
<script type="text/javascript" src="http://www.ylcp.shop/files/files/1651940908374/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>
#boxhdp {
position: relative;
top: 0px;
width: 1300px;
height: 320px;
margin: 0 auto;
overflow: hidden;
position: relative;
font-size: 0px;
}
#img>li {
width: 100%;
float: left;
text-align: center;
display: none;
}
#img>li img {
width: 100%;
}
#img>.current {
display: block;
}
#li {
position: absolute;
left: 50%;
bottom: 15px;
margin-left: -35px;
}
#li>li {
width: 10px;
height: 10px;
background-color: #ccc;
border-radius: 50%;
margin-right: 5px;
float: left;
cursor: pointer;
}
#li>.on {
background-color: #f50;
}
#an {
display: none;
}
#an a {
position: absolute;
top: 50%;
width: 40px;
height: 46px;
background-color: rgba(0, 0, 0, 0.108);
line-height: 40px;
color: #fff;
}
#an a:hover {
background-color: rgba(0, 0, 0, 0.293);
}
#an .an-a2 {
right: 0;
}
.chuang {}
.chuang a {
color: black;
line-height: 20px;
}
.chuang a:hover {
font-size: 14px;
color: #ccc;
}
.nixingzhe {
top: 100px;
width: 80px;
height: 300px;
position: absolute;
background-color: blanchedalmond;
}
.widsh {
width: 1000px;
margin: 0 auto;
position: relative;
}
</style>
<body>
<!--頂部導(dǎo)航-->
<div class="headr">
<div class="heard-con">
<img src="picture/logo.jpg" style="margin-top: 7px;float: left;position: absolute;width: 200px;height: 100%;">
<div class="headr-nav">
<ul>
<li><a href="" style="color: #4AB344"><span style="color: #4AB344">首頁(yè)</span></a> </li>
<li><a href="hot.html">蔬果熱賣(mài)</a> </li>
<li><a href="produ.html">全部產(chǎn)品</a> </li>
<li><a href="consult.html">最新資訊</a></li>
<li><a href="touch.html">聯(lián)系我們</a> </li>
</ul>
<div class="sptopfoot">
<div class="spbottom">
</div>
</div>
</div>
<div class="headr-right">
<i class="iconfont" style="font-size: 16px;margin-right: 10px"></i> 我的購(gòu)物車(chē) ∨
<div class="hr-car">
<i class="iconfont" style="font-size: 40px;margin-right: 10px"></i> 您的購(gòu)物車(chē)內(nèi)暫時(shí)沒(méi)有任何產(chǎn)品。
</div>
</div>
</div>
</div>
<!--頂部導(dǎo)航結(jié)束-->
<!--banner圖片-->
<!-- 輪播圖開(kāi)始 -->
<div id="boxhdp">
<ul id="img">
<li class="current">
<img src="picture/ban-1.jpg">
</li>
<li>
<img src="picture/ban-2.jpg">
<li>
<img src="picture/ban-3.jpg">
</li></ul>
<ul id="li">
<li class="on"></li>
<li></li>
<li></li>
</ul>
<div style="clear: both;"></div>
<div class="an" id="an">
<a href="javascript:;" id="prev">
<img src="http://www.ylcp.shop/files/files/1651940908374/images/l.png" alt="">
</a>
<a href="javascript:;" id="next" class="an-a2">
<img src="http://www.ylcp.shop/files/files/1651940908374/images/r.png" alt="">
</a>
</div>
</div>
<script>
hdp({
li: "li", //默認(rèn)值：li;默認(rèn)用li包裹
boxid: "boxhdp", //最外面div id
imgid: "img", //圖片外面id
optid: "li", //opt外面id
an: "an", //左右按鈕id扛邑，用于移上顯示和隱藏
prev: "prev", //左邊箭頭id
next: "next", //右邊箭頭id
ms: 4000 //多少毫秒切換一張,
})
</script>
<!--banner圖片結(jié)束-->
<!--主頁(yè)內(nèi)容-->
<div class="content">
<div class="ban-boot clear">
<div class="ban-zs">
<img src="picture/ban-1.jpg" width="100%">
</div>
<div class="ban-zs">
<img src="picture/ban-2.jpg" width="100%">
</div>
<div class="ban-zs">
<img src="picture/ban-3.jpg" width="100%">
</div>
</div>
<!--果園推薦開(kāi)始-->
<div class="recommand clear">
<div class="rec-nav clear">
<h2>果園推薦 <span>RECOMMAND</span></h2>
</div>
<div class="rec-cont clear">
<div class="rec-left">
<img src="picture/rc-1.jpg">
</div>
<div class="rec-right">
<div class="rcr">
<div class="rcr-top">
<img src="picture/rc-2.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
南非進(jìn)口黃檸檬 6個(gè)裝
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">29
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy" href="orange.html">
<span style="color: white;">購(gòu)買(mǎi)</span>
</a>
</div>
</div>
</div>
<div class="rcr">
<div class="rcr-top">
<img src="picture/rc-3.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
智利進(jìn)口新鮮藍(lán)莓 4盒
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">99
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy">
<span style="color: white;">購(gòu)買(mǎi)</span>
</a>
</div>
</div>
</div>
<div class="rcr">
<div class="rcr-top">
<img src="picture/rc-4.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
美國(guó)進(jìn)口紅啤梨 6個(gè)
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">48
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy">
<span style="color: white;">購(gòu)買(mǎi)</span>
</a>
</div>
</div>
</div>
<div class="rcr">
<div class="rcr-top">
<img src="picture/rc-5.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
美國(guó)進(jìn)口無(wú)籽紅提 1kg
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">39
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy">
<span style="color: white;">購(gòu)買(mǎi)</span>
</a>
</div>
</div>
</div>
<div class="rcr">
<div class="rcr-top">
<img src="picture/rc-6.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
國(guó)產(chǎn)綠奇異果 16顆
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">49
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy">
<span style="color: white;">購(gòu)買(mǎi)</span>
</a>
</div>
</div>
</div>
<div class="rcr">
<div class="rcr-top">
<img src="picture/rc-2.jpg" width="100%">
</div>
<div class="rcr-bot">
<div class="rb-top">
浙江涌泉蜜桔無(wú)核桔子5斤
</div>
<div class="second_P">
<span class="fk-prop">￥</span>
<span class="fk-prop-price">39
<span class="fk-prop-p">.00</span>
</span>
<span class="second_Marketprice">￥0.00</span>
</div>
<div class="buy">
<a class="second_mallBuy">
<span style="color: white;">購(gòu)買(mǎi)</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--果園推薦結(jié)束-->
</div>
<!--每日新品特賣(mài)-->
<div class="rec-bottom clear">
<div class="rbt-con">
<div class="banner_1">
<img src="picture/rb-1.jpg" width="1424px">
<img src="picture/rb-2.jpg" width="1424px">
</div>
</div>
<ul class="banner-bottom">
</ul>
</div>
<div class="content">
<div class="new-nav clear">
<div class="nwn-con">
<div style="text-align: center;">
<span style="">
<span style="font-size: 31px;">
<font style="color: rgb(33, 33, 33);" color="#212121">
<font style="color: rgb(231, 231, 231);" color="#e7e7e7">
———————
</font>
<b> 每日新品特賣(mài) </b>
</font></span></span>
<span style="font-size: 31px;">
<font style="color: rgb(231, 231, 231);" color="#e7e7e7">
———————
</font>
</span>
</div>
<div style="text-align: center;">
<font color="#353535" style="">
<span style="font-size: 16px;">
<font style="color:#888888">
新鮮水果每一天怜浅，健康生活每一刻
</font>
</span>
</font>
</div>
</div>
</div>
<div class="new-con clear">
<div class="nec-lift">
<div class="fk-editor simpleText ">
<font color="#4b4b4b">
<span style="">
<span style="line-height: 29px;">
<span style="color: rgb(75, 75, 75); font-size: 16px;">
有機(jī)生鮮
</span>
<div style="color: rgb(75, 75, 75);">
<span style="font-size: 20px;">
天然無(wú)污染水果
</span>
</div>
</span>
</span>
<div style="color: rgb(75, 75, 75);">
<span style="font-size: 20px;">
<br>
</span>
</div>
<div>
<font style="color: rgb(243, 151, 0);" color="#f39700">
<b>
<span style="font-size: 42px;">6.8</span>
</b><span style="font-size: 42px;">
<b>折</b>
<span style="font-size: 18px;">
<font style="color: rgb(53, 53, 53);" color="#353535">起</font>
</span></span>
</font>
</div>
</font>
</div>
<div class="xiqing">
<a href="javascript:;" style="color: white">查看詳情 ></a>
</div>
</div>
<div class="nec-right">
<img src="picture/nw-1.jpg">
</div>
</div>
<div class="new-bottom clear">
<div class="nw-b">
<img src="picture/nw-2.jpg">
</div>
<div class="nw-b">
<img src="picture/nw-3.jpg">
</div>
<div class="nw-b">
<img src="picture/nw-4.jpg">
</div>
<div class="nw-b" style="margin:0">
<img src="http://www.ylcp.shop/files/files/1651940908374/images/nw-5.jpg">
</div>
</div>
<!--每日新品特賣(mài)結(jié)束-->
<!--蔬果資訊-->
<div class="fruits">
<div class="fru-nav">
<div class="fk-editorb ">
<font style="color: rgb(103, 141, 30);" color="#678d1e">蔬果資訊</font>
</div>
<font style="color: rgb(53, 53, 53);float: right" color="#353535">更多資訊</font>
</div>
<div class="fru-lift">
<div class="frl-nav">
<ul>
<li>品種</li>
<li>地區(qū)</li>
<li>價(jià)格</li>
<span>時(shí)間</span>
</ul>
</div>
<div class="txtMarquee-top">
<div class="bd">
<ul class="infoList">
<li>
<p>蘋(píng)果</p>
<p>河南省濟(jì)源市</p>
<p>5.5/kg</p>
04-09
</li>
<li>
<p> 西瓜</p>
<p> 內(nèi)蒙古鄂爾多斯</p>
<p>10/kg</p>
04-09
</li>
<li>
<p>葡萄</p>
<p>新疆烏魯木齊</p>
<p>19/kg</p>
04-09
</li>
<li>
<p>車(chē)?yán)遄?lt;/p>
<p>河南省鄭州市</p>
<p> 58.5/kg</p> 04-09</li>
<li>
<p>菜心 </p>
<p>河南省新鄉(xiāng)市</p>
<p> 5.5/kg</p> 04-09</li>
<li>
<p>西蘭花</p>
<p>河南省信陽(yáng)市</p>
<p> 3.5/kg</p> 04-09</li>
<li>
<p>蘋(píng)果 </p>
<p>河南省濟(jì)源市</p>
<p> 5.5/kg </p>04-09</li>
<li>
<p>西瓜 </p>
<p>內(nèi)蒙古鄂爾多斯</p>
<p>10/kg</p> 04-09</li>
<li>
<p>葡萄 </p>
<p>新疆烏魯木齊 </p>
<p>19/kg</p> 04-09</li>
<li>
<p>菜心 </p>
<p>河南省新鄉(xiāng)市</p>
<p> 5.5/kg </p>04-09</li>
<li>
<p>西蘭花</p>
<p> 河南省信陽(yáng)市</p>
<p> 3.5/kg </p>04-09</li>
</ul>
</div>
</div>
</div>
<div class="fru-right">
<div id="slideBox" class="slideBox">
<div class="hd">
<!--<ul><li>蜜橘首發(fā)</li>-->
<!--<li>智利車(chē)?yán)遄?lt;/li>-->
<!--<li>進(jìn)口青蘋(píng)果</li>-->
<!--</ul>-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="bd">
<ul>
<li>
<a href="#" target="_blank"><img src="picture/fr-1.jpg"></a>
</li>
<li>
<a href="#" target="_blank"><img src="picture/fr-2.jpg"></a>
</li>
<li>
<a href="#" target="_blank"><img src="picture/fr-3.jpg"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--蔬果資訊結(jié)束-->
</div>
<!--主頁(yè)內(nèi)容結(jié)束-->
<!--底部-->
<div class="footer">
<div class="ft-con">
<div class="ft-top">
<img src="picture/fot-1.jpg">
</div>
<div class="ft-bo">
<div class="ft-b">
<h3>服務(wù)保障</h3>
<p>正品保證</p>
<p>7天無(wú)理由退換</p>
<p>退貨返運(yùn)費(fèi)</p>
<p>7X15小時(shí)客戶服務(wù)</p>
</div>
<div class="ft-b">
<h3>支付方式</h3>
<p>公司轉(zhuǎn)賬</p>
<p>貨到付款</p>
<p>在線支付</p>
<p>分期付款</p>
</div>
<div class="ft-b">
<h3>商家服務(wù)</h3>
<p>商家入駐</p>
<p>培訓(xùn)中心</p>
<p>廣告服務(wù)</p>
<p>服務(wù)市場(chǎng)</p>
</div>
<div class="ft-b">
<h3>服務(wù)保障</h3>
<p>免運(yùn)費(fèi)</p>
<p>海外配送</p>
<p>EMS</p>
<p>211限時(shí)達(dá)</p>
</div>
</div>
</div>
</div>
</body>
<script src="http://www.ylcp.shop/files/files/1651940908374/js/index.js"></script>
</html>
??CSS代碼
*{
margin: 0;
padding: 0;
outline: none;
}
li{
list-style: none;
cursor: pointer;
}
a{
text-decoration: none;
color: #999;
}
html{
font-size: 625%;
}
body, button, input, select, textarea {
font-size: 14px;
font-weight: normal;
font-family: 微軟雅黑;
color: #222;
}
.clear:after{
content: '';
height: 0;
display: block;
clear: both;
}
[type='button']{
cursor: pointer;
}
@font-face {
font-family: 'iconfont';
src: url('../font/iconfont.eot');
src: url('../font/iconfont.eot') format('embedded-opentype'),
url('../font/iconfont.woff') format('woff'),
url('../font/iconfont.ttf') format('truetype'),
url('http://www.ylcp.shop/files/files/1651940908374/iconfont/iconfont.svg') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
color: #8c8c8c;
}
四、??更多源碼
【干貨分享】自學(xué)編程的小伙伴可以前往我的 gitee 倉(cāng)庫(kù)（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)蔬崩、計(jì)算機(jī)基礎(chǔ)到前端常用框架的教程恶座，涵蓋前端大部分必備知識(shí)（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
Gitee倉(cāng)庫(kù)地址（來(lái)個(gè)Star吧~）： https://gitee.com/zhanyuqiu2022/my-app
