如何用HTML制作简单的房屋装饰网
首先分为两个部分
第一部分
制作主页面
我们可以达到的效果是有背景音乐点击创建房屋跳转到下一界面,以下是达到该效果的源代码
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>房屋装饰列表</title></head><body><section> <audio src="1.mp3" hidden="hidden" autoplay="true" preload="auto"></audio></section> <header align="center"> <form action=""> <input type="text" placeholder="请输入关键词"> <button>搜索</button> <a href=" ">创建房屋</a > </form> <a href="">首页</a > <a href="">房屋分类</a > <a href="">注册</a > <a href="">登录</a > </header> <div align="center"> < img src="images\house1.jpg" alt=""> <p>装修设计主要在于样色搭配,大致分为背景色,主体色,点缀色。</p > < img src="images\house1.jpg" alt=""> <p>装修设计主要在于样色搭配,大致分为背景色,主体色,点缀色。</p > </div> <div align="center"> <button >加载更多</button></div></body></html>
第二部分
制作跳转页面
可以输入房屋名称,房间需求,房屋建成时间以及图片等房屋信息进行房屋的构建
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <header align="center"> <form action=""><h3>创建房屋</h3> 房屋名称:<input type="text" placeholder="请输入名称"><br> <select name="" id=""> <option value="单间">单间</option> <option value="多人间">套房</option></select><span><input type="number" min="1" max="2"><br/><br/></span><p>房屋建成时间:<input type="date"><br></p > <p>上传图片:<input type="file" name="" id=""></p > <textarea name="" id="" cols="20" rows="5">输入房屋信息</textarea><br><button>创建</button> </form></header></body></html>
以上就可以制作简单的网页了,你学会了吗,可以根据不同需求做出不同效果哦,大家自己研究吧😉