web前端简单html期末考核作业设计参考——关于环保主题设计

柔情只为你懂 2024-04-17 11:37 38阅读 0赞

## 效果图 ##

`提示：以下内容仅供参考：`

![在这里插入图片描述][e64521b32b9c4ba4b6ece8e5f7b9ad6b.png]  
![在这里插入图片描述][72c018a3773f4f05aa378771df6fa870.png]

--------------------

`希望以下内容可以给予学习参考`

## .html文件 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>绿色文明</title>
        <link rel="icon" href="images/图标.png">
        <link rel="stylesheet" type="text/css" href="结业外部css.css">
    </head>
    <body>
    
        <div id="entirety">
            
            <div id="header">
                <div>
                    <div class="header02"><p class="p_text02"><img src="images/图标.png" alt="绿色文明" class="image01"></p></div>
                    <div class="header03">
                        <div class="header05 p_color"><p class="p_text01"><a href="#" target="_blank">网站首页</a></p></div>
                        <div class="header05"><p class="p_text01"><a href="#" target="_blank">意识提升</a></p></div>
                        <div class="header05"><p class="p_text01"><a href="#" target="_blank">减少污染</a></p></div>
                        <div class="header05"><p class="p_text01"><a href="#" target="_blank">节约资源</a></p></div>
                        <div class="header05"><p class="p_text01"><a href="#" target="_blank">资讯中心</a></p></div>
                        <div class="header05"><p class="p_text01"><a href="#" target="_blank">售后服务</a></p></div>
                        <div class="header05"><p class="p_text01"><a href="#" target="_blank">新闻动态</a></p></div>
                        <div class="header05"><p class="p_text01"><a href="#" target="_blank">关于我们</a></p></div>
                    </div>
                    
                    <div class="">
                        <div class="dropdown" style="float:left;">
                            <button class="dropbtn"><img src="images/e93ebbbdc3008e5612561bb441fc153f1bc214fc1ab4-p5JNWP.png" alt="搜索" class="image04"></button>
                            <div class="dropdown-content">
                                <form action="http://www.baidu.com/s" target="_blank" method="get">
                                    <input type="text" placeholder="请输入关键词" name="word" class="text">
                                    
                                </form>
                              
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="content">
                <div class="content01"></div>
                <div class="content02">
                    <a href="#" target="_blank"><img src="images/zhu.png" alt="环保" class="image02"></a>
                    <div class="content06">
                        <img src="images/点赞图标.png" alt="好评" class="image03">
                        <p class="p_text04">同顶一片蓝天，共护一方水土</p>
                    </div>
                </div>
            </div>
    
            
            <div class="footer">
                <div>
                    
                    <div class="to_kaito">
                        <div class="to_kaito_divto">
                            <a href="#" class="to_kaito_a"><img src="images/尾部.png" alt="" class="to_kaito_img"></a>
                        </div>
                        <div class="to_kaito_divzhong">
                            <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>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="zhong">
                        
                        <div class="zhong_biao">
                                <div class="zhong_biao_divimg"><img src="images/声音.png" alt="mxx"></div>
                                <div class="zhong_biao_divp"><p>一切顺乎自然的东西都是美好的。</p></div>
                        </div>
                        
                        <div class="zhong_zhong">
                            <div class="zhong_zhong_divtop">
                                <div class="zhong_zhong_divtop_div01">
                                    <div class="zhong_zhong_divtop_a">
                                        <div class="zhong_zhong_divtop_a0">
                                            <img src="images/电话图标.png" alt="" class="dianhuan_img"><a href="" class="quchushuxin_c">1234567891</a>
                                        </div>
                                    </div>
                                    <div class="zhong_zhong_divtop_b">
                                        <a href="#" class="quchushuxin_a"><img src="images/飞机.png" alt=""><b>邮箱</b>: 123456789@qq.com</a>
                                        <a href="#" class="quchushuxin_b"><img src="images/信.png" alt=""><b>地址</b>: 详细地址</a>
                                    </div>
                                </div>
                                <div class="zhong_zhong_divtop_div02">
                                	<div class="zhong_zhong_divtop_t">
                                    <h4>咨询中心</h4>       
                                	<ul>
                                    	<li><a href="#">企业要闻</a></li>
                                    	<li><a href="#">企业要闻</a></li>
                                    	<li><a href="#">企业要闻</a></li>
                                    </ul>
                                    </div>
                                	<div class="zhong_zhong_divtop_t">
                                    <h4>售后服务</h4>       
                                	<ul>
                                    	<li><a href="#">匹配度</a></li>
                                    	<li><a href="#">云智能</a></li>
                                    	<li><a href="#">回顾客</a></li>
                                    </ul>
                                    </div>
                                	<div class="zhong_zhong_divtop_t">
                                    <h4>关于我们</h4>       
                                	<ul>
                                    	<li><a href="#">荣誉资源</a></li>
                                    	<li><a href="#">发展历程</a></li>
                                    	<li><a href="#">联系我们</a></li>
                                    </ul>
                                    </div>
                                	<div class="zhong_zhong_divtop_t">
                                    <h4>新闻动态</h4>       
                                	<ul>
                                    	<li><a href="#">最新报道</a></li>
                                    	<li><a href="#">行业新闻</a></li>
                                    	<li><a href="#">常见问题</a></li>
                                    </ul>
                                    </div>
                                                                 
                                </div>
                            </div>
                            <div class="zhong_zhong_divbottom">
                                <div class="zhong_zhong_divbottom_kuang1">
                                    
                                    <span><img src="images/人像.png" alt="" class="l_img"> </span>
                                    <span class="l_text1" >姓名</span>
                                    <span class="l_text">：</span>
                                </div>
                                <div class="zhong_zhong_divbottom_kuang2">
                                    
                                    <span><img src="images/电话.png" alt="" class="l_img"> </span>
                                    <span class="l_text1" >电话</span>
                                    <span class="l_text">：</span>
                                </div>
                                <div class="zhong_zhong_divbottom_kuang1">
                                    
                                    <span><img src="images/信息.png" alt="" class="l_img"> </span>
                                    <span class="l_text1" >留言</span>
                                    <span class="l_text">：</span>
                                </div>
                                <div class="zhong_zhong_divbottom_kuang2">
                                    
                                    <span><img src="images/锁.png" alt="" class="l_img"> </span>
                                    <span class="l_text1" >验证码</span>
                                    <span class="l_text">：</span>
                                </div>
                                
                            </div>
                        </div>
                        <div class="zhong_footer">
                            <img src="" alt="二维码">
                        </div>
                        
                    </div>
                    
                    <div class="div_footer">
                        <ul>
                            <li><a href="#">Copyright</a></li>
                            <li><a href="#">2023-2024</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="#">客服：000012356</a></li>
                            <li><a href="#">|</a></li>
                            <li><a href="#">创作站点：校园</a></li>
                        </ul>
                    </div>
                </div>
            </div>
    
        </div>
    </body>
    </html>

--------------------

## .CSS文件 ##

/* 全局样式 设置整个页面公共的样式 */
    /* 去掉元素自带的外边距和内边距 */
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{
        margin: 0;padding: 0;}
    /* 去掉项目符号 */
    li{
        list-style-type:none;}
    /* 去掉下划线 */
    a{
        text-decoration: none;}
    /* 去掉边框 */
    img,input,button{
        border:none;vertical-align:middle;}
    /* 给body设置元素内容水平居中   背景颜色 */
    body{
        text-align: center;background-color: #f4f4f4;}
    
    /* 全局属性 */
    #entirety{
        
        width: 100%;
        height: 8000px;
        background-color: white;
    }
    /* #slide{
        position: relative;
        animation-name: slide;
        animation-duration: 1s;
    }
    @keyframes slide {
        from{left:0;}
        to{left:100%;}
    } */
    body{
        
        scroll-behavior: initial;
    }
    /* 主页导航 */
    #header{
        
        width: 100%;
        height: 75px;
    
    }
        /* 头 */
        .header02{
        
            width: 30%;
            height: 75px;
            float: left;
            background-color:white;
        }
        .header03{
        
            width: 55%;
            height: 75px;
            padding: auto;
            float: left;
        }
        /* 内部 */
        .header05{
        
            /* 垂直并水平居中 */
            align-items: center;
            justify-content: center;
            display: flex;
            padding: auto;
            width: 12.5%;
            height: 100%;
            background-color:white;
            float: left;
        }
        .p_color{
        background:#4CAF50;}
        .header05 a{
        
            padding: 30px 20px;
        }
        .header05 a:link{
        color:#000000;}
        .header05 a:visited{
        color:#000000;}
        .header05 a:hover{
        background:#4CAF50;}
    
        .image01{
        
            width: 50px;
            height: 50px;
            position: absolute;
            top: 10px;
            left: 150px;
        }
        .image02{
        
            width: 350px;
            position: absolute;
            top: 300px;
            bottom: 300px;
        }
        .image03{
        
            width: 40px;
            position: absolute;
            top: 200px;
            right: 110px;
        }
        .p_text01{
        
    
            text-align: center;
        }
        .p_text02{
        
            align-items: left;
            justify-content: left;
            display: flex;
            padding: auto;
        }
        .p_text03{
        
            align-items: center;
            justify-content: center;
            display: flex;
            padding: auto;
        }
        .p_text04{
        
            /* font-size: 5px; */
            position: absolute;
            writing-mode: vertical-lr;
            top:350px;
            left: auto;
            right: 100px;
            letter-spacing: 8px;
            line-height: 1.5;
        }
    /* 躯干头 */
    .content{
        
        height: 650px;
        width: 100%;
        background-color:white;
        text-align: center;
    }
    .content02{
        
        width: 96%;
        height: 650px;
        /* background:  url(images/网站设计.png) no-repeat; */
        background:  url(images/背景1.png) no-repeat;
        background-color: white;
        background-size: 100% 100%;
        box-shadow: 0px 10px 16px 0px rgba(0,0,0,0.2);
        border-radius: 90px 90px 90px 90px;
        float: left;
        padding: 0 10px;
        display: block;
        margin:0 28px;
    }
    .content06{
        
        width: 10%;
        height: 100%;
        float: left;
    }
    
    /* 下拉列表 */
    .dropbtn {
        
        /* background-color: #4CAF50; */
        background-color: white;
        color: white;
        padding: 16px;
        margin: 10px 20px 0 0;
        border: none;
        cursor: pointer;
    }
    
    .dropdown {
        
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        
        display: none;
        position: absolute;
        right: 0;
        background-color: #f9f9f9;
        border-radius: 20px 20px 20px 20px;
        min-width: 200px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
        
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {
        background-color: #f1f1f1}
    
    .dropdown:hover .dropdown-content {
        
        display: block;
    }
    
    .dropdown:hover .dropbtn {
        
        background-color: #4CAF50;
    }
    .image04{
        
        width: 30px;
        height: 30px;
    }
    /* 搜索 */
    form{
        
        text-align: center;
    }
    form .text{
        
        display: inline-block;
        border: 0;
        width: 260px;
        height: 35px;
        font-size: 14px;
        outline: none;
        border-radius: 20px 20px 20px 20px;
        border: 2px solid #01af63;
    }
    form .search{
        
        width: 90px;
        height: 38px;
        border: 2px solid #01af63;
        outline: none;
        cursor: pointer;
        text-align: center;
        background-color: #01af63;
        color: #FFF;
    }
    
    /* 版权信息，尾部 */
    .footer{
        
        width: 100%;
        height: 500px;
        margin: 20px 28px 0 28px;
       /* background-color: #4CAF50;*/
    }
    .zhengti{
        
        width: 96%;
    }
    .to_kaito{
        
        width: 80%;
        height: 60px;
        margin: 0 99px;
        display: block;
        padding: 5px;
    }
    .to_kaito_divto{
        
        width: 20%;
        height: 60px;
        float: left;
    }
    .to_kaito_a{
        
        float: left;
        padding: 8px 8px;
        height: 40px;
    }
    .to_kaito_img{
        
        height: 40px;
        width: 120px;
    }
    .to_kaito_divzhong{
        
        width: 80%;
        height: 60px;
        float: left;
    }
    
    .to_kaito_divzhong ul{
          
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .to_kaito_divzhong ul li {
        
        float: left;
    	font-size:15px;
    	padding-left:10px;
    	margin-left:60px;
    }
    
    .to_kaito_divzhong ul li a {
        
        display: block;
        color: #000000;
        text-align: center;
        padding: 14px 14px;
        text-decoration: none;
    }
    .zhong{
        
        width: 96%;
        height: 310px;
        /* background:  url(images/网站设计.png) no-repeat; */
        background:  url(images/底部背景.png) no-repeat;
        background-color: white;
        background-size: 100% 100%;
        box-shadow: 0px 10px 16px 0px rgba(0,0,0,0.2);
        border-radius: 40px 40px 40px 40px;
        float: left;
        padding: 0 10px;
        display: block;
    }
    .zhong_biao{
        
        width: 8%;
        height: 310px;
        float: left;
        /* background-color: aqua; */
    }
    .zhong_biao_divimg{
        
        text-align: left;
        height: 15%;
        /* background-color: #f1f1f1; */
        padding: 0;
    }
    .zhong_biao img{
        
        width: 23px;
        height: 25px;
        margin-top: 25px;
        margin-left: 20px;
    }
    .zhong_biao_divp{
        
        width: 50%;
        height: 85%;
        /* background-color: #f1f1f1; */
        padding: 0;
    }
    .zhong_biao_divp p{
        
            /* position: absolute; */
            writing-mode: vertical-lr;
            left: auto;
            right: 100px;
            font-size: 12px;
            letter-spacing: 2px;
            line-height: 1.5;
            margin-top: 28px;
            margin-left: 20px;
    }
    .zhong_zhong{
        
        width: 68%;
        height: 310px;
        float: left;
    
    }
    .zhong_zhong_divtop{
        
        width: 100%;
        height: 50%;
        float: left;
    }
    .zhong_zhong_divtop_div01{
        
        width: 35%;
        height: 100%;
        /* background-color: red;  */
        float: left; 
    }
    .zhong_zhong_divtop_a{
        
        height: 50%;
        width: 100%;
    } 
    .zhong_zhong_divtop_a0{
        
        float: left;
        width: 60%;
        height: 50%;
        border-radius: 20px 20px 20px 20px;
        margin-top:40px ;
        margin-left: 50px;
    	background-color: #f1f1f1;
    }
    .dianhuan_img{
        
        margin-top: 5px;
        float: left;
        margin-left: 10px;
    }
    .quchushuxin_c{
        
        font-size: 15px;
        color:  #01af63;
    	padding-top:8px;
    	padding-left:8px;
    	text-indent:15px;
    	float:left;
    }
    .zhong_zhong_divtop_b{
        
        height: 50%;
        width: 100%;
        /* background-color: #da6c6c; */
    }
    .quchushuxin_a{
        
        padding:1px 2px 2px 1px;
        text-align: center;
        float: left;
        height: 28px;
        margin-left: 10px;
        margin-top: 10px;
        font-size: 15px;
        color: #f4f4f4;
    }
    .quchushuxin_b{
        
        float: left;
        height: 28px;
        margin-left: 10px;
        font-size: 15px;
        color: #f4f4f4;
    }
    .quchushuxin_a img{
        
        width: 20px;
        height: 23px;
        margin-right: 8px;
    }
    .quchushuxin_b img{
        
        width: 20px;
        height: 23px;
        margin-right: 8px;
    }
    .zhong_zhong_divtop_div02{
           
        width: 65%;
        height: 100%;
        /*background-color: aqua;*/
        float:right;
    }
    .zhong_zhong_divtop_t{
        
    	width:25%;
    	height:100%;
    	float:left;
        /* margin: 35px 0 0 0; */
    	/*background-color:#9C6;*/
    }
    .zhong_zhong_divtop_t h4{
        
        color: white;
        margin: 35px 0 0 0;
    }
    .zhong_zhong_divtop_t ul{
        
        margin: 20px 0 0 0;
    }
    .zhong_zhong_divtop_t ul li{
        
        font-size: 13px;
        margin-right:7px;
        margin-bottom:5px ;
    }
    .zhong_zhong_divtop_t ul li a{
        
        color: #fcfcfc;
    }
    .zhong_zhong_divbottom{
        
        width: 100%;
        height: 50%;
        float: left;
       /* background-color: antiquewhite;*/
    }
    .zhong_zhong_divbottom_kuang1{
        
        width: 32%;
        height: 25%;
        margin: 5px 0 0 160px ;
        border-style:solid;
        border-color: #f3f3f2;
        border-radius: 5px;
        padding: 6px 0 0 0;
        border-width:1px;
        float: left;
        /* background:url(images/边框.png); */
        /* box-shadow: 0px 2px 5px 0px rgba(255, 255, 255, 0.547);   */
    
    }
    .l_img{
        
        width: 19px;
        height: 20px;
        /* background: url(images/人像.png) no-repeat; */
        /* margin: 6px 0 0 0; */
    }
    .l_text1{
        
        font-size: 14px;
        color: white;
        padding-left:5PX ;
    }
    .l_text{
        
        margin: 0 150px 0 0;
        font-size: 14px;
        color: white;
    }
    .zhong_zhong_divbottom_kuang2{
        
        width: 32%;
        height: 25%;
        float: right;
        margin: 5px 38px 0 0;
        padding:6px 0 0 0;
        border-style:solid;
        border-color: #f3f3f2;
        border-radius: 5px;
        border-width:1px;
    }
    .zhong_footer{
        
        width: 24%;
        height: 310px;
        float: left;
    }
    .zhong_footer img{
        
        width: 180px;
        height: auto;
        padding-top: 60px;
        margin: 0 auto;
    }
    .div_footer{
        
        width: auto;
        height: auto;
    }
    .div_footer ul{
          
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .div_footer ul li {
        
        float: left;
    	font-size:10px;
    	padding-left:5px;
    	margin-left:50px;
    }
    
    .div_footer ul li a {
        
        display: block;
        color: #000000;
        text-align: center;
        padding: 14px 14px;
        text-decoration: none;
    }

--------------------

> 本html文件和css文件利用了很多相关基础的知识，这些代码仅供参考。如有需要源文件的朋友；欢迎来找！

[e64521b32b9c4ba4b6ece8e5f7b9ad6b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/a7fe80373859481795837f6bfabd692a.png
[72c018a3773f4f05aa378771df6fa870.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/12/70977ff493f04f2b903cfb43502d464c.png