CSS
来源：互联网 发布：教务网络管理系统入口 编辑：程序博客网 时间：2024/04/30 08:55
CSS
1.内联式css样式
<p style="color:red">这里文字是红色。</p>2.嵌入式css样式，写在当前的文件中
<style type="text/css">span{color:red;}</style>3.外部式css样式
<link href="base.css" rel="stylesheet" type="text/css" />4.三种方法的优先级
内联式 > 嵌入式 > 外部式
CSS选择器
5.标签选择器
p{font-size:12px;line-height:1.6em;}6.类选择器
.类选器名称{css样式代码;}.setGreen{ color:green;}7.ID选择器
#setGreen{ color:green;}8.子选择器
用于选择指定标签元素的第一代子元素
.food>li{border:1px solid red;}这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
9.包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素
.first span{color:red;}这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择 span及span的后代都变化
10.通用选择器
* {color:red;}它的作用是匹配html中所有标签元素
11.伪类选择符
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。
12.分组选择符
为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
h1,span{color:red;}CSS的继承，层叠和特殊性
1.继承
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
p{color:red;}<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;
p{border:1px solid red;}<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。
2.特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：
p{color:red;}.first{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/3.层叠
如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
p{color:red;}p{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
4.重要性
有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决
p{color:red!important;}p{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>这时 p 段落中的文本会显示的red红色。
CSS格式化排版
1.文字排版–字体
{font-family:"Microsoft Yahei";}微软雅黑2.文字排版–字号、颜色
{font-size:12px;color:#666}3.文字排版–粗体
{font-weight:bold;}4.文字排版–斜体
{font-style:italic;}5.文字排版–下划线
text-decoration:underline;}6.文字排版–删除线
{text-decoration:line-through;}7.段落排版–缩进
{text-indent:2em;}8.段落排版–行间距（行高）
{line-height:1.5em;}9.段落排版–中文字间距、字母间距
letter-spacing:50px;10.段落排版–对齐
text-align:center;CSS盒模型
1.元素分类
html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素有：
<img>、<input>2.元素分类–块级元素
在html中
<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}块级元素特点：
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
3.元素分类–内联元素
在html中，
<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。
当然块状元素也可以通过代码display:inline将元素设置为内联元素。
div{ display:inline; }- 和其他元素都在一行上；
- 元素的高度、宽度及顶部和底部边距不可设置；
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
4.元素分类–内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
display:inline-blockinline-block 元素特点：
- 和其他元素都在一行上；
- 元素的高度、宽度、行高以及顶和底边距都可设置。
5.盒模型–边框（一）
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
div{ border:2px solid red;}注意：
- border-style（边框样式）常见样式有： dashed（虚线）| dotted（点线）| solid（实线）。
- border-color（边框颜色）中的颜色可设置为十六进制颜色，如
border-color:#888;//前面的井号不要忘掉。- border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。
6.盒模型–边框（二）
如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}7.盒模型–宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
css代码：
div{ width:200px; padding:20px; border:1px solid red; margin:10px; }元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px
8.盒模型–填充
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px 10px 15px 30px;}9.盒模型–边界
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码
div{margin:20px 10px 15px 30px;}CSS布局模型
1.css布局模型
元素有三种布局模型：
- 流动模型（Flow）
- 浮动模型 (Float)
- 层模型（Layer）
2.流动模型
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
3.浮动模型
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示
div{ width:200px; height:200px; border:2px red solid; float:left;}4.层模型
让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作
层模型有三种形式：
- 绝对定位(position: absolute)
- 相对定位(position: relative)
- 固定定位(position: fixed)
(1)层模型–绝对定位
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;}<div id="div1"></div>(2)层模型–相对定位
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;}<div id="div1"></div>(3)层模型–固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px;}<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>5.Relative与Absolute组合使用
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？
参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--></div>从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
参照定位的元素必须加入position:relative;
#box1{ width:200px; height:200px; position:relative; }定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{ position:absolute; top:20px; left:30px; }CSS代码缩写，占用更少的带宽
1.盒模型代码简写
如果top、right、bottom、left的值相同
margin:10px 10px 10px 10px;margin:10px;单位和值
1.颜色值
英文命令颜色
p{color:red;}RGB颜色
p{color:rgb(133,45,200);}十六进制颜色
p{color:#00ffff;}CSS样式设置小技巧
1.水平居中设置-行内元素
这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div></body><style> .txtCenter{ text-align:center; }</style>2.水平居中设置-定宽块状元素
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
（1）定宽块状元素：块状元素的宽度width为固定值：
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
html代码：
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div></body>css代码：
<style>div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}</style>也可以写成：
margin-left:auto;margin-right:auto;3.水平居中总结-不定宽块状元素方法（一）
不定宽块状元素：块状元素的宽度width不固定。
不定宽度的块状元素有三种方法居中：
（1）加入 table 标签
（2）设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
（3）设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
4.水平居中总结-不定宽块状元素方法（二）
第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果
<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body><style>.container{ text-align:center;}/* margin:0;padding:0（消除文本与div边框之间的间隙）*/.container ul{ list-style:none; margin:0; padding:0; display:inline;}/* margin-right:8px（设置li文本之间的间隔）*/.container li{ margin-right:8px; display:inline;}</style>5.水平居中总结-不定宽块状元素方法（三）
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body><style>.container{ float:left; position:relative; left:50%}.container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%;}.container li{float:left;display:inline;margin-right:8px;}</style>6.垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
<div class="container"> hi,imooc!</div><style>.container{ height:100px; line-height:100px; background:#999;}</style>7.垂直居中-父元素高度确定的多行文本（方法一）
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>table td{height:500px;background:#ccc}8.垂直居中-父元素高度确定的多行文本（方法二）
这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div></div><style>.container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/}</style>9.隐性改变display类型
当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
其他
display:inline/block;: 显示为内联元素/块状元素`text-align ：center : 使块状元素中字体居中，设置文本对齐方式
position :定位
- position:fixed : 相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动
- position:relative : 相对定位元素的定位是相对其正常位置。
- position:absolute; : 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
<html> - position:absolute; : 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
* position：absolute这个是绝对定位； ，相对于父布局定位，父布局需：position: relative; ？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
是相对于浏览器的定位。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 *
line-height : 行高
vertical-align ： top/ : 设置一个元素的垂直对齐，把元素的顶端与行中最高元素的顶端对齐
background
(1) background-size : 背景图像的尺寸- length : 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
- percentage : 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度.如果只设置一个值，则第二个值会被设置为 “auto”。
- cover ： 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
- contain ： 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
(2)background-position : 设置背景图像的起始位置
7.定位一个图标，相对于父控件定位
vertical-align ： middle ： 把此元素放置在父元素的中部
.header .header-comeBack { position: absolute; left: 0.6rem; top: 0.5rem; z-index: 99; width: 0.75rem; height: 0.9rem; vertical-align: middle;}8.矩形框的标题栏，有背景图片
.header { height: 1.9rem; line-height: 1.9rem; border-bottom: 2px solid #d7d7d7; background: url(../images/icon/bg2.png) no-repeat; background-size: cover; background-position: center center; position: relative;}返回图标：
.header .header-comeBack { position: absolute; //相对于最近的已定位父元素 left: 0.6rem; top: 0.5rem; z-index: 99; width: 0.75rem; height: 0.9rem; vertical-align: middle; //设置一个元素的垂直对齐。}文字：
.header span { color: #fff; font-size: 0.55rem; display: block; //变为块状元素，才能使width,hei 生效 width: 100%; height: 1.9rem; text-align: center; //设置文本的对齐方式}
9 . 模块
doctorAdviceManagementDetail .detail-msg { background-color: #fff; height: 4.6rem; padding-left: 1.2rem; //div中内容距离左 padding-top: 1rem;} <div class="detail-msg"> <p>付费情况：已付费</p> <p><span>是否领药：否</span><span>是否手术：否</span></p> <p>执行状态：执行中</p> </div>
10 . 模板
#doctorAdviceManagementDetail .medication { background-color: #fff; margin-top: 0.2rem; //div外部边框距离上 padding: 0.8rem 1.1rem;}div下边框为虚线：
doctorAdviceManagementDetail .medication .medication-msg { border-bottom: 0.05rem dashed #bfbfbf;}
11 . 弹出窗
#doctorAdviceManagementDetail .confirmationBox { background-color: #fff; width: 9.5rem; border-radius: 0.25rem; //圆角 text-align: center; //文本对齐方式 overflow: hidden; //超出的部分内容会被修剪，并且其余内容是不可见的 box-shadow: 5px 5px 20px #999999; //四周阴影 position: absolute; //定位，相当于父布局 top: 11rem; left: 2.65rem; z-index: 999;}
12 . 模块
div
.search { position: relative; padding: 1.05rem 0.8rem 1.15rem; //div里面元素分别距离四周边框}
13.模块
div
<div class="event-header"> <p>上报人：李铭</p> <p>上报时间：2016-05-25 09:35</p> </div>.adverseEvents .event .event-header { margin-top: 0.45rem; height: 2.8rem; padding: 0 0.75rem; border-bottom: 1px solid #d7d7d7; //下边框线}.adverseEvents .event .event-header p { font-size: 0.6rem; color: #7d7d7d; line-height: 1.2rem;}- 模块
<p>发生时间：2016-05-24 21:00</p>.adverseEvents .event .event-msg p:first-child { height: 2.35rem; line-height: 2.35rem; border-bottom: 1px solid #eeeeee;}
15.表
<table class="firstTable"> <tbody> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>职称</th> <th>级别</th> </tr> <tr> <td>李铭</td> <td>女</td> <td>32</td> <td>护士</td> <td>特级</td> </tr> </tbody> </table>.adverseEvents .event .event-msg th, .adverseEvents .event .event-msg td { border: 1px solid red; width: 14.6rem; box-sizing: border-box; font-size: 0.5rem; text-align: center; height: 1.5rem; font-weight: 400; color: #666666;}
16 .模块
<div class="event-nursing-opinion" style="border-bottom:0;"> <h4> 护理部对不良事件的分析及处理意见： </h4> <p>获知的所有不良事件，不论与诺华产品是否有关获知的所有不良事件，不论与诺华产品是否有关获知的所有不良事件，不论与诺华产品是否有关获知的所有不良事件，不论与诺华产品是否有关</p> <div class="signature" style="margin-left:5rem;"> <p>护理部（盖章/签名）：</p> </div> <span>2016年12月12日</span> </div>.adverseEvents .event .event-department-opinion, .adverseEvents .event .event-nursing-opinion { border-top: 0.5rem solid #efeff4; //头部灰色边框 padding: 0.4rem 0.55rem 0.4rem; //div中内容距离四边}.adverseEvents .event .event-department-opinion h4, .adverseEvents .event .event-nursing-opinion h4 { font-size: 0.6rem; color: #0dbdd6;}.adverseEvents .event .event-department-opinion p, .adverseEvents .event .event-nursing-opinion p { //长文本 font-size: 0.55rem; line-height: 1.2rem; text-indent: 2em; margin-top: 0.35rem; height: 100%; color: #666666;}.adverseEvents .event .event-department-opinion .signature, .adverseEvents .event .event-nursing-opinion .signature { margin-left: 7rem; //黑色块，外边框距离左边}.adverseEvents .event .event-department-opinion span, .adverseEvents .event .event-nursing-opinion span { //时间块 display: block; //此元素将显示为块级元素，此元素前后会带有换行符。 margin-top: -0.1rem; margin-left: 9rem; font-size: 0.55rem; color: #666666; text-align: right; //控件内字体对齐方式}
17 .模块
<div class="discussion-title"> <p>讨论区：</p> <a href="javascript:;">点击评论</a> <span>共120条评论</span></div>.adverseEvents .event .discussion .discussion-title { background-color: #efeff4; height: 1.75rem; //gaodu line-height: 1.75rem; position: relative; //相对定位}.adverseEvents .event .discussion .discussion-title p { font-size: 0.55rem; color: #666666; margin-left: 0.3rem; //相对父布局}.adverseEvents .event .discussion .discussion-title a { font-size: 0.55rem; color: #39c7db; position: absolute; //绝对定位，相对于浏览器，浮层 top: 0; right: 4.8rem;}.adverseEvents .event .discussion .discussion-title span { font-size: 0.55rem; color: #676767; position: absolute; //绝对定位，相当于浏览器，浮层 right: 0.6rem; top: 0;}
18 .模块
<ul class="discussion-content"> <li> <div class="content-header"> <img src="images/icon/Khjbxx_tx.png" alt=""> <p>李希</p> <span>1小时前</span> </div> <p>事情很严重，希望能尽快处理好，消除对医院的不良影响</p> </li> <li> <div class="content-header"> <img src="images/icon/Khjbxx_tx.png" alt=""> <p>李希</p> <span>1小时前</span> </div> <p>事情很严重，希望能尽快处理好，消除对医院的不良影响</p> </li> </ul>.adverseEvents .event .discussion .discussion-content li { border-bottom: 1px solid #eaeaea; //边框底线 padding: 0.65rem 0.7rem; //里面内容距离四周}.adverseEvents .event .discussion .discussion-content li .content-header { height: 1.75rem; // line-height: 1.75rem; //使里面的内容居中 position: relative;}.adverseEvents .event .discussion .discussion-content li .content-header p { position: absolute; //绝对布局 left: 2.2rem; top: 0; padding: 0; text-indent: 0; //段落p第一行缩进 color: #666666; font-weight: 700; //字体宽度 line-height: 1.75rem;}
20 . 模块
<div class="comments clearfix"> <input type="text"> <input type="button" value="评论"> </div>.adverseEvents .event .discussion .comments { height: 2.9rem; line-height: 2.9rem; //居中 text-align: center; margin-left: 1.35rem; margin-top: 0.55rem;}.adverseEvents .event .discussion .comments input:first-child { width: 10.15rem; height: 1.45rem; //border: none; border: 2px dashed #bfbfbf; //边框 border-left: 3px dashed #bfbfbf; //边框 border-radius: 0.2rem 0 0 0.2rem; //边框 box-sizing: border-box; //边框 font-size: 0.55rem; padding-left: 0.45rem;}.adverseEvents .event .discussion .comments input:last-child { width: 2.7rem; height: 1.45rem; border: none; border-radius: 0 0.2rem 0.2rem 0; color: #fff; background-color: #03bbd4; font-size: 0.55rem; margin-left: -4px;}
21 .模块
（1）背景颜色
body { font-family: '微软雅黑'; background-color: #efeff4; //整个页面的背景颜色 color: #333333; }
22 . 模块
<div class="accidentMsg-input"> <ul> <li><input type="text" placeholder="差错人"></li> <li><input type="text" placeholder="发现人"></li> <li><input type="text" placeholder="发现时间" id="findTime"><a href="javascript:;" id="findTime-btn"><img src="images/icon/pc_event_time.png" alt="" class="accident-data fl"></a></li> </ul> </div>.accidentMsg-input li { height: 1.875rem; color: #9a9a9a; background-color: #fff; border-bottom: 1px solid #e3e3e3; //下边框 font-size: 0.55rem; // padding-left: 0.55rem; //里面内容距离四周 box-sizing: border-box; padding-top: 0.25rem; position: relative; //相对布局}.accidentMsg-input li img { position: absolute; //绝对布局，脱离文档流 ，相对于已定位的父布局 right: 1.05rem; top: 0.5rem; width: 0.75rem; height: 0.75rem;}
23 .模块
<div class="editTheAccident-title"> <span></span> <h4>患者信息：</h4> <div class="function clearfix"> <div class="addBtn" onclick="addPatient(event,this)"> <a href="javascript:;"><img src="images/icon/ccbj_zj.png" alt="">添加</a> </div> <div class="delBtn" onclick="del(this)"> <a href="javascript:;"><img src="images/icon/ccbj_sc.png" alt="">删除</a> </div> </div> </div>.editTheAccident .editTheAccident-title, .editTheAccident .editTheAccident-title-blue { height: 2.15rem; line-height: 2.15rem; padding-left: 0.75rem; position: relative;}
- CSS
- css
- css
- css
- css
- CSS
- CSS
- css
- css
- CSS
- css
- css
- CSS
- css
- CSS
- css
- CSS
- css
- sass简易使用说明
- 使用WPARAM或LPARAM 传递指针
- Android Studio导入太慢？修改项目配置文件再导入，飞一般的感觉
- 用GD库做图片缩略图
- 复习iOS动画-Explicity Animation
- CSS
- C++测试程序申请多大的内存空间
- leetcode题解
- No resource found that matches the given name 'Theme.Leanback'
- 一个老程序员告诉你：中国程序员为什么要跳槽
- linux运维命令
- shell实用命令
- 利用http模块进行post测试
- objective-c的description测试
