制作咖啡店的banner

一、相关知识点
- 1、设置背景颜色
- 2、设置背景图像
- 3、设置背景图像平铺
- 4、设置背景图像位置
- 5、设置背景图像固定
- 6、综合设置元素的背景
- - box-shadow属性
二、制作咖啡店的banner

一、相关知识点

1、设置背景颜色

网页元素的背景颜色使用background-color属性来设置

2、设置背景图像

background-color属性实现将图像作为网页元素的背景
例如：

body
{background-image:url(images/jianbian.jpg);
}

3、设置背景图像平铺

默认情况下，背景图像会自动向水平和竖直两个方向平铺。可以通过background-repeat属性来改变

4、设置背景图像位置

background-position属性 //图像位置属性

5、设置背景图像固定

background-attachment属性//图像固定属性

6、综合设置元素的背景

在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在复合属性background中

box-shadow属性

6.1 CSS3中的box-shadow属性可以轻松实现阴影的添加

例如：

box-shawdow: 10px 10px 5px 2px #333;

6.2可以改变阴影的投射方向以及添加多重阴影效果

box-shadow: 5px 5px
10px 2px #999 inset,-5px
-5px 10px 2px #080 inset;

二、制作咖啡店的banner

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="07banner.css">
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

CSS代码：

*{margin: 0;padding: 0;
}
.outer{height: 344px;width: 900px;background: url(07bg.png) repeat-x;margin: 100px auto;box-shadow: 8px 8px 5px #333;
}
.inner{height: 344px;width: 900px;background: url(07coffee.png) no-repeat center 30px;
}

效果图：

制作咖啡店的banner相关推荐

在线制作SprinBoot的banner
在线制作SprinBoot的banner http://patorjk.com/software/taag/
HTML+css+JS制作导航和banner
今天主要讲解一下如何利用HTML.css.js制作导航和banner图,一个整体的网页这两者是少不了的,在我看来应该也是最重要的部分,刚开始学习网页制作时对于小白的我来说其实这一块还是比较难的一点,尤 ...
PS制作六边形蜂窝状banner人物海报
1.新建图层,用多边形工具画出六边形, 设置填充为黑色.选择六边形图层,连续按Ctrl+J复制图层. 2.点击移动工具,移动六边形,并连接起来. 3.选择所有的六边形图层,好了后,按Ctrl+E合并图 ...
“青春树儿童摄影网”首页制作
"青春树儿童摄影网"首页制作一.实验名称: 二.实验日期: 三.实验目的: 四.实验内容: 五.实验步骤: 六.实验结果: 七.源程序: 八.心得体会: 一.实验名称: &quo ...
SpringBoot——关于banner
springboot启动后,控制台会打印一个图案出来,这个图案就叫banner,如果不配置的话打印的是springboot默认的banner,像这个样子: 这个banner是可以通过多种方式自定义的, ...
html网页制作实习,我的网页制作实训报告
我的网页制作实训报告我的网页制作实训报告实验过程 1.资料的搜集,网页制作实习报告. 2.熟悉制作软件. 3.构建站点框架. 打开dremweaver后第一步便是新建站点 4设计主页及二级页面. ...
springboot之banner
Springboot的Banner 1.banner的作用 2.使用banner的方式 2.1.默认banner(不设置任何banner) 2.2.自定义banner(自定义类实现`org.sprin ...
Springboot 启动Banner设置
SpringBoot项目启动时会在控制台打印一个默认的启动图案,这个图案就是我们要讲的banner.看似简单的banner,我们能够对它做些什么呢?本篇文章就带大家深入了解一下banner的使用(版本 ...
3d视觉效果html,用PS 3D功能制作视觉效果不错的球体元素
用PS 3D功能制作视觉效果不错的球体元素 3月 7, 2018 发表于: 视觉设计. 评论 Sponsor 今天分享来自 airisgreen 设计师写的PS教程文章,重点是教大家用 PS 里的 3 ...

制作咖啡店的banner

制作咖啡店的banner

一、相关知识点

1、设置背景颜色

2、设置背景图像

3、设置背景图像平铺

4、设置背景图像位置

5、设置背景图像固定

6、综合设置元素的背景

box-shadow属性

二、制作咖啡店的banner

制作咖啡店的banner相关推荐

最新文章

热门文章