html+css美食静态网页设计（html5制作美食今日推荐求代码）

本文目录

• html5制作美食今日推荐求代码
• html的css怎么插入美食图片
• html+css网页设计连数据库吗
• 如何用html+css做出这个静态网页 求大神解答
• 简述htmlDIV +CSS网页布局原理

html5制作美食今日推荐求代码

《!DOCTYPE
html》
《html
lang="en"》
《head》
《meta
charset="UTF-8"》
《title》美食今日推荐《/title》
《style
type="text/css"》
.a{font-size:20px;color:
#20db00;}
.b{font-size:24px;color:
rgba(219,
0,
114,
0.85);}
.c{font-size:16px;color:
#ff0000;}
《/style》
《/head》
《body》
《img
src="img7.gif"/》《br/》
《p
class="a"》华仔推荐今日美食套餐全省20%。《br/》《/p》
《img
src="more.gif"/》
《img
src="shen.png"/》《br/》
《h3
class="b"》黄金披萨《/h3》
《img
src="img8.gif"/》《br/》
《p
class="c"》黄金披萨美食套餐原价100美元，现价只要80美元!《/p》《br/》
《h3
class="b"》黄金鸡腿《/h3》
《img
src="img9.gif"/》
《p
class="c"》黄金鸡腿美食套餐原价100美元，现价只要80美元!《/p》《br/》
《p
class="a"》让所有顾客可以开心烹饪今日推荐美味佳肴，烹饪美食。《br/》《/p》
《/body》
《/html》

html的css怎么插入美食图片

首先要将下载好的图片放入css文件夹中；
在CSS中，可以使用background-image属性或background属性来插入图片。background-image属性或background属性可以为元素设置背景图像。初始背景图像(原图像)根据background-position属性的值放置。具体代码如下：
《div id="bgimg"》《/div》
#bgimg {
background: #333 url(图片路径) center center no-repeat;
}
第一个参数，图片底层的背景颜色，第二个参数，图片路径，第三个参数，图片上下的相对位置（其他参数left,right），第四个参数，图片左右的相对位置（top,bottom），第五个参数，图片的重复（其他参数 repeat,repeat-x,repeat-y）

html+css网页设计连数据库吗

连不连数据库，需要看你主要目的是想做什么

如果只是简单的静态页面+css样式修饰页面，不和后台数据有交互的{增删改查操作}，那就不需要连接数据库

如果要将页面的数据进行增加，删除等操作的话，下次页面显示之前过得数据。那就需要连接数据库，对数据库进行操作。

一般连接数据库都是通过java后台代码等连接的，html只是前端展示用的，不直接和数据库交互。

html+css网页设计可以不连数据库。如果使用的是一个静态页面，这个静态页面并不需要注册账号信息，只是展示一些静态的信息，如新闻一些文章，这时候就不需要使用到数据库网页，也就不需要连接到数据库获取数据。如果网页需要用到了登录，则需要连接数据库。

如何用html+css做出这个静态网页 求大神解答

以前我也做过类似的这种静态页面，其实每一块的布局都差不多，做好一个其他的大同小异，下面提供我的思路以供参考(宏观角度)：
第一：先把整体框架搭起来，通过绝对定位确定大的模块的位置。
第二：根据图中每一块的结构来选择table或者其他布局方式。
第三：需要精确的时候可以用div块来调试，出现细节问题可以查资料解决一下。

简述htmlDIV +CSS网页布局原理

方法/步骤
一个网页设计时，我们可以将一个页面设置为头部，中间，和底部三部分； 头部有分为店招（logo）和导航等
中间既内容部分，内容也可一个整体，也可左右分离，
底部来页面结尾，一般写版权信息，友情链接等
END
头部
店招：
《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》淘宝助手网《/title》
《style》
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
《/style》
《/head》
《body》
《div id="top"》
《div id="logo"》店招《/div》
《div id="nav"》导航《/div》
《/div》
《!--------头部------------》
《div id="centre"》
《div id="centreLeft"》内容左《/div》
《div id="centreRight"》内容右《/div》
《/div》
《!--------中间-------------》
《div id="bottom"》底部《/div》
《!-----------底部----------------》
《/body》
《/html》
导航：
《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》淘宝助手网《/title》
《style》
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;den}
ul li{list-style: none;}
#nav》ul》li{ float:left; margin-left: 50px; line-height:30px; }
#nav》ul》li》a{ color:#FFF; font-weight:900px}
《/style》
《/head》
《body》
《div id="top"》
《div id="logo"》店招《/div》
《div id="nav"》
《ul》
《li》《a href="" title="" target="_blank"》淘宝《/a》《/li》
《li》《a href="" title="" target="_blank"》图片《/a》《/li》
《li》《a href="" title="" target="_blank"》视频《/a》《/li》
《li》《a href="" title="" target="_blank"》资料下载《/a》《/li》
《li》《a href="" title="" target="_blank"》视频下载《/a》《/li》
《/ul》
《/div》
《/div》
《!--------头部------------》
《div id="centre"》
《div id="centreLeft"》内容左《/div》
《div id="centreRight"》内容右《/div》
《/div》
《!--------中间-------------》
《div id="bottom"》底部《/div》
《!-----------底部----------------》
《/body》
《/html》
END
内容
《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》淘宝助手网《/title》
《style》
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav》ul》li{ float:left; margin-left: 50px; line-height:30px; }
#nav》ul》li》a{ color:#FFF; font-weight:900px}
/*******===================头====================************/
#centre{ margin:0 auto; width:1200px; height:auto; }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
《/style》
《/head》
《body》
《div id="top"》
《div id="logo"》店招《/div》
《div id="nav"》
《ul》
《li》《a href="" title="" target="_blank"》淘宝《/a》《/li》
《li》《a href="" title="" target="_blank"》图片《/a》《/li》
《li》《a href="" title="" target="_blank"》视频《/a》《/li》
《li》《a href="" title="" target="_blank"》资料下载《/a》《/li》
《li》《a href="" title="" target="_blank"》视频下载《/a》《/li》
《/ul》
《/div》
《/div》
《!--------头部------------》
《div id="centre"》
《div id="centreLeft"》内容左《/div》
《div id="centreRight"》内容右《/div》
《/div》
《!--------中间-------------》
《div id="bottom"》底部《/div》
《!-----------底部----------------》
《/body》
《/html》
END
底部
《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》淘宝助手网《/title》
《style》
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav》ul》li{ float:left; margin-left: 50px; line-height:30px; }
#nav》ul》li》a{ color:#FFF; font-weight:900px}
/*******===================头====================************/
#centre{ margin:0 auto; width:1200px; height:auto; overflow: hidden }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
/***********==============内容===================*******/
#bottom{ margin:0 auto; width:1200px; height:200px; border:1px #333333 solid; margin-top:20px; }
/***********==============底部===================*******/
《/style》
《/head》
《body》
《div id="top"》
《div id="logo"》店招《/div》
《div id="nav"》
《ul》
《li》《a href="" title="" target="_blank"》淘宝《/a》《/li》
《li》《a href="" title="" target="_blank"》图片《/a》《/li》
《li》《a href="" title="" target="_blank"》视频《/a》《/li》
《li》《a href="" title="" target="_blank"》资料下载《/a》《/li》
《li》《a href="" title="" target="_blank"》视频下载《/a》《/li》
《/ul》
《/div》
《/div》
《!--------头部------------》
《div id="centre"》
《div id="centreLeft"》内容左《/div》
《div id="centreRight"》内容右《/div》
《/div》
《!--------中间-------------》
《div id="bottom"》底部《/div》
《!-----------底部----------------》
《/body》
《/html》