CSS学习总结笔记2

4. 有关弹出的遮罩层

5. 有关wifi开关效果案例

6. 常用布局写法分析

7.常用的字符写法

8.常用的兼容性写法及文字段落问题


弹出层无法完全显示问题

*在甘肃违章查询wap项目中遇到此类问题，修改方法如下几点：

a.将弹出层的宽度由em修改为百分比，比如90%。

b.将margin-left值也由具体的em修改为百分比，比如margin-left:-45%b.  将文字大小改小

c.特别重要的是，当有position: fixed;时，一定要加上top：0，left：0；等定位，否则就无法知道是相对于哪一点固定定位。


手机页面CSS写法细节

1. 通常line-height属性写在父级元素而非父级元素内部的小元素。

2. 通常设置圆角边框等属性border-radius不是写在某个元素类，而是单独设定，加上此类的。    

例如  .round{ border-radius:1em;}    .display_none {  display:none;}                  

     .por{ position:relative;}    .poa{  position:absolute;}

3.  想要将文字和图片同时放置某个容器内，而文字又要居中。可以设定容器为相对定位，居中对齐，图片为绝对定位，这样图片就不会影响文字的位置，文字可用p或者h标签直接实现居中。

4.注意background-size 可以用百分比%，也可以用em,例如  background-size: 0.8em  0.8em;

5. Input输入框中一般还会设置一定的左边距（右边距可不考虑），     如 width: 98%;  padding-left: 2%;       且可以有  value=“－请输入－“写法

6. 背景可以属性可以同时设置背景颜色及图片，学习此简洁写法：    

    background:   #56c5fd    url(../images/pic_11.png)   no-repeat   42%;

7.通常左右margin值为2em.      

8.左文右输入框情形，右输入框的margin-left:（0.75+左文宽度）em   

  通常border颜色：#ccc  ,#dfdfdf,        

    .border类型：  solid    dotted    dashed 

9.通常图片切片为长宽相同.



4.有关弹出的遮罩层

…….

<div class="backdrop"></div>

<div class="pop_box">

<a class="close">x</a>

....

</div>

注意CSS的写法，才能使得遮罩层是好的效果，以及居中的显示

.backdrop{    left:0px; top:0px; bottom:0px; right:0px; position:fixed;

background:#000;  z-index:2; opacity:0.4; filter: Alpha(Opacity=40);   }

.pop_box{    position:fixed;width:817px;height:438px;padding:20px;

background:url(../images/pop_bg.png); z-index:10;             }

$(‘.pop_box‘).css({left:($(window).width()-817)*0.5,top:($(window).height()-438)*0.5})

5.有关wifi开关效果案例

方法1：用背景图片实现   

方法2：用CSS3写

<div class="top">

<h1>无线局域网</h1>

<div  class="btn">

<div class=“onbox”><span>|</span><p></p></div>

<div class="offbox">|</div>

</div>

</div>

*{padding:0px;margin:0px;}

/*注意初始化不能忽略。否则手机自适应上会有偏差*/

.top{padding:0 1em;height:3em;line-height:3em;border-bottom:1px solid #ebebeb;}

.top h1{float:left;color:#666;font-size:1.15em;}

.btn{ float: right; height:2em; cursor: pointer; background:#999;  

/*关闭时的灰色背景*/   width:6em;overflow:hidden;border-radius:1em; position:relative; }

.onbox{ height:2em;line-height:2em;border-radius:1em; position:absolute;left:0;top:0;   width:6em; background:#007FEA;/*开启时的蓝色背景*/}

.onbox  span{ color:#fff;font-size:1.15em;font-weight:bold;width:3.46em; text-align:center;display: block;float: left;}  /*设定白色竖线*/

.onbox  p{  width:2em;height:2em;border-radius:1em;background:#fff;  padding:0px;margin:0px;float: right; }

/*设定白色圆球*/

.offbox{ color:#fff;line-height:2em;font-size:1.15em;font-weight:bold;width:3.46em;  text-align:center;

display: block;position:absolute;right:-3.45em;top:0px;  }


$(function(){

var fla=1;

$(‘.btn‘).click(function(){

if(fla)

{

$(this).find(‘.onbox‘).animate({left:-parseInt($(‘.onbox span‘).css(‘width‘))})

.next().animate({right:0});

fla=0;

}

else

{

$(this).find(‘.onbox‘).animate({left:0}).next().

animate({right:-parseInt($(‘.onbox  span‘).css(‘width‘))});

fla=1;

}

})

})


6.常用布局写法分析

图1      Tab切换

上面的图片，是这样分析布局的：

下面的框架，不变，依旧写 border：3px  solid   #xxx;

上面的Tab中运用的是ul  li 结构，li负责右边框的灰色线；

Li设置为相对定位，li中的div设置为绝对定位，因此，div的高度可以高于li而不出错。

最后运用div点击后的cur属性，设置背景图片,如下图：

图2    基本导航


1.对于第一个导航所需要设定的样式，学习这样的写法：

.nav ul li a:hover, .nav ul li.cur a{  。。。 }

2.小三角的写法：

.icon{ width: 0; height: 0; border-width: 0 15px 15px; border-style: solid;

border-color: transparent  transparent  #2C2D33;   position: absolute;  }

当然，由于搜狗拼音的强大，可以直接打印出来，如◆,通过定位，设置color即可。

图3 下拉列表


对于此类下拉列表，

通常不会用原生态的<select><option value=“”>xxx</option></select>，因为，

样式不美观，也不太方便改写，用李杨改写的js替换select依然显得代码不够精简。

因此：最好用一个简单的 input 来写，设置背景图片为下拉按钮样式，然后在其后

写ul  li来写下拉的内容，设置原先为隐藏，点击后下拉显现，配合简单jQuery即可。

注：保证每点击其中一个下拉列表，其他的自动关闭，这是一个该注意的细节问题。

/*下拉列表效果开始*/

$(‘.select_list li input‘).click(function(){

$(‘.select_list li input‘).next(‘.small‘).hide();

$(this).next(‘.small‘).slideToggle();

})

$(‘.small li‘).click(function(){

$(this).parent().slideUp();

$(this).parent().prev().val($(this).html());

})

/*下拉列表效果结束*/


图4.单选按钮组

对于此类单选按钮组，

通常也不会用原生态的。而是用图片，实现点击交替背景即可。

/*性别选择开始*/

$(‘.female,.male‘).click(function(){

$(this).parent().find(‘span‘).removeClass(‘cur‘);

$(this).addClass(‘cur‘);

})

/*性别选择结束*/

图5.带有透明背景

在这里，先前用的是滤镜做黑色透明效果，比较麻烦，

因为其一，滤镜加载耗时，

其二，滤镜的黑色效果会使得上面的图片和文字也变成暗的，

因此，可直接用透明图片较方便，

且可以不用整个图片，将黑色透明图片剪切1像素宽平铺即可。

7.常用的字符写法

通过搜狗拼音输入法

1.特殊符号：     ☆★○●◎◇◆□■△▲

2.数字序号：     ①②③④⑤⑥⑦⑧⑨⑩

通过DW特殊字符输入法

1.美元写法：代码：&yen;         形状： ￥

2.版权写法：代码：&copy;       形状：

3.注册写法：代码：&reg;         形状：

8.常用的兼容性写法及超出隐藏

border-radius 圆角边框

-moz-border-radius: 15px;            /* Firefox */ 

-webkit-border-radius: 15px;      /* Safari 和 Chrome */  

border-radius: 15px;                   /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

注：当需要上圆角下平整的样式时，写法如下：

border-radius:15px 15px  0  0 ;

box-shadow盒阴影效果 

-moz-box-shadow: 10px 10px  20px   #000;          /* Firefox */

-webkit-box-shadow: 10px 10px  20px  #000;      /* Safari 和 Chrome */

 box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

注：box-shadow  寻找规律

box-shadow: -2px 0 0 green, //左边阴影             

0 -2px 0 blue, //顶部阴影                        

0 2px 0 red, //底部阴影                  

2px 0 0 yellow; //右边阴影


Opacity透明度

opacity: 0.5;  

filter: alpha(opacity=50);      

 -moz-opacity:0.5;             

 -khtml-opacity:0.5; 


 超过隐藏且为省略号：

  .XXX{  width : xxx px;  overflow : hidden; text-overflow : ellipsis;  white-space : nowrap;  /*缺一不可哦*/   }


段落文字连续字符串不能在同行显示时自动换行  

word-break: break-all;       这样就可以避免文字大片的掉下而不美观。



时间： 2024-12-23 15:11:47

CSS学习总结笔记2的相关文章

CSS学习总结笔记1

1.自适应页面中的注意点 2.有关页面嵌套 3.有关手机自适应页面 1.自适应页面中的注意点 CSS基本布局举例 左列固定,右边自适应 .Main{margin-left:200px; height:600px;} #left{width:200px;margin-left:-200px;float:left;height:100%;} #right{width:100%;float:right; height:100%;} 左右固定,中间自适应 .Main{margin-left:200px;

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

CSS学习笔记：溢出文本省略（text-overflow）

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"