当前位置： 首页 > news >正文

川字结构布局/国字结构布局

news 2026/5/16 16:55:46

1.串字结构布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main{width: 1000px;height: 800px;background-color: gray;border: 1px solid black;/* 外边距 */margin: 0px auto;}.left{/* 定位方式 */position: relative;width: 180px;height: 700px;background-color: green;border: 1px solid black;/* 距离父盒子顶部距离 */top: 50px;/* 盒子的左外边距 */margin-left: 15px;/* 浮动方式 */float: left;}.middle{position:relative;width: 600px;height: 700px;background-color: aquamarine;border: 1px solid black;float: left;top: 50px;}.right{position: relative;width: 180px;height: 700px;background-color: green;border: 1px solid black;float: left;top: 50px;}</style></head><body><div class="main"><div class="left">left</div><div class="middle">middle</div><div class="right">right</div></div>    
</body>
</html>

2.国字结构布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 1px solid black;}.wrap{width: 800px;height: 700px;}.top{width: 762px;height: 100px;background-color: aquamarine;margin:20px 20px 0 20px;}.left{width: 380px;height: 460px;background-color: gray;float: left;margin-left: 20px;}.right{width: 380px;height: 460px;background-color: gray;float: left;}.bottom{/* 保证当前块级元素不会重叠 */clear: both;width: 762px;height: 100px;background-color: aquamarine;margin-left: 20px;}</style>
</head><body><div class="wrap"><div class="top">top</div><div class="left">left</div><div class="right">right</div><div class="bottom">bottom</div></div></body>
</html>

课后作业

思考下面的如何制作

首先是top位置是一张图片

然后是left是文字描述

right也是文字秒速

bottom是版权信息也是文字描述，

最后依次替换即可

照片 

 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 1px solid black;}.wrap{width: 800px;height: 700px;}.top{width: 762px;height: 100px;background-color: aquamarine;margin:20px 20px 0 20px;background-image:url("banner.png");}.left{width: 380px;height: 460px;background-color: gray;float: left;margin-left: 20px;}.right{width: 380px;height: 460px;background-color: gray;float: left;}.bottom{/* 保证当前块级元素不会重叠 */clear: both;width: 762px;height: 100px;background-color: aquamarine;margin-left: 20px;}p{text-align: center;}</style>
</head><body><div class="wrap"><img src="./banner.png" alt="" class="top"><div class="left"><p>什么是甲流</p>甲流一般指甲型流感，主要是由于受到甲型流感病毒感染所引起的急性呼吸道传染病。<p>甲流症状有哪些</p>通常会出现高热、头痛、乏力、肌肉酸痛、食欲减退、咽喉肿痛等各种不良症状。甲型流感早期症状特别类似于普通感冒，但是部分患者很可能会出现消化道症状，并且是具有传染性，主要是通过空气中的飞沫进行传播，也可能会通过密切接触进行传播。</div><div class="right"><p>甲流的预防措施</p>第一、注意个人卫生 在平时的生活当中，应该注意做好个人的清洁卫生工作，尤其是年龄小的孩子，要做到勤洗手、勤换衣服，讲究卫生，小心因为不讲卫生所引发的感染。第二、注意调节饮食 在饮食方面要注意做好荤素搭配，保证充足的营养补给，多吃新鲜的蔬菜和水果，提高身体抵抗力。在做饭的时候生熟要分开，尤其是猪肉要彻底烹饪熟了，这样才能将甲流病毒杀死。第三、进行体育锻炼 平时进行适当的体育锻炼，有助于提高身体的抵抗力，增强对方甲流的能力，可以结合个人的身体状况，到外面散散步、跑跑步、打打球等，但也要注意控制好量，不能过于劳累。第四、接种流感疫苗 接种流感疫苗是预防甲流非常不错的一种方式，但要把握好接种的时间，在每年甲流发病的高峰期前一段时间要及时接种。第五、加强保暖 日常应该注意加强保暖，尤其是在寒冷的冬季要注意及时增加衣物，减少因为着凉等所引发的被传染。第六、文明咳嗽 甲型流感在咳嗽期间很容易把病毒散播到空气中，所以打喷嚏最好使用口罩遮住口鼻，避免飞沫污染他人。</div><div class="bottom"><p>版权所有&copy;东方翱翔</p></div></div></body>
</html>

相关文章：

川字结构布局/国字结构布局

1.串字结构布局 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style&g…...

编程日记 2024/10/14 3:26:09

2013年国赛高教杯数学建模C题古塔的变形解题全过程文档及程序

2013年国赛高教杯数学建模 C题 古塔的变形 由于长时间承受自重、气温、风力等各种作用&#xff0c;偶然还要受地震、飓风的影响&#xff0c;古塔会产生各种变形&#xff0c;诸如倾斜、弯曲、扭曲等。为保护古塔&#xff0c;文物部门需适时对古塔进行观测&#xff0c;了解各种变…...

编程日记 2024/10/14 3:23:04

web 0基础第一节 文本标签

这是一个html文件的基本结构 在vs code 中使用英文的 ! 可快捷设置这样的结构 <!-- --> 是在html写注释的结构 <!DOCTYPE html> <!--标识当前文档类型为html--> <html> …...

编程日记 2024/10/14 3:21:03

Zookeeper快速入门：部署服务、基本概念与操作

文章目录 一、部署服务1.下载与安装2.查看并修改配置文件3.启动 二、基本概念与操作1.节点类型特性总结使用场景示例查看节点查看节点数据 2.文件系统层次结构3.watcher 一、部署服务 1.下载与安装 下载&#xff1a; 一定要下载编译后的文件&#xff0c;后缀为bin.tar.gz w…...

编程日记 2024/10/14 3:17:58

【Sqlite】sqlite内部函数sqlite3_value_text特性

目录 ⚛️1 结论 ☪️2 说明 ☪️3 传入数值转成科学计数法 ♋3.1 只有整数部分 ♏3.2 只有小数部分 ♐3.3 整数小数 ⚛️1 结论 整数(sqlite视为int64)位数 > 20位&#xff0c;sqlite3_value_text 采用科学计数法。否则正常表示。 浮点数(sqlite视为double)的整数部…...

编程日记 2024/10/14 3:15:53

树莓派应用--AI项目实战篇来啦-4.OpenCV读取、写入和显示视频

1. 介绍 视频是由一张一张图片组成的&#xff0c;所以读取视频就相当于读取很多张图片&#xff0c;然后将其连起来cv2.VideoCapture可以捕获摄像头&#xff0c;但是针对树莓派的CSI摄像头调用方式采用了之前介绍的Picamera2 库&#xff0c;所以在调用的时候是有区别的&#xff…...

编程日记 2024/10/14 3:13:52

智能电子后视镜，汽车驾驶更安全，会是一种趋势

相比于传统的后视镜&#xff0c;智能电子后视镜的确有很多的优点。在下雨天和夜晚场景&#xff0c;电子后视镜可以说是表现优秀。 我之前一直以为我们国内是有规定不能使用电子后视镜。没想到&#xff0c;偶然刷到享界S9的视频&#xff0c;这电子后视镜&#xff0c;妥妥的给安排…...

编程日记 2024/10/14 3:12:50

IEC104规约的秘密之九----链路层和应用层

104规约从TCP往上&#xff0c;分成链路层和应用层。 如图&#xff0c;APCI就是链路层&#xff0c;ASDU的就是应用层 我们看到报文都是68打头的&#xff0c;因为应用层报文也要交给链路层发送&#xff0c;链路层增加了开头的6个字节再进行发送。 完全用于链路层的报文每帧都只有…...

编程日记 2024/10/14 3:11:49

最新Prompt预设词指令教程大全ChatGPT、AI智能体（300+预设词应用）

使用指南 直接复制在AI工具助手中使用&#xff08;提问前&#xff09; 可以前往已经添加好Prompt预设的AI系统测试使用&#xff08;可自定义添加使用&#xff09; SparkAi系统现已支持自定义添加官方GPTs&#xff08;对专业领域更加专业&#xff0c;支持多模态文档&#xff0…...

编程日记 2024/10/14 3:07:45

DockerCompose 启动 open-match

背景介绍 open-match是Google和unity联合开源的支持实时多人匹配的框架&#xff0c;已有多家游戏厂商在生产环境使用&#xff0c;官网 https://open-match.dev/site/ 。原本我们使用的是UOS上提供的匹配能力&#xff0c;但是UOS目前不支持自建的Dedicated servers 集群&#x…...

编程日记 2024/10/14 3:04:41

Chainlit集成Dashscope实现语音交互网页对话AI应用

前言 本篇文章讲解和实战&#xff0c;如何使用Chainlit集成Dashscope实现语音交互网页对话AI应用。实现方案是对接阿里云提供的语音识别SenseVoice大模型接口和语音合成CosyVoice大模型接口使用。针对SenseVoice大模型和CosyVoice大模型&#xff0c;阿里巴巴在github提供的有开…...

编程日记 2024/10/14 3:01:38

Canal 扩展篇（阿里开源用于数据同步备份，监控表和表字段（日志））

1.Canal介绍 Canal把自己伪装成从数据库&#xff0c;获取mysql主数据库的日志&#xff08;binlog&#xff09;信息&#xff0c;所以要想使用canal就得先开启数据库日志 https://github.com/alibaba/canal Canal 主要用途是基于 MySQL 数据库增量日志解析&#xff0c;提供增量…...

编程日记 2024/10/14 3:00:37

顺序表的定义

一.顺序表的定义 顺序表--用顺序存储的方式实现线性表 顺序存储。把逻辑上相邻的元素存储在物理位置上也相邻的存储单元中&#xff0c;元素之间的关 系由存储单元的邻接关系来体现。 二.顺序表的实现--静态分配 #include<stdio.h> #define MaxSize 10 //定义最大长度 …...

编程日记 2024/10/14 2:59:36

青少年编程能力等级测评CPA C++一级试卷（1）

青少年编程能力等级测评CPA C一级试卷&#xff08;1&#xff09; 一、单项选择题&#xff08;共20题&#xff0c;每题3.5分&#xff0c;共70分&#xff09; CP1_1_1&#xff0e;在C中&#xff0c;下列变量名正确的是&#xff08; &#xff09;。 A&#xff0e;$123 B&#…...

编程日记 2024/10/14 2:58:34

R语言中的plumber介绍

R语言中的plumber介绍 基本用法常用 API 方法1. GET 方法2. POST 方法3. 带路径参数的 GET 方法 使用 R 对数据进行操作处理 JSON 输入和输出运行 API 的其他选项其他功能 plumber 是个强大的 R 包&#xff0c;用于将 R 代码转换为 Web API&#xff0c;通过使用 plumber&#x…...

编程日记 2024/10/14 2:57:34

uniapp 设置 tabbar 的 midButton 按钮

效果展示&#xff1a; 中间的国际化没生效&#xff08;忽略就行&#xff09; 示例代码&#xff1a; 然后在 App.vue 中进行监听&#xff1a; <script>export default {onLaunch(e) {// #ifdef APPuni.onTabBarMidButtonTap(()>{console.log("中间按钮点击回调…...

编程日记 2024/10/14 2:56:31

php 生成随机数

记录：随机数抽奖 要求：每次生成3个 1 - 10 之间可重复（或不可重复）的随机数，10次为一轮，每轮要求数字5出现6次、数字4出现3次、…。 提炼需求： 1，可设置最小数、最大数、每次抽奖生成随机数的个数、是否允许重复 2，可设置每轮指定数字的出现次数 3，可设置每轮的抽奖…...

编程日记 2024/10/14 2:55:30

MySQL 8.4修改初始化后的默认密码

MySQL 8.4修改初始化后的默认密码 &#xff08;1&#xff09;初始化mysql&#xff1a; mysqld --initialize --console &#xff08;2&#xff09;之后,mysql会生成一个默认复杂的密码&#xff0c;如果打算修改这个密码&#xff0c;可以先用旧密码登录&#xff1a; mysql -u…...

编程日记 2024/10/14 2:54:29

前端开发笔记--css 黑马程序员1

文章目录 1. css 语法规范2.css的书写风格3.基础选择器选择器的分类标签选择器类选择器类选择器的特殊使用--多类名 id 选择器 字体属性常见字体字体大小字体粗细字体倾斜字体的复合简写字体属性总结 文本属性文本颜色文本对齐装饰文本文本缩进文本间距文本属性总结 css的引入方…...

编程日记 2024/10/14 2:52:27

ORACLE 19C创建多个不同字符集PDB

现在需要在一个测试环境创建1个为AL32UTF8的PDB,2个ZHS16GBK的PDB 这种情况下,必须先创建的CDB为AL32UTF8,下面是具体步骤: 1.AL32UTF8的pdb在建实例的时候一起创建完成 2.创建第一个ZHS16GBK的PDB cdr,通过pdbseed来克隆: SQL> create pluggable database cdr admin us…...

编程日记 2024/10/14 2:50:25

OpenHarmony健康打卡应用开发：从状态管理到数据持久化实战

1. 项目概述&#xff1a;一个基于OpenHarmony的健康生活打卡应用最近在捣鼓OpenHarmony应用开发&#xff0c;想做个能督促自己养成好习惯的小工具。核心想法很简单&#xff1a;把“早起”、“喝水”这些日常小事变成可量化、可追踪的任务&#xff0c;每天打卡&#xff0c;看着进…...

编程新知 2026/5/16 16:37:47

终极实战指南：用MifareOneTool解决Windows平台MIFARE Classic卡操作难题

终极实战指南&#xff1a;用MifareOneTool解决Windows平台MIFARE Classic卡操作难题 【免费下载链接】MifareOneTool A GUI Mifare Classic tool on Windows&#xff08;停工/最新版v1.7.0&#xff09; 项目地址: https://gitcode.com/gh_mirrors/mi/MifareOneTool 想象…...

编程新知 2026/5/16 15:40:24

从芯片选型到PCB布线：手把手拆解基于Zynq-7100的10Gbps雷达数据采集卡硬件设计

从芯片选型到PCB布线&#xff1a;Zynq-7100雷达数据采集卡硬件设计实战 在高速数据采集领域&#xff0c;10Gbps量级的实时信号处理对硬件设计提出了严苛挑战。当我们面对雷达回波、医学影像或工业检测等场景时&#xff0c;传统采集方案往往在吞吐量、延迟和同步精度上捉襟见肘。…...

编程新知 2026/5/16 15:24:12

2026届最火的十大降AI率神器解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 人工智能生成内容也就是 AIGC 技术迅猛发展着&#xff0c;其在学术领域的应用引发着深刻变革…...

编程新知 2026/5/16 15:22:06

百度网盘秒传链接终极指南：免费在线转存、生成与转换全攻略

百度网盘秒传链接终极指南&#xff1a;免费在线转存、生成与转换全攻略 【免费下载链接】baidupan-rapidupload 百度网盘秒传链接转存/生成/转换 网页工具 (全平台可用) 项目地址: https://gitcode.com/gh_mirrors/bai/baidupan-rapidupload 还在为百度网盘文件分享的繁…...

编程新知 2026/5/16 14:41:16

基于Belullama框架构建可定制化本地AI模型服务：从原理到实践

1. 项目概述&#xff1a;一个本地化、可定制的AI对话模型部署方案最近在折腾本地AI部署的朋友&#xff0c;可能都绕不开一个名字&#xff1a;Ollama。它确实让拉取和运行各种开源大模型变得像docker pull一样简单。但不知道你有没有遇到过这样的困扰&#xff1a;Ollama默认的AP…...

编程新知 2026/5/16 14:37:11

MAA助手：解放双手的明日方舟全自动游戏管理工具实战指南

MAA助手&#xff1a;解放双手的明日方舟全自动游戏管理工具实战指南 【免费下载链接】MaaAssistantArknights 《明日方舟》小助手&#xff0c;全日常一键长草&#xff01;| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: https://g…...

编程新知 2026/5/16 13:28:55

反向海淘代购集运系统三种搭建路径对比：自研、开源二开、SaaS

「技术、数据、接口、系统问题欢迎留言私信沟通」引言&#xff1a;标准业务架构# 系统演示、API测试控制台&#xff1a;http://console.open.onebound.cn/console/?iRookie用户层&#xff08;Web / App / 小程序&#xff09;↓ 网关层&#xff08;Nginx / Gateway&#xff09;…...

编程新知 2026/5/16 13:18:37

【从零学Vibe Coding】第二章：大模型到底是怎么工作的（小白版）

第二章&#xff1a;大模型到底是怎么工作的&#xff08;小白版&#xff09; 为什么要了解原理&#xff1f; 很多人一边用 AI 写代码&#xff0c;一边又觉得它像魔法。魔法感越强&#xff0c;失望也越大。 因为一旦它出错&#xff0c;你就不知道问题出在哪&#xff0c;只能骂一…...

编程新知 2026/5/16 11:43:20

Midjourney后印象派风格实战手册（2024最新版）：从模糊描述到博物馆级输出的9类失效提示词避坑清单

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;后印象派风格的本质解构与Midjourney语义映射 后印象派并非单一技法流派&#xff0c;而是一场以主观表达重构视觉真实性的认知革命。其核心在于色彩的情感自主性、形体的结构性简化&#xff0c;以及空间…...

编程新知 2026/5/16 11:28:04