爱尚美食网页

用Adobe Dreamweaver CS6 制作

代码如下：

HTML代码：

爱尚美食

简体中文

English

人民币

Dollor

爱尚美食

每日推荐

28yaun

可乐鸡翅

15yaun

提拉米苏

28yaun

糖醋排骨

75yaun

深海龙虾

优惠菜品

微信公众号

49yaun

蒜蓉生蚝

49yaun

东坡肉

15yaun

丝袜蛋糕

50yaun

芝士披萨

今日套餐

特别提示

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

39yaun

咖喱鸡饭

28yaun

排骨饭

20yaun

千层蛋糕

25yaun n

水果蛋糕

版权所有©2019爱尚美食  Email：ASMS@163.com

地址：衡阳市珠晖区衡阳师范学院   联系方式: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%;}

a{

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美食静态网页设计相关推荐

  1. 用HTML+CSS编写一个计科院网站首页的静态网页

    用HTML+CSS编写一个计科院网站首页的静态网页 利用浏览器查看网页源代码,并将一些图片分门别类的下载到本地,然后删除javascript脚本. 项目的文件目录 最终效果 <!DOCTYPE ...

  2. HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码...

    HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...

  3. HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码

    HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...

  4. 什么叫动态网页？什么叫静态网页设计？

    什么叫动态网页?什么叫静态网页设计? 所谓静态网页就是说网页文件中没有程序,只有HTML代码,一般以.html或.htm为后缀名的网页,静态网站内容不会在制作完成后发生变化,任何人访问都显示一样的内容 ...

  5. HTML5+CSS3期末大作业：电影网站设计——黑色扁平的电影工作室静态网页 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

    HTML5期末大作业:电影网站设计--黑色扁平的电影工作室静态HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题 ...

  6. dreamweaver网页设计作业制作 学生个人网页猫眼电影 WEB静态网页作业模板 大学生个人主页博客网页代码 dw个人网页作业成品

    HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

  7. dreamweaver个人网页设计作业 学生个人网页猫眼电影 WEB静态网页作业模板 大学生个人主页博客网页代码 dw个人网页作业成品

    HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

  8. HTML网页表格标签,HTML静态网页（标签、表格）

    HTML静态网页: 打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background 背景壁纸.图片 text 文字颜色 topmargin 上边 ...

  9. web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 WEB静态网页作业模板 个人主页博客网页代码 dw个人网页

    一.网页介绍 1.网页编辑:任意HTML编辑软件(如:Dreamweaver.HBuilder.Vscode .Sublime .Webstorm.Text .Notepad++ )等任意html编辑 ...

  10. python 批量打开网页并截图_Python静态网页爬取：批量获取高清壁纸

    前言 在设计爬虫项目的时候,首先要在脑内明确人工浏览页面获得图片时的步骤 一般地,我们去网上批量打开壁纸的时候一般操作如下: 1.打开壁纸网页 2.单击壁纸图(打开指定壁纸的页面) 3.选择分辨率(我 ...

最新文章

  1. 自然语言处理：汉语分词
  2. pl sql如何调试oracle存储过程,PL/SQL Developer中调试oracle的存储过程
  3. jquery validation对隐藏的元素不进行验证
  4. [MySQL FAQ]系列 -- mysqldump出错一例：打开文件数太多
  5. 不插网线终端缓慢的问题解决办法
  6. 【动画】当我们在读写Socket时，我们究竟在读写什么？
  7. 计算机国三网络技术,计算机国三网络技术.doc
  8. 公司绝不会告诉你的20大秘密 转载
  9. c语言多位数加减,两个超长正整数的加法
  10. axure rp web元件ku_Axure教程丨制作自己的Axure元件库
  11. UE4项目的命名规则
  12. 盘点时间管理方面的一些方法及工具
  13. 马士兵java学习之路
  14. 〖全域运营实战白宝书 - 高转化文案速成篇④〗- 如何撰写摘要型文案？
  15. 计算机系统桌面图标有,电脑桌面图标,教您电脑桌面图标有蓝色阴影怎么去掉...
  16. 苹果手机如何深度清理_安卓手机必备清理软件APP，完全免费超级深度清理
  17. 我的世界android官方版,我的世界Minecraft中国版官方网站——你想玩的，这里都有...
  18. ubuntu设置MySQL密码
  19. Java多线程系列—多线程带来的问题(05)
  20. QP状态机学习①——QP状态机架构

热门文章

  1. Jenkins集成Maven代码覆盖率插件Cobertura
  2. 中值联认证中心推出区块链诚信证书杜绝“炒币”现象
  3. 十分钟深入理解const用法（趣味故事）
  4. 帆软：排序问题（通过设置或者sql）
  5. 如何加速APP在应用商店的审核
  6. 【python版CV】图像轮廓模板匹配
  7. Apache ShardingSphere 4.0.0-RC2发布
  8. Windows权限提升
  9. 20岁与30岁的恋爱观
  10. 计算机中的cnc代表什么意思,CNC是什么意思