Dreamweaver制作一个网页咖啡店banner/h5+css案例演示/

一、分析结构

本案例实现比较简单,根据下载好的素材结合实际效果图,可以看出使用一个外面的

盒子设置好背景,再将素材放置到内部的
盒子之中

二、样式

1.外层的盒子设置宽度高度以及背景图像的图像样式,背景图像沿水平方向平铺

2.给里面的盒子设置宽度高度,背景图像设为不平铺,但内部盒子和外盒子的左边和上边留出一定空间

三、开始制作
  1. 打开Dreamweaver2021,新建一个HTML5格式文件,并添加title
    Dreamweaver制作一个网页咖啡店banner/h5+css案例演示/_第1张图片

  2. 开始搭建架构,并将素材引入到对应位置

  3. Dreamweaver制作一个网页咖啡店banner/h5+css案例演示/_第2张图片

  4. 引入css样式
    Dreamweaver制作一个网页咖啡店banner/h5+css案例演示/_第3张图片

四、效果展示

代码

doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>咖啡店title>
	<style>
		.out{
			width:900px;
			height: 344px;
			background: url("bg.png") repeat-x;
			margin: 0 auto;
		}
		.in{
			width: 900px;
			height: 344px;
			background: url("coffee.png") no-repeat 42px 30px;
		}


	style>

head>
<body>
	<div class="out">
		<div class="in">
		div>
	div>
body>
html>
//欢迎加我VX进群交流
vx账号:-Sep07

你可能感兴趣的:(css,css3,html)