![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端笔记HTML/CSS
HTML /CSS
夜吟东方独自醉
干
展开
-
2020-10-03 学习路线
**学习路线**原创 2020-10-03 11:00:37 · 51 阅读 · 0 评论 -
2021-08-02 两栏布局
HTML:<!-- 两栏布局 --> <div class="right"></div> <div class="left"></div>CSS:* { margin: 0; padding: 0;}.right { position: absolute; right: 0; top: 0; width: 100px; height: 100px;原创 2021-11-04 19:50:35 · 59 阅读 · 0 评论 -
2020-11-15 HTML5
一.HTML5新增的语义化标签:头部标签:导航标签:内容标签:块级标签:侧边栏标签:尾部标签这种语义化标签针对搜索引擎,可以在页面里使用多次;在IE9中,需要转换成块级元素,常在移动端使用。二.HTML5新增的多媒体标签音频:1.支持的格式:Ogg Vorbis/MP3/Wav2.格式语法:<audio src="文件地址" controls="controls"></audio>3.属性:autoplay:音频就绪就会播放contrls:出现该属原创 2020-11-17 22:07:12 · 72 阅读 · 0 评论 -
2020-11-09 ico图标
一.ico图标使用ico图—首先把favicon.ico图标放入跟目录下—再在html和head之间引入代码如:<link rel="shortcut icon" href="favicon.ico" type="image/x-ico"/>原创 2020-11-10 17:23:57 · 227 阅读 · 0 评论 -
2020-11-4 圆角矩形/定位小结/css高级技巧
一.圆角矩形1.border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;简写,如果4个角数值相同:border-radius:15px;如果四个角数值不同:border-radius:左上角 右上角 右下角 左下角;...原创 2020-11-05 15:59:12 · 275 阅读 · 0 评论 -
2020-11-3 定位/层叠
一.定位1.将盒子定在某个位置,自由地漂浮在其他盒子上面标准流盒子在最底层,浮动流在中间,定位在最上面2.定位=定位模式+边偏移3.边偏移属性:top/bottom/left/right定位元素相对父级元素边线位置4.定位模式语法:选择器 {postition:属性值;}static-静态(相当于无定位,无边偏移,几乎不用)relative-相对absolute-绝对fixed-固定二.相对定位1.相对标准流原来位置,原来在标准流的位置继续占有,后面盒子以标准流方式对待其实例原创 2020-11-03 19:51:25 · 256 阅读 · 0 评论 -
2020-10-21 css12清除浮动/css书顺序
清除浮动一.清除浮动在父级没高度,子盒子浮动,影响到布局时为了解决父级元素因为子级浮动引起内部高度为0的问题清除浮动后,父级能自动检测子级高度解决方法:1.额外标签法(添加了多的空标签,结构差)找到浮动的最后一个元素,在其末尾添加一个空标签如:<div style="clear:both"></div>或:<div class="clear"><div>.clear{ clear:both; }2.父级添加overflow属性给父原创 2020-10-21 10:09:12 · 117 阅读 · 0 评论 -
2020-10-18 css11浮动
浮动一.css布局的三种机制1.普通流块级元素会独占一行,从上向下排列如:div,hr,p,h1~h6,ul,ol,dl,from,table行级元素按照顺序,从左向右排列、如:span,a,em2.浮动让盒子从普通流中浮起来,主要作用是让多个块级盒子一行显示3.定位将盒子定在浏览器的某个位置二.浮动1.作用:让多个盒子排列成一行文字环绕图片盒子左右对齐2.写法:float:right/left;3.设置了浮动属性的元素脱离了标准流,漂浮在普通元素上面,不占原来位置4.原创 2020-10-18 11:20:00 · 121 阅读 · 0 评论 -
2020-10-18 css10margin塌陷/外边距合并
margin塌陷/外边距合并一.相邻块元素外边距合并1.设置上面的盒子margin-bottom为20px,下面的盒子的margin-top为10px,两个盒子的外边距会出现合并现象合并后两盒子的距离变为20px2.解决方法:只给一个盒子加margin值二.嵌套块元素垂直外边距合并(塌陷)1.父元素没有上边的内边距和边框,则会与子元素的上边距合并,取较大者。2.解决方法:为父元素指定上边框;为父元素指定上内边距;为父元素添加overflow:hidden。三.去掉列表的样式 li{原创 2020-10-18 10:41:08 · 111 阅读 · 0 评论 -
2020-10-17 css09盒子模型
盒子模型盒子由盒子内容,边框,外边距和内边距组成。一.盒子边框1.几个属性border:border-width border-style border-color;2.单独指定:border-topborder-bottomborder-leftborder-right3.如果只指定一个可以先指定去掉所有边框,再单独对其中一边指定如:border:none;border-bottom:1px dashed red;二.表格的细边边框1.合并相邻边框border-colla原创 2020-10-17 16:43:10 · 64 阅读 · 0 评论 -
2020-10-16 css08 css三大特性
css三大特性一.层叠性二.继承性css代码div{color:red;}html代码<div> <p>继承</p> </div>三.优先级1.权重计算公式(不是十进制)不是10个标签选择器就等于1个类选择器!important 无穷大行内样式style="" 1000id 100类,伪类 10标签 1继承或者* 0四.题目1.css:#father{ color:red; } p{原创 2020-10-16 23:04:32 · 87 阅读 · 0 评论 -
2020-10-16 css07 css背景
css背景一.背景颜色1.语法:background-color:颜色值;默认值为transparent二.背景图片1.background-image:url(路径);三.背景平铺1.background-repeat:repeat/repeat-x(沿x轴平铺)/no-repeat(不平铺);四.背景位置1.background-position:x轴 y轴(方位名词/精确单位);超大背景图片一般写:center top2.方位名词:x轴:left,right,center原创 2020-10-16 09:27:29 · 72 阅读 · 0 评论 -
2020-10-15 css06 元素分类
显示元素分类一.块级元素1.常见的块级元素有:,,,~2.独占一行,可以控制高宽以及内外边距3.是一个盒子,里面可以放行内或块级元素,默认宽度为其父级的100%注意:h1,p里面不能放块级元素,特别不能放div二.行级元素1.常见的行级元素有:,,,,,2.一行可以放多个,默认宽度为内容宽度3.行内元素只能放文本或其他行内元素三.行块级元素1.常见的行内块元素有:,,2.一行可以显示多个,和相邻行内块元素在一行,中间会有空白间隙3.可以控制高宽以及内外边距,默认宽度为其本身原创 2020-10-15 16:22:48 · 61 阅读 · 0 评论 -
2020-10-14 css05 复合选择器
复合选择器一.后代选择器(重点)1.把外层标签写在前面,内层标签写在后面,中间用空格分隔格式:父级 子级{属性:属性值;属性:属性值;}2.实例:.class h3{color:red;font-size:16px;}二.子元素选择器1.父级标签写在前面,子级元素写在后面,中间用>连接实例:.class>h3{color:red;font-size:14px;}三.交集选择器1.具备两个标签的特点2.格式:p.one{属性:属性值;}选择的是类名为.one的段落原创 2020-10-15 14:21:58 · 87 阅读 · 0 评论 -
2020-10-13 css 04 css外观属性
css外观属性一.color:文本颜色直接用颜色析取器,查颜色1.英文单词2.十六进制3.RGB代码二.line-height:行间距1.一般行距比字号大7,8像素三.text-indent:首行缩进1.以em(等于一个字符)作为设置单位如:p{line-height:25px;text-indent:2em;}四.text-decoration:文本装饰1.属性:none:无underline:下划线blink:闪烁五.sublime快捷操作emmet语法...原创 2020-10-13 13:52:36 · 58 阅读 · 0 评论 -
2020-10-12 css 03字体样式
字体样式一.font-size:大小(谷歌默认大小为16px)如:p{ font-size:20px; }不同浏览器有不同的字号,可以先在body里设置body{ font-size:16px; }二.font-family:设置哪一种字体1.中文要加引号2.英文里含有空格,#,$等符号要加引号,其余的不需要加引号p{font-family:"宋体",,"黑体";}三.font-weight:字体粗细1.b和strong都是加粗2.p{font-weight:nor原创 2020-10-12 23:43:12 · 84 阅读 · 0 评论 -
2020-10-12 css 02基础选择器
选择器一.标签选择器1.可以把某一类标签全部选出来,设置样式如:html里:<div>故事</div>css里:div{ color:red; }二.类选择器(常用)1.设置某一标签样式如:html里:<div class="red">嘿嘿</div>css里:.red{color:red;}2.多类名<span class="blue font-size">G</span>`````css原创 2020-10-12 22:21:44 · 71 阅读 · 0 评论 -
2020-10-12 css 01引入css的几种方法
引入css的几种方法一.行间样式直接在要改变样式标签里面修改,如:<h1 style="color=pink;font-size=18px;">世纪</h1>二.内联样式表格式如下:<head><style type="text/css"> 选择器(选标签){ 属性1:属性值1; 属性2:属性值2; }</style></head>三....原创 2020-10-12 21:20:29 · 61 阅读 · 0 评论 -
2020-10-11 html 04 表单标签
表单标签一.标签有几个属性:type[txet(单行文本输入框),password(密码输入框),radio(单选按钮),checkbox(复选框),button(普通按钮),submit(提交按钮),reset(重置按钮),image(图片形式的提交按钮),file(文件域)]name(用户自定义)value(用户自定义,默认文本)size(正整数,在页面的显示宽度)checked(checked,默认选中项)maxlength(正整数,控制输入字符数).如:用户名:密码:男二.l原创 2020-10-11 13:34:19 · 92 阅读 · 1 评论 -
2020-10-07 html 03 table表格标签/列表标签
table表格标签(显示数据)一.(定义一个表格标签)(头部,里面必须有tr标签)(身体)(表格标题)(表示一行)(表头单元格,居中加粗)(表示一个单元格)二.表格属性border——设置表格边框width——宽度height——高度align——设置表格在页面的水平对齐方式(left,center,right)cellspacing——单元格与单元格之间的距离cellpadding——单元格内容与单元格边框的距离三.合并单元格1.确定跨行还是跨列合并2.找到目标单元原创 2020-10-07 10:38:39 · 154 阅读 · 0 评论 -
2020-10-03 html 01
HTML01学习目标:1.认识Wed2.了解标签学习内容:1)前端包含了三个核心技术:HTML(结构),CSS(行为),JavaScript(表现)HTML–超文本标记语言 (Hyper Text Markup Language)将元素进行定义,CSS–级联样式表(Cascading Style Sheet)对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。2)主流浏览器及其内核:①Internet Explorer 简称ie,微软公司旗下浏览器。各种兼容问题是前端开发原创 2020-10-03 15:41:13 · 321 阅读 · 0 评论