html5+css3
笔记
Nameless-Y
这个作者很懒,什么都没留下…
展开
-
【CSS3】-13 一些居中技巧
行内元素水平居中:text-align:center。如果行内有 文本、图片等元素。可以为父容器设置 text-align:center块元素:定宽块元素居中:满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中。 定宽要有【 width 】元素、居中要有 【margin:上下随便 左右auto】元素,缺一不可 实现一直宽度盒子水平居中:<!DOCTYPE html><html lang="en"><he...原创 2021-02-10 10:15:03 · 103 阅读 · 0 评论 -
【CSS3】-12 flex 弹性盒 模型
display原创 2021-02-09 18:17:46 · 72 阅读 · 0 评论 -
【CSS3】-10 CSS布局模型
元素有三种布局模型:1、流动模型(Flow):默认就是流动模型。第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)2、浮动模型 (Float):float:left; 左浮动。任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。3、层模型(La转载 2021-02-09 09:38:49 · 96 阅读 · 0 评论 -
【CSS3】-11 布局模型之层模型定位-绝对-相对-固定
概念布局模型之层模型定位 (通过left、right、top、bottom属性)绝对:position:absolute; right:100px; top:20px;(相对于浏览器窗口移动)相对:position:relative; left:100px; top:50px;(相对于以前位置移动) (确定元素在正常文档流中的偏移位置)(偏移前的位置保留不动)固定:position:fixed;好像excel中的冻结应用1.Relative与Absolute组合使用...原创 2021-02-08 23:25:48 · 181 阅读 · 0 评论 -
【CSS3】-09 盒模型之 边界/圆角
为块状元素增加:边界border,内间距padding,外间距margin给边界设置圆角:border-xxx-xxx-radius<!DOCTYPE html><!-- 来自:https://www.imooc.com/code/2054 --><html> <head> <meta charset="UTF-8"> <title>盒模型2</title>原创 2021-02-08 11:50:50 · 160 阅读 · 0 评论 -
【CSS3】-08 盒模型之 display
使用display:block将内联元素转换为块级元素 使用display:inline将块状元素转换为内联元素 使用display:inline-block转为内联块元素 使用display:none使其作用的对象隐身<!DOCTYPE html><!-- 盒模型 --><html> <head> <meta charset="UTF-8"> <title>盒模...原创 2021-02-08 10:48:05 · 112 阅读 · 0 评论 -
【CSS3】-07 文本修饰
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>文本修饰</title> <style type="text/css"> /* 下划线。删除线。上面的线 */ /* underline line-through overline */ span { text-decoratio.原创 2021-02-07 18:32:47 · 256 阅读 · 0 评论 -
【CSS3】-06 文本样式 text-decoration
文本样式:text-decoration中划线:line-through下划线:underline上划线:overline原创 2021-02-07 18:30:51 · 69 阅读 · 0 评论 -
【CSS3】-05 字体样式、颜色
选择字体:font-family 字体大小,font-size 字体样式:font-style 颜色:color<!DOCTYPE html><html> <head> <meta> <title>字体样式、文本样式、上色</title> <style> /* 设置字体:font-family */ body原创 2021-02-07 17:59:38 · 84 阅读 · 0 评论 -
【CSS3】-04 权值与 !important
权值:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/...原创 2021-02-07 17:35:22 · 132 阅读 · 0 评论 -
【CSS3】-03 样式继承,优先级和重要性
1、如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。2、选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器内容:https://www.imooc.com/code/21391...原创 2021-02-07 17:29:32 · 95 阅读 · 0 评论 -
【CSS3】-02 选择器
各类选择器:标签选择器:某个标签【直接使用标签】 类选择器:.name{xx}【使用class】 ID选择器:#name{xx}【使用id】【以下是使用class】子选择器:.name>sub{xx} 后代选择器:.name allsub{xx}【对所有标签起作用】通用选择器:*{xx}【被作用的标签】伪类选择器:???举例:a:hover{color:red;}<!DOCTYPE html><!-- 选择器 --><html&g原创 2021-02-07 17:05:15 · 186 阅读 · 0 评论 -
【CSS3】-01 添加样式的3种方式
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。1. 可以直接在html文件中定义样式原创 2021-02-07 16:00:11 · 1354 阅读 · 0 评论 -
【HTML5】-06 表单单选多选、下拉选项
内容1:label内容2:input type:radio单选; checkbox多选内容3:select、option 下拉<!DOCTYPE html><!-- 使用label为input标签穿上衣服 --><!-- label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动原创 2021-02-05 10:58:51 · 1668 阅读 · 0 评论 -
【HTML5】-05 表单学习
内容:<!DOCTYPE html><!-- 使用表单标签,与用户交互 - 使用<form>创建表单 --><html> <head> <meta charset="UTF-8"> <title>表单学习</title> </head> <body> <h3>第一个表单</h3>原创 2021-02-04 17:48:13 · 102 阅读 · 0 评论 -
【HTML5】-04 图片与链接
图片与链接:<!DOCTYPE html><html> <head> <title>第二页</title> </head> <body> <p>1.图片插入:</p><br> <!-- 使用img标签加入图片 --> <img src="img/2.png" alt=""&g原创 2021-02-04 16:40:22 · 243 阅读 · 0 评论 -
【HTML5】-03 结构与标签应用
学习笔记:<!-- 声明html5文档类型 --><!DOCTYPE html><!-- html文档开始标签,对应还有结尾标签 --><html><!-- 头部,head标签对 --><head> <meta charset="UTF-8"> <!-- title用于定义网页标签名 --> <title>你好</title> &.原创 2021-02-04 14:28:49 · 59 阅读 · 0 评论 -
【HTML5】-02 表格
table标签原创 2021-02-02 21:50:38 · 104 阅读 · 0 评论 -
【HTML5】-01 网页结构和常见标签
一般网页结构:3部分组成,如下所示<html> <head></head><body></body></html>html:html标签 head:head标签 body:body标签原创 2021-02-02 20:00:18 · 602 阅读 · 0 评论 -
html/css/js关系
HTML:静态页面框架CSS:静态页面美化JavaScript:动态页面美化原创 2021-02-02 19:57:52 · 83 阅读 · 0 评论