黑马程序员技术交流社区

标题: html和div+css [打印本页]

---

作者: yzw2015    时间: 2019-7-25 11:01
标题: html和div+css
1.以下就是三角形的书写代码
div {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px;
      border-color: transparent transparent transparent red;
      font-size: 0;
      line-height: 0;
}
border-color: 上   右    下   左;不显示的区域透明，需要显示区域设置颜色，箭头的方向和方位英文相反；
上箭头：border-color:transparent transparent red transparent;
右箭头：border-color:transparent transparent transparent red;
下箭头：border-color:red transparent transparent transparent;
左箭头：border-color:transparent red transparent transparent;


2.如何实现固定定位的盒子跟随版心移动
将固定定位的盒子left:50%; 然后设置margin-left的值=版心的一半+定位盒子的宽度+任意值；


3、用户界面-鼠标样式
•鼠标样式：cursor
•小白（默认） cursor:default;
•小手： cursor:pointer; 提示用户可以点击下一步
•移动： cursor:move;
•文本： cursor:text;
•禁止： cursor:not-allowed;

4  •Textarea 文本域默认有轮廓线也可以统统outline:none;取消，同时还存在右下角拖拽放大，我们一般不允许，需要设置不能拖拽，可以通过resize:none;进行设置；

5、vertical-align实现图片和文字垂直对齐
•常用的取值：top（顶线对齐）bottom（底线对齐）middle（中线对齐）
•vertical-align:middle; 让行内元素、行内块元素垂直居中；

6、溢出的文字省略号显示（一定会用）
•white-space:normal; 默认处理，文字一行显示不下就折行显示；
•white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
•text-overflow:clip; 不显示省略号，直接裁剪；
•text-overflow:ellipsis; 隐藏的内容以省略号显示；

---

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

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