国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 網(wǎng)頁(yè)設(shè)計(jì)——美食博客

網(wǎng)頁(yè)設(shè)計(jì)——美食博客

時(shí)間:2023-09-28 15:42:02 | 來源:網(wǎng)站運(yùn)營(yíng)

時(shí)間:2023-09-28 15:42:02 來源:網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)——美食博客:

美食博客

作品文件

home頁(yè)面效果

home頁(yè)面相關(guān)代碼

<div class="container"> <div class="banner-body-content"> <div class="col-xs-3 banner-body-left"> <div class="logo"> <h1><a href="index.html">Great <span>Taste</span></a></h1> </div> <div class="top-nav"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1"> <nav class="stroke"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html"><i class="home"></i>Home</a></li> <li><a href="photos.html" class="hvr-underline-from-left"><i class="picture1"></i>Photos</a></li> <li><a href="blog.html" class="hvr-underline-from-left"><i class="edit1"></i>Blog</a></li> <li><a href="short-codes.html" class="hvr-underline-from-left"><i class="text-size1"></i>Short Codes</a></li> <li><a href="mail.html" class="hvr-underline-from-left"><i class="envelope1"></i>Mail US</a></li> </ul> </nav> </div> </nav> </div> </div>

photo頁(yè)面效果

photo頁(yè)面相關(guān)代碼

<div class="latest-news"> <h2>Latest News</h2> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Michael Vol </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Andrew Rich </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Rita Rock </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry. </div> </div> </div> </div> <div class="join"> <a href="single.html">Learn More</a> </div> <h3>Benefits</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div>

blog頁(yè)面效果

blog頁(yè)面相關(guān)代碼

<div class="col-xs-9 banner-body-right"> <div class="gallery-head"> <h5>Blog</h5> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born.</p> </div> <div class="blog"> <div class="blog-grid"> <div class="col-xs-4 blog-grid-left"> <a href="single.html"><img src="images/1.jpg" alt=" " class="img-responsive" /></a> </div> <div class="col-xs-8 blog-grid-right"> <h4><a href="single.html">sint occaecat cupidatat non proident</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p> <a href="single.html"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span></a> </div> <div class="clearfix"> </div> </div> <div class="blog-grid"> <div class="col-xs-4 blog-grid-left"> <a href="single.html"><img src="images/2.jpg" alt=" " class="img-responsive" /></a> </div> <div class="col-xs-8 blog-grid-right"> <h4><a href="single.html">Sed ut perspiciatis unde omnis iste natus</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p> <a href="single.html"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span></a> </div> <div class="clearfix"> </div> </div> <div class="blog-grid"> <div class="col-xs-4 blog-grid-left"> <a href="single.html"><img src="images/3.jpg" alt=" " class="img-responsive" /></a> </div> <div class="col-xs-8 blog-grid-right"> <h4><a href="single.html">At vero eos et accusamus et iusto odio</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p> <a href="single.html"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span></a> </div> <div class="clearfix"> </div> </div> </div>

short codes頁(yè)面效果

short codes頁(yè)面相關(guān)代碼

<div class="grid_3 grid_5"> <h3>Buttons</h3> <h1> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h1> <h2> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h2> <h3> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h3> <h4> <a href="#"><span class="label label-default">Default</span></a> <a href="#"><span class="label label-primary">Primary</span></a> <a href="#"><span class="label label-success">Success</span></a> <a href="#"><span class="label label-info">Info</span></a> <a href="#"><span class="label label-warning">Warning</span></a> <a href="#"><span class="label label-danger">Danger</span></a> </h4></div>

mail頁(yè)面效果

mail頁(yè)面相關(guān)代碼

<div class="mail"> <div class="mail-grid1"> <h3>Contact <span>Info</span></h3> <p>Voluptatem accusantium doloremque laudantium.</p> <ul> <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>Phone<span>+8 (213) 746 820 82</span></li> <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i>Email<a href="mailto:info@example.com">info@example.com</a></li> </ul> <ul> <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>Address<span>PO Box 7784 Diamonds street, Los Angeles, California, US.</span></li> </ul> </div> <div class="mail-grid1"> <h3>Send a <span>Message</span></h3> <p>Voluptatem accusantium doloremque laudantium.</p> <form> <input type="text" placeholder="Name" required=" "> <input type="email" placeholder="Email" required=" "> <div class="clearfix"> </div> <input type="text" placeholder="Subject" required=" "> <textarea placeholder="Type Your Text Here...." required=" "></textarea> <input type="submit" value="Submit"> </form> </div> </div>ps:由于篇幅較大無法全部展示,可關(guān)注微信公眾號(hào)《IT的世界》獲取源代碼。該作品僅供學(xué)習(xí)參考

關(guān)鍵詞:設(shè)計(jì)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉