css和html设计美食网页,HTML+CSS美食静态网页设计

爱尚美食网页

用Adobe Dreamweaver CS6 制作

代码如下：

HTML代码：

爱尚美食

简体中文

English

人民币

Dollor

爱尚美食

每日推荐

28yaun

可乐鸡翅

15yaun

提拉米苏

28yaun

糖醋排骨

75yaun

深海龙虾

优惠菜品

微信公众号

49yaun

蒜蓉生蚝

49yaun

东坡肉

15yaun

丝袜蛋糕

50yaun

芝士披萨

今日套餐

特别提示

请客人保管好自己的财产安全和帐户密码。

39yaun

咖喱鸡饭

28yaun

排骨饭

20yaun

千层蛋糕

25yaun n

水果蛋糕

地址：衡阳市珠晖区衡阳师范学院联系方式:88888888

CSS代码：

@charset "utf-8";/* CSS Document */

margin:0 auto;

padding:0px;

}

body{

height:100%;

width:100%;

font-size:14px;

font-family:"微软雅黑";/*定义文字大小及字号*/

}

header{

background:#F6F6F6;

width:1200px;

height:80px;

margin:0 auto;

position:relative;

}

header div{

float:left;}

.title{

font-family:"华文行楷";

font-weight:bold;

font-size:68px;

text-align:center;

letter-spacing:10px;

line-height:80px;

margin-top:5px;

margin-left:27%;

color:#333;

}

.language_change select{

margin-left:10px;

height:24px;

}

.logo{

height:60px;

width:60px;

margin-top:10px;

background:url(../images/logo.jpg) no-repeat center center;

background-size:100% 100%;

position:absolute;

margin-left:36%;}

text-decoration:none;/*无文本装饰效果*/

color:#06F;}/*可用取色工具取色*/

a:hover{

color:#F00;}

.login_resister{

float:right;

margin-right:10px;

}/*登录注册框架位置*/

.shop_cart{

float:right;/*浮动在右边*/

margin-right:40px;;/*购物车框架位置*/}

.shop_cart a{

padding-left:22px;

background:url(../images/cart.PNG) no-repeat left center;

}

/*列表样式*/

li{

list-style:none;

}

menu{

background:#F6F6F6;

height:70px;

width:1200px;

}

menu>ul{

/*height:70px;*/

float:left;

margin-left:12%;

}

menu>ul>li{

height:35px;

width:150px;

margin-top:30px;

background:#FDEA66;

float:left;

margin-left:2px;

text-align:center;/*文本居中*/

line-height:34px;

}

menu>ul>li>a{

display:inline-blockl;/*设置或检索对象是否及如何显示，内联块元素*/

height:40px;

width:90px;

font-weight:bold;

font-size:20px;

letter-spacing:1em;/*字间距*/

color:#333;

}

menu>ul>li>a:hover{

color:#F0C;}

article{

width:100%;}

.topic1{

height:300px;

width:1200px;

background:#F6F6f6;}

.search{

float:right;

margin-right:30px;

margin-top:30px;

width:230px;

height:180px;

background:#FDEA66;

text-align:center;

}

.search>input{

margin-top:60px;

margin-left:35px;

height:30px;

width:160px;

border:3px solid #06F; /*输入与搜索边框颜色*/

float:left;

background:#fee;

}

.search>input:last-child{

margin-top:10px;

margin-left:65px;

height:30px;

width:110px;

border:3px solid #06F; /*输入与搜索边框颜色*/

background:#fee; /*字体背景颜色*/

float:left;

color:#06F; /*字体颜色*/

letter-spacing:0.2em;

font:bold 22px/24px "华文行楷";}

.topic1 p{

height:30px;

width:30px;

background:url(../images/xlogo.png) no-repeat center;

background-size:100% 100%;

margin-left:20px;

margin-top:10px;

display:inline-block;}

.topic1 h1{

font-family:"华文行楷";

font-size:38px;

color:#06F;

display:inline-block;}

.topic1 a{

display:inline-block;}

.topic1 ul{

margin-left:30px;

position:absolute;}

.topic1 ul li{

float:left;

margin-right:20px;

}

.topic1 ul li img{

height:150px;

width:200px;}

.topic1 ul li img:hover{

border:5px solid #F00;}

.topic1 ul li span{

display:block;

text-align:center;

font-family:"华文行楷";

font-size:20px;

color:#F00;}

.topic1 ul li h5{

text-align:center;

font-family:"华文行楷";

font-size:22px;

color:#6C0;}

.topic2{

height:300px;

width:1200px;

background:#F6F6f6;}

.shaoma{

float:right;

margin-right:30px;

margin-top:30px;

width:230px;

height:260px;

background:#FDEA66;

font:bold 22px/24px "华文行楷";

text-align:center;

display:block;}

.shaoma h2{

font-family:"华文行楷";

font-size:45px;

color:#06F;

margin-top:20px;}

.shaoma img{

display:block;

float:right;

height:180px;

width:180px;

background-size:100% 100%;

margin-top:1px;

margin-right:25px;}

.topic2 p{

height:30px;

width:30px;

background:url(../images/xlogo.png) no-repeat center;

background-size:100% 100%;

margin-left:20px;

margin-top:10px;

display:inline-block;}

.topic2 h1{

font-family:"华文行楷";

font-size:38px;

color:#06F;

display:inline-block;}

.topic2 a{

display:inline-block;}

.topic2 ul{

margin-left:30px;

position:absolute;}

.topic2 ul li{

float:left;

margin-right:20px;

}

.topic2 ul li img{

height:150px;

width:200px;}

.topic2 ul li img:hover{

border:5px solid #F00;}

.topic2 ul li span{

display:block;

text-align:center;

font-family:"华文行楷";

font-size:20px;

color:#F00;}

.topic2 ul li h5{

text-align:center;

font-family:"华文行楷";

font-size:22px;

color:#6C0;}

.topic3{

height:300px;

width:1200px;

background:#F6F6f6;}

.tishi{

float:right;

margin-right:30px;

margin-top:30px;

width:230px;

height:160px;

background:#FDEA66;

font:bold 22px/24px "华文行楷";

text-align:center;

color:#06F;}

.tishi h2{

color:#06F;

margin-top:20px;}

.topic3 p{

height:30px;

width:30px;

background:url(../images/xlogo.png) no-repeat center;

background-size:100% 100%;

margin-left:20px;

margin-top:10px;

display:inline-block;}

.topic3 h1{

font-family:"华文行楷";

font-size:38px;

color:#06F;

display:inline-block;}

.topic3 a{

display:inline-block;}

.topic3 ul{

margin-left:30px;

position:absolute;}

.topic3 ul li{

float:left;

margin-right:20px;

}

.topic3 ul li img{

height:150px;

width:200px;}

.topic3 ul li img:hover{

border:5px solid #F00;}

.topic3 ul li span{

display:block;

text-align:center;

font-family:"华文行楷";

font-size:20px;

color:#F00;}

.topic3 ul li h5{

text-align:center;

font-family:"华文行楷";

font-size:22px;

color:#6C0;}

footer{

width:1200px;

height:60px;

/*margin-top:10px;*/

text-align:center;

background:#F6F6F6;} /*调整页脚高度宽度及顶部间距把页脚居中*/

.footer p:first child a{

display:inline-block;

width:120px;

line-height:20px;

text-align:center;

border-right:1px solid #CCC;

}

.footer p:first child a:last child{

border-right:none;}

.footer p{

line-height:180px;

text-align:center;

color:#CCC;}

页面如下图：

博主附赠：

鉴于有很多小白私信我，做出来的页面和我的不一样。我给出详细操作步骤。

1、首先，新建一个文件，名字可以随便取，我这里的文件名叫：爱尚美食网页。在爱尚美食网页文件夹里面还需要有一个 css文件夹，一个images文件夹，和一个index.html文件。如下图所示：

2、然后将上面 ↑ 的 html 代码复制粘贴到你的index.html 文件里面。这边建议初学小白可以使用记事本打开index.html ，然后将我上面的html代码粘上。点击保存即可。如下图：

3.接下来，打开你刚刚新建的css文件夹，新建一个文本文件。将后缀.txt修改成.css。我这里的命名是 index.css(注意.css是文件后缀哦)。然后使用记事本打开index.css文件，将我上面的css代码复制粘贴到里面，点击保存即可。如下图：

4、完成上述步骤基本上成功大一半了，最后就是图片了。你们想用自己的也行，想用我的也行。下面贴上我的图片地址，方便你们下载使用。

链接：https://pan.baidu.com/s/1tf062bkkTeBqLNDFjT3duw

提取码：v7c8

这个文件夹下下来，解压是一个images文件夹，你可以覆盖你的images文件夹。至此，大功告成。

css和html设计美食网页,HTML+CSS美食静态网页设计相关推荐

用HTML+CSS编写一个计科院网站首页的静态网页
用HTML+CSS编写一个计科院网站首页的静态网页利用浏览器查看网页源代码,并将一些图片分门别类的下载到本地,然后删除javascript脚本. 项目的文件目录最终效果 <!DOCTYPE ...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
什么叫动态网页？什么叫静态网页设计？
什么叫动态网页?什么叫静态网页设计? 所谓静态网页就是说网页文件中没有程序,只有HTML代码,一般以.html或.htm为后缀名的网页,静态网站内容不会在制作完成后发生变化,任何人访问都显示一样的内容 ...
HTML5+CSS3期末大作业：电影网站设计——黑色扁平的电影工作室静态网页学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:电影网站设计--黑色扁平的电影工作室静态HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题 ...
dreamweaver网页设计作业制作学生个人网页猫眼电影 WEB静态网页作业模板大学生个人主页博客网页代码 dw个人网页作业成品
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
dreamweaver个人网页设计作业学生个人网页猫眼电影 WEB静态网页作业模板大学生个人主页博客网页代码 dw个人网页作业成品
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
HTML网页表格标签,HTML静态网页（标签、表格）
HTML静态网页: 打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background 背景壁纸.图片 text 文字颜色 topmargin 上边 ...
web前端期末大作业 html+css+javascript网页设计实例企业网站制作 WEB静态网页作业模板个人主页博客网页代码 dw个人网页
一.网页介绍 1.网页编辑:任意HTML编辑软件(如:Dreamweaver.HBuilder.Vscode .Sublime .Webstorm.Text .Notepad++ )等任意html编辑 ...
python 批量打开网页并截图_Python静态网页爬取：批量获取高清壁纸
前言在设计爬虫项目的时候,首先要在脑内明确人工浏览页面获得图片时的步骤一般地,我们去网上批量打开壁纸的时候一般操作如下: 1.打开壁纸网页 2.单击壁纸图(打开指定壁纸的页面) 3.选择分辨率(我 ...

css和html设计美食网页,HTML+CSS美食静态网页设计

css和html设计美食网页,HTML+CSS美食静态网页设计相关推荐

最新文章

热门文章