• CSS自适应页面

    资源

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

    index.html

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximun-scale=1.0"/>
    6. 		<link rel="stylesheet" type="text/css" href="css/index.css"/>
    7. 		<link rel="stylesheet" type="text/css" href="css/media.css"/>
    8. 		<link rel="stylesheet" href="css/daohang.css">
    9. 		<title>title>
    10. 	head>
    11. 	<body>
    12. 		<ul>
    13. 			<li><a href="#">主页a>li>
    14. 			<li><a href="#">订餐a>li>
    15. 			<li><a href="#">联系方式a>li>
    16. 			<li style="float:right"><a href="#" class="active">关于a>li>
    17. 		ul>
    18. 		<div class="container">
    19. 			<div class="inner">
    20. 				<div>
    21. 					<video 
    22.  						src="image/999.mp4" 
    23.  						autoplay="autoplay" 
    24. 						loop="loop" 
    25.  						muted="muted" 
    26.  						controls="controls"
    27.  						controlsList="nodownload"
    28.  						height="100%" width="100%">
    29.  					video>
    30. 				div>
    31. 				<div class="demo">
    32. 					<div class="demo1">
    33. 						<img src="image/1.jpg" alt="">
    34. 						<img src="image/2.jpg" alt="">
    35. 						<img src="image/3.jpg" alt="">
    36. 						<img src="image/4.jpg" alt="">
    37. 						<img src="image/5.jpg" alt="">
    38. 						<img src="image/6.jpg" alt="">
    39. 					div>
    40. 				div>
    41. 				
    42. 				<div class="inner_hd">
    43. 					<h2>
    44. 						<img class="hd_left" src="image/box_hd_left.png" alt="" />
    45. 						汉堡王套餐
    46. 						<img class="hd_right" src="image/box_hd_right.png" alt="" />
    47. 					h2>
    48. 				div>
    49. 				
    50. 				<div class="box">
    51. 					<ul class="item">
    52. 						<li>
    53. 							<a>
    54. 							<div class="img_box">
    55. 								<img src="image/11.jpg" alt="" />
    56. 							div>
    57. 							<h2>热咖啡(10.00 元/杯)h2>
    58. 							<div class="bottom_box">
    59. 								<span>饮料span>
    60. 								<p>55人购买p>
    61. 							div>
    62. 							a>
    63. 						li>
    64. 						<li>
    65. 							<a>
    66. 							<div class="img_box">
    67. 								<img src="image/22.jpg" alt="" />
    68. 							div>
    69. 							<h2>臻选豆浆(8.00 元/杯)h2>
    70. 							<div class="bottom_box">
    71. 								<span>饮料span>
    72. 								<p>32人购买p>
    73. 							div>
    74. 							a>
    75. 						li>
    76. 						<li>
    77. 							<a>
    78. 							<div class="img_box">
    79. 								<img src="image/33.jpg" alt="" />
    80. 							div>
    81. 							<h2>法式培根蛋包芝士堡(14.00 元/份)h2>
    82. 							<div class="bottom_box">
    83. 								<span>汉堡span>
    84. 								<p>27人购买p>
    85. 							div>
    86. 							a>
    87. 						li>
    88. 						<li>
    89. 							<a>
    90. 							<div class="img_box">
    91. 								<img src="image/44.jpg" alt="" />
    92. 							div>
    93. 							<h2>火烤猪肉蛋包芝士堡(10.00 元/份)h2>
    94. 							<div class="bottom_box">
    95. 								<span>汉堡span>
    96. 								<p>46人购买p>
    97. 							div>
    98. 							a>
    99. 						li>
    100. 						<li>
    101. 							<a>
    102. 							<div class="img_box">
    103. 								<img src="image/55.jpg" alt="" />
    104. 							div>
    105. 							<h2>火炬香草冰淇淋(3.00 元/份)h2>
    106. 							<div class="bottom_box">
    107. 								<span>甜品span>
    108. 								<p>34人购买p>
    109. 							div>
    110. 							a>
    111. 						li>
    112. 						<li>
    113. 							<a>
    114. 							<div class="img_box">
    115. 								<img src="image/66.jpg" alt="" />
    116. 							div>
    117. 							<h2>新地巧克力/草莓(8.00 元/份)h2>
    118. 							<div class="bottom_box">
    119. 								<span>甜品span>
    120. 								<p>43人购买p>
    121. 							div>
    122. 							a>
    123. 						li>
    124. 						<li>
    125. 							<a>
    126. 							<div class="img_box">
    127. 								<img src="image/77.jpg" alt="" />
    128. 							div>
    129. 							<h2>美式脆鸡堡套餐(19.00 元/份)h2>
    130. 							<div class="bottom_box">
    131. 								<span>套餐span>
    132. 								<p>54人购买p>
    133. 							div>
    134. 							a>
    135. 						li>
    136. 						<li>
    137. 							<a>
    138. 							<div class="img_box">
    139. 								<img src="image/88.jpg" alt="" />
    140. 							div>
    141. 							<h2>薯你风情套餐(15.00 元/份)h2>
    142. 							<div class="bottom_box">
    143. 								<span>套餐span>
    144. 								<p>36人购买p>
    145. 							div>
    146. 							a>
    147. 						li>
    148. 						<li>
    149. 							<a>
    150. 							<div class="img_box">
    151. 								<img src="image/99.jpg" alt="" />
    152. 							div>
    153. 							<h2>霸王鸡盒(33.00 元/份)h2>
    154. 							<div class="bottom_box">
    155. 								<span>小食span>
    156. 								<p>99人购买p>
    157. 							div>
    158. 							a>
    159. 						li>
    160. 						<li>
    161. 							<a>
    162. 							<div class="img_box">
    163. 								<img src="image/100.jpg" alt="" />
    164. 							div>
    165. 							<h2>芝士肉酱薯霸王(16.00 元/份)h2>
    166. 							<div class="bottom_box">
    167. 								<span>小食span>
    168. 								<p>101人购买p>
    169. 							div>
    170. 							a>
    171. 						li>
    172. 					ul>
    173. 				div>
    174. 			div>
    175. 		div>
    176. 	body>
    177. html>

    index.css

    视频和轮播图设置

    1. *{
    2. padding: 0;
    3. margin: 0;
    4. box-sizing: border-box;
    5. }
    6. ul li{
    7. list-style: none;
    8. }
    9. a{
    10. text-decoration: none;
    11. outline: none;
    12. color: #333;
    13. }
    14. h1,h2,h3,h4,h5,h6{
    15. font-weight: normal;
    16. }
    17. .container{
    18. background-color: #f9faff;
    19. }
    20. .inner{
    21. margin: 0 auto;
    22. }
    23. .demo{
    24.     width:100%;
    25.     height:400px;
    26.     margin:0px auto;/*轮播图居中*/
    27.     /* background-color:aquamarine; */
    28.     overflow: hidden;/*用于隐藏超出展示容器的内容部分*/
    29. }
    30. .demo1{
    31.     width:6000px;
    32.     height:400px;
    33.     margin:0px auto;
    34.     animation:text 30s infinite  linear;
    35.     font-size:0px;/*消除图片间隔*/  
    36. }
    37. @keyframes text {          /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
    38.     0%,10%{
    39.         margin-left:0px;
    40.     }
    41.     20%,30%{
    42.         margin-left:-1200px;
    43.     }
    44.     40%,50%{
    45.         margin-left:-2400px;
    46.     }
    47.     60%,70%{
    48.         margin-left:-3600px;
    49.     }
    50.     80%,90%{
    51.         margin-left:-4800px;
    52.     }
    53. }
    54.  
    55. .demo1 img{
    56.     width:1200px;
    57.     height:400px;
    58.     float:left;/*开启浮动*/
    59. }
    60. .inner_hd{
    61. width: 100%;
    62. text-align: center;
    63. padding: 40px 0 20px 0;
    64. }
    65. .inner_hd h2{
    66. font-size: 36px;
    67. color: #313131;
    68. font-weight: bold;
    69. display: inline-block;
    70. position: relative;
    71. }
    72. h2 img{
    73. position: absolute;
    74. }
    75. h2 .hd_left{
    76. left: -20px;
    77. top: 16px;
    78. }
    79. h2 .hd_right{
    80. right: -20px;
    81. top: 2px;
    82. }
    83. .box{
    84. padding: 30px 0;
    85. }
    86. .item{
    87. width: 100%;
    88. display: flex;
    89. flex-direction: row;
    90. justify-content: start;
    91. flex-wrap: wrap;
    92. }
    93. .item li{
    94. width: 20%;
    95. overflow: hidden;
    96. border-radius: 10px;
    97. padding: 0 10px 30px 10px;
    98. }
    99. .item li .img_box{
    100. height: auto;
    101. border-radius: 10px;
    102. overflow: hidden;
    103. }
    104. .img_box img{
    105. width: 100%;
    106. max-height: 100%;
    107. }
    108. .item li h2{
    109. font-size: 15px;
    110. color: #f9faff;
    111. line-height: 24px;
    112. margin: 10px 0;
    113. padding: 0 10px;
    114. overflow: hidden;
    115. text-overflow: ellipsis;
    116. display: -webkit-box;
    117. -webkit-box-orient: vertical;
    118. -webkit-line-clamp: 2;
    119. height: 45px;
    120. }
    121. .item li .bottom_box{
    122. padding: 0 10px;
    123. }
    124. .item li .bottom_box span{
    125. width: 42px;
    126. color: #f9faff;
    127. }
    128. .item li .bottom_box p{
    129. width: auto;
    130. float: right;
    131. background: url(../img/icon.jpg)no-repeat left center;
    132. padding-left: 20px;
    133. color: #f9faff;
    134. }

    daohang.css

    导航栏设置

    1. ul {
    2.  
    3.     padding: 0px;
    4.     margin: 0px;
    5.     list-style-type: none;
    6.  
    7.     background-color: #333;
    8.     /*border: 1px solid black;*/
    9.     overflow: hidden;
    10. }
    11.  
    12. li {
    13.  
    14.  
    15.     float: left;
    16.  
    17.     /*border: 1px solid black;*/
    18. }
    19.  
    20. a {
    21.     color: white;
    22.     display: block;
    23.     padding: 14px 16px;
    24.     text-decoration: none;
    25.  
    26.  
    27. }
    28.  
    29. a:hover:not(.active) {
    30.     background-color: #111;
    31. }
    32.  
    33. .active {
    34.     background-color: #4CAF50;
    35. }
    36.  
    37. li {
    38.     border-right: 1px solid #bbb;
    39. }
    40.  
    41. li:last-child {
    42.     border-right: none;
    43. }

    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%;

        }

    }

  • 相关阅读:
    一题多解，ASP.NET Core应用启动初始化的N种方案[上篇]
    2021年研究生数模B题论文记录
    云计算与ai人工智能对高防cdn的发展
    Jetpack Compose Effect 的作用
    进程通信——共享内存
    看了 4K 经典中视频，我才知道 30 多年前的艺术家有多牛
    学生宿舍管理系统（前端java+后端Vue）实现-含前端与后端程序
    在RHEL/CentOS 7上设置用于多个Linux发行版安装的“PXE网络启动服务器“
    搭建nacos集群，并通过nginx实现负载均衡
    pyspark常用功能记录
  • 原文地址：https://blog.csdn.net/lyshark_lyshark/article/details/126799877