2018.11.1 css的学习7

最新推荐文章于 2018-11-29 14:12:04 发布

你算哪块小饼干啊呀呀

最新推荐文章于 2018-11-29 14:12:04 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/HANGSOME123/article/details/83626978

版权

placeholder="请输入关键词" 这个是输入框样式

1

取消外边框在表单的文本框中输入框会有蓝色的外边框平常我们我要自己设置样式的时候必须要去掉：

input {outline:0;} //这样就清除外边框了

鼠标的样式：cursor

<ul> //只是鼠标的样式改变了还是可以选中的

</ul>

防止文本框被拖拽：

<textarea name="" id="" cols="30" rows="10"></textarea> //这是一个文本框

textarea {resize:none;} //这是方式文本框被拖拽

设置文本框或者表单等行内块元素与文字水平对齐这是使用最多的方式

<img src="./1.JPG" alt="">霸道总柴微微一笑发现事情并不那么简单！！！

img { vertical-align:baseline; //默认基线对齐 vertical-align:top; //手动改为中线对齐 vertical-align:top //手动改为顶部对齐}

去除图片底边的缝隙当图片或者表单等行内块元素它的底线会和父亲的基线进行对齐这样在地测就会流出一片空白

解决方案1：转换成块级元素 display:block //这样就不存在了

解决方案2：vertical-align:middle|top

2

文字溢出隐藏

word-break:自动换行

noraml：使用浏览器默认的换行规则

word-break:break-all; //允许单词拆开显示

word-break: keep-all; /*不允许单词显示有连字符短横线 - 就能够拆*/

white-space：设置检索对象内文本显示方式。通常我们要强制于一行显示内容

normal:正常的

nowrap:强制在一行显示 //这个使用最多

text-overflow:文字溢出

clip:不显示省略标记（...），而是简单的裁剪

ellipsis:当对象内文本溢出时显示省略标记（...） //一定要首先强制一行内显示。再次和overflow属性搭配使用

css的精灵技术

精灵技术：处理网页背景图像的方式

将页面的所有零星的小图全部集中到一张大图上面去减少浏览器访问服务器的请求的压力

这个大图片就被称为精灵图就是把需要使用的图片都放到一张图片上去然后测出对应的图片的坐标和对应的大小

精灵图的使用方式：

1.首先先测量出精灵图的 width 和height

2.然后设置背景图片：background:url(./XXX.jpg) no-repeat;

3.background-position:对应的位置

可以使用ps进行测量窗口---信息 F8 可以测量物体的大小以及坐标

字体图标的使用：可以设置大小和颜色

1.首先去icomoon进行下载自己需要的样式然后把 fonts这个文件导入到项目中，注意路径问题

然后申明上面的那段代码@font-face

2.给盒子使用字体

3.盒子里面添加结构代码片段如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
@font-face {  /*电脑中没有的字体我们需要申明*/
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?9l8vju');
  src:  url('../fonts/icomoon.eot?9l8vju#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?9l8vju') format('truetype'),
    url('../fonts/icomoon.woff?9l8vju') format('woff'),
    url('../fonts/icomoon.svg?9l8vju#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
        div { /*一般推荐使用这个 比较简单 直接复制*/
            font-family: "icomoon";  /*必须保证这个要和上面的font-family: 'icomoon';一样*/
            font-size: 400px;
            color:red;
        }
        span::before {  /*这是第二种方法 进行设置字体图标样式*/
            font-family: "icomoon";
            font-size: 400px;
            content: "\e917"; /*一定记得要加反斜杠*/
            color: aqua;
        }
    </style>
</head>
<body>
    <div></div> <!--这个里面的小方块是到下载的icomoon里面有一个文件demo.html进行复制的-->
    <div></div>
    <span></span>
</body>
</html>

before和after伪元素的详解：

小复习一下：.one类选择器：hover伪类选择器 ::after伪元素选择器

实质：类选择伪类选择器就是选取对象伪元素选择器本质上就是插入一个元素（标签盒子）只不过是一个行内元素 span a img等

注意：行内块元素是没有宽和高的要注意转换成块级元素

小案例：鼠标经过显示边框：

这里要注意的是box-sizing

你算哪块小饼干啊呀呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2018.11.1 css的学习7

placeholder="请输入关键词" 这个是输入框样式1取消外边框在表单的文本框中输入框会有蓝色的外边框平常我们我要自己设置样式的时候必须要去掉： input {outline:0;} //这样就清除外边框了鼠标的样式：cursor &lt;ul&gt; //只是鼠标的样式改变了还是可以选中的 &lt;li style="cursor:default;...
复制链接

扫一扫