css样式
关注
分享
扫一扫
liukai6
这个作者很懒，什么都没留下…
展开
-
设置table表格后边框单线
当我们给表格加上css样式加上边框会出现非常难看的双层线.这个时候把下面的样式粘贴进去就可以了 <style type="text/css"> td{border:1px black solid;} table{border-collapse:collapse;} </style> 主要table{border-collapse:collapse;}这就是关键原创 2018-02-11 17:50:57 · 1907 阅读 · 0 评论 -
使用flex布局使内部元素上下左右居中
使上下左右居中.box { height: 60px; display: flex; /*左右居中*/ justify-content: center; /*上下居中*/ align-items: center; background-color: #F7F5D3;}原创 2018-06-30 10:47:25 · 11391 阅读 · 0 评论 -
让图片或者内容上下左右居中(css写法)
我们需要在其父标签中添加div { display: flex; justify-content: center; align-items: center; }加入这样的标签就可以实现了原创 2018-06-19 10:00:54 · 6712 阅读 · 1 评论 -
CSS中的position属性
absolute生成的为绝对定位的元素,相对static定位以外的第一个父元素进行定位. 元素的位置通过left,top,right,bottom的属性来进行规定fixed同样是生成绝对定位的元素,相对于浏览器窗口进行定位. 元素位置通过left,top,right,bottom来实现定位relative生成相对定位的元素,相对于正常位置进行定位static默认值,...原创 2018-07-02 23:13:07 · 234 阅读 · 0 评论 -
行内元素和块状元素
行内元素与其他行内元素并列不能设置宽高.默认的高度,就是文字的高度.块级元素霸占一行,不能与其他任何元素并列能接受宽,高.如果不设置宽度,那么快读将默认变成父亲的100%...原创 2018-07-03 08:33:22 · 263 阅读 · 0 评论 -
css使边框附带阴影效果
边框阴影效果可以使边框更加好看使用box-shadow属性使用的语法 box-shadow: h-shadow v-shadow blur spread color inset;下面了解一下参数h-shadow 水平阴影的位置,允许负值v-shadow 垂直阴影的位置,允许负值blur 模糊距离spread 阴影尺寸color 阴影颜色inset 外部阴...原创 2018-07-09 21:33:35 · 2280 阅读 · 0 评论 -
使用css来讲部分内容固定
这个时候使用css的知识position:fixed; top:0;width: 100%;设置一下这样的css的属性原创 2018-06-28 22:42:46 · 613 阅读 · 0 评论 -
css限制显示的文字多少,对超出部分,以...省略
.text_overflow{ width:6.5rem; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}原创 2018-06-29 10:12:06 · 3627 阅读 · 0 评论 -
flex布局,以及常见的属性
flex是一种弹性布局,简单快捷用法任何元素都可以指定.box { display:flex;}行内元素使用.box { display:inline-flex;} 如果是webkit内核的浏览器必须加上-wibkit容器内默认有两个轴水平主轴和垂直主轴容器的属性flex-directionflex-wrapf...原创 2018-07-05 21:14:23 · 580 阅读 · 0 评论 -
使用border的css来画箭头
<!DOCTYPE html><html lang="en" class="muui-theme-webapp-main"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <met原创 2018-07-06 11:37:55 · 1542 阅读 · 0 评论 -
使用base64的作为背景图片的用法
下面例子是微信小程序的背景图映入base64page { overflow:hidden; position:fixed; /* background-image:url('http://p0d5ombx1.bkt.clouddn.com/login.png'); */ background: url(data:image/jpeg;base64,/9j/4AAQSkZJ...原创 2018-07-06 18:00:04 · 21158 阅读 · 0 评论 -
iframe中a链接跳出iframe
在iframe中使用a标签进行跳转，默认是在iframe中进行页面的跳转，如果使用target=“_parent”则可以在父页面进行跳转，这个是基础问题，但是没记起来，这里记录一下，防止以后忘记。...原创 2018-07-24 16:58:56 · 3796 阅读 · 1 评论 -
meta标签中apple-mobile-web-app-capable
<meta name="apple-mobile-web-app-capable" content="yes" />删除默认的苹果工具栏和菜单栏,将值设置为no。需要显示工具栏和菜单栏时，不需要添加，默认值为yes，即显示。...原创 2018-08-01 13:48:43 · 2307 阅读 · 1 评论 -
css初始化代码
对标签的初始化body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengen...原创 2018-08-28 09:46:56 · 335 阅读 · 0 评论 -
Mint-UI中定义input最多输入的字符数(设置原生属性的方法)
设置input的长度设置原生属性，例如 :attr=”{ maxlength: 10 }”原创 2018-06-22 20:24:55 · 5095 阅读 · 0 评论 -
通过设置rem的值动态改变前端样式大小
前端动态设置html中font-size大小 (function (doc, win) { var docEl = doc.documentElement || doc.body, // 重置事件(旋转竖屏) resizeEvt = 'orientationchange' in window ? 'orientation...原创 2018-05-31 20:50:11 · 805 阅读 · 0 评论 -
使用CSS的clip属性来截取图片
我们需要一张大图的一部分这个时候clip属性就登场了 <!DOCTYPE html> <html> <head> <title>使用css截取图片</title> <style type="text/css" media="screen"> .out原创 2018-05-16 17:03:25 · 1947 阅读 · 0 评论 -
动态通过JS创建DOM后没有CSS样式
通过js动态创建的没有样式,我们可以自己设置css样式达到效果 td.setAttribute('style','border:1px #DDDDDD solid ;padding:5px'); 这是我创建表格后没有表格的线手动添加设置的css原创 2018-02-27 16:06:40 · 3881 阅读 · 0 评论 -
CSS的定位问题
一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把 display 设置原创 2018-02-28 19:22:34 · 309 阅读 · 0 评论 -
CSS中的相对定位(relative)
相对定位的设置方法如下position: relative;相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。可以将其简单认为相对原来的位置的定位.如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么...原创 2018-02-28 19:31:43 · 500 阅读 · 0 评论 -
CSS中绝对定位(absolute)
CSS绝对定位的实现方式position: absolute;设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。CSS 绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位原创 2018-02-28 19:41:13 · 501 阅读 · 0 评论 -
CSS实现水平菜单制作
下面是一个水平菜单的制作<html><head><style type="text/css">ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}a{float:left;width:7em;text-decoration:none;color:white;background-colo原创 2018-02-28 20:09:52 · 720 阅读 · 0 评论 -
CSS浮动使用(float)
浮动的特点浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动使用//左浮动float: left;//右浮动float: right;清除浮动//清除左浮动clear: left;//清除右浮动clear: right;//清除两侧浮动clear: both;原创 2018-02-28 20:17:47 · 256 阅读 · 0 评论 -
禁止文本框拖拽
禁止文本框的拖拽行为,css这样设置 textarea { resize:none; }原创 2018-02-28 20:55:49 · 2461 阅读 · 0 评论 -
CSS中的选择器
1. 关系选择器 a. 后代选择器特点:父元素 子元素,中间是空格什么都不加 b. 儿子选择器的特点:父元素>子元素,中间是>号 c. 相邻选择器特点:元素+元素,中间用+号,但是两者要为同一级才行 d. 兄弟选择器特点:元素~元素,兄弟元素中间用~号,必须要两个为同一级2. 属性选择器 a. 格式是标签名 [属性名] b. 标签名[属性名=属性值]原创 2018-03-12 09:05:36 · 181 阅读 · 0 评论 -
CSS控制段落
Div布局占位,css控制显示 Css控制段落文字 1. 段落的缩进:text-indent 内容很多我们总结css’的工作格式 选中谁{ 控制什么属性:什么值 } 2. 文本对齐 text-align(水平对齐方式) Left(默认左对齐) Right(右对齐) Center(排列在中间 3. 文原创 2018-03-12 09:07:08 · 593 阅读 · 0 评论 -
css根据分辨率显示不同的css
css判断不同分辨率显示不同宽度布局实现自适应宽度CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。随着发展，越来越多的电脑用户显示屏分辨率越来越高，但有的用户还是使用10...原创 2018-04-16 20:05:54 · 12169 阅读 · 0 评论 -
表单的不可以用的属性
在表单里我们希望不能修改内容可以使用disabledreadonly 但是disabled不能将表单的内容提交了，这个时候可以使用只读标签的readonly,需要注意的是他们虽然设置了不可以用标签但是都能被JS文件操作。 注意disabled不能和hidden标签共同使用原创 2018-03-29 15:18:28 · 757 阅读 · 0 评论 -
关于a链接去掉下划线
前段a链接去掉下划线使用 a{ text-decoration:none; } 就可以,有没有很好看原创 2017-10-12 15:03:12 · 4001 阅读 · 0 评论 -
css的属性使字体上下排列
我们使用这种属性span {writing-mode: tb-rl;}这样就可以使字体上下排列原创 2018-05-15 16:22:59 · 5996 阅读 · 0 评论 -
input中提示语得颜色
<style>/*修改提示文字的颜色*/input::-webkit-input-placeholder { /* WebKit browsers */ color: red; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red; } input::-moz-placeh...原创 2018-08-29 20:56:52 · 12284 阅读 · 0 评论