html
-恰饭第一名-
流水不争先,争的是滔滔不绝(重补基础中)
展开
-
定位
定位=定位模式+边偏移为什么需要定位:1)浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子2)定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子相对定位relative相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)相对定位的特点:1)它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)2)原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)因此,相对定位并没原创 2021-02-13 23:36:19 · 84 阅读 · 0 评论 -
css3之3D转换
越靠近我们是正的,越远离我们是负的1.translateZ 沿着Z轴移动2.translateZ后面的单位我们一般跟px3.translateZ(100px)向外移动100px(向我们的眼睛来移动的)4.3D移动有简写的方法:transform:translate3d(x,y,z)transform:translate3d(100px,100px,100px)透视perspective透视越小,图像越大透视越大,图像越大透视写在被观察元素的父盒子上面的d:就是视距,视距就是一.原创 2021-02-13 23:35:59 · 90 阅读 · 0 评论 -
动画之css3
动画的基本使用:制作动画分为两步:1.先定义动画2.再使用(调用)动画1.用keyframes定义动画(类似定义类选择器)@keyframes 动画名称{0%{width:100px;}100%{width:200px;}}2.怎么使用动画调用时间:animation-name:动画名称持续时间:animation-duration:持续时间动画序列1.0%是动画的开始,100%是动画的完成2.在 @keyframes关键帧 中规定某项css样式就能创建由当前样原创 2020-12-15 21:00:37 · 106 阅读 · 0 评论 -
css3之2d转换
translate移动扩展:移动盒子的位置1.定位2.盒子的外边距margin3.2d转换移动语法transform:translate(x,y)重点:1.定义2D转换中的移动,沿着X和Y轴移动2.translate最大的优点是不会影响到其他元素的位置3.translate中的百分比单位是相对于自身元素的translate:(50%,50%)参数是%时,移动的距离是盒子自身的宽度或者高度来对比的4.对行内标签没有效果通过定位让盒子居中现在通过transformrotat原创 2020-12-13 17:05:47 · 144 阅读 · 0 评论 -
弹性盒子css3
CSS3 弹性盒一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间弹性盒子由弹性容器和弹性子元素组成1.弹性盒子通过设置display属性的值为flex或inline-flex将其定义为弹性容器2.弹性容器内包含一个或多个弹性子元素注意弹性容器外以及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每原创 2020-12-08 23:23:05 · 178 阅读 · 0 评论 -
web页面开发13
css3背景background-repeat属性<style>body{ background-image:url('paper.gif'); background-repeat:repeat-y;}</style></head><body><p>repeat-y 设置只有垂直方向重复 background-image</p></body>background-position属性&原创 2020-11-01 10:00:36 · 186 阅读 · 0 评论 -
web页面开发12
border-collapse属性设置表格的边框是否被合并为一个单一的边框<style>table { border-collapse: collapse;}table, td, th { border: 1px solid black;}</style><style>table { border-collapse: separate;}table, td, th { border: 1px solid b原创 2020-10-31 09:25:17 · 321 阅读 · 0 评论 -
web页面开发11
字体样式font-size设置字体的尺寸font-variantfont-variant 属性设置小型大写字母的字体显示文本,font-stylefont-style属性指定文本的字体样式。font-weightfont-weight 属性设置文本的粗细font-familyfont - family属性指定一个元素的字体。fontfont 简写属性在一个声明中设置所有字体属性。可设置的属性是(按顺序):“font-style font-variant font-weig原创 2020-10-30 22:12:36 · 169 阅读 · 0 评论 -
web页面开发10
css选择器主要分为三大类:1、基本选择器2、属性值选择器3、伪类选择器A.通用选择器*选择器作为通用的选择器它的优先级是最低的,所以如果有css定义了指定的元素的样式的时候,那么它就会失去对于指定了css样式的元素的样式的控制了。B.标签选择器C.id选择器<style>#firstname{background-color:yellow;}</style></head><body><h1>Welcome原创 2020-10-27 08:41:02 · 79 阅读 · 0 评论 -
web页面开发9
<header>标签<header> 标签定义文档或者文档的一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。在一个文档中,您可以定义多个 <header> 元素。注释:<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。这里部分一般是页面头部,包括:LOGO、标题、导航等内容<hgroup> 标签原创 2020-10-10 14:58:57 · 154 阅读 · 1 评论 -
web页面开发8
<input>标签input的 type 属性input 的list属性list 属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。<form action="demo-form.php" method="get"><input list="browsers" name="browser"><datalist id="browsers"> <option value="Intern原创 2020-10-08 13:55:46 · 245 阅读 · 0 评论 -
web页面开发7
表单元素<form>标签说明:<form>元素用于为用户输入创建 HTML 表单。能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。还可以包含menus、textarea、fieldset、legend 和 label 元素。用于向服务器传输数据。表单的结构METHOD的GET方式和POST方式有什么区别?Post和Get 方法有如下区别:1、Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示。2、Post传输的数据量原创 2020-10-04 17:38:46 · 179 阅读 · 0 评论 -
wen页面开发6
嵌入元素解析<img>标签<img> 标签定义 HTML 页面中的图像。<img> 标签有两个必需的属性:src 和 alt。注释:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。提示:通过在 <a> 标签中嵌套 <img> 标签,给图像添加到另一个文档的链接。<img src="">1)网上 url (资源的位置以及用于访问它的协议原创 2020-10-02 12:19:14 · 257 阅读 · 0 评论 -
web页面开发5
表格元素<table> 标签定义 HTML 表格一个 HTML 表格包括 <table> 元素,一个或多个 <tr>、<th> 以及 元素。<tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tb原创 2020-09-28 21:12:38 · 218 阅读 · 0 评论 -
web页面开发4
<area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。<area> 元素始终嵌套在 <map> 标签内部。注释: <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联,以创建图像与映射之间的关系。实操演示<p>点击太阳或其他行星,注意变化:</p><img src="planets.gif" width="145" height="126" alt="原创 2020-09-23 18:05:19 · 99 阅读 · 0 评论 -
web页面开发3
分组元素1:<blockquote>标签blockquote元素中一般嵌套p元素,用于标记被引用的文本,这些引用文本并不是直接位于blockquote元素中。如果引文来自在线资源(包括自己网站中的其他地方),那么可以在<blockquote>标签的cite(引用)属性中指明原始来源的URL。通常浏览器会把blockquote元素呈现为一段左右两侧缩进(40px)的文本。2:<pre>标签pre元素是块级元素,但是只能包含文本或行内元素。也就是说,任何块级元素原创 2020-09-22 08:32:58 · 423 阅读 · 0 评论 -
web页面开发2
<a>标签a标签的详解<a> 标签定义超链接,用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性,它指定链接的目标。在所有浏览器中,链接的默认外观如下:未被访问的链接带有下划线而且是蓝色的已被访问的链接带有下划线而且是紫色的活动链接带有下划线而且是红色的***<a>标签(anchor的缩写)***1)超链接2)锚点3)打电话,发链接4)协议限定符 <div id="demo1" style="wid原创 2020-09-20 12:05:40 · 1096 阅读 · 0 评论 -
web页面开发1
HTML的头部信息设置HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容,主要是被浏览器所用,不会显示在网页的正文内容里。 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档...原创 2020-09-20 11:32:37 · 424 阅读 · 0 评论 -
淘宝静态页面一
line-height的属性值例如h3{ line-height: normal; line-height: 1.5; /* 相对单位 1.5*16px */ line-height: 200%; /* 相对单位 2*16px */ line-height: 50px; line-height: 5em; /* 相对单位 5*16px */}例如<style> body { fo原创 2020-08-06 00:13:55 · 236 阅读 · 0 评论 -
渡一css8
<div class="wrapper"> <div class="content"></div></div>.wrapper { height: 40px; background-color: aquamarine;}.content { margin: 0 auto; width: 1000px; height: 40px; background-color: coral;}原创 2020-07-28 16:10:14 · 209 阅读 · 0 评论 -
渡一css7
溢出容器,要打点展示1.单行文本<p>微微温暖融化昨夜的冰雪,就像是每一秒都称为岁月</p>p { width: 300px; height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}2.多行文本多行只做截断,不做打点<p>微微温暖融化昨夜的冰雪,就像是每一秒都称为岁月原创 2020-07-28 11:01:41 · 120 阅读 · 0 评论 -
渡一css关于选择器的优先权
<body> <div id="only" class="demo">123</div></body>.demo { background-color: #ffeecc;}#only { background-color: darkseagreen;}.demo { background-color: #ffeecc;}div { background-color: yellow;}原创 2020-07-02 20:28:14 · 273 阅读 · 0 评论 -
渡一css1
结构 html,样式 css,行为 js 相分离css 相当于装修材料,cascading style sheet(层叠 样式 表)注释 <!-- -->作用:①备注②调试css初级篇引入css的方法有:1)行间样式: <div style=" width: 100px; height: 100px; background-color: #ece;">2)页面级css<head><style type="text/css"&g.原创 2020-07-02 18:46:31 · 295 阅读 · 0 评论 -
渡一html3
<form action="" method="GET"> <h1> choose your favourite fruit! </h1> 1.apple <input type="radio" name="fruit" value="apple"> 2.orange <input type="radio" name="fruit" value="orange"&g原创 2020-07-02 11:51:37 · 170 阅读 · 0 评论 -
渡一html2
<ol type="i"> <strong> <em> <li>marvel</li> <li>的的</li> <li>小飞侠</li> </em> </strong> </ol>.原创 2020-07-02 07:41:35 · 230 阅读 · 0 评论