html,css基础
基础
美美| ू•ૅω•́)ᵎᵎᵎ
| ू•ૅω•́)ᵎᵎᵎ
展开
-
21.京东CSS初始化
/* 把我们所有标签的内外边距清零 */* { margin: 0; padding: 0}/* em 和 i 斜体的文字不倾斜 */em,i { font-style: normal}/* 去掉li 的小圆点 */li { list-style: none}img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */...原创 2021-07-19 20:03:34 · 214 阅读 · 0 评论 -
20.CSS三角巧妙运用
目录一:一个三角怎样画出:二:秒杀图片怎样做:一:一个三角怎样画出:设一个宽高为0的div盒子,然后给他加50px的边框solid red ;此时页面展示的就是一个50*50的红色正方形,我们把下,左的border设置为0,把上边框颜色改成透明色transparent,此时就出现的是右边框产生的三角形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">..原创 2021-07-19 19:53:25 · 93 阅读 · 0 评论 -
19.布局技巧:①margin负值应用:让两个盒子之间的线合并margin-left:-2px。如果中间线合并添加相对定位;已经有定位就z-index:1;②浮动不会压住文字(围绕技巧)③行内块做页码
目录一:合并两个盒子之间的两条线。但是盒子的最右边会被覆盖,如图:解决办法:①添加相对定位:会压住其他标准流和浮动的盒子 ②如果有相对定位,那就提高盒子层级z-index:1;二:浮动元素不会压住文字三:行内块做页码1.a标签是行内元素,设置宽高无效,先转成行内块元素dispaly:inline-block;2.让a标签里面的文字水平垂直居中:水平:text-align:center; 垂直:line-height:a标签的高度;3.让a标...原创 2021-07-19 16:29:36 · 243 阅读 · 0 评论 -
18.文字超出部分用省略号替代:①单行文字溢出white-space: nowrap;overflow: hidden; text-overflow:ellipsis;②多行文字溢出③英文不自动换行
一.单行文字溢出 /* 这个单词的意思是如果文字显示不开,自动换行 */ /* white-space: normal; */ /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */ white-space: nowrap; /* 2.溢出的部分隐藏起来 */ overflow: hidden; /* 3.文字溢出的部分原创 2021-07-19 12:27:09 · 240 阅读 · 0 评论 -
17.一文字和图片(行内块元素)垂直对齐vertical-align:baseline/top/middle/bottom二解决图片底部默认空白缝隙①用前面的vertical-align②转成块级元素
一.文字和图片或者表单(行内块元素)垂直对齐举例:原创 2021-07-18 23:25:05 · 146 阅读 · 0 评论 -
16.①用户鼠标样式cursor:default/pointer/move/text/not-allowed②取消input轮廓outline:none③防止表单域拖拽resize:none
目录一.更改用户的鼠标样式二.取消input框点击时自动变成的蓝色框框或自动加黑(去掉轮廓线)三.防止表单域拖拽一.更改用户的鼠标样式二.取消input框点击时自动变成的蓝色框框或自动加黑(去掉轮廓线)三.防止表单域拖拽...原创 2021-07-18 22:39:22 · 80 阅读 · 0 评论 -
15.①精灵图(background-position:-x -y;)②字体图标iconfont的下载和使用、新字体图标追加③禁止文本或字体图标被选中user-select: none④三角小图标制作
1.获取小图标的宽,高,x,y轴信息,写负数。2.background-position:-x -y;原创 2021-07-18 22:17:50 · 140 阅读 · 0 评论 -
14.元素的显示和隐藏①display:none或block;不保留位置、②visibility:hidden或visible;保留位置;③overflow溢出隐藏四个值 ④土豆案例
土豆案例原创 2021-07-18 16:41:45 · 128 阅读 · 0 评论 -
13.①定位(静态定位、相对定位relative、绝对定位absolute、固定定位fixed、粘性定位position:sticky;top:10px;)、②定位和浮动的区别、③页面布局总结
目录一.定位大全二.定位和浮动的区别三.页面布局总结一.定位大全二.定位和浮动的区别三.页面布局总结原创 2021-07-18 14:23:10 · 181 阅读 · 0 评论 -
12.浮动、清除浮动(4种方式)
目录一.浮动二.清除浮动1.为什么清除浮动2.清除浮动方法:①在最后一个浮动标签后面加上一个div,在style里面为该div设置清除② box为父级元素,直接在父级元素中加入overflow: hidden;③在style里面加入,给父元素添加额外标签④在style里面加入,给父元素添加额外标签总结:一.浮动二.清除浮动1.为什么清除浮动通常情况下,一个父级元素下肯定会有多个子元素,此时父级元素不能设定高度,我们希望的是父元素随着子元素的...原创 2021-07-17 13:59:50 · 163 阅读 · 0 评论 -
11.盒子模型(border边框、padding内边距、margin外边距)、出现问题:2.父元素和子元素外边距合并、3.清楚内外边距、圆角边框、盒子阴影、文字阴影、文字边框、文本裁剪属性、
一.盒子模型的组成1.盒子——边框border的简写(复合写法)2.盒子——内边距paddig的简写(复合写法)二.出现问题——父元素和子元素外边距合并三.清楚内外边距...原创 2021-07-17 09:08:10 · 75 阅读 · 0 评论 -
10.CSS三大样式:层叠性、继承性、优先级(继承和*<元素选择器<类选择器<id选择器<行内style<!import)、权重叠加!!!
一.层叠(哪个离body近用哪个)两个color所以用下面的,但是font-size样式不冲突,不层叠,所以还是12px二.继承原创 2021-07-16 19:09:10 · 89 阅读 · 0 评论 -
9.案例——五彩导航栏
五彩导航蓝——要求鼠标略过变成浅紫色原创 2021-07-16 16:36:19 · 205 阅读 · 0 评论 -
8.背景图片:(背景色半透明,背景图片固定)、五彩导航栏
目录零.背景色半透明:一.背景图片引入和位置二.背景图片固定三.背景图片的复合写法零.背景色半透明:一.背景图片引入和位置举例:不平铺在盒子靠左,靠上二.背景图片固定正常情况三.背景图片的复合写法...原创 2021-07-16 16:28:35 · 146 阅读 · 0 评论 -
7.小米侧边栏案例(让文字垂直居中的技巧)
让文字垂直居中的技巧:让文字的行高=盒子的高度原创 2021-07-16 13:52:35 · 186 阅读 · 0 评论 -
6.CSS基础-复合选择器(style里面ol li{})、a:hover;、元素显示模式(块元素div、行内元素span、行内框元素,(转成行内块元素display:inline-block;)
目录一.复合选择器1.后代选择器2.子选择器3.并集选择器4.伪类选择器4.1链接伪类选择器(lvha)4.2 focus伪类选择器(修改input输入框)二.元素显示模式1.块元素:2.行内元素(设置宽高无效)3.行内块元素①如何将行内元素转为块级元素:display: block;②如何将块级元素转为行内元素:display: inline;③转为行内块元素display: inline-block;一.复合选择器...原创 2021-07-16 13:21:24 · 195 阅读 · 0 评论 -
5.CSS基础——快捷键(Emmet语法)
一:快捷键:原创 2021-07-15 21:25:18 · 693 阅读 · 0 评论 -
4.①文本text-align:center/left/right②缩进text-indent:2em③超链接text-decoration:none④line-height:25px⑤css引入
目录1.对齐文本text-align:center;2.装饰文本(文本上划线,删除线,下划线)text-decoration3.文本缩进text-indent4.行间距line-height=上间距+文本高度+下间距5.列子-新闻页面:1.对齐文本text-align:center;text-align设置元素内文本内容的水平对齐方式。水平靠左:text-align: left;水平靠右:text-align: right;水平居中:text-align: cen.原创 2021-07-15 21:06:21 · 264 阅读 · 0 评论 -
3.CSS基础——font-style;font-weight;font-size;font-family
目录1.CSS选择器class. id#2.字体的font-style;font-weight;font-size;font-family①文字样式 (斜体和不斜体)font-style:normal;②字体粗细font-weight:700;③字体大小:font-size: 20px; ④字体:font-family⑤font复合属性的写法1.CSS选择器2.字体的font-style;font-weight;font-size;font...原创 2021-07-15 18:04:05 · 469 阅读 · 0 评论 -
2——表格,列表,表单
一.表格①.表格写法:②.表格属性举例:③.合并单元格二.列表1.无序列表\有序列表2. 自定义列表遇到这种,用自定义列表三.表单1.表单域:2.<input>表单元素3.label标签4.select表单元素5.textarea文本域...原创 2021-07-15 14:00:51 · 71 阅读 · 0 评论 -
1——基础/特殊字符/链接跳转,超链接a
1.Visual Studio Code (VSCode) 常见问题:国内无法下载/下载慢下载链接为:https://vscode.cdn.azure.cn/stable/2aeda6b18e13c4f4f9edf6667158a6b8d408874b/VSCodeUserSetup-x64-1.58.1.exe2.浏览器内核(显示网页内容)3.Web标准 ...原创 2021-07-15 09:58:03 · 1241 阅读 · 0 评论