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

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

 

http://www.lryc.cn/news/398468.html

相关文章:

  • C++:创建线程
  • python如何查看类的函数
  • P6. 对局列表和排行榜功能
  • uniapp easycom组件冲突
  • 总结24个Python接单赚钱平台与详细教程,兼职月入5000+
  • macOS 的电源适配器设置
  • 视觉SLAM与定位之一前端特征点及匹配
  • 开源项目的认识理解
  • 37.哀家要长脑子了!--层序遍历
  • 【从零开始AI绘画6】StableDiffusionWebUI拓展的安装方法以及推荐的几个拓展
  • HTML5表单的自动验证、取消验证、自定义错误信息
  • SpringMVC系列九: 数据格式化与验证及国际化
  • 判断链表中是否有环(力扣141.环形链表)
  • Kubernetes基于helm部署jenkins
  • 【Linux】vim详解
  • Android11 mtk 第二次设置壁纸,锁屏壁纸不变的问题
  • Java学习路线
  • java 实现人脸检测
  • VSCode神仙插件——Codeium (AI编程助手)
  • css文本划线效果(text-decoration相关属性详解)
  • 《Windows API每日一练》8.5 listbox控件
  • 使用Node.js 框架( Express.js)来创建一个简单的 API 端点
  • 企业服务行业CRM解决方案
  • 服务器怎么进PE系统?
  • Linux内核编译与调试menuos-linux-3.18.6-在ubuntu20.04环境
  • java-mysql 三层架构
  • 打工人如何应对AI对工作岗位的风险
  • C++:从C语言过渡到C++
  • 在安卓中使用FFmpeg录制摄像头的视频并保存到本地MP4文件
  • Vue从零到实战第一天