HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子

自己复习前端基础,仅用于记忆,初学者不太适合

示例代码 - HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="base.css">
  <title>框架元素 装饰元素 弹性盒子</title>
</head>
<body>
  <header>
    <h1>frame、decoration element</h1>
    <nav>
      <ul class="navbar">
        <li><a href="#">首页</a></li>
        <li><a href="#">框架元素</a></li>
        <li><a href="#">装饰元素</a></li>
        <li><a href="#">弹性盒子</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div>
      <pre>
        <h2>赋得古原草送别</h2>
        <abbr title="&lt;b&gt;"><b>离离原上草</b></abbr>
        <abbr title="&lt;strong&gt;"><strong>一岁一枯荣</strong></abbr>
        <abbr title="&lt;i&gt;"><i>野火烧不尽</i></abbr>
        <abbr title="&lt;em&gt;"><em>春风吹又生</em></abbr>
        <abbr title="&lt;s&gt;"><s>远芳侵古道</s> </abbr>
        <abbr title="&lt;del&gt;"><del>晴翠接荒城</del></abbr>
        <abbr title="&lt;u&gt;"><u>又送王孙去</u></abbr>
        <abbr title="&lt;mark&gt;"><mark>萋萋满别情</mark></abbr>
      </pre>
    </div>
    <aside>
      <pre>
        显然:
            b与strong、em与i、s与del的
            效果相同,只是含义不同;u是
            下划线的装饰作用,mark是标记
            的作用,不建议使用HTML的装饰
            标签,推荐CSS来做相关操作
      </pre>
    </aside>
  </main>
  <footer>&copy; 2023 My Website. All rights reserved.</footer>
</body>
</html>

示例代码 - CSS

* {
    padding: 0;
    margin: 0;
}

li, a {
    padding: 1rem;
    text-decoration: none;
    color: black;
    list-style-type: none;
}

body {
    display: flex;
    flex-direction: column;
    justify-items: center;
}

header {
    text-align: center;
    background-color: #8fb1c7;
    padding-top: 1.5rem;
}

.navbar {
    display: flex;
    justify-content: space-around;
}

main {
    display: flex;
}

div {
    padding: 2rem;
    flex: 3;
    font-size: 18px;
    text-align: center;
    background-color: #72927e;
}

aside {
    flex: 2;
    background-color: #735b73;
    padding: 2rem;
    font-size: 18px;
}

footer {
    text-align: center;
    background-color: #727c48;
}

h2 {
    margin: 2rem;
}

效果

 框架元素

<!DOCTYPE html>                                # 说明文档类型是HTML5
<html lang="en">                               # 项目根元素
<head>                                         # 头元素,存储元数据
  <meta charset="UTF-8">                       # 元数据,不为用户所看见
  <link rel="stylesheet" href="base.css">      # 链接元素,指向css、js
  <title> </title>                             # 标题元素 
</head>
<body>                                         # 用户可见元素的主体
  <header>                                     # 头部元素,如标题、导航等最上方内容
    <nav>  </nav>                              # 导航
  </header>
  <main>                                       # 内容主体
    <div>  </div>                              # 块级容器,    
    <aside>   </aside>                         # 侧边栏内容 
  </main>
  <footer></footer>                            # 页脚内容
</body>
</html>

装饰元素

<abbr title="&lt;b&gt;"><b>离离原上草</b></abbr>
<abbr title="&lt;strong&gt;"><strong>一岁一枯荣</strong></abbr>
<abbr title="&lt;i&gt;"><i>野火烧不尽</i></abbr>
<abbr title="&lt;em&gt;"><em>春风吹又生</em></abbr>
<abbr title="&lt;s&gt;"><s>远芳侵古道</s> </abbr>
<abbr title="&lt;del&gt;"><del>晴翠接荒城</del></abbr>
<abbr title="&lt;u&gt;"><u>又送王孙去</u></abbr>
<abbr title="&lt;mark&gt;"><mark>萋萋满别情</mark></abbr>

说明:

abbr:缩写元素,鼠标悬停显示title内容

&lt;、&gt; :分别对应<、>

b、strong:效果是加粗

em、i:效果是斜体

s、del:效果是删除线

u:效果是下划线

mark:效果是标记

弹性盒子

详细介绍

        弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)

概念

        用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间,收缩以适应更小的空间。

用法

        设置父元素为flex,为一个容器,其直接子元素为项目(item)可控制排版。

基础介绍

        父元素属性

        flex-direction:row | row-reverse | column | column-reverse;

        flex-wrap:nowrap | wrap | wrap-reverse;

        flex-flow:flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

        justify-content:flex-start | flex-end | center | space-between | space-around | stretch

        align-items:flex-start | flex-end | center | baseline | stretch (单行)

        align-content:flex-start | flex-end | center | space-between | space-around | stretch

        子元素属性

        order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0

        flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

        flex-shrink:定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

        flex-basis:定义了在分配多余空间之前,项目占据的主轴空间,默认值为auto

        flex:是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选

        该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)

        align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值

        为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

        auto | flex-start | flex-end | center | baseline | stretch

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构 —— Dijkstra算法

数据结构 —— Dijkstra算法 Dijkstra算法划分集合模拟过程打印路径 在上次的博客中&#xff0c;我们解决了使用最小的边让各个顶点连通&#xff08;最小生成树&#xff09; 这次我们要解决的问题是现在有一个图&#xff0c;我们要找到一条路&#xff0c;使得从一个顶点到另一个…

前端JS特效第26波:jQuery日期时间选择器插件

jQuery日期时间选择器插件&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下&#xff1a; <!DOCTYPE html> <html> <head lang"zh-CN"> <meta charset"UTF-8"> <title>jQuery日期时间选择器插件 - PHP中文网</t…

UI自动化测试是什么?什么项目适合做UI自动化测试

1. 页面对象设计模式的优势 (1) 创建可以跨多个测试用例共享的代码 (2) 减少代码的重复性 (3) 如果界面需要维护&#xff0c;只需要修改一个地方&#xff0c;修改以及维护的成本减少 2. 每个目录结构表达的意思 (1) Base:基础层&#xff0c;是用来编写定位元素 (2) Commo…

PL/SQL安装+汉化教程

PL/SQL安装教程 一、安装&#xff1a; 登陆官网&#xff1a;PL/SQL Developer - Allround Automations下载 下载PL/SQL稳定版本12.0.7 根据自己计算机版本安装相适配的版本。我这里安装X64-bit版本 进行安装&#xff1a; 根据情况去更改安装&#xff0c;我这里全部下一步…

【从零到一,如何搭建本地AI大模型】

摘要: 本文主要记录这一段时间对本地大模型搭建的心得。 作为一个资深程序员,在AI席卷全球的时候,深深感觉到了一丝危机感,不禁有一个想法不断在脑海闪现:我会不会真的哪一天被AI给取代了? 从哪入手 程序员出生的我,掌握了很多语言,从前端到数据库,再到运维,基本都…

Java基础-组件及事件处理(上)

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 Swing 概述 MVC 架构 Swing 特点 控件 SWING UI 元素 JFrame SWING 容器 说明 常用方法 示例&a…

为什么选择虚拟艺术设计展览?艺术家应知的五个关键好处

随着技术的进步&#xff0c;虚拟艺术设计展览成为了展示艺术作品的重要途径。它不仅为艺术家们提供了新的展示平台&#xff0c;还打破了传统展览的局限。 1、扩大观众范围&#xff1a;打破地理限制 虚拟艺术设计展览能够打破地理限制&#xff0c;使得全球观众可以随时随地访问…

Androidstudio开发,天气预报APP

1.项目功能思维导图 2. 项目涉及到的技术点 数据来源&#xff1a;和风天气API使用okhttp网络请求框架获取api数据使用gson库解析json数据使用RecyclerViewadapter实现未来7天列表展示和天气指数使用PopupMenu 实现弹出选项框使用动画定时器实现欢迎页倒计时和logo动画使用Text…

《梦醒蝶飞:释放Excel函数与公式的力量》10.2 COMPLEX函数

第二节 10.2 COMPLEX函数 10.2.1函数简介 COMPLEX函数是Excel中的一个工程函数&#xff0c;用于将实部和虚部组合成一个复数。复数广泛应用于工程、电气、物理等领域&#xff0c;COMPLEX函数提供了方便的复数表示和计算方法。 10.2.2语法&#xff1a; COMPLEX(real_num, i_…

SpringSecurity-SpirngBoot-方法级授权(SpringSecurity6.3新特性)(四)

SpringSecurity-SpirngBoot-方法级授权&#xff08;SpringSecurity6.3新特性&#xff09;&#xff08;四&#xff09; 本章使用SpringSecurity6.3新特性实现数据级别的鉴权&#xff0c;主要的目的是实现不同权限的用户查询同一个方法&#xff0c;限制一些内容只能拥有特定权限…

自定义@AnonymousAccess注解

一.目的&#xff1a; 自定义AnonymousAccess注解&#xff0c;可以直接在controller上添加该注解使请求绕过权限验证进行匿名访问&#xff0c;便于快速调用调试以及部分不需要进行安全验证的接口。而不是每次都需要去SecurityConfig文件中进行修改。 二.流程&#xff1a; 三.实…

阿里MotionShop——AI视频工具:一键替换视频人物为3D虚拟角色~

近期AI相关的新奇应用层出不穷&#xff0c;今天小元老师要给大家安利一个由阿里巴巴研发的AI视频生成技术——MotionShop&#xff01; 1、一键替换3D虚拟角色 MotionShop通过视频处理、角色检测、背景修复等多重步骤&#xff0c;能够将视频中的人物角色&#xff0c;一键转换成…

Pytorch(笔记7损失函数类型)

前言 损失函数&#xff08;Loss Function&#xff09;&#xff1a;是定义在单个样本上的&#xff0c;是指一个样本的误差&#xff0c;度量模型一次预测的好坏。 代价函数&#xff08;Cost Function&#xff09;成本函数经验风险&#xff1a;是定义在整个训练集上的&#xff0c…

文件防止拷贝如何实现?这些攻略给你了

在信息爆炸的时代&#xff0c;数据安全成为企业和个人不可忽视的重要环节。文件的非法拷贝不仅可能侵犯知识产权&#xff0c;还可能导致敏感信息的泄露&#xff0c;进而引发严重的后果。 因此&#xff0c;了解并掌握文件防止拷贝的方法和技术至关重要。本文将详细介绍几种常见…

压测jmeter 插件 之 tps和响应时间图

1. 背景 进行压测ing 2. 需要插件 TPS 和 响应时间 3. 插件 在 选项-最下面-plugins Manager 在 Available Plugins 中 搜索 &#xff1a;jpgc - Standard Set 重启安装就好啦

12--RabbitMQ消息队列

前言&#xff1a;前面一章内容太多&#xff0c;写了kafka&#xff0c;这里就写一下同类产品rabbitmq&#xff0c;rabbitmq内容较少&#xff0c;正好用来过度一下&#xff0c;概念还是会用一些例子来说明&#xff0c;实际部署的内容会放在概念之后。 1、基础概念 1.1、MQ消息队…

年化15.73%:创业板指数布林带突破Backtrader策略(代码+数据)

原创文章第582篇&#xff0c;专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 昨天咱们使用backtrader&#xff0c;重写了创业板动量趋势择时&#xff1a;年化19.2%&#xff1a;backtraderquantstats实现创业板动量择时(代码数据) 今天咱们换一个通道指标&#…

计算机视觉研究方向初学习,计算机视觉都有什么方向??!到底是干什么的?!

计算机视觉研究方向初学习&#xff0c;计算机视觉都有什么方向&#xff1f;&#xff1f;&#xff01;到底是干什么的&#xff1f;&#xff01; 语义分割图像分类目标检测和定位实例分割、全景分割物体跟踪姿态估计人脸识别人体识别图像增强风格迁移图像生成视觉问答视频分析光学…

C++视觉开发 七.模板匹配

模板匹配是一种基于图像处理的技术&#xff0c;用于在目标图像中寻找与给定模板图像最相似的部分。通过设定的模板&#xff0c;将目标图像与模板图像比较&#xff0c;计算其相似度&#xff0c;实现对目标图像的判断。 目录 一.手写数字识别 重要函数&#xff1a; 1.cv::glob…

【已解决】腾讯云安装了redis,但是本地访问不到,连接不上

汇总了我踩过的所有问题。 查看配置文件redis.conf 1、把bind 127.0.0.1给注释掉&#xff08;前面加个#就是&#xff09;或者改成bind 0.0.0.0&#xff0c;因为刚下载时它是默认只让本地访问。&#xff08;linux查找文档里的内容可以输入/后面加需要匹配的内容&#xff0c;然后…