Stirve unremitting-CSDN博客

原创多列布局之瀑布流案列

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} body{padding: 0 15px;background: url(pb/img1/...

2020-03-24 15:11:28 114

原创响应式布局----媒体查询

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width: 100px; ...

2020-03-24 14:39:09 100

原创响应式布局

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 绝大部分项目: PC端 ~~> 官网移动端 ~~> 移动端网页,a...

2020-03-24 14:37:59 110

原创 css弹性盒圣杯布局案列

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{height: 100%;} *{margin: 0;padding: 0;} .b...

2020-03-24 14:32:32 118

原创 CSS弹性盒固定两栏布局案列

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} html,body,.box{height: 100%;...

2020-03-24 14:31:39 435

原创 CSS弹性盒flex属性

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width: 600px; ...

2020-03-24 14:30:16 101

css定位主要有相对定位、绝对定位、静态定位和固定定位。其中静态定位这个是元素的默认定位方式，不能使用top，bottom，left，right和z-index属性，其它三种定位可以使用以上几个属性。我们这里主要介绍后边的这三个定位。1.相对定位：如果想为元素设置层模型中的相对定位，需要设置position:relative;，它还是会占用该元素在文档中初始的页面空间，通过left、right...

2020-03-22 20:14:54 125

原创 CSS3弹性盒的anlign-self拉伸的效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ display:flex; ...

2020-03-22 14:17:26 152

原创 CSS3项目属性

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} /*body{display:flex;}*/ ...

2020-03-22 14:14:34 119

原创弹性盒布局案列

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} /*body{display:flex;}*/ ...

2020-03-22 14:13:39 162

原创元素flex的对齐属性

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} /*.box span{ width:...

2020-03-22 14:12:21 294

原创怪异盒模型

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box1{ width: 200px; ...

2020-03-22 14:10:58 100

原创 CSS3宽高属性值

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width:600px; ...

2020-03-19 21:31:11 172

原创圆角属性及其设置

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width: 200px; ...

2020-03-19 21:29:33 967

原创 CSS3边框图片及其属性

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width: 100px; ...

2020-03-19 21:28:39 250

原创背景属性

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} body{ background-image:...

2020-03-19 21:26:15 96

原创 iconfon文本图标的引用

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="iconfont/iconfont.css" /> <link rel="stylesheet"...

2020-03-19 21:20:39 283

原创 CSS3盒子文本阴影

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .box{ height:100px; margin: 100px a...

2020-03-19 21:18:28 120

原创目标伪类案列

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{width:400px;margin: 10...

2020-03-19 14:35:35 97

原创 CSS层级选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} /*选中后代,不论是子集还是还是又包含里面的子集,都选...

2020-03-19 14:34:47 209

原创动态伪类选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} input:focus{ background...

2020-03-19 14:33:20 219

原创 UI元素状态伪类

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} /*选中可以输入的元素*/ input:enab...

2020-03-19 14:32:42 202

原创 CSS目标伪类选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} a{ display:inline-block...

2020-03-19 14:31:35 331 2

原创 CSS结构性伪类选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .list{ width: 400px; ...

2020-03-19 14:30:07 152

原创 css属性选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} li[class]{ background: ...

2020-03-19 14:28:55 76

原创 CSS2选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .box{ width: 400px; height: 100px;...

2020-03-19 14:27:45 53

原创 CSS动画与过渡的区别

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 2d: transition:skew();倾斜 3d: 区别于...

2020-03-17 21:06:19 138

原创表单补充标签

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- input 中新增加的type类型 type="email" 请输入邮箱地址 t...

2020-03-17 20:48:53 109

原创多媒体标签

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- video: 视频标签 audio: 音频标签属性: src="文...

2020-03-17 20:47:02 76

原创 Html5语义化标签

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} section{ width: 200px;...

2020-03-17 20:45:24 70

原创表单属性

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="提交地址"name="表单名字">表单最外层的容器</form>...

2020-03-16 20:53:56 112

原创 CSS动画简单制作

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;height: 0;} body,html{height: 100%;} ...

2020-03-16 19:52:56 152

原创前端程序员如何做好职业规划

对于零基础的前端新手来说，早知道前端的一个入门规划知道的越早越好。1.确定目标人之所以迷茫和焦虑就是因为没有目标，不知道自己该往哪里走。对于任何一个技术岗位，都有固定的两个方向：技术专家（架构师）和项目经理。前者偏重技术，需要你在当前领域钻研得很深；后者偏向管理，需要你在对技术有很深掌握的同时，可以带领团队完成项目的开发任务。哪个更好，这边没有一个合适的答案，每个人的经历不一样导致的选...

2020-03-15 22:27:42 466

原创 CSS动画的练习案列

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;height: 0;} .con1{width: 116px;height:19...

2020-03-14 23:00:45 444

原创 CSS层级关系

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box1{ width: 100px; ...

2020-03-14 22:59:11 632

原创元素类型的转换

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box1{ width:300px; height:100px; background: pink; dis...

2020-03-14 11:25:18 131

原创元素类型

## 元素类型三种类型：块状元素，内联元素，内联块元素(css2.1增加)块状元素的特点A:块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，B:默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。C:块状元素都可以定义自己的宽度和高度。D:块状元素一般都作为其他元素的容器，它可以容...

2020-03-14 11:20:16 284

原创元素居中的几种方式

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} /*方式一*/ .box{ width:...

2020-03-14 11:15:50 69

原创 CSS定位

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .box{ width: 200px; height: 100px;...

2020-03-14 11:14:16 68

原创 CSS伪对象

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .box1{ width: 400px; height: 100px;...

2020-03-14 11:13:16 210

空空如也

空空如也