宠物主题网页 html源码大作业

最新推荐文章于 2023-12-18 09:27:52 发布

老学长毕业设计辅导

最新推荐文章于 2023-12-18 09:27:52 发布

阅读量145

点赞数

分类专栏： html网页作品文章标签：宠物 html 课程设计期末大作业前端网页设计

本文链接：https://blog.csdn.net/m0_37916936/article/details/134339056

版权

html网页作品专栏收录该内容

198 篇文章 15 订阅

订阅专栏

本文展示了如何使用HTML和CSS创建一个宠物主题的网页，包括头部导航、搜索功能、主要内容区块和页脚。内容涉及基本的HTML结构和样式应用。

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

宠物主题网页 html源码大作业

页面个数：8

使用技术：html+css

部分代码：

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>宠物网</title>
    <link href="css/css.css" rel="stylesheet"/>
</head>
<body>
<div class="logo">
	<a href="#"><img src="images/logo.jpg" /></a>
</div>
<div class="nav">
	<ul>
        <li><a href="index.html"><img src="images/nav1.jpg"/>首页</a></li>
        <li><a href="zhidao.html"><img src="images/nav2.jpg"/>养狗知道</a></li>
        <li><a href="jieshao.html"><img src="images/nav3.jpg"/>狗狗介绍</a></li>
        <li><a href="tuji.html"><img src="images/nav4.jpg"/>宠物图集</a></li>
        <li><a href="lingyang.html"><img src="images/nav5.jpg"/>领养宠物</a></li>
        <li><a href="liuyan.html"><img src="images/nav6.jpg"/>在线留言</a></li>
    </ul>
</div>
<div class="topsite">
	<div class="sear" >
        <input type="text" class="text"/>
        <input type="button" class="btn" value="搜索">
    </div>
    <div class="link">
    	<span>热门搜索：</span>
		<a href="#">泰迪</a>
        <a href="#">金毛</a>
        <a href="#">博美</a>
    </div>
</div>
<div class="main">
    <div class="left">
        <div class="gonggao">
            <h3>最新公告</h3>
            <p>3月14号上午，苏州一家注塑加工厂发生火灾。消防员几经尝试，救出狗狗，附近工人称：消防员救狗狗，非常有爱心。</p>
        </div>
    </div>
    <div class="min">
        <div class="pic_show">
        	<img src="images/show1.jpg">
            <img src="images/show2.jpg">
            <img src="images/show3.jpg">
            <img src="images/show4.jpg">
        </div>
    </div>
    <div class="right">
        <div class="login">
        	<a href="zhuce.html">免费注册</a>
            <a href="denglu.html">登录</a>
		</div>
        <div class="right_nav">
        	<h3>宠物狗品种</h3>
        	<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>
                <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>
</div>
<div class="footer">
	<p>宠物网</p>
</div>
</body>
</html>