HTML5响应式网页设计(考试题:旅游项目)

效果图

.html代码

<!DOCTYPE html>
<html><head><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><meta charset="utf-8" /><title></title><link rel="stylesheet" href="./css/css1.css"></head><body><div class="fullbigbox"><div class="elebigbox"><div class="bigheader"><div class="row"><div class="col-6"><div class="menuleft"><ul><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="col-6"><div class="menuright"><ul><li><a href="#">登录/注册</a></li></ul></div></div></div></div><div class="zhong"><div class="row"><div class="qq"><div class="col-1 "><div class="zhongq"><a href="#">旅游直通车</a></div></div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div></div></div><div class="info"><div class="firstrow"><div class="row"><div class="col-6"><div class="infocontent"><div class="infocontbox"><dl><dt><div class="pic">	<img src="./img/img/zc.png" alt=""><div></div></dt><dd>qwe</dd><dd>123123</dd></dl></div></div></div><div class="col-6"><div class="infocontent"><div class="infocontbox"><dl><dt><div class="pic"><img src="./img/img/zc.png" alt=""></div></dt><dd>qwe</dd><dd>123123</dd></dl></div></div></div></div><div class="row"><div class="col-6"><div class="infocontent"><div class="infocontbox"><dl><dt><div class="pic">	<img src="./img/img/zc.png" alt=""><div></div></dt><dd>qwe</dd><dd>123123</dd></dl></div></div></div><div class="col-6"><div class="infocontent"><div class="infocontbox"><dl><dt><div class="pic"><img src="./img/img/zc.png" alt=""></div></dt><dd>qwe</dd><dd>123123</dd></dl></div></div></div></div></div></div><div class="footer"><div class="row"><div class="col-12"><div class="footerq">sadafasfxxxxx</div></div></div></div></div></div></div></body>
</html>

 css代码

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {flex-shrink: 1;
}.col-1 {flex-grow: 1;
}.col-2 {flex-grow: 2;
}.col-3 {flex-grow: 3;
}.col-4 {flex-grow: 4;
}.col-5 {flex-grow: 5;
}.col-6 {flex-grow: 6;
}.col-7 {flex-grow: 7;
}.col-8 {flex-grow: 8;
}.col-9 {flex-grow: 9;
}.col-10 {flex-grow: 10;
}.col-11 {flex-grow: 11;
}.col-12 {flex-grow: 12;
}a:hover {font-weight: bold;
}* {margin: 0px;padding: 0px;
}a {text-decoration: none;
}ul {list-style: none;
}.row {display: flex;flex-wrap: nowrap;
}.fullbigbox {width: 100%;background-color: lightblue;
}.elebigbox {margin-left: 10%;width: 80%;background-color: white;
}.menuleft ul li {float: left;margin: 0px 50px;
}.bigheader {width: 100%;height: 60px;background-color: lightblue;
}.menuright ul li {float: right;margin-right: 20px;}.menuleft {height: 40px;margin-top: 10px;background-color: slategray;line-height: 40px;
}.menuright {line-height: 40px;height: 40px;margin-top: 10px;background-color: slategray;
}.zhongq {background-color: white;height: 40px;line-height: 40px;text-align: center;
}.qq {background-color: rebeccapurple;
}img {border-radius: 10px 10px 0px 0px;
}.info {width: 100%;}.infocontent {display: flex;
}.infocontbox {flex: 1;width: 0;margin: 10px;
}.infocontbox dl dt img {width: 100%;height: 100%;border-radius: 10px 10px 0px 0px;
}.infocontbox:hover {box-shadow: 0px 0px 10px 10px green;
}.pic {overflow: hidden;
}.infocontbox:hover dl dt img {transform: scale(1.1);
}.footer {width: 100%;background-color: skyblue;height: 80px;position: relative;
}.footerq {width: 100%;position: absolute;top: 20px;background-color: white;height: 60px;line-height: 60px;text-align: center;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/146037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《C++避坑神器·二十》C++智能指针简单使用

智能指针&#xff0c;自动释放所指向的对象。 头文件 #include <memory>shared_ptr 允许多个指针指向同一个对象 unique_ptr 独占所指向的对象 weak_ptr 指向shared_ptr所管理的对象 作用原理&#xff1a;在函数作用域结束时调用析构函数自动释放资源。 shared_ptr: …

matplotlib 绘制双纵坐标轴图像

效果图&#xff1a; 代码&#xff1a; 由于使用了两组y axis&#xff0c;如果直接使用ax.legend绘制图例&#xff0c;会得到两个图例。而下面的代码将两个图例合并显示。 import matplotlib.pyplot as plt import numpy as npdata np.random.randint(low0,high5,size(3,4)) …

C#中.NET Framework4.8 Windows窗体应用通过EF访问数据库并对数据库追加、删除记录

目录 一、应用程序设计 二、应用程序源码 三、生成效果 前文作者发布了在.NET Framework4.8 控制台应用中通过EF访问已有数据库&#xff0c;事实上在.NET Framework4.8 Windows窗体应用中通过EF访问已有数据库也是一样的。操作方法基本一样&#xff0c;数据库EF模型和上下文…

ARM课程发送一个字符,接收一个字符

fun.c #include "my_typ_head.h"//初始化 void uart_init() {//1.使能GPIOB/GPIOG/UART4时钟 RCC_MP_AHB4ENSETR/RCC_MP_APB1ENSETR//设置GPIOB\GPIOG控制器时钟使能 0X50000A28(*(unsigned int *)0X50000A28) | (0X10);(*(unsigned int *)0X50000A28) | (0X1<…

【数据结构(二)】稀疏 sparsearray 数组(1)

文章目录 1. 稀疏数组的应用场景1.1. 一个实际的需求1.2. 基本介绍 2. 稀疏数组转换的思路分析3. 稀疏数组的代码实现3.1. 二维数组转稀疏数组3.2. 稀疏数组转二维数组 4. 课后练习 1. 稀疏数组的应用场景 1.1. 一个实际的需求 问题&#xff1a;     编写的五子棋程序中&…

基于nodejs+express+knex+mysql搭建一个后台服务

前言 首先&#xff0c;我们对nodejs、express、knex、mysql进行说明&#xff1a; Node.js&#xff1a;Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。express&#xff1a;Node.js web application framework 基于nodejs的web应用框架Knex&#xff1a;SQL Query Buil…

ES Kibana 安装

ES & Kibana 本文基于Docker安装部署使用 Kibana的版本和ElasticSearch的版本&#xff0c;以及IK分词器的版本一一对应 Kibana 安装 安装Kibana # 创建网络 [rootiZ2zeg7mctvft5renx1qvbZ ~]# docker network create --driver bridge --subnet 192.168.0.0/16 --gateway …

UE5 - ArchvizExplorer - 数字孪生城市模板 -学习笔记

1、学习资料 https://www.unrealengine.com/marketplace/zh-CN/product/archviz-explorer https://karldetroit.com/archviz-explorer-documentation/ 官网下载的是一个简单版&#xff0c;需要下载扩展&#xff0c;并拷贝到项目录下&#xff0c;才有完整版 https://drive.googl…

力扣104. 二叉树的最大深度(java,DFS,BFS解法)

Problem: 104. 二叉树的最大深度 文章目录 思路和解法复杂度Code 思路和解法 DFS 递归处理&#xff0c;退出条件为节点为空&#xff0c;归的过程每次取出当前节点左右子树的最大深度加一 BFS 经典的借助一个队列实现的BFS&#xff0c;用一个变量记录当前的最大层数&#xff0c…

Python集成学习和随机森林算法

大家好&#xff0c;机器学习模型已经成为多个行业决策过程中的重要组成部分&#xff0c;然而在处理嘈杂或多样化的数据集时&#xff0c;它们往往会遇到困难&#xff0c;这就是集成学习&#xff08;Ensemble Learning&#xff09;发挥作用的地方。 本文将揭示集成学习的奥秘&am…

指针详解【C语言】

1第一步&#xff1a; 学生 *pstu; 这里学生是类型*是解地址 pstu是地址容器语法里 学生 学生1&#xff1b;就会开辟内存。 这里【学生1】和 【*pstu】等效那这里【pstu】是带类型的指针容器*pstu是解地址&#xff0c;还原出类型对象。这里【*】只是解地址的操作符【pstu】…

组合式API_模板引用

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作&#xff0c;但在某些情况下&#xff0c;我们仍然需要直接访问底层 DOM 元素。要实现这一点&#xff0c;我们可以使用特殊的 ref attribute&#xff0c;组合式API的实现更为简洁 选项式API_模板引用 <template…

交易者最看重什么?anzo Capital这点最重要!

交易者最看重什么&#xff1f;有人会说技术&#xff0c;有人会说交易策略&#xff0c;有人会说盈利&#xff0c;但anzo Capital认为Vishal 最看重的应该是眼睛吧&#xff01; 29岁的Vishal Agraval在9年前因某种原因失去了视力&#xff0c;然而&#xff0c;他的失明并未能阻…

python文件读写练习题--随机出10套试卷

要求就是&#xff1a;10套试卷题目顺序不同&#xff0c;答案顺序不同 import random import os city {河北省:石家庄市,山西省:太原市,辽宁省:沈阳市,吉林省:长春市,黑龙江省:哈尔滨市,江苏省:南京市,浙江省:杭州市,安徽省:合肥市,福建省:福州市,江西省:南昌市}#在当前路径下…

【C语言从入门到放弃 7】内存管理和命令行参数详解

在C语言中&#xff0c;内存管理和命令行参数处理是非常重要的技术&#xff0c;它们直接关系到程序的性能和灵活性。本文将深入探讨C语言中的内存管理和命令行参数处理&#xff0c;并提供相关示例代码。 内存管理 1.内存分配与释放 在C语言中&#xff0c;我们可以使用malloc函…

Zookeeper Java 开发,自定义分布式锁示例

文章目录 一、概述二、导入依赖包三、创建锁的过程3.1 通过 create 创建节点信息3.2 AsyncCallback.StringCallback 回调函数3.3 AsyncCallback.Children2Callback 的回调函数3.4 Watcher 的回调函数 四、完整示例4.1 完整分布式锁代码4.2 测试类 如果您还没有安装Zookeeper请看…

切换阿里云ES方式及故障应急处理方案

一、阿里云es服务相关问题及答解 1.1 ES7.10扩容节点时间 增加节点数量需要节点拉起和数据Rebalance两步,拉起时间7.16及以上的新版本大概10分钟以内,7.16以前大概一小时,数据迁移的时间就看数据量了,一般整体在半小时以内 (需进行相关测试验证) 1.2 ES7.10扩容数据节点…

在 Node.js 中发出 HTTP 请求的 5 种方法

在 Node.js 中发出 HTTP 请求的 5 种方法 学习如何在 Node.js 中发出 HTTP 请求可能会让人感到不知所措&#xff0c;因为有数十个可用的库&#xff0c;每个解决方案都声称比上一个更高效。一些库提供跨平台支持&#xff0c;而另一些库则关注捆绑包大小或开发人员体验。 在这篇…

云轴科技ZStack信创云平台支撑长江航务管理局35套航运管理系统

信创是数字中国建设的重要组成部分&#xff0c;也是数字经济发展的关键推动力量。作为云基础软件企业&#xff0c;云轴科技ZStack产品矩阵全面覆盖数据中心云基础设施&#xff0c;ZStack信创云首批通过可信云《一云多芯IaaS平台能力要求》先进级&#xff0c;是其中唯一兼容四种…

二百零三、Flume——Flume实时采集数据频率为1s的高频率Kafka数据直接写入ODS层表的HDFS文件路径下

一、目的 在离线数仓中&#xff0c;需要用Flume去采集Kafka中的数据&#xff0c;然后写入HDFS中。 由于每种数据类型的频率、数据大小、数据规模不同&#xff0c;因此每种数据的采集需要不同的Flume配置文件。玩了几天Flume&#xff0c;感觉Flume的使用难点就是配置文件 二、…