首页 > 分享 > html5实现宠物图片网站(html,css)

html5实现宠物图片网站(html,css)

最新推荐文章于 2024-11-09 22:00:00 发布

研24 于 2022-06-29 14:34:13 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

首先是成品展示

视频展示在主页

开发工具:Hbuilder

页面介绍:

标题放了一个小狗logo,背景色被我p掉了,具体方法自行搜索

顶部 top放了一个小狗Logo和一个超链接

头部是一个 小狗图片和平级链接,可以通过链接进入相应页面,最右边是一个搜索框(未实现功能)

中间身体部分就是图片链接,鼠标悬停会有透明度改变,可直接复制图片

绿色部分为广告位,设置为侧部悬停,(成品)包含一个图片超链接

底部声明为固定在底部 ,包含超链接

html代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>宠物图片</title>

<link href="photo.css" rel="stylesheet" type="text/css">

<link rel="shortcut icon" href="D:hbuilderHBuilderXreadmephotoimageslogo2.png">

</head>

<body>

<div class="header">

<div class="top">

<div class="top_hello">

<a class="welcome" href="www.baidu.com">欢迎访问</a>

</div>

</div>

</div>

<div class="mid">

<div class="mid1">

<img src="images/zs.jpg" alt="">

<div class="menu">

<a href="photo.html">狗狗图片</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="photo1.html">猫咪图片</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="###">狗和女孩</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="###">猫和女孩</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="###">狗和风景</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="###">猫和风景</a>&nbsp;&nbsp;&nbsp;&nbsp;

相关知识

宠物狗狗网站 网页设计 html源码 大作业
基于HTML5、DIV与CSS的宠物狗个性化服务网站前端设计与实现
宠物商店宠物网站 网页设计 html源码 大作业
HTML5期末大作业:环境保护网站设计——环境保护
html5宠物网站模板源码
计算机|网页设计 |宠物猫网站的设计与实现主题
宠物救助网站
HTML5期末大作业:宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业
宠物网站设计与实现
Java基于HTML5的“守护萌宠”网站的设计与实现(源码+mysql+文档)

网址: html5实现宠物图片网站(html,css) https://m.mcbbbk.com/newsview890815.html

所属分类:萌宠日常
上一篇: HTML宠物网页设计:大学生保护
下一篇: 探索宠物美容行业的魅力与变革