Web前端期末大作业---响应式绿色畜牧业肉食网页设计（HTML+CSS+JavaScript）实现_奥斯卡期末网页设计

2401_85124764

于 2024-06-19 12:35:07 发布

阅读量109

点赞数 2

文章标签：前端课程设计 html

本文链接：https://blog.csdn.net/2401_85124764/article/details/139799541

版权

产品简介：

新闻中心：

联系我们：

项目组织结构：

主要源码展示：

index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link href="/demo1016/skin/css/webstyle.css" rel="stylesheet" type="text/css" />
    <title>绿色畜牧肉类食品行业模板(带手机端)</title>
    <meta name="keywords" content="" />
 
</head>

<body>
    <!--header start-->
    <div class="logo min_w">
        <div class="container">
            <div class="logo_l fl"><img src="/demo1016/skin/img/logo.png"></div>
            <div class="logo_r fr">
                <div class="logo_r fr"> 联系电话：400-888-8888 </div>
            </div>
            <div class="cl"></div>
        </div>
    </div>
    <div class="nav min_w">
        <div class="container">
            <ul class="nav_list">
                <li><a href="/demo1016/" target="">首页</a> </li>
                <li><a href="http://demoall.admin868.com/demo1016/a/about/" target="">关于我们</a>
                

                                    <div class="news_list_l fl">做你自己，不要刻意去取悦别人<span>如果我们把自己的心的主权全部交给了别人，别人就不会珍惜，并且随时有可能摧毁它。 我相信，每个人都痛恨过自己，时常有那么一瞬间，自己做出来的事情，说出来的话，连自己都...</span></div>
                                    <div class="news_list_r fr"><img  width="160" height="105"><span>点击查看 ></span></div>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <div class="news_list_l fl">藏，是懂得最深的慈悲<span>裁一帛光阴，写一阕旧词，字里行间，蕴着清风明月的境，含了幽篁篱菊的情，读在眼眸里，便是一段故事，读在往事中，便是一曲心音，读在岁月里，便是一林静好。 红尘漫漫，吹不...</span></div>
                                    <div class="news_list_r fr"><img src="" width="160" height="105"><span>点击查看 ></span></div>
                                </a>
                            </li>
                            <li>
                                <a">
                                    <div class="news_list_l fl">如此善良的坏人<span>朋友的表姐是开出租车的。 那天她不幸被四个强悍的歹徒绑架到一个荒僻、偏远的地方。寒冬、深夜敌我力量的反差，情况之危急可想而知。 朋友的表姐一边慢慢和歹徒周旋，一边想...</span></div>
                                    <div class="news_list_r fr"><img src="" width="160" height="105"><span>点击查看 ></span></div>
                                </a>
                            </li>
                            <li>
                     
                                    <div class="news_list_l fl">戒贪<span>电视上，又在报道关于二套房、三套房贷款的问题。有钱人就是好啊，可以买二套房、三套房，而很多小老百姓，连首套房子也买不起。 也是电视上报道，说北京很多小区，入住率还不...</span></div>
                                    <div class="news_list_r fr">

style.css

.nav_list li {
    width: 160px;
    float: left;
    text-align: center;
    font-size: 16px;
    color: #fff;
    position: relative;
    line-height: 54px
}

.nav_list li span {
    display: block;
    font-size: 8px;
    color: #fff;
}

.nav_list li a {
    color: #fff;
}

.nav_list li ul {
    padding-bottom: 5px;
    margin: 0 auto;
    width: 122px;
    position: absolute;
    top: 53px;
    left: 19px;
    display: none;
    z-index: 99999
}

.nav_list li ul li {
    width: 122px;
    padding: 5px 0;
    float: none;


**对象篇**

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWIxMTdmNzMyNDJlZjAyMDM?x-oss-process=image/format,png)

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWU5ZGY5NGRhODZhZGZjNjY?x-oss-process=image/format,png)

**模块化编程-自研模块加载器**



![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWUyNWEzOGRhNTU1NTBmOGY?x-oss-process=image/format,png)



![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LTQ5MGM2MTlhOTI5YjY3Y2U?x-oss-process=image/format,png)