六、元素应用CSS的习题
题目一：
使用CSS样式对页面元素加以修饰，制作“ 旅游攻略 ”网站。如下图所示
运行效果：
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>旅游攻略</title><style type="text/css">.whole {width: 780px; height: 600px; margin: 0 auto;}.first{width: 700px;}.second{margin-top: 10px;width:780px;height: 30px;background-color: black;}a{color: white;text-decoration: none;}a:focus{outline: 2px solid #00f; /* 蓝色边框，可根据设计调整颜色和宽度 */}.left{float: left;width: 350px;height: 500px;background-color: antiquewhite;margin-top: 10px;border: 1px solid;}.left1{height: 260px;background-color: #886666;}.left2{border-bottom: 2px dashed white;color: #ccc;}.new{font-size: 20px;color: #666;}.right{margin-top: 10px;float: right;height: 250px;width: 390px;}.right2{width: 390px;height: 300px;float: right;}.right3,.right4{margin-top: 0%;color: #333;background-color: #886666;font-size: 12px;}body{background-image: url(img/bg.JPG);}</style></head><body><div class="whole"> <div class="first"><img src="img/logo.JPG" width="780" height="100px" alt="网站logo"/></div> <nav class="second"><a href="#">首页 | </a><a href="#">酒店 | </a><a href="#">旅游 | </a><a href="#">跟团游 | </a><a href="#">自由行 | </a><a href="#">机票 | </a><a href="#">火车 | </a><a href="#">汽车票 | </a><a href="#">机票 | </a><a href="#">门票 | </a><a href="#">攻略 | </a><a href="#">商旅 | </a><a href="#">更多</a></nav><div class="left"><a class="new">最新活动</a><div class="left1"><p class="left2">上海龙支付酒店 + 景点满500减100</p><p class="left2">包车游世界，畅游当地行，还有出行补贴400元/人</p><p class="left2">新年红包，你写就有。请拿起手机，编辑你的信息。</p><p class="left2">女神节，特别好礼，送给漂亮的你。</p><p class="left2">寒假出去玩。温泉滑血HIGH起来，酒店8折起!</p></div><div><img src="img/guanggao.jpg" width="350px" height="190px"/></div></div><div class="right"><img src="img/lijiang.jpg" width="390px" height="200px"/><p class="right3">2019的第一天，我遇见了下雪的丽江。<br />喜欢丽江这边的蓝天白云，一年中总会来上好几次···</p></div><div class="right2"><img src="img/feilvbin.jpg" width="390px" height="200px"/><p class="right4">面面旅拍一宿务渔村麦克坦、墨宝鲸盐甘米银;<br />三入菲律宾之与反向锦鲤携手的囧途纪行</p></div></div></body>
</html>代码讲解
- 这个网页由导航栏（first、second）、左侧的浮动盒子（left）和右侧的浮动盒子（right）组成。
- margin: 0 auto; 有居中的效果
-
其中 alt="网站logo" ，当这图片加载不出来是会用 “网站logo” 的文字来替代图片<img src="img/logo.JPG" width="780" height="100px" alt="网站logo"/>
题目二：
使用CSS对页面网页元素加以修饰，制作“青年志愿者”网站。
运行效果 ：
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>青年志愿者</title><style type="text/css">.whole{width: 100%;height: 850px;border: 0px solid;margin: 0 auto;}.logo{width: 100%;height: 100px;}.logo img{width: 100%;height: 100px;}a{text-decoration: none;}.NavBar{width: 100%;height: 30px;margin-top: 5px;background-color:#686868;}.NavBar a{padding: 10px 20px;}.NavBar2{width: 900px;height: 30px;background-color: white;}.NavBar2 a{color:black;}.left{width: 350px;height: 600px;float: left;margin-left: 20%;margin-right: 10px;border: solid #686868;}.right{width: 350px;height: 600px;float: right;margin-right: 20%;margin-left: 10px;border: solid #686868;}.right1{font-family:fangsong;font-size: 20px;font-weight:bolder;}.right2{border-bottom: 3px solid;}li{list-style: none;text-indent: 4em;}.footer{width: 100%;height: 20px;margin-top: 670px;text-align: center;background-color: #686868;}</style></head><body><div class="whole"><div class="logo"><img src="img/logo2.JPG" width="100%" height="100px"/></div><div class="NavBar"> <span> <a href="#">首页</a> </span><span> <a href="#">志愿组织</a> </span><span> <a href="#">志愿项目</a> </span><span> <a href="#">志愿文化</a> </span><span> <a href="#">志愿人才</a> </span><span> <a href="#">发布</a> </span><span> <a href="#">志愿服务交流会</a> </span><span> <a href="#">志愿社区</a> </span><span> <a href="#">登录</a> </span> </div><div class=".NavBar2"><span><a href="#">中国青年诚信活动</a> </span><span><a href="#">志愿中国</a> </span><span><a href="#">青年之声</a> </span><span><a href="#">中国青年公益行动专栏</a> </span><span><a href="#">2015年公益服务交流会官网</a> </span><span><a href="#">XXXX上线</a> </span></div><div class="left"><img src="img/left.JPG" width="350px" height="220px"/><img src="img/left2.JPG" width="350px" height="375px"/></div><div class="right"><p class="right1">“我和我的祖国”视频征集活动启动</p><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><p class="right2">公益快报</p><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><p class="right2">公益观察</p><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li><li> X X X X X X X X X X </li></div><div class="footer"><p>版权所有©中国青年志愿者</p></div></div></body>
</html>代码讲解：
（1） .whole类
- 整个网页的内容被包裹在
<div class="whole">中，这是一个主要的容器 - width: 100%; 使
whole容器将随着浏览器窗口的大小变化而自动调整宽度 - margin: 0 auto; 使
<div class="whole">这个元素居中。
（2）.NavBar类和.NavBar2类
- 是用来设置导航栏的的样式
（3）
- 此网页设置了两个左右浮动的盒子，从而将内容分成两块
相关文章：
六、元素应用CSS的习题
题目一： 使用CSS样式对页面元素加以修饰，制作“ 旅游攻略 ”网站。如下图所示 运行效果： 代码： <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>旅游攻略</title><…...
正式入驻！上海斯歌BPM PaaS管理软件等产品入选华为云联营商品
近日，上海斯歌旗下BPM PaaS管理软件（NBS）等多款产品入选华为云云商店联营商品，上海斯歌正式成为华为云联营商品合作伙伴。用户登录华为云云商店即可采购上海斯歌的BPM PaaS产品及配套服务。通过联营模式，双方合作能够深…...
使用 Axios 上传大文件分片上传
背景 在上传大文件时，分片上传是一种常见且有效的策略。由于大文件在上传过程中可能会遇到内存溢出、网络不稳定等问题，分片上传可以显著提高上传的可靠性和效率。通过将大文件分割成多个小分片，不仅可以减少单次上传的数据量，降…...
Nginx+Lua脚本+Redis 实现自动封禁访问频率过高IP
1 、安装OpenResty 安装使用 OpenResty，这是一个集成了各种 Lua 模块的 Nginx 服务器，是一个以Nginx为核心同时包含很多第三方模块的Web应用服务器，使用Nginx的同时又能使用lua等模块实现复杂的控制。 （1）安装编译工具…...
PART 1 数据挖掘概论 — 数据挖掘方法论
目录 数据库知识发掘步骤 数据挖掘技术的产业标准 CRISP-DM SEMMA 数据库知识发掘步骤 数据库知识发掘（Knowledge Discovery in Database，KDD）是从数据库中的大量数据中发现不明显、之前未知、可能有用的知识。 知识发掘流程（Knowledge Discovery Process）包括属性选择…...
Centos安装ffmpeg的方法
推荐第一个，不要自己编译安装，太难了，坑多。 在 CentOS 上安装 FFmpeg 有几种方法，以下是两种常见的方法： ### 方法一：使用 RPM Fusion 仓库安装 1. **启用 RPM Fusion 仓库**： RPM Fusion 是一个第三方仓库，提供了许多 CentOS 官方仓库中没有的软件包。 ```bash…...
理解SQL中通配符的使用
前言 SQL 是一种标准化的结构化查询语言，涉及结构化查询时，高效地检索数据至关重要。而通配符是SQL中模式匹配的有效的方法。使用通配符可以更轻松地检索到所需的确切数据。通配符允许我们定义多功能查询条件。本文将 介绍SQL通配符的基础知识及用法。 …...
SpringBoot篇（简化操作的原理）
目录 一、代码位置 二、统一版本管理（parent） 三、提供 starter简化 Maven 配置 四、自动配置 Spring（引导类） 五、嵌入式 servlet 容器 一、代码位置 二、统一版本管理（parent） SpringBoot项目都会继…...
Cesium的模型(ModelVS)顶点着色器浅析
来自glTF和3D Tiles的模型会走ModelVS.glsl。这个文件不单独是把模型顶点转换为屏幕坐标，还包含了丰富的处理过程。 Cesium是根据定义的Define判断某个行为是否需要被执行，比如#define HAS_SILHOUETTE，说明需要计算模型外轮廓线。 Cesium的…...
机器人领域中的scaling law：通过复现斯坦福机器人UMI——探讨数据规模化定律(含UMI的复现关键)
前言 在24年10.26/10.27两天，我司七月在线举办的七月大模型机器人线下营时，我们带着大家一步步复现UMI，比如把杯子摆到杯盘上(其中1-2位学员朋友还亲自自身成功做到该任务) 此外，我还特地邀请了针对UMI做了改进工作的fastumi作者…...
C++之多态的深度剖析
目录 前言 1.多态的概念 2.多态的定义及实现 2.1多态的构成条件 2.1.1重要条件 2.1.2 虚函数 2.1.3 虚函数的重写/覆盖 2.1.4 选择题 2.1.5 虚函数其他知识 协变（了解） 析构函数的重写 override 和 final关键字 3. 重载，重写&…...
Microsoft Office PowerPoint制作科研论文用图
Microsoft Office PowerPoint制作科研论文用图 1. 获取高清图片2. 导入PPT3. 另存为“增强型windows元文件”emf格式4. 画图剪裁 1. 获取高清图片 这里指通过绘图软件画分辨率高的图片，我一般使用python画dpi600的图片。 2. 导入PPT 新建一个PPT（注意&a…...
go语言进阶之并发基础
并发 什么是并发，也就是我们常说的多线程，多个程序同时执行。 并发的基础 线程和进程 进程 进程是操作系统中一个重要的概念，指的是一个正在运行的程序的实例。它包含程序代码、当前活动的状态、变量、程序计数器和内存等资源。进程是系…...
po、dto、vo的使用场景
现在项目中有两类模型类：DTO数据传输对象、PO持久化对象，DTO用于接口层向业务层之间传输数据，PO用于业务层与持久层之间传输数据，有些项目还会设置VO对象，VO对象用在前端与接口层之间传输数据，如下图&#…...
聊一聊Elasticsearch的一些基本信息
一、Elasticsearch是什么 Elasticsearch简称ES，是一款分布式搜索引擎。它是在Apache Lucene基础之上采用Java语言开发的。 Elasticsearch的官方网站对它的解释是：Elasticsearch是一个分布式、RESTful的搜索和数据分析引擎。 通过上边的官方解释&#…...
Unity 两篇文章熟悉所有编辑器拓展关键类 （上）
本专栏基础资源来自唐老狮和siki学院，仅作学习交流使用，不作任何商业用途，吃水不忘打井人，谨遵教诲 编辑器扩展内容实在是太多太多了（本篇就有五千字） 所以分为两个篇章而且只用一些常用api举例，…...
Spring SPI、Solon SPI 有点儿像（Maven 与 Gradle）
一、什么是 SPI SPI 全名 Service Provider interface，翻译过来就是“服务提供接口”。基本效果是，申明一个接口，然后通过配置获取它的实现，进而实现动态扩展。 Java SPI 是 JDK 内置的一种动态加载扩展点的实现。 一般的业务代…...
合并排序算法（C语言版）
#include <stdio.h> void Copy(int *a, int *b, int left, int right) { int i; for(i0;i<right-left1;i) { a[ileft] b[i]; } } // 将 a[left,middle] 和 a[middle1,right]合并到 b[left, right]中 void Merge(int *a, int left, int midd…...
C++——输入一行文字，找出其中的大写字母、小写字母、空格数字以及其他字符各有多少。用指针或引用方法处理。
没注释的源代码 #include <iostream> using namespace std; int main() { char c; int ul0,ll0,sp0,di0,other0; cout<<"please input script c:"; while(cin.get(c)) { if(c\n) break; else if(c>A&&…...
【skywalking】maximum query complexity exceeded 3336 ＞ 3000
问题 skywalking相关版本信息 jdk：17skywalking：10.1.0apache-skywalking-java-agent：9.3.0ElasticSearch : 8.8.2 问题描述 maximum query complexity exceeded 3336 > 3000 最大查询复杂度超过3336>3000 可能原因 查询条件过于复…...
开源一个开发的聊天应用与AI开发框架，集成 ChatGPT，支持私有部署的源码
大家好，我是一颗甜苞谷，今天分享一个开发的聊天应用与AI开发框架，集成 ChatGPT，支持私有部署的源码。 介绍 当前系统集成了ChatGPT的聊天应用，不仅提供了基本的即时通讯功能，还引入了先进的AI技术&#x…...
开发了一个成人学位英语助考微信小程序
微信小程序名称：石榴英语 全称：石榴英语真题助手 功能定位 北京成人学士学位英语辅助学习工具，包含记高频单词，高频词组，专项练习，模拟考试等功能。 开发背景 个人工作需要提高学习英文水平ÿ…...
LeetCode16:最接近的三数之和
原题地址：. - 力扣（LeetCode） 题目描述 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数，使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 示例 1…...
VisualStudio2022配置2D图形库SFML
文章目录 1. 下载安装SFML库2. 创建C项目并配置SFML配置include目录和库目录链接SFML库配置动态链接库 3. 测试 1. 下载安装SFML库 SFML（Simple and Fast Multimedia Library）C库，适合2D游戏和图形界面，提供了以下模块࿱…...
「Mac畅玩鸿蒙与硬件4」鸿蒙开发环境配置篇4 - DevEco Studio 高效使用技巧
本篇将进一步介绍如何在 DevEco Studio 中高效使用各种功能，通过掌握快捷键、代码补全、调试工具等，帮助开发者在鸿蒙应用开发中大幅提升工作效率。 关键词 DevEco Studio快捷键代码补全调试工具项目导航 一、快捷键与高效操作 快捷键是提升开发效率的…...
构建生产级的 RAG 系统
对 RAG 应用程序进行原型设计很容易，但要使其高性能、健壮且可扩展到大型知识语料库却很困难。 本指南包含各种提示和技巧，以提高 RAG 工作流程的性能。我们首先概述一些通用技术 - 它们按照简单到复杂的顺序进行排列。然后，我们将更深入地研…...
完全透彻了解一个asp.net core MVC项目模板2
这是《完全透彻了解一个asp.net core MVC项目模板》的第二篇，如果你直接进入了本篇博文而不知道上下文，请先阅读《完全透彻了解一个asp.net core MVC项目模板》的第一篇。 文章目录 一、补充几个问题1、有关导航链接和Tag Helper2、_ViewStart.cshtml与…...
uniapp 如何调用音频
uniapp调用音频 button点击 <view><button click"startPlay">开始播放</button></view>方法实现 startPlay() { const innerAudioContext uni.createInnerAudioContext();innerAudioContext.src /static/sounds/oqc.mp3;innerAudioContex…...
在Facebook运营中使用住宅IP的重要性
在当前社交媒体的浪潮中，Facebook作为全球最大的社交网络之一，吸引了数以亿计的用户。为了在这一平台上实现有效的运营和推广，越来越多的博主和营销人员正在寻求最佳的养号策略。其中，IP地址的选择显得尤为重要，尤其是…...
EJB项目如何升级SpringCloud
记录某金融机构老项目重构升级为微服务过程1 如何从EJB架构拆分微服务 这个非常有趣的过程，整个过程耗时大致接近半年时光，需要考虑到重构升级保留原来的业务线，而且还要考虑后续的维护成本，保留现有的数据库表结构，…...
肇庆市专注网站建设平台/怎么免费创建个人网站
近期微软针对Windows Azure推出了按分钟计费系统，用户在运行虚拟机、网站、云或移动服务时，可以按照实际消费的分钟数来进行支付。此外，当用户停止虚拟机后，微软将不再向用户收取任何计算时间的费用，但依然保留部署状态…...
经营网站挣钱/seo公司排名教程
使用宝塔面板安装mysqlLinux基本内容，里面有涉及到安装Mysql修改密码而且也要在数据库的菜单中设置root密码修改后密码后进行登录，就不会出现下面的报错了[rootcentos7 ~]# mysql -u root -pEnter password:ERROR 1045 (28000): Access denied for user …...
怎样做恶搞网站/上海推广外包
1. collections模块collections模块主要封装了⼀些关于集合类的相关操作. 比如, 我们学过的Iterable,Iterator等等. 除了这些以外, collections还提供了⼀些除了基本数据类型以外的数据集合类型. Counter, deque, OrderedDict, defaultdict以及namedtuple class Animal:passfr…...
建设实业公司网站设计模板/网站优化与seo
一般来说一个 HTML 文档有很多标签，比如“<html>”、“<body>”、“<table>”等，想把文档中的 img 标签提取出来并不是一件容易的事。由于 img 标签样式变化多端，使提取的时候用程序寻找并不容易。于是想要寻找它们就必须写…...
公安厅网站 做10道相关题目/站长申论
2019独角兽企业重金招聘Python工程师标准>>> alembic是sqlalchemy的作者Mike Bayer开发的数据库迁移工具。在uliweb中已经有集成，比如你安装了uliweb.contrib.orm后，即可以使用uliweb alembic [init][diff][upgrade] 来进行数据库的迁移。具体…...
任县网站建设/代写文章多少钱
Python pandas to csv 如何保存指定列 （根据列名保存csv） 解决方案： 一定要有两个列表哦...