HTML&CSS案例

2024-06-19 12:40| 来源: 网络整理| 查看: 265

HTML&CSS案例—咖啡店该案例是从最终效果到实现的过程一，分析页面布局二，做整体布局1. 创建一个站点文件夹，再加上子文件夹2. 先初步输入代码，4部分4< div >,广告后面加三，再前面的基础上将内容的结构再丰富一下，然后将对应的样式再设置一下（其实现在问题已经分解成了一个个小问题，我们在每个部分继续做下去就行了）四，最终效果及源码

该案例是从最终效果到实现的过程一，分析页面布局

首先页面的最左侧是一个广告，采用固定定位；然后最上面header是一个头部，主要是一张图片；下面的nav是一个导航栏，包含五个链接；下面是主体部分，左侧的上面是一个表格，下面是四张图片，当鼠标放到图片上会有一个放大的效果，右侧有4个div是四种咖啡的详细介绍；最下面有一个脚本。

四个部分：header， nav， main， footer，再加一个广告部分，五个部分

二，做整体布局 1. 创建一个站点文件夹，再加上子文件夹

在这里插入图片描述

2. 先初步输入代码，4部分4< div >,广告后面加 Document

再初步定义一下css样式

/*默认样式的清零*/ *{ margin: 0px; padding: 0; } body { font-size:16px; color: #673929; } #container { margin:0 auto; /*水平居中*/ width:900px; } #header { height:220px;/*必须添加，否则header下面有10px而不是5px空白*/ margin-bottom:5px; /*position:relative; 父层定位*/ } #nav{ height:30px; margin:5px; background-color:#09c; font: 18px/30px 微软雅黑; color: #fff; letter-spacing: 2px; text-align: center; } #main{ background:red; height: 2050px;/**/ } #aside { float:left; width:300px; height: 500px; background-color:#6cf; text-align: center; font-size: 14px; } #content{ float:right; width:595px; height: 2050px; margin-bottom:5px; background-color:#cff; } #footer { height:60px; line-height: 60px; background-color:#6cf; clear:both; /*新加代码*/ margin-top: 5px; text-align: center; }

初步效果图

在这里插入图片描述

三，再前面的基础上将内容的结构再丰富一下，然后将对应的样式再设置一下（其实现在问题已经分解成了一个个小问题，我们在每个部分继续做下去就行了）

eg：header部分在这里插入图片描述

在这里插入图片描述

四，最终效果及源码

所用工具为DW

HTML代码

icafe咖啡馆

咖啡MENU| 咖啡COOK| 咖啡STORY| 咖啡NEWS| 咖啡PARTY

咖啡MENU 拿铁Latte 卡布奇诺Cappuccino 摩卡Mocha 浓缩咖啡Espresso 大杯 35 35 35 30 中杯 30 30 30 25 小杯 25 25 25 20

拿铁Caffè Latte

这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。

卡布奇诺Cappuccino

这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。

摩卡Caffè Mocha

这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。

浓缩咖啡Espresso

这是咖啡的精粹，以最浓缩的方式显现。浓缩咖啡带点焦糖味道，浓厚馥郁。

芜湖~~

CSS代码

*{ margin: 0; padding: 0; } body { font-family:"微软雅黑"; font-size:16px; color: #673929; } #container { margin:0 auto; width:900px; } #header { height:220px;/*必须添加，否则header下面有10px而不是5px空白*/ margin-bottom:5px; position:relative; /*父层定位*/ } #icon-list{ position:absolute;/*子层定位*/ top:170px; right: 30px; width: 130px; height: 30px; font-size: 0px; /*background: white;*/ } #icon-list img{ margin-left:5px; } #nav{ height:30px; margin-bottom:5px; background:#09c; font: 18px/30px 微软雅黑; color: #fff; letter-spacing: 2px; text-align: center; } a:link{ color: #fff; text-decoration: none; } a:visited{ color: #fff; text-decoration: none; } a:hover{ color: yellow; text-decoration: none; } a:active{ color: #fff; text-decoration: none; } #main{ background:red; /*margin-bottom:5px;已经坍缩为0,放在子容器内设置*/ } #aside { float:left; width:300px; background:#6cf; text-align: center; font-size: 14px; color: #000; } #aside h2{ margin: 20px; } #imglist{ width: 130px; margin: 0 auto; } .polaroid { width:85px; padding: 10px; background-color: #eee; border:1px solid #BFBFBF; box-shadow:2px 2px 4px #aaa; border-radius: 5px; } .rotate_left { -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ transform:rotate(7deg); } .rotate_right { -ms-transform:rotate(-8deg); /* IE 9 */ -moz-transform:rotate(-8deg); /* Firefox */ -webkit-transform:rotate(-8deg); /* Safari and Chrome */ -o-transform:rotate(-8deg); /* Opera */ transform:rotate(-8deg); } #imglist img{ height: 95px; width: 85px; margin: 0 auto; font-size: 0; } #imglist img:hover{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #content{ float:right; width:595px; margin-bottom:5px; background:#cff; } .subcont{ width: 570px; margin: 10px auto; clear: both; } .subcont img{ margin: 5px; padding: 5px; float: left; border: 1px dashed #000; } .subcont .subtext{ width: 60%; float: left; margin: 5px; } .subcont h2{ margin: 5px; } .subcont p{ font:16px/2em 微软雅黑; } #footer { height:60px; line-height: 60px; background:#6cf; clear:both; /*新加代码*/ margin-top: 5px; text-align: center; } #l-fix{ position: fixed; top:100px; left:5px; } #l-fix img{ height: 100px; width: 100px; }

最终效果在这里插入图片描述

【本文地址】

公司简介

联系我们