CSS自适应页面

资源

链接：https://pan.baidu.com/s/1WLAI5ceQlgAYel9oxLFpyQ 
提取码：5htf 

index.html

页面包含导航栏、视频、轮播图、菜单栏

	
		
		
		
		
		
		
	
	
		

			
主页
			
订餐
			
联系方式
			
关于
		
		

			

				

					
				
				

					

						
						
						
						
						
						
					
				
				
				

					

						
						汉堡王套餐
						
					
				
				
				

					

						

							
							

								
							
							
热咖啡（10.00 元/杯）
							

								饮料
								
55人购买
							
							
						
						

							
							

								
							
							
臻选豆浆（8.00 元/杯）
							

								饮料
								
32人购买
							
							
						
						

							
							

								
							
							
法式培根蛋包芝士堡（14.00 元/份）
							

								汉堡
								
27人购买
							
							
						
						

							
							

								
							
							
火烤猪肉蛋包芝士堡（10.00 元/份）
							

								汉堡
								
46人购买
							
							
						
						

							
							

								
							
							
火炬香草冰淇淋（3.00 元/份）
							

								甜品
								
34人购买
							
							
						
						

							
							

								
							
							
新地巧克力/草莓（8.00 元/份）
							

								甜品
								
43人购买
							
							
						
						

							
							

								
							
							
美式脆鸡堡套餐（19.00 元/份）
							

								套餐
								
54人购买
							
							
						
						

							
							

								
							
							
薯你风情套餐（15.00 元/份）
							

								套餐
								
36人购买
							
							
						
						

							
							

								
							
							
霸王鸡盒（33.00 元/份）
							

								小食
								
99人购买
							
							
						
						

							
							

								
							
							
芝士肉酱薯霸王（16.00 元/份）
							

								小食
								
101人购买
							
							
						
					
				
			
		
	

index.css

视频和轮播图设置

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
outline: none;
color: #333;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
}
.container{
background-color: #f9faff;
}
.inner{
margin: 0 auto;
}
.demo{
    width:100%;
    height:400px;
    margin:0px auto;/*轮播图居中*/
    /* background-color:aquamarine; */
    overflow: hidden;/*用于隐藏超出展示容器的内容部分*/
}
.demo1{
    width:6000px;
    height:400px;
    margin:0px auto;
    animation:text 30s infinite  linear;
    font-size:0px;/*消除图片间隔*/  
}
@keyframes text {          /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
    0%,10%{
        margin-left:0px;
    }
    20%,30%{
        margin-left:-1200px;
    }
    40%,50%{
        margin-left:-2400px;
    }
    60%,70%{
        margin-left:-3600px;
    }
    80%,90%{
        margin-left:-4800px;
    }
}

.demo1 img{
    width:1200px;
    height:400px;
    float:left;/*开启浮动*/
}
.inner_hd{
width: 100%;
text-align: center;
padding: 40px 0 20px 0;
}
.inner_hd h2{
font-size: 36px;
color: #313131;
font-weight: bold;
display: inline-block;
position: relative;
}
h2 img{
position: absolute;
}
h2 .hd_left{
left: -20px;
top: 16px;
}
h2 .hd_right{
right: -20px;
top: 2px;
}
.box{
padding: 30px 0;
}
.item{
width: 100%;
display: flex;
flex-direction: row;
justify-content: start;
flex-wrap: wrap;
}
.item li{
width: 20%;
overflow: hidden;
border-radius: 10px;
padding: 0 10px 30px 10px;
}
.item li .img_box{
height: auto;
border-radius: 10px;
overflow: hidden;
}
.img_box img{
width: 100%;
max-height: 100%;
}
.item li h2{
font-size: 15px;
color: #f9faff;
line-height: 24px;
margin: 10px 0;
padding: 0 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: 45px;
}
.item li .bottom_box{
padding: 0 10px;
}
.item li .bottom_box span{
width: 42px;
color: #f9faff;
}
.item li .bottom_box p{
width: auto;
float: right;
background: url(../img/icon.jpg)no-repeat left center;
padding-left: 20px;
color: #f9faff;
}

daohang.css

导航栏设置

ul {

    padding: 0px;
    margin: 0px;
    list-style-type: none;

    background-color: #333;
    /*border: 1px solid black;*/
    overflow: hidden;
}

li {


    float: left;

    /*border: 1px solid black;*/
}

a {
    color: white;
    display: block;
    padding: 14px 16px;
    text-decoration: none;


}

a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

media.css

菜单栏设置

/*超大屏幕大于等于1200px*/

@media  screen and (max-width:575px){

    .inner{

        width: 100%;

    }

    .inner_hd{

        padding: 30px 0;

    }

    .item li {

        width: 50%;

    }

    .inner_hd h2{

        font-size: 26px;

    }

}

/*大屏幕大于等于992px*/

@media screen and (min-width:576px){

    .inner{

        width: 540px;

    }

    .item li{

        width: 50%;

    }

    .inner_hd h2{

        font-size: 30px;

    }

}

/*中等屏幕大于等于768*/

@media screen and (min-width:768px){

    .inner{

        width: 720px;

    }

    .item li{

        width: 33.3%;

    }

}

/*小屏幕大于等于576*/

@media screen and (min-width:992px){

    .inner{

        width: 960px;

    }

    .item li{

        width: 25%;

    }

}

/*超小屏幕小于576*/

@media screen and (min-width:1200px){

    .inner{

        width: 1200px;

    }

    .item li{

        width: 20%;

    }

}