网页设计——美食博客
2024-05-07 15:09:12
文章目录
- 美食博客
- 作品文件
- home页面效果
- home页面相关代码
- photo页面效果
- photo页面相关代码
- blog页面效果
- blog页面相关代码
- short codes页面效果
- short codes页面相关代码
- mail页面效果
- mail页面相关代码
美食博客
作品文件
home页面效果
home页面相关代码
<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页面效果
photo页面相关代码
<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页面效果
blog页面相关代码
<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="data: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="data: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="data: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页面效果
short codes页面相关代码
<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><h5><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></h5><h6><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></h6></div>
mail页面效果
mail页面相关代码
<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：由于篇幅较大无法全部展示，可关注微信公众号《IT的世界》获取源代码。该作品仅供学习参考
网页设计——美食博客相关推荐
- HTML5期末大作业：个人介绍/个人主页/网页设计——个人博客 (11页) HTML+CSS+JavaScript
HTML5期末大作业:个人介绍/个人主页/网页设计--个人博客 (11页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见 ...
- HTML5期末大作业：博客网页设计——个人博客5页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:博客网页设计--个人博客5页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有 个 ...
- 个人博客网页设计_博客个人网页制作网页设计-1
CSS3仿Flash动画个人博客模板是一款横向全屏切换的个人博客模板.
- HTML5+CSS期末大作业：个人博客网站设计——个人博客(7页) 学生DW网页设计作业成品 web课程设计网页规划与设计 简单的静态网页制作
HTML5+CSS期末大作业:个人主页/个人介绍网站设计--个人博客(7页) 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人. 美食. 公 ...
- HTML+css前段美食博客（期末大作业）内有源代码
提示:参考时,可加入自己的想法,可在评论区给我留言. 文章目录 前言 一.网页效果 二.代码展示 1.HTML 2.css 总结 前言 此为美食博客,虽然简洁但我会在后面一点点不断完善.相遇即是缘分, ...
- 第二节认识计算机教案,第二章 第二节 局域网的构建 教学设计_博客
<第二章 第二节 局域网的构建 教学设计_博客>由会员分享,可在线阅读,更多相关<第二章 第二节 局域网的构建 教学设计_博客(3页珍藏版)>请在装配图网上搜索. 1.第二章 ...
- 模仿 Github设计一个博客网站的 API
REST API的介绍 REST全称为Representational State Transfer,是表现层状态转化的意思.REST API 是前后端分离最佳实践,是开发的一套标准或者说是一套规范, ...
- JAVA课程设计个人博客 学生成绩管理 201521123014 黄绍桦
JAVA课程设计个人博客 学生成绩管理 201521123014 黄绍桦 1. 团队课程设计博客链接 http://www.cnblogs.com/kawajiang/p/7062407.html 2 ...
- Html网页设计-美食网站
项目运行截图 资料说明 Html网页设计-美食网站
最新文章
- Nginx 做图片服务器
- Linux负载均衡--LVS（IPVS）
- IP地址与网络上的其他系统有冲突
- axios 跨域代理
- MATLAB Robotic Toolbox 机器人工具箱示例
- opencv画框返回坐标 python_20行Python代码实现视频字符化
- [xPlugins] 开发中常用富文本编辑器介绍
- linux就该这么学第八课
- 【原创】Elasticsearch无宕机迁移节点
- Android开发之OkHttp3.4.x
- DIY购车入门5步法则
- MapReduce 的架构
- 读书笔记 -《硅谷之火》《硅谷热》
- decklink linux 驱动下载,Blackmagic Design DeckLink采集卡驱动
- 小编为你简单介绍基本ERP管理系统模块
- mui 与vue 混合开发的可行性分析
- 七周成为数据分析师 第六周：统计学
- 腾讯QQ邮箱、网易163邮箱配置客户端（Windows自带邮件）教程
- supervisor详解-苏坡外泽
- zabbix代理服务器配置