本篇博客我們來做一個(gè)好看又簡單的前端案例——彼岸的花網(wǎng)頁界面。
這里是代碼和網(wǎng)頁素材，需要的自?。?提取碼：7777)https://pan.baidu.com/s/1PH0TCuLpapPlJnczDcGkig?pwd=7777&_at_=1669882863950
目錄
一、案例圖
二、源代碼
2.1 html部分
2.2 css部分
一、案例圖
二、源代碼
2.1 html部分
<body>
<!--標(biāo)題模塊-->
<div class="header">
<h1><strong>彼岸の花</strong> <em>偏安一隅 靜靜生活</em></h1>
<hr size="2" color="#d1d1d1" width="980px" />
</div>
<!--分類模塊-->
<div class="fenlei">
<h2>商品分類 ></h2>
<img src="banner.jpg" alt="網(wǎng)上花店" />
<br /><br />
<p>我喜歡一些花兒，靜靜地開放，從不聲張。小小的花朵，有著異樣的芬芳...</p>
<p>I love flowers, quietly open, never quiet. Little flowers, with the same fragrance...</p>
<br />
</div>
<!--熱賣模塊-->
<div class="bestseller">
<img src="bestseller1.png" alt="" />
<br /><br />
<img src="bestseller2.jpg" alt="" />
<br /><br />
<p class="txt">多肉植物是指植物營養(yǎng)器官肥大的高等植物，<em>通常具根、莖、葉三種營養(yǎng)器官和花、果實(shí)、種子三種繁殖器官</em>。在園藝上，又稱肉質(zhì)植物或多肉花卉，但以多肉植物這個(gè)名稱最為常用。</p>
<p class="txt"><em>全世界共有多肉植物一萬余種</em>，它們絕大部分屬于高等植物（絕大多數(shù)是被子植物）。植物上隸屬幾十個(gè)科，個(gè)別專家認(rèn)為有67個(gè)科中含有多肉植物，但大多數(shù)專家認(rèn)為只有50余科。</p>
<br />
</div>
<!--頁腳模塊-->
<div class="shouhou">
品質(zhì)保障 | 七天無理由退換貨 | 特色服務(wù)體驗(yàn) | 幫助中心
<br /><br />
</div>
<div class="boss">
<img src="tuxiang.gif" alt="網(wǎng)上花店" align="left" />
<h3>店主：Michael_唐僧</h3>
<p>飛舞的花兒像一首詩 ?寫著秋天的心事 ?帶著相思 ?輕輕、輕輕 ?飄向大地 ?</p>
<p>也許這只是秋季里的一場游戲 ?</p>
<br /><br /><br />
</div>
</body>2.2 css部分
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #ededed;
font-family: "楷體";
font-size: 16px;
color: #a5a5a5;
}
.header {
width: 980px;
margin: 0 auto 7px;
height: 86px;
line-height: 86px;
text-align: center;
font-family: "微軟雅黑";
color: #a5a5a5;
}
.header h1 {
font-weight: normal;
}
.header strong {
font-weight: normal;
font-size: 30px;
}
.header em {
font-style: normal;
font-size: 14px;
}
/*fenlei*/
.fenlei {
width: 980px;
margin: 0 auto;
}
.fenlei h2 {
font-size: 14px;
font-family: "微軟雅黑";
color: #a5a5a5;
height: 42px;
line-height: 42px;
}
.fenlei p {
line-height: 30px;
text-align: center;
font-size: 18px;
}
/*bestseller*/
.bestseller {
width: 602px;
margin: 0 auto;
}
.bestseller .txt {
line-height: 30px;
text-indent: 2em;
}
.bestseller .txt em {
font-style: normal;
text-decoration: underline;
}
.shouhou {
width: 602px;
margin: 0 auto;
text-align: center;
font-family: "微軟雅黑";
font-size: 16px;
font-weight: bold;
}
.boss {
width: 602px;
margin: 0 auto;
}
.boss h3,
.boss p {
text-indent: 2em;
}
.boss h3 {
height: 30px;
line-height: 30px;
font-family: "微軟雅黑";
font-size: 18px;
font-weight: normal;
}
.boss p {
font-style: italic;
line-height: 26px;
font-size: 14px;
}
</style>
2.3 效果圖
文章來源：http://www.zghlxwxcb.cn/news/detail-720736.html
最近這幾天在努力學(xué)習(xí)前端的課程，因?yàn)閷W(xué)校的前端課有點(diǎn)跟不上了，所以計(jì)劃中的數(shù)據(jù)結(jié)構(gòu)的博客得拖一拖了。文章來源地址http://www.zghlxwxcb.cn/news/detail-720736.html
到了這里，關(guān)于【W(wǎng)eb前端】彼岸の花——網(wǎng)上花店(網(wǎng)頁制作)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
