黑马程序员技术交流社区

标题: 技术贴 [打印本页]

作者: 陈凯丽 时间: 2019-7-24 16:48
标题: 技术贴
1、锚点定位
作用：实现页面内部的跳转：
添加锚点效果：
01、确定要跳到什么位置 ---- 使用id名标注要跳转到的目标位置（锚点目标）；
02、使用超链接a进行锚点按钮设置，<a href= >链接文本</a >
2、base标签
base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间
3、合并单元格
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
注意：合并单元格的顺序：先上后下，先左后右；
合并单元格三步曲（记住）
01 先确定是跨行还是跨列；
02 根据先上后下，先左后右的原则找到目标单元格，然后书写合并方式，确定合并单元格的数量；
03 删除多余的单元格；
4、无序列表（大重点）
结构：ul嵌套li标签；
<ul>
<li></li>
<li></li>
<li></li>
</ul>
注意：01、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的；
02、无序列表的所有默认样式我们都不用，后期会用css来进行设置；
5、自定义列表：dl嵌套dt和dd标签；
<dl>
<dt></dt>
<dd></dd>
</dl>
dl表示列表整体，dt表示为描述标题，dd表示描述内容
6、input文本控件
所有的input控件都是通过更改type的取值不同实现不同的效果；
文本框：input的type取值为text <input type=“text” />
可以设置value属性设置默认的值，<input type=“text”  value=“默认值” />
密码框：input的type取值为password <input type=“password” />
单选按钮：type=“radio” ,想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类；                <input type="radio" name="sex">
复选按钮：type=“checkbox”，也可以设置同样的name名称，但是不会影响多选的效果；                            <input type="checkbox" >
注意：如果想要实现单选按钮和复选按钮默认选中效果我们就需要设置对应的属性checked=“checked”
单选按钮 <input type="radio" checked="checked“  >
复选按钮 <input type="checkbox" checked="checked" >
input按钮控件
普通按钮：<input type=“button” value=“普通按钮” />  必须要自己设置value值；
提交按钮：<input type=“submit” />；可以设置自己的value值也可以用默认的；
重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的；
图片按钮：<input type=“image“ src=”图片路径” /> src属性必须书写查找图片路径；
标签按钮：<button>我是标签按钮</button>
7、css文字控制属性（死记硬背）
文字大小font-size
文字字体设置font-family
文字的粗细设置font-weight
文字的倾斜样式控制font-style
文字居中设置text-align
文本的行高设置line-height
文本的首行缩进 text-indent
文本装饰线条修饰text-decoration
字体综合写法（熟练使用）
font：是否倾斜是否加粗文字大小/ 行高字体；
font:  font-style  font-weight font-size/line-height  font-family;
注意:
01、使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的；
02、实际工作中一般只用：font:文字大小字体；
8、链接的伪类四种状态（会写面试可能会遇到）
a:link       未访问的链接（访问前）
a:visited 已访问的链接（访问后）
a:hover    鼠标移动到连接上（鼠标经过）
a:active    选定的链接（按下鼠标的时候）
注意：如果在书写的时候以上四个状态都要设置的时候，以上的顺序不能颠倒；
9、背景简写（很重要）
background:背景颜色  url 平铺方式是否固定    X轴 Y轴；
background:背景颜色  背景图片平铺方式  是否固定  X轴 Y轴；
注意：属性值没有书写顺序，没有的属性可以省略不写；
10、实现细线表格（死记硬背）
• 设置table,th,td的边框为1像素，同时配合border-collapse:collapse;进行边框线合并即可；
border-collapse:collapse;表示相邻的边框合并在一起；
11、盒子添加padding和border的问题（非常重要）
问题：01、如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大；
解决方案：加多少减去多少，再减的是还要注意是减去宽度环视高度；
02、如果盒子没有设置宽高，加了padding值之后盒子就不会被撑大；
12、盒子阴影（记住）
box-shadow:水平阴影垂直阴影模糊距离阴影大小阴影颜色  内/ 外阴影；
注意：01、书写的时候不需要的可以直接不写，可以同时设置多个阴影直接用逗号隔开使用就可以；
02、书写阴影的时候最后的阴影的内外显示如果不写默认表示是外阴影，写inset是设置内阴影；
13、基本的布局思路（死记硬背）：
01、首先所有的主导航都要用ul嵌套li，li嵌套a，
02、设置li左浮动float:left;,然后设置li的固定宽高（宽度有时候可以不写用padding设置左右的值撑开）；
03、将li里面的a标签转换给块元素display:block;，然后设置宽高和li一样（如果要用padding撑开的话我们直接给a设置padding值，li只需要设置高度）；
04、最后设置鼠标经过a的时候的样式
14、/*声明清除浮动的样式*/
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
  clear: both;
}
.clearfix {
   *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}
15、css属性书写顺序
1、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2、自身属性：width / height / margin / padding / border / background
3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
16、vertical-align: middle;
• vertical-align: middle; 可以让图片按照中心基线对齐
• 不紧可以解决图片和文字垂直居中对齐的问题，换可以解决图片默认留白的问题
• 建议直接在css的最上边书写下面代码
17、绝对定位的盒子居中对齐（很重要）
绝对定位和固定定位的盒子不能使用margin:auto;设置水平居中，如果想要居中我们就需要如下设置：
• 设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半，让盒子水平居中；
• 设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半，让盒子垂直居中；
18、如何实现固定定位的盒子跟随版心移动
将固定定位的盒子left:50%; 然后设置margin-left的值=版心的一半+定位盒子的宽度+任意值；
19、display显示与隐藏（不占位的隐藏）-记住
• 隐藏：display:none;
• 显示：display:block; 将隐藏的元素显示出来
visibility显示与隐藏（占位隐藏）
• 占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
20、用户界面-鼠标样式
• 鼠标样式：cursor
• 小白（默认） cursor:default;
• 小手： cursor:pointer; 提示用户可以点击下一步
• 移动： cursor:move;
• 文本： cursor:text;
• 禁止： cursor:not-allowed;
21、溢出的文字省略号显示（一定会用）
• white-space:normal; 默认处理，文字一行显示不下就折行显示；
• white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
• text-overflow:clip; 不显示省略号，直接裁剪；
• text-overflow:ellipsis; 隐藏的内容以省略号显示；
第一步  让文字强制在一行显示：white-space: nowrap;
第二步：将超出固定宽高的内容溢出隐藏overflow: hidden;
第三步：让隐藏的文字以省略号显示：text-overflow: ellipsis;
22、盒子的突出显示效果(记住)
第一步  按照设计稿将盒子的宽高设置合理，然后让盒子左浮动float:left;，这样两条边就会相加变成2
第二步  由于两条边重合为2，我们只需要一条描边，我们设置margin-top:-1px; 和margin-left:-1px; 让两条边重合；
第三步  如何小盒子里面的内容需要定位，我们就要给小盒子添加相对定位position: relative;（相对定位是不会改变盒子的显示模式，不会让盒子脱离文档流，虽然是不会脱离文档流但是始终是定位一直飘在页面的最上面），默认的层叠顺序是0也就是z-index:0;
第四步鼠标经过写盒子的时候，将盒子的层叠顺序调到最上z-index:1;
23、icon图标引入（一定要会用，死记硬背）
应用
在heade标签里面用link直接引入，favicon.ico图标直接要放在根目录下（根目录就是项目文件夹打开的第一级）
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
制作
http://www.bitbug.net/
24、字体图标
引用
第一步将下载的包进行解压把里面fonts文件夹直接复制到自己的项目根目录下
第二步打开解压的里面的demo.html 将我们需要的图标选中，并且复制，然后在我们自己的html页面新建一个标签把图标包裹 --  显示的样式一般是一个问号，或者什么都木有，在页面显示是一个灰框框；
第三步声明文字将下面的代码直接复制到css最上面，使用下面代码的时候我们要注意：fonts文件的路径
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?3a2xdr');
  src:  url('../fonts/icomoon.eot?3a2xdr#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?3a2xdr') format('truetype'),
url('../fonts/icomoon.woff?3a2xdr') format('woff'),
url('../fonts/icomoon.svg?3a2xdr#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
第四步  在css里面给调用这个文字的盒子设置样式font-family: 'icomoon';

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2