• HTML5响应式网页设计（考试题：旅游项目）

    效果图

    .html代码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta name="viewport"
    5. 			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    6. 		<meta charset="utf-8" />
    7. 		<title>title>
    8. 		<link rel="stylesheet" href="./css/css1.css">
    9. 	head>
    10. 	<body>
    11. 		<div class="fullbigbox">
    12. 			<div class="elebigbox">
    13. 				<div class="bigheader">
    14.  
    15. 					<div class="row">
    16. 						<div class="col-6">
    17. 							<div class="menuleft">
    18. 								<ul>
    19. 									<li><a href="#">最美旅游网a>li>
    20. 									<li><a href="#">山东游a>li>
    21. 									<li><a href="#">国内游a>li>
    22. 									<li><a href="#">国际游a>li>
    23. 								ul>
    24. 							div>
    25.  
    26. 						div>
    27. 						<div class="col-6">
    28. 							<div class="menuright">
    29. 								<ul>
    30. 									<li><a href="#">登录/注册a>li>
    31. 								ul>
    32. 							div>
    33. 						div>
    34. 					div>
    35. 				div>
    36. 				<div class="zhong">
    37. 					<div class="row">
    38.  
    39. 						<div class="qq">
    40. 							<div class="col-1 ">
    41. 								<div class="zhongq"><a href="#">旅游直通车a>div>
    42. 							div>
    43. 						div>
    44.  
    45. 						<div class="col-1">
    46. 							<div class="zhongq">123div>
    47. 						div>
    48.  
    49. 						<div class="col-1">
    50. 							<div class="zhongq">123div>
    51. 						div>
    52. 						<div class="col-1">
    53. 							<div class="zhongq">123div>
    54. 						div>
    55. 						<div class="col-1">
    56. 							<div class="zhongq">123div>
    57. 						div>
    58. 						<div class="col-1">
    59. 							<div class="zhongq">123div>
    60. 						div>
    61. 						<div class="col-1">
    62. 							<div class="zhongq">123div>
    63. 						div>
    64. 						<div class="col-1">
    65. 							<div class="zhongq">123div>
    66. 						div>
    67. 						<div class="col-1">
    68. 							<div class="zhongq">123div>
    69. 						div>
    70. 						<div class="col-1">
    71. 							<div class="zhongq">123div>
    72. 						div>
    73. 						<div class="col-1">
    74. 							<div class="zhongq">123div>
    75. 						div>
    76. 						<div class="col-1">
    77. 							<div class="zhongq">123div>
    78. 						div>
    79. 					div>
    80. 				div>
    81. 				<div class="info">
    82. 					<div class="firstrow">
    83. 						<div class="row">
    84.  
    85. 							<div class="col-6">
    86. 								<div class="infocontent">
    87. 									<div class="infocontbox">
    88. 										<dl>
    89. 											<dt>
    90. 											<div class="pic">	<img src="./img/img/zc.png" alt="">
    91. 											<div>div>dt>
    92. 											<dd>qwedd>
    93. 											<dd>123123dd>
    94. 										dl>
    95. 									div>
    96. 								div>
    97. 							div>
    98. 							<div class="col-6">
    99. 								<div class="infocontent">
    100. 									<div class="infocontbox">
    101. 										<dl>
    102. 											<dt>
    103. 												<div class="pic">
    104.  
    105. 													<img src="./img/img/zc.png" alt="">
    106. 												div>
    107. 											dt>
    108. 											<dd>qwedd>
    109. 											<dd>123123dd>
    110. 										dl>
    111. 									div>
    112. 								div>
    113. 							div>
    114. 						div>
    115. 						<div class="row">
    116. 						
    117. 							<div class="col-6">
    118. 								<div class="infocontent">
    119. 									<div class="infocontbox">
    120. 										<dl>
    121. 											<dt>
    122. 											<div class="pic">	<img src="./img/img/zc.png" alt="">
    123. 											<div>div>dt>
    124. 											<dd>qwedd>
    125. 											<dd>123123dd>
    126. 										dl>
    127. 									div>
    128. 								div>
    129. 							div>
    130. 							<div class="col-6">
    131. 								<div class="infocontent">
    132. 									<div class="infocontbox">
    133. 										<dl>
    134. 											<dt>
    135. 												<div class="pic">
    136. 						
    137. 													<img src="./img/img/zc.png" alt="">
    138. 												div>
    139. 											dt>
    140. 											<dd>qwedd>
    141. 											<dd>123123dd>
    142. 										dl>
    143. 									div>
    144. 								div>
    145. 							div>
    146. 						div>
    147. 					div>
    148. 				div>
    149. 			<div class="footer">
    150. 				<div class="row">
    151. 					<div class="col-12">
    152. 						<div class="footerq">
    153. 							sadafasfxxxxx
    154. 						div>
    155. 					div>
    156. 				div>
    157. 			div>
    158. 			div>
    159. 		div>
    160. 		div>
    161. 	body>
    162. html>

     css代码

    1. .col-1,
    2. .col-2,
    3. .col-3,
    4. .col-4,
    5. .col-5,
    6. .col-6,
    7. .col-7,
    8. .col-8,
    9. .col-9,
    10. .col-10,
    11. .col-11,
    12. .col-12 {
    13. 	flex-shrink: 1;
    14. }
    15.  
    16. .col-1 {
    17. 	flex-grow: 1;
    18. }
    19.  
    20. .col-2 {
    21. 	flex-grow: 2;
    22. }
    23.  
    24. .col-3 {
    25. 	flex-grow: 3;
    26. }
    27.  
    28. .col-4 {
    29. 	flex-grow: 4;
    30. }
    31.  
    32. .col-5 {
    33. 	flex-grow: 5;
    34. }
    35.  
    36. .col-6 {
    37. 	flex-grow: 6;
    38. }
    39.  
    40. .col-7 {
    41. 	flex-grow: 7;
    42. }
    43.  
    44. .col-8 {
    45. 	flex-grow: 8;
    46. }
    47.  
    48. .col-9 {
    49. 	flex-grow: 9;
    50. }
    51.  
    52. .col-10 {
    53. 	flex-grow: 10;
    54. }
    55.  
    56. .col-11 {
    57. 	flex-grow: 11;
    58. }
    59.  
    60. .col-12 {
    61. 	flex-grow: 12;
    62. }
    63.  
    64. a:hover {
    65. 	font-weight: bold;
    66. }
    67.  
    68. * {
    69. 	margin: 0px;
    70. 	padding: 0px;
    71. }
    72.  
    73. a {
    74. 	text-decoration: none;
    75. }
    76.  
    77. ul {
    78. 	list-style: none;
    79. }
    80.  
    81. .row {
    82. 	display: flex;
    83. 	flex-wrap: nowrap;
    84. }
    85.  
    86. .fullbigbox {
    87. 	width: 100%;
    88. 	background-color: lightblue;
    89. }
    90.  
    91. .elebigbox {
    92. 	margin-left: 10%;
    93. 	width: 80%;
    94. 	background-color: white;
    95. }
    96.  
    97. .menuleft ul li {
    98. 	float: left;
    99. 	margin: 0px 50px;
    100. }
    101.  
    102. .bigheader {
    103. 	width: 100%;
    104. 	height: 60px;
    105. 	background-color: lightblue;
    106. }
    107.  
    108. .menuright ul li {
    109. 	float: right;
    110. 	margin-right: 20px;
    111.  
    112. }
    113.  
    114. .menuleft {
    115. 	height: 40px;
    116. 	margin-top: 10px;
    117. 	background-color: slategray;
    118. 	line-height: 40px;
    119. }
    120.  
    121. .menuright {
    122. 	line-height: 40px;
    123. 	height: 40px;
    124. 	margin-top: 10px;
    125. 	background-color: slategray;
    126. }
    127.  
    128. .zhongq {
    129. 	background-color: white;
    130. 	height: 40px;
    131. 	line-height: 40px;
    132. 	text-align: center;
    133. }
    134.  
    135. .qq {
    136. 	background-color: rebeccapurple;
    137. }
    138.  
    139. img {
    140. 	border-radius: 10px 10px 0px 0px;
    141. }
    142.  
    143. .info {
    144. 	width: 100%;
    145.  
    146. }
    147.  
    148. .infocontent {
    149. 	display: flex;
    150. }
    151.  
    152. .infocontbox {
    153. 	flex: 1;
    154. 	width: 0;
    155. 	margin: 10px;
    156. }
    157.  
    158. .infocontbox dl dt img {
    159. 	width: 100%;
    160. 	height: 100%;
    161. 	border-radius: 10px 10px 0px 0px;
    162. }
    163.  
    164. .infocontbox:hover {
    165. 	box-shadow: 0px 0px 10px 10px green;
    166. }
    167.  
    168. .pic {
    169. 	overflow: hidden;
    170. }
    171.  
    172. .infocontbox:hover dl dt img {
    173. 	transform: scale(1.1);
    174. }
    175.  
    176. .footer {
    177. 	width: 100%;
    178. 	background-color: skyblue;
    179. 	height: 80px;
    180. 	position: relative;
    181. }
    182.  
    183. .footerq {
    184. 	width: 100%;
    185. 	position: absolute;
    186. 	top: 20px;
    187. 	background-color: white;
    188. 	height: 60px;
    189. 	line-height: 60px;
    190. 	text-align: center;
    191. }

  • 相关阅读:
    达美乐中国再闯港交所,能否IPO必达?
    【arm实验1】GPIO实验-LED灯的流水亮灭
    angular+ionic+npm项目运行
    【编程题】【Scratch三级】2022.06 古堡历险记
    SemanticKernel如何基于自有数据聊天
    Source Insight使用教程(3)——常用功能扩展篇
    2023年数据采集仪器行业市场前景分析
    熬夜拜读349页阿里面试通关手册，成功闯入字节
    golang pprof 监控系列(3) —— memory，block，mutex 统计原理
    栈（stack）入门详解之C语言版
  • 原文地址：https://blog.csdn.net/Mr_wangzu/article/details/134405589