![](https://img-blog.csdnimg.cn/20190927151124774.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML、CSS
.
不秃头的小李同学
这个作者很懒,什么都没留下…
展开
-
form表单中的button自动刷新页面问题
form表单中的button自动刷新页面问题form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件。原因是因为标签默认的类型是submit,即默认的button点击就会触发表单的提交事件。<button></button><!-- 两者是相当的 --><button type="sumbit"></button>解决的办法有三个。1.在标签中添加属性type=“button”。2转载 2020-12-26 19:41:41 · 2199 阅读 · 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> <style> * { .原创 2020-08-06 11:16:41 · 256 阅读 · 0 评论 -
tab栏切换练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> ul { list-st.原创 2020-08-06 10:46:11 · 285 阅读 · 0 评论 -
less练习
html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="t原创 2020-07-22 00:34:12 · 444 阅读 · 0 评论 -
一个盒子完成太极图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background-color: skyblue; } div { width: 200px; heig..转载 2020-07-19 21:18:09 · 316 阅读 · 0 评论 -
3D立方体盒子
效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } body { padding: 200px 300px; } ul { position: relativ转载 2020-07-19 21:00:45 · 333 阅读 · 0 评论 -
3D转换练习-旋转木马
效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {原创 2020-07-19 20:40:22 · 293 阅读 · 0 评论 -
3D转换练习前后翻转
效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box {原创 2020-07-19 14:58:49 · 237 阅读 · 0 评论 -
奔跑的北极熊特效实现——动画animation练习
效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {原创 2020-07-18 21:45:05 · 2508 阅读 · 0 评论 -
动画animation练习
效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .width原创 2020-07-18 20:38:35 · 360 阅读 · 0 评论 -
css3实现翻书页效果
效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {原创 2020-07-18 18:24:00 · 391 阅读 · 0 评论 -
CSS3书写三角形
效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {原创 2020-07-18 18:06:53 · 251 阅读 · 0 评论 -
2D转换之 scale练习
效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img {原创 2020-07-18 16:39:12 · 273 阅读 · 0 评论 -
2D转换之rotate练习
效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {原创 2020-07-18 16:28:21 · 339 阅读 · 0 评论 -
HTML5&CSS3总结一
一、什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成HTML5 的现状绝对转载 2020-07-18 16:13:58 · 251 阅读 · 0 评论 -
2D转换结合定位来实现盒子水平和垂直居中
效果如下:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .fath原创 2020-07-18 16:02:48 · 232 阅读 · 0 评论 -
三角和矩形框组合-定位和三角练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin:0; padding: 0; } .father { position: relative; width: 200px; height: 100px; line.原创 2020-06-24 18:04:22 · 275 阅读 · 0 评论 -
仿土豆播放盒子-绝对定位相对定位练习
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>土豆播放案例</title> <style> * { margin: 0; padding: 0; } .movie { position: relative; width: 448px; height: 672px;原创 2020-06-24 17:05:50 · 262 阅读 · 1 评论 -
仿微信导航栏滑动门练习
效果测试代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>wechat</title> <style> * { margin:0; padding: 0; } a { text-decoration: none; } li { list-style-type: none;原创 2020-06-24 16:34:04 · 435 阅读 · 0 评论 -
当使用定位时,margin-top和top 同时使用时,值最大的起作用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .div { position: fixed; top: 10px; margin-top: 100px; width: 200px; height: 300px; background-c.原创 2020-06-18 11:51:20 · 355 阅读 · 0 评论 -
仿新浪导航栏(固定定位练习)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .top{ position: fixed; top: 0px; height: 44px; width: 100%; text-align: center; } .box { wid原创 2020-06-18 11:48:17 · 738 阅读 · 0 评论 -
哈根达斯广告案例(相对定位和绝对定位练习)
效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位练习</title> <style> * { padding: 0px; margin: 0px; } .ad { position: relative; width: 310px; height: 190px; mar原创 2020-06-17 22:09:17 · 2752 阅读 · 1 评论 -
固定定位练习
效果:孙悟空一直固定在右下角<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 3000px; } img { position: fixed; width: 100px; height: 100px; r.原创 2020-06-17 21:47:30 · 322 阅读 · 0 评论 -
z-index改变盒子堆叠顺序
在使用定位布局时,可能会出现盒子重叠的情况。加了定位的盒子,默认后来者居上, 后面的盒子会压住前面的盒子。应用 z-index 层叠等级属性可以调整盒子的堆叠顺序z-index 的特性如下:属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上;如果属性值相同,则按照书写顺序,后来居上;数字后面不能加单位。注意:z-index 只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。<!DOCTYPE html><html lang=原创 2020-06-17 21:33:46 · 667 阅读 · 0 评论 -
半透明盒子比较好看的rgba值
rgba(0,0,0,.3)原创 2020-06-14 22:38:33 · 602 阅读 · 0 评论 -
盒子模型知识点
第01阶段.前端基础.盒子模型盒子模型(CSS重点)css学习三大重点: css 盒子模型 、 浮动 、 定位主题思路:目标:理解:能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用:能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例1.看透网页布局的本质网页布局中,我们是如何把里面的文字,.原创 2020-06-14 17:21:53 · 543 阅读 · 0 评论 -
下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div { width: 80px; } a { display: block; width: 80px; heigh.原创 2020-06-14 16:30:53 · 237 阅读 · 0 评论 -
循环精灵图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..原创 2020-06-12 21:34:03 · 460 阅读 · 2 评论 -
仿小米商城窗口浮动
效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } .flow { width: 1226px; height: 615px; margin: 50px auto;原创 2020-06-12 13:10:29 · 612 阅读 · 0 评论 -
新闻列表综合案例
所需素材:arr.jpgline.jpg<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .news { width: 290px; height: 190px; paddi原创 2020-06-10 15:29:34 · 735 阅读 · 0 评论 -
去掉列表的默认样式
①默认样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul { width: 300px; height: 300px; background: #ccc; margin: 100px auto; } </style><原创 2020-06-10 11:50:05 · 5004 阅读 · 0 评论 -
嵌套块元素垂直外边距的合并(塌陷)
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框父元素的上外边距会与子元素的上外边距发生合并合并后的外边距为两者中的较大者解决方案:可以为父元素定义上边框。可以为父元素定义上内边距可以为父元素添加overflow:hidden。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &.原创 2020-06-10 11:41:42 · 1446 阅读 · 0 评论 -
上下外边距合并
当两个容器,一个有margin-top 一个含有margin-bottom时,两者之间的距离为,两者之间的最大值,而非两者之和。所以设置时,尽量设置一个,避免上下外边距合并的问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .top, .bottom { wi原创 2020-06-10 11:10:58 · 581 阅读 · 0 评论 -
圆形边框和圆角边框
①画圆首先容器设置成正方形,然后border-radius等于一半的边框②圆角矩形边框将border-radius设置成height的一半,可以实现好看的圆角矩形边框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .rec { width: 200px;原创 2020-06-10 11:08:07 · 2025 阅读 · 0 评论 -
仿新浪导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导航栏test</title> <style> * { margin: 0; padding: 0; } .nav { height: 41px; background: #FCFCFC; /*上边框*/ border-top: 3.原创 2020-06-09 20:23:15 · 401 阅读 · 0 评论 -
border边框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>border</title> <style> .test { width: 200px; height: 200px; border: 1px solid #eee; margin: auto; text-align: center;原创 2020-06-09 19:51:50 · 177 阅读 · 0 评论 -
HTML常用标签
前端基础.HTML常用标签学习目标理解:相对路径三种形式应用排版标签文本格式化标签图像标签链接相对路径,绝对路径的使用1. HTML常用标签首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。1.1 排版标签排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。1)标题标签h .转载 2020-06-08 20:54:26 · 190 阅读 · 0 评论 -
CSS选择器
前端基础.CSS基础选择器CSS选择器(重点)学习目标:理解能说出选择器的作用id选择器和类选择器的区别应用能够使用基础选择器给页面元素添加样式1. CSS选择器作用(重点)如上图所以,要把里面的小黄人分为2组,最快的方法怎办?很多, 比如 一只眼睛的一组,剩下的一组选择器的作用 找到特定的HTML页面元素pink老师一句话说出他们: ※※※※**CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来 ** 必须记住的css 就是 分两件.转载 2020-06-08 20:50:57 · 278 阅读 · 0 评论 -
WEB标准
第01阶段.前端基础.认识WEB认识WEB1. 认识网页网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。### 总结网页有图片、链接、文字等元素组成,我们后面的任务就是要把这部分网页元素用代码写出来。。。## 2. 浏览器(显示代码)浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。<img src="media/b..转载 2020-06-08 20:48:04 · 360 阅读 · 0 评论 -
背景图片平铺
①默认平铺<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片平铺实例</title> <style> .image{ height: 1800px; background: url(image/test.jpg); } </style></head><body>原创 2020-06-08 19:52:40 · 226 阅读 · 0 评论