Web前端满屋花案例框架
2024-04-17 17:20:04
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>满屋狗</title><link rel="icon" href="../favicon.ico"><style>body{margin-left: auto;margin-right: auto;border: 1px solid #ff47ba;width: 710px;height:900px;}*{margin: 0;padding: 0px}.title h1{border: 1px solid red;height: 60px;width: 100%;text-align:center;padding-top: 35px;background: url("../img/123.jpg");}.dkhh ul {width: 100%;height:30px;list-style: none;margin: 0;padding: 0;background-color: #c4b59d;color: azure;}.dkhh ul li{float: left;font-size: 15px;}.dkhh ul li a{width: 100px;height: 30px;background-color: #c4b59d;display: inline-block;border-left:1px solid #00BFFF;text-align: center;vertical-align: bottom;text-decoration: none;}.dkhh ul li :hover{background-color: yellow;}a{text-decoration: none;}ul{list-style-type: none;}li{list-style-type: none;border-bottom: 1px dashed rgba(201, 69, 148, 0.94);}.left{float: left;padding-left: 20px;width: 220px;}.right{border: 1px dashed #ff47ba;width: 468px;float: left;}h3{width: 100px;border-bottom: 1px solid red;}.kx img{width:150px;height: 100px;}.tj{border: 1px dashed #ff47ba;height: 280px;text-align: center;}.tj img{width: 112px;height: 100px;}.tj .tp{width: 112px;height: 100px;text-align: center;float: left;}.tj #tp2 .tp{margin-top: 30px;}.xp{border: 1px dashed #ff47ba;height: 150px;text-align: center;}.xp .tp{width: 112px;height: 100px;text-align: center;float: left;}.xp img{width: 112px;height: 100px;}</style>
</head>
<body>
<div class="title"><h1>满屋狗</h1>
</div>
<div class="dkhh"><ul><li><a href="#">鲜狗礼品</a></li><li><a href="#">自助订狗</a></li><li><a href="#">绿色植物</a></li><li><a href="#">狗之物语</a></li><li><a href="#">会员中心</a></li><li><a href="#">联系我们</a></li><li><a href="#">支付方式</a></li></ul>
</div>
<div class="left"><form name="denglu"><h3>用户登录</h3><table><tr><td>用户：</td><td colspan="2"><input style="border:0;border-bottom:1px solid black" type="text" name="uname"></td></tr><tr><td>密码：</td><td colspan="2"><input style="border:0;border-bottom:1px solid black" type="text" name="upwd"></td></tr><tr><td><input type="button" name="login" value="登录"></td><td><input type="button" name="redegit" value="注册"></td><td colspan="1"><a href="#">忘了密码</a> </td></tr></table></form><h3>鲜狗分类</h3><ul><li ><a href="#"><b>用途</b></a> <ol><li><a href=""> 爱情鲜狗</a></li><li><a href=""> 生日送狗</a></li><li><a href=""> 新年鲜狗</a></li><li><a href=""> 家庭用狗</a></li><li><a href=""> 亲情用狗</a></li><li><a href=""> 道歉鲜狗</a></li><li><a href=""> 探望祝福</a></li><li><a href=""> 开业商务</a></li><li><a href=""> 婚礼婚庆</a></li></ol></li></ul><ul><li><a href="#"><b>狗材</b></a> <ol><li><a href=""> 玫瑰狗</a></li><li><a href=""> 百合狗</a></li><li><a href=""> 郁金香</a></li><li><a href=""> 太阳狗</a></li><li><a href=""> 康乃馨</a></li><li><a href=""> 马蹄兰</a></li><li><a href=""> 扶朗</a></li><li><a href=""> 剑兰</a></li></ol></li></ul><ul><li><a href="#"><b>价格</b></a> <ol><li><a href=""> 100~200元</a></li><li><a href=""> 200~300元</a></li><li><a href=""> 300~400元</a></li><li><a href=""> 400~500元</a></li><li><a href=""> 500~600元</a></li><li><a href=""> 600~800元</a></li><li><a href=""> 800元以上</a></li></ol></li></ul>
</div>
<div class="right"><div class="kx"><h3>本站快讯</h3><img src="../img/123.jpg"><img src="../img/123.jpg"><img src="../img/123.jpg"></div><div class="tj"><h3>鲜狗推荐</h3><div id="tp1"><div class="tp"><img src="../img/123.jpg"><a href="#"><b>幸福的狗狗</b></a></div><div class="tp"><img src="../img/123.jpg"><a href="#"><b>阳光守护狗</b></a></div><div class="tp"><img src="../img/123.jpg"><a href="#"><b>添狗之殇</b></a></div><div class="tp"><img src="../img/123.jpg"><a href="#"><b>天狗之翼</b></a></div></div><div id="tp2"><div class="tp"><img src="../img/123.jpg"><a href="#"><b>狗蛋儿最幸福</b></a></div><div class="tp"><img src="../img/123.jpg"><a href="#"><b>哮天犬</b></a></div><div class="tp"><img src="../img/123.jpg"><a href="#"><b>追风狗</b></a></div><div class="tp"><img src="../img/123.jpg"><a href="#"><b>双标狗之痕</b></a></div></div></div><div class="xp"><h3>新狗上市</h3><div id="tp3"><div class="tp"><img src="../img/123.jpg"><a href="#"><b>幸福的狗狗</b></a></div><div class="tp"><img src="../img/123.jpg"><a href="#"><b>阳光守护狗</b></a></div><div class="tp"><img src="../img/123.jpg"><a href="#"><b>添狗之殇</b></a></div><div class="tp"><img src="../img/123.jpg"><a href="#"><b>天狗之翼</b></a></div></div></div><div class="dg"><h3>鲜狗导购</h3><ol><li><a href="#">各种鲜狗所代表的含义</a> </li><li><a href="#">养狗之道</a> </li><li><a href="#">狗屎的味道</a> </li><li><a href="#">添狗之暴富</a></li><li><a href="#">早起的狗狗有虫吃</a> </li><li><a href="#">世界各地送狗的习俗</a> </li><li><a href="#">手捧一只小狗等待</a> </li><li><a href="#">狗的喜怒哀乐</a> </li></ol></div>
</div>
</body>
</html>
Web前端满屋花案例框架相关推荐
- 网页编程（满屋花、金山打字、打地鼠）——张渣渣_的学习记录（4）
张渣渣_的学习记录(4)--网页编程(满屋花.金山打字.打地鼠) 满屋花 金山打字 打地鼠 满屋花 效果图如下: (需要素材的话可以dd我) <!DOCTYPE HTML> <htm ...
- web前端自动化测试（基于QT4W框架）
目录 web前端自动化测试(基于QT4W框架) 一.背景 1.1前端测试种类 二.技术方案 三.核心代码 3.1控件封装 3.2操作控件方法实现 3.3测试用例case 3.4断言方法 web前端自动 ...
- HTML+CSS 满屋花
HTML+CSS满屋花制作 ps:logo上面还有,只不过屏幕小而已. HTML代码 <!DOCTYPE HTML> <html><head><meta ch ...
- 转发：11个web前端开发实战项目案例+源码！拿走就是了
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43793782/arti ...
- 重磅：微信官方推出 Web 前端和小程序统一框架
大家好,我是你们的校长. 说实话,小程序真的是越来越火了.而市面上也有很多小程序的开发框架,尤其是针对 Vue 的,大家的想法很简单,就是想通过做 Web 的项目,能不能直接转换成小程序呢?这样,可以 ...
- 用html实现满屋花的网页
需要完成的样式 模仿完成的样式 思路分析 设置一个大的div背景设置为pink 主题分为上下两部分 上部分:图片和导航 下部分:分为左右 左:ul和li 右分为四部分 实验代码 html <!D ...
- web前端学习分享：JavaScript框架
转自:微点阅读 https://www.weidianyuedu.com web前端培训分享JavaScript框架,JavaScript 是开发领域的重要技术之一.根据 Statista 的报告, ...
- 满屋花网页代码_成为更好的程序猿！2020年给网页开发人员的32条建议
全文共3315字,预计学习时长10分钟 来源:Pexels 2019年已经过去了,对开发人员来说是充满挑战和机遇的一年.开发人员们学习和掌握了很多--像React.Vue.Angular和Svelte ...
- web前端 react与vue 流行框架的比较
JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架.但哪一款最适合你? JavaScript越来越受欢迎,许多科技巨头正在从中获益.每天都会出现大量的框架和语言,我 ...
- 【Web前端】彼岸の花——网上花店(网页制作)
本篇博客我们来做一个好看又简单的前端案例--彼岸的花网页界面. 这里是代码和网页素材,需要的自取:(提取码:7777)https://pan.baidu.com/s/1PH0TCuLpapPlJncz ...
最新文章
- position：搜索框显示历史浏览记录
- 2017.9.6 礼物 思考记录
- php csrf攻击教程,HTTP路由实例教程（三）—— CSRF攻击原理及其防护
- （05）FPGA入门条件
- python和java哪个好学-java和python哪个的前途更好？
- DEDE 文章常用标签
- APT攻防整理-常用CVE
- 数据库备分复制到另一台机器
- python期权价格计算器_使用Python构建内在价值计算器
- Strassen矩阵乘法
- 数值计算笔记之数值计算中应注意的问题
- DELL 灵越系列笔记本 1427 更换显示屏
- 华为联手沃达丰建立NB-IoT开放实验室
- 服务器无线网卡ap软件,无线网卡虚拟成无线AP工具(将无线网卡虚拟成无线AP软件) 2017最新版...
- linux配置cookie认证,Nginx配置修改网页cookie属性
- 魏巍专访丨合作半年拓客100+，他是如何做到的？
- re 正则表达式匹配中文
- 职场规则分享，别说你不知道这3个潜规则
- phpstudy+opencart搭建商城网站基本环境
- EBS R12多组织访问控制