html5实现宠物图片网站（html，css）

最新推荐文章于 2022-12-05 10:55:29 发布

研24

最新推荐文章于 2022-12-05 10:55:29 发布

阅读量2.5k

点赞数 1

分类专栏：大学生期末设计 HTML 文章标签： html html5 css 宠物

本文链接：https://blog.csdn.net/weixin_62681967/article/details/125520012

版权

本文展示了如何使用HTML5和CSS构建一个宠物图片网站。通过Hbuilder作为开发工具，网站包括小狗Logo、导航链接、搜索框（未实现）、图片展示区域以及广告位。页面设计中，图片链接在鼠标悬停时会改变透明度，底部声明固定在屏幕底部。作者提供了HTML和CSS代码示例，并邀请读者尝试和交流。

摘要由CSDN通过智能技术生成

首先是成品展示

视频展示在主页

开发工具：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:\hbuilder\HBuilderX\readme\photo\images\logo2.png">
	</head>
	<body>
		<div class="header">
		<div class="top">
			<div class="top_hello">
				<!-- <img class="tb1" src="images/tb1.png"/> -->
				<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;