HTML和CSS笔记
不能吃的莴苣
这个作者很懒,什么都没留下…
展开
-
HTML和CSS —— 13、伸缩布局
伸缩布局一、介绍flex(弹性盒、伸缩盒)—— 是css中的又一种布局手段,它主要用来代替浮动来完成页面的布局—— flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变—— 弹性容器 要使用弹性盒,必须要将一个元素设置为弹性容器 我们通过 display 来设置弹性容器 display:flex 设置为块级弹性容器 display:inline-flex 设置为行内的弹性容器—— 弹性元素 弹性容器的子元素是弹性元素(弹性项) 一个元素可以同时是弹原创 2020-08-17 09:37:51 · 216 阅读 · 0 评论 -
HTML和CSS —— 12、过渡和动画
过渡、动画、transform一、过渡1.1、介绍过渡(transition)通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好看的效果,提升用户的体验1.2、属性介绍transition-property(指定要执行过渡的属性) 多个属性间使用,隔开 如果所有属性都需要过渡,则使用all关键字 大部分属性都支持过度效果,注意过渡时必须是从一个有效数值向另一个有效数值进行过度<!--例如--><style> div{原创 2020-08-17 09:37:06 · 295 阅读 · 0 评论 -
HTML和CSS —— 11、表单和表格
表格和表单一、表格1.1 表格基本<table border="1" width='50%' aligh='center'> <!--在tr中使用td表示一个单元格,有几个td就有几个单元格--> <tr> <!--在tr中使用td表示一个单元格,有几个td就有几个单元格--> <td>A1</td> <td>B1</td> <原创 2020-08-17 09:36:12 · 140 阅读 · 0 评论 -
HTML和CSS —— 10、背景设置相关
背景一、background-color 设置背景颜色二、background-img 设置背景图片可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满如果背景的图片大于元素,将会一个部分背景无法完全显示如果背景图片和元素一样大,则会直接正常显示三、background-repeat 用来设置背景的重复方式可选值:repeat 默认值,背景会沿着x轴、y轴双方向重复repeat-x 沿着x轴方向重复原创 2020-08-17 09:35:07 · 121 阅读 · 0 评论 -
HTML和CSS ——9、字体设置相关
字体一、字体相关的样式1.1 color、font-size、font-family和font-facecolor用来设置字体颜色font-size字体的大小和font-size相关的单位,em相当于当前元素的一个font-size,rem相当于根元素的一个font-sizefont-family字体族(字体的格式),可选值:(指定字体的类别,浏览器会自动使用该类别下的字体)serif 衬线字体sans-serif 非衬线字体monospace原创 2020-08-17 09:34:20 · 243 阅读 · 0 评论 -
HTML和CSS —— 8、定位
定位一、定位的含义定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用position属性来设置定位可选值:static 默认值,元素是静止的没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位sticky 开启元素的粘滞定位二、相对定位概念: 当元素的position属性设置为relative时则开启了元素的相对定位特点:元素开启相对定位以后,如果不设置偏移量原创 2020-08-17 09:33:33 · 133 阅读 · 0 评论 -
HTML和CSS —— 7、浮动、BFC、塌陷
补充一、盒子的大小默认情况下,盒子可见框的大小由内容区,内边距和边框共同决定 box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用) 可选值: content - box 默认值,宽度和高度用来设置内容区的大小 border - box 宽度和高度用来设置整个盒子可见框的大小 width 和 height 指的是内容区 和 内边距 和 边框的总大小<!DOCTYPE html><html> <原创 2020-08-14 17:09:48 · 114 阅读 · 0 评论 -
HTML和CSS —— 6、盒子模型
盒子模型一、文档流(normal flow) 文档流:就是普通流bai了。就像以前用表格布du局基本只涉及到文档流,如绝对定位的元zhi素不占文dao档流,它会忽略文档流的存在而浮在已有东西的上面。如相对定位它占文档流 ,所以定位不好它会覆盖已有的东西。浮动的东西也不占的,只是文档流会围绕浮动的东西。因为div布局要经常用浮动,不浮动不好布局。如一个主div1是文档流,假设里面有(2个浮动div(高100px)),如果不加清理,或overflow或其他处理方法。因为东西在两个 浮动的div里,这时接个主原创 2020-08-14 17:08:55 · 259 阅读 · 0 评论 -
HTML和CSS —— 5、颜色相关
一些属性介绍一、像素、百分比和em、rem1.1 像素和百分比应用地方↓<stytle> div{ width:200px }</stytle>长度单位: 像素: —— 屏幕(显示器) 实际上是由一个一个的小点点构成的 —— 不同屏幕的像素大小是不同的,像素越小的屏幕显示得越流畅 —— 所以同样的200px在不同的设备下显示效果是不一样的 百分比: —— 也可以将属性值设置为相对于起父元素属性的(这么说不是很严谨原创 2020-08-14 16:05:53 · 104 阅读 · 0 评论 -
HTML和CSS —— 4、CSS选择器
CSS选择器一、常用选择器1.1 元素选择器 作用:根据标签名来选中指定的元素 语法:标签名{} 例子:p{} h1{} div{}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>元素选择器</title> <style> p{原创 2020-08-14 16:04:59 · 111 阅读 · 0 评论 -
HTML和CSS —— 1、课程简介
课程简介一、软件的架构1.1 C/S,客户端/服务器一般我们使用的软件都是C/S架构比如系统的中的软件QQ、360、office、XMindC表示客户端,用户通过客户端来使用软件S表示服务器,服务器负责处理软件的业务逻辑特点软件使用前必须得安装软件更新时,服务器和客户端得同时更新C/S架构的软件不能跨平台使用C/S架构的软件客户端和服务器通信采用的是自有协议(自己定义的协议),相对来说比较安全1.2 B/S,浏览器/服务器B/S本质上也是C/S,只不过B/S结构的软原创 2020-08-14 15:45:45 · 330 阅读 · 0 评论 -
HTML和CSS —— 2、HTML和CSS简介
HTML和CSS简介一、HTML1.1 介绍HTML(Hypertext Markup Language)超文本标记语言它负责网页的三个严肃之中的结构HTML使用标签的形式来标识网页中的不同组成部分所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面1.2 标准结构<html> <head> <title></title> </head> <body>原创 2020-08-14 15:51:39 · 131 阅读 · 0 评论 -
HTML和CSS ——3、常用标签
常用标签一、属性可以为HTML标签设置属性。通过属性为HTML元素提供附加信息属性需要设置在开始标签和自结束标签中属性总是以名称/值对的形式出现。比如:name=“Value”有些属性可以是任意值,有些则必须是指定值。例如:标题 二、HTML5基本结构<!-- 文档声明 --><doctype html><html> <!-- 头标签 --> <head> <!-- 告诉浏原创 2020-08-14 15:52:48 · 210 阅读 · 0 评论