今天记录学习的设计网站首页的咖啡菜单，综合运用所学习的html，css背景，文本，字体，链接，表格，盒子，选择器，定位，以及css3的阴影，圆角边框，2d变换等内容。
㈠咖啡菜单整体样式
运用html和css知识做出来的整体效果图，如下图所示：
⑴左侧的小咖啡图片是广告位，不随页面变动而变动；
⑵表头部分右下角采用层定位放置四个小图标；
⑶导航栏部分放置五个链接，采用伪类链接方式，鼠标悬停在链接上颜色为黄；
⑷主体部分分为左右两栏，在左侧边栏设计了一个表格，上面放置价格表；
⑸下面采用2d变换，阴影效果，圆角边框设置四个图片，第一张和第三张顺时针旋转7度，第二张那个和第四张逆时针旋转7度；
⑹这个旋转方式也可以采用奇偶选择器进行设计；
⑺在右侧主体部分采用浮动定位进行图片的位置设定和文字设定，图片边框采用虚线设计；
⑻在页脚部分采用清除两侧浮动进行设计；
⑼以上就是这个咖啡菜单网页的主要设计。
㈡html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>icafe咖啡馆</title> 6 <link rel="stylesheet" href="css/style.css" /> 7 </head> 8 <body> 9 10 <div id="container"> 11 12 <div id="header"> 13 <p> <img src="images/banner.jpg"></p> 14 <div id="icon-list"> 15 <img src="images/1.bmp"> 16 <img src="images/2.bmp"> 17 <img src="images/3.bmp"> 18 <img src="images/4.bmp"> 19 </div> 20 </div> 21 22 <div id="nav"> 23 <p> 24 <a href="#">咖啡MENU</a>| 25 <a href="cook.html">咖啡COOK</a>| 26 <a href="#">咖啡STORY</a>| 27 <a href="#">咖啡NEWS</a>| 28 <a href="#">咖啡PARTY</a> 29 </p> 30 </div> 31 32 <div id="main"> 33 <div id="aside"> 34 <h2>咖啡MENU</h2>
最低0.47元/天 解锁文章
4423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
