![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
6.HTML+CSS
文章平均质量分 93
HTML和CSS的用法
狄鸠
写给5年后的自己
展开
-
web前端的恐怖之旅(1):html常用标签的使用
文章目录一,HTML二,常用的标签三,特殊符号四,表格五,表单练习一,HTML什么是html? 超文本标记语言(简称html)怎么学html? html是一门标记语言,标记语言由一套标记标签组成,学习html就是学习标签开发工具? 编辑器:pycharm 浏览器:chrome,firefox一个能看到的网页就是一个前端页面,右键点击检查或者F12能查看该前端页面源代码...原创 2019-02-25 00:12:40 · 259 阅读 · 0 评论 -
web前端的恐怖之旅(2):CSS选择器
一,CSS存放位置行内标签(不利于维护,耦合度高, 让代码变的非常臃肿)我是一个p标签内部style标签(写在head标签内的style标签内,通过选择器控制,也有一定耦合度) Title 我是一个段落标签样式 = 选择器 + {}(声明) 写在标签内部的属性 是html属性 写在style标签内的的 是css属性外部样式(开发常用,...原创 2019-03-11 09:46:50 · 117 阅读 · 0 评论 -
web前端的恐怖之旅(3):盒子模型
一,盒子模型(每个标签都是一个盒模型)盒子属性(单位:px)1),content :内容区域 width :盒子宽度 height :盒子高度2),border :边框线 复合属性(包括宽度,样式,颜色)包含分属性border:1px solid blue; /*给盒子定一个边框线,这是一个复合属性*//*三个参数*/border-width : 边框线宽度 p...原创 2019-03-14 18:42:54 · 394 阅读 · 0 评论 -
web前端的恐怖之旅(4):样式初始化_元素
一,样式初始化所有样式初始化(由于选中页面中所有标签,有点浪费性能)*{margin:0px; padding:0px;} /*把所有的样式初始化,方便布局*/body, ul, ol, ol, p, h1, h2...{margin:0px; padding:0px;} /*把有样式的初始化*/`列表的样式初始化ul, ol{list-style:none;} /初始...原创 2019-03-14 18:48:13 · 475 阅读 · 0 评论 -
web前端的恐怖之旅(5):垂直对齐方式和背景属性
一,垂直对齐方式:vertical-align:baseline;默认是baseline(基线对齐)基线对齐(和英文本上的第三根线相同)图片下方间隙的问题(基线到底线的距离,由字体大小决定) *解决方案:给图片一个`vertical-align的`的其他值覆盖baseline图文对齐,行内元素和行内块元素之间的对齐,块级是没有基线对齐的 *图文居中对齐:给需要对齐...原创 2019-03-16 20:25:23 · 991 阅读 · 0 评论 -
web前端的恐怖之旅(6):字体文本属性
一,字体样式字体大小:font-size:12px;:具有继承性(系统限制最小为12像素,0为没有)单位 :), px 不给时,默认12像素 eg: 一般给body设置12px的字体大小),em 父级字体大小 eg:1em,父级字体大小×1倍 - em用在不是font-size的地方,代表当前标签字体大小), rem html根标签的字体...原创 2019-03-21 09:57:06 · 206 阅读 · 0 评论 -
web前端的恐怖之旅(7):浮动
一,浮动元素和浮动元素特性浮动:以让元素脱离文档流,遇到父级边界或者相邻的浮动元素,停下来 文档流:元素,没有改变特性时,按照原本块级行内的的位置和规则排列使用:folat:left/right;给浮动以后===> 灰色钻到绿色下面了限制:父级宽度不够,浮动元素掉下来(外面的盒子要设置宽度)浮动元素会被卡主对文字的影响:文字会环绕元素浮动元素特性:...原创 2019-03-24 10:50:51 · 162 阅读 · 0 评论 -
web前端的恐怖之旅(8):定位
position 定位类型属性相对定位:position:relative;相对于未定位前的位置进行定位不会改变原来元素的特性支持top,left,bottom,right四个方位值支持文档流,会占着茅坑不拉屎,相当于灵魂出窍,肉体还在层级未设置时,后来者飘在之前的上面绝对定位:position:absolute;相对于 定位了的就近的祖先元素(给父级一个pos...原创 2019-03-24 10:51:37 · 209 阅读 · 0 评论 -
web前端的恐怖之旅(9):结构性伪类选择器
一,结构性伪类first-of-type :父元素内的第一个p元素,无视其他元素p:first-of-type{color:red;} /*选中父元素里的第一个p元素*/div p:first-of-type{color:red} /*选中div标签下的第一个p标签*/last-of-type :父元素内的最后一个p元素,无视其他元素p:last-of-type{color...原创 2019-03-25 14:09:22 · 246 阅读 · 0 评论 -
JavaScript(1):元素获取,简单事件,数据类型
一,基本使用,元素获取与修改Js是什么?JavaScript原名liveScript,是一门动态类型,弱类型基于原型的脚本语言Js有什么作用?页面特效前后交互后台开发(node)Js写在哪里Script标签里<script> alert("中奖了")</script> // 可以写在head内,也可以写在body内外部的.j...原创 2019-04-17 09:53:14 · 173 阅读 · 0 评论 -
JavaScript(2):基本运算符,控制流程,字符串和数组的方法
一,基本运算符算数运算符(console.log使他在控制台显示)console.log(a + b); // 加console.log(a - b); // 减console.log(a * b); // 乘console.log(a / b); // 除console.log(a % b); // 取余console.log(++a); //自增长console.log(...原创 2019-04-17 09:54:08 · 99 阅读 · 0 评论