当前位置：网站首页>Web page design example assignment -- Introduction to Henan cuisine (4 pages) web final assignment design web page_ Dessert and gourmet college students' web design homework finished product

Web page design example assignment -- Introduction to Henan cuisine (4 pages) web final assignment design web page_ Dessert and gourmet college students' web design homework finished product

2022-06-11 16:22:00 【Web front end quality Creator - Web Design】

HTML5 Final homework ： Food introduction website design —— Introduction to Henan cuisine (4 page )

List of articles

One 、 Works display

Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here

Two 、 File directory

Insert picture description here

3、 ... and 、 Code implementation 


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
    	*{
    		margin:0;
    		padding:0;
    		}
			ul{
				list-style:none;
				text-align: center;
			}
			a{
				display:block;
				text-align: center;
				text-decoration: none;	
			}
      .header{
        position:fixed;
        top:0;
        width:100%;
        height:70px;
        line-height:70px;
        z-index:999;
        text-align: center;
        color:#cacaca;
        padding:0 40px;
        background: #545454;
        min-width:1280px;
      }
      .header .logo{
        float: left;
        display:block;
        width:150px;
        margin-left:100px;
        font-size:20px;
      }
      .header .logo img{
        width:100%;
        height:70px;
        vertical-align: middle;
      }
      .header .logo .logo-hover{
        display:none;
        position:absolute;
        width:250px;
        height:50px;
      }
      .header .navs{
        float: left;
        margin-left:50px;
        display:block;
        width:500px;
      }
      .header .navs .navs-btn{
        float: left;
        display:block;
        width:20%;
      }
      .header .navs .navs-btn a{
        display:block;
        width:100%;
        line-height: 70px;
        font-size:25px;
        color:#cacaca;
      }
      .header .search{
        float: left;
        width:220px;
        height:70px;
      }
      .header .search input{
        width:80%;
        height:40px;
      }
      .header .info{
        width:200px;
        height:70px;
        margin-left:75%;
      }
      .header .info .mask{
        width: 100%;
        height: 100%;
        background-color: #555;
        opacity: 0.5;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
      }
      .header .info .login{
        width: 400px;
        height: 300px;
        background-color: #fff;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -200px;
        display: none;
                font-size: 20px;
      }
      .header .info .login span{
          float: right;
          width:25px;
          height: 25px;
          line-height: 20px;
          top: 0;
          right: 0;
          color: #bbb;
      }
      .header .info .login .lon1 p{
          color: red;
          font-size: 25px;
          text-align: center;
          line-height: 25px;
          margin:15px auto;
      }
      .header .info .login .line hr{
          margin-top: 20px;
      }
      .header .info .login .div1{
          margin:10px auto 10px;
      }
      .header .info .login input{
        height:35px;
        width: 350px;
      }
      .header .info .login .shut{
          position: absolute;
          right: 0px;
          top: 2px;
          width: 25px;
          height: 25px;
          cursor: pointer;
          color: black;
      }
      .header .info .login .yes{
          position: absolute;
          width:300px;
          height: 45px;
          left: 50px;
          bottom: 50px;
          color: white;
          background:red;
      }
      .header .info .login .no{
          position: absolute;
          right: 15px;
          bottom: 10px;
      }
      .header .info a{
        margin:15px auto;
        display:block;
        color: #cacaca;
        width:150px;
        height:40px;
        line-height:40px;
        background: white;
        font-size:16px;
        border-radius:4px;
        border:1px solid #0057ff;
      }
      .float-right{
        position:fixed;
        right:0;
        width:80px;
        height:100%;
        margin:100px 0;
      }
      .float-right ul{
        margin-top:100px;
        height:400px;
        min-height: 400px;
      }
      .float-right ul li{
        width:80px;
        height:80px;
        line-height:80px;
      }
      .float-right ul li img{
        border-radius:15px;
      }
      .float-right ul li div{
        position:relative;
        width:200px;
        height:160px;
        left:-200px;
        top:-120px;
        display:none;
        z-index:999;
      }
			.imgs{
				margin-top:80px;
				width:100%;
				height:180px;
				background: url('imgs/zx.jpg');
			}
			.content{
				width:1200px;
				margin:0 auto;
				text-align: center;
			}
			.content .nav{
				width:100%;
				height:50px;
				line-height:50px;
				font-size:14px;
				text-align: left;
				margin:0;
			}
			.content .nav a{
			display:inline-block;
			}
			.content .news{
				height:500px;
			}
      .content .news img{
        border-radius:15px;
      }
			.content .news .left{
				float: left;
				width:950px;
				display:block;
				background: #ffe
			}
			.content .news .left .type{
				width: 950px;
				height: 50px;
				line-height: 50px;
			}
			.content .news .left .type a{
				float: left;
				width: 150px;
				height: 50px;
				display: block;
				color: black;
			}
			.content .news .left .list{
				display: none;
				width: 950px;
			}
      .content .news .left .hideen{
        display:block;
      }
			.content .news .left .list li{
		    		<li><a href="#"> Initiate partnership </a></li>
		    	</ul>
		    	<ul class="aa">
		    		<li> Share your travels </li>
		    		<li><a href="#"> Publish travel notes </a></li>
		    		<li><a href="#"> Comment on the scenic spots you have been to </a></li>
		    	</ul>
		    	<ul class="aa">
		    		<li> About us </li>
		    		<li><a href="#"> Community profile </a></li>
		    		<li><a href="#"> Contact us </a></li>
		    		<li><a href="#"> Join us </a></li>
		    		<li><a href="#"> Smart Tourism </a></li>
		    	</ul>
		    	<ul class="aa1">
		    		<li> Focus on the strategy community </li>
		    		<li><img src="img/img_footer_crcode.png" alt="" /></li>
		    	</ul>
		    </div>
		  </div>
    </body>
</html>

`

 <hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1"> 


#   Four 、 Get more source code 
~  Pay attention to me , Like the blog ~  Every day brings you knowledge !
 Relevant issues can be learned from each other , Can pay attention to ↓ Male Z Number   Get more source code
原网站

版权声明
本文为[Web front end quality Creator - Web Design]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/162/202206111606034583.html

边栏推荐

猜你喜欢

随机推荐