![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html+css
远方有只兔子~
这个作者很懒,什么都没留下…
展开
-
个人博客(练手小项目)
1. 使用:html,js,css,jquery2.功能:留言板:留言、留言评论、删除留言、点赞、登录注册笔记记录随笔3.代码结构:4.github地址:https://github.com/lee-xx2/blog.git5.效果展示:原创 2021-03-01 09:34:19 · 457 阅读 · 1 评论 -
form标签的enctype属性
enctype属性规定在将表单数据发送到服务器之前如何对其进行编码。也就是通过表单发送数据时默认的编码类型。只有在method = "post"时才能使用;属性值:(1)application/x-www.form-urlencoded:默认值,在发送前对所有字符进行编码(将空格转换为 “+” 符号,特殊字符转换为 ASCII HEX 值)。将数据编码成名值对的形式,是标准的编码格式。(2)multipart/form-data :不对字符编码、!!!当使用有文件上传控件的表单时,使用该值。 比如.原创 2021-01-21 20:24:09 · 270 阅读 · 0 评论 -
<pre></pre>、<iframe></iframe>、<marquee></marquee>
<pre></pre>在<pre>标签中能够预定义格式化的文本,在中的文本通常会保留空格和换行符,文本也会呈现等宽字体。<pre>标签的常见应用就是用来表示计算机的源代码。<pre>元素是块级元素<pre>只能包含文本和行内元素,块级元素不能放在其中制表符tab在<pre>标签定义的块当中可以起到应有的作用,每个制表符占据8个字符的位置,但并不推荐使用tab,因为在不同的浏览器中,tab的表现形式各不相同。在用&原创 2021-01-21 20:08:36 · 393 阅读 · 0 评论 -
表单相关标签(<input> <fieldset> <button> <select> <label>)
表单:<from></form><form name="" method="" action=""></form><!--action:规定当提交表单时向何处发送表单数据。 method: get/post 规定用于发送表单数据的 HTTP 方法。--><form> 元素包含一个或多个如下的表单元素:<input><textarea> :文本框<button> :按钮<原创 2020-12-03 20:45:40 · 457 阅读 · 3 评论 -
CSS3 animation-fill-mode 属性
animation-fill-mode 属性规定当动画不播放时(动画不播放有两种情形:当动画完成后不播放时,或当动画有设置延迟时间未开始播放时),要应用到元素的样式。默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。属性可选值:animation-fill-mode: none|forwards|backwards|both|initial|inherit;none 默认值。动画在动画执行之原创 2020-12-11 20:39:17 · 9439 阅读 · 0 评论 -
transition(过渡)与animation(动画)的区别
1.简写属性包含的属性:transition(过渡)属性: transition: property duration timing-function delay;transition-property:指定应用过渡的CSS属性的name,transition-duration:transition效果需要指定多少秒或毫秒才能完成transition-timing-function:指定transition效果的转速曲线transition-delay:始终指定transition-原创 2020-12-10 13:36:18 · 1471 阅读 · 0 评论 -
CSS渐变(linear-gradient、radial-gradient)
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。通过使用 CSS3 渐变(gradients),可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向径向渐变(Radial Gradients)- 由它们的中心定义一、线性渐变:语法:background:原创 2020-12-09 13:12:51 · 5542 阅读 · 1 评论 -
border-radius制作哆啦A梦
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多啦A梦</title> <style> * { .原创 2020-12-08 13:17:45 · 215 阅读 · 0 评论 -
border-radius(CSS3属性)
一、border-radius 完整写法:border-radius:为元素添加圆角边框。border-radius:10px 20px 30px 40px/40px 30px 20px 10px“/”前的四个数值表示圆角的水平半径,后面四个值表示圆角的垂直半径。水平半径和垂直半径表示如下:比如:border-radius: 2em 1em 4em / 0.5em 3em;等同于border-top-left-radius: 2em 0.5em;border-top-right-radi原创 2020-12-08 13:10:13 · 57444 阅读 · 0 评论 -
伪类选择器(:link :visited :hover :avtive Xnth-child(n) X: first-child X: last-child X:nth-of-type(n)...)
1. :link :visited :hover :avtivea:link {color:#FF0000;} /* 未访问的链接 */a:visited {color:#00FF00;} /* 已访问的链接 */a:hover {color:#FF00FF;} /* 鼠标划过链接 */a:active {color:#0000FF;} /* 已选中的链接 */顺序要求:- 在CSS定义中,a:hover要放在a:link和a:visited之后才有效;- a:active要放在a:hove原创 2020-12-07 16:43:02 · 317 阅读 · 0 评论 -
background相关属性及缩写属性
背景缩写属性:背景缩写属性可以在一个声明中设置所有的背景属性。background: #00ff00 url('smiley.gif') no-repeat fixed center; 可以设置的属性分别是:background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment和 background-image。原创 2020-12-07 10:10:59 · 2370 阅读 · 1 评论 -
背景图为精灵图的导航制作小练习(滑动门)
练习一- 效果: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201204172757114.gif#pic_center)- 背景图素材:图片 nav.png图片nav-on.png代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid原创 2020-12-04 17:38:04 · 325 阅读 · 0 评论 -
CSS Sprites精灵图(雪碧图)的使用以及利用工具制作
CSS Sprites的原理(图片整合技术)----精灵图(雪碧图)原理:将导航背景图片、按钮背景图片等有规则的合并成一张背景图,将多张图片合为一张整图,然后用background-position来实现背景图片的定位技术。图片整合的优势:1)通过图片整合来减少对服务器的请求次数,从而提高页面的加载速度。2)通过整合图片来减小图片的体积。利用工具制作精灵图:使用ps创建图层,背景透明,将背景图复制到该图层中进行排列:将背景图全部选中拉进ps,依次双击出现每个图片,拖动进行原创 2020-12-04 16:16:01 · 1381 阅读 · 0 评论 -
高度塌陷问题
高度塌陷:当子元素有浮动并且父元素没有设置高度的情况下父元素会出现高度塌陷<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-12-02 17:37:08 · 87 阅读 · 0 评论 -
visibility: hidden;与display:none;区别
visibility:hidden;和display:none;的区别: visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域, display:none属性会使这个对象彻底消失不显示,也不再占用位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp原创 2020-12-02 15:21:05 · 7038 阅读 · 0 评论 -
小练习:简单三级菜单的制作(ul li)
思路:列表嵌套列表,给一级菜单取名box,二级box2,三级box3, 一级菜单列表项li左浮动,默认初始状态二级和三级菜单都隐藏,鼠标滑过一级菜单列表项li,显示二级标签,划过二级菜单列表项li,显示三级菜单,三级菜单有定位问题,可以相对于二级菜单的li定位(使用“子元素绝对定位,父元素相对定位”),也可以相对于整个二级菜单.box2进行定位。<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2020-12-02 10:46:01 · 1884 阅读 · 4 评论 -
html+css(锚点的使用)
命名锚点的作用:在同一页面内的不同位置进行跳转。通俗理解:可以通过锚点跳转到页面中的其他位置,当页面过长时,可以将页面分为几部分,通过顶部设置一些锚点,点击可以方便浏览者快速定位到相应的位置。制作锚标记: 1)给元素定义命名锚记名 语法:<标记 id="命名锚记名"> </标记> 2)命名锚记连接 语法:<a href="#命名锚记名称"></a>注意:href属性的属性值最前面要加原创 2020-12-01 18:52:03 · 3061 阅读 · 0 评论 -
导航栏练习
例1代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鼠标滑过翻译</title></head><style> *{原创 2020-11-30 23:17:56 · 328 阅读 · 1 评论 -
CSS盒子模型
CSS盒子模型组成:content -> padding -> border -> margin(从内到外)①content: 内容区域 width和height组成的②padding: 内边距/内填充 padding:30px 30px; /padding:30px; 只写一个值:30px(表示上下左右) 写两个值:30px 40px (上下、左右) 写三个值(不建议)(上 左右 下) 写四个值:30px 40px 50px 60px(上 右原创 2020-11-27 15:51:15 · 412 阅读 · 0 评论 -
background背景
background-color:背景颜色 css中颜色表示法: 1.单词表示法 2.十六进制表示法 0 1 2 3 4 5 6 7 8 9 a b c d e f #ffffff 3.rgb三原色表示法:rgb(255 255 255); 取值范围:0~255 提取颜色的下载地址:https://www.baidufe.com/fehelperbackground-image:背景图片 (不用引号)backgr.原创 2020-11-27 13:17:38 · 490 阅读 · 0 评论 -
HTML5表格标签相关
制作表格如下:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格练习</title></head><body> <table border="原创 2020-11-25 12:49:51 · 332 阅读 · 0 评论 -
html+css学习笔记2(文档流和浮动)
文档流:处在网页的最底层,创建的元素默认都处在文档流中。元素在文档流中的特点:块元素:1,在文档流中独占一行,块元素自上向下排列;2,块元素在文档流中默认宽度是100%,默认高度被内容撑开。内联元素:1,内联元素在文档流中只占自身大小,默认从左到右排列,内容满一行自动换到下一行。2,内联元素在文档流中宽度和高度都默认被内容撑开当元素宽度值为auto时,此时指定内边距不...原创 2020-03-04 20:38:53 · 177 阅读 · 0 评论