(一)div、元素居中中显示方法:
1.宽度要有实际值或百分比值
2.margin:0px auto;
文本内容居中显示的方法:
1.text-align:center;
2.line-height:实际内容高度;(需要有height值);
(二)商品展示界面:
多数使用列表来展示。实现思路:大的盒子模型里放ul和多个li,li向左浮动(float:left;),ul溢出隐藏(overflow:hidden;)。
在实现展示前,需计算出每个li的宽度+li与li之间的间隙外边距,一般每行行尾展示的那个li不需要设置水平方向上的外边距,以实现紧密展示,所以会用到nth-of-type(n)选择器,将最后行尾的li的外边距去除。
li里边放内容,一般上边图片,下边是商品简述和商品价格、购物车跳转界面。
ccs效果:鼠标移入前正常,鼠标移入后整个li出现蒙层效果,字体颜色变化。实现思路:①用hover伪类选择器,写改变后的样式属性,谨记要想清楚给哪个元素标签添加选择器,是哪个元素标签发生变化。②JavaScript写,首先获取标签并赋予变量;然后对使用onmouseover和onmouserout分别写入鼠标移入前的样式和鼠标移入后的样式,display:none;和display:block;可以实现元素的显示消失效果;最后注意javaScript的位置,一般都写在body最后面。③用jQuery写,不同var变量,直接获取标签,mouseover和mouseout对应鼠标移入移除,$('标签名').css('属性','值')。记得引入jQuery库。
(三)图片放大
1 <style type="text/css">
2 .div_1{
3 display: inline-block;
4 width: 500px;
5 height: 500px;
6 border: 1px solid blue;
7 position: relative;
8 }
9 .img1{
10 width: 400px;
11 height: 320px;
12 position: absolute;
13 left: 0;
14 top: 0;
15 transition: all .4s;
16 cursor: pointer;
17 }
18 .img1:hover{
19 zoom:1;
20 transform: scale(1.2);
21 }
22 .div_2{
23 display: inline-block;
24 width: 500px;
25 height: 500px;
26 border: 1px solid yellow;
27 position: relative;
28 }
29 .img2{
30 width: 400px;
31 height: 320px;
32 position: absolute;
33 top: 0;right: 0;bottom: 0;left: 0;
34 margin: auto;
35 transition: all .4s;
36 cursor: pointer;
37 }
38 .img2:hover{
39 zoom:1;
40 transform: scale(1.2);
41 }
42 /*zoom:设置或检索对象的缩放比例*/
43 /*zoom缩放会将元素保持在左上角,而scale默认是中间位置*/
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <div class="div_1">
9 <img class="img1" src="img/one4.jpg" alt="">
10 </div>
11 <div class="div_2">
12 <img class="img2" src="img/one5.jpg" alt="">
13 </div>
14 </body>
15 </html>
关键知识:transform: scale(倍数):实现元素的缩放,1为元素值,一般与hover配合使用写css,或者与mouseover和mouseout配合使用写javascript或者jQuery库;
zoom:设置或检索对象的缩放比例,zoom缩放会将元素保持在左上角,而scale默认是中间位置.
(四)矩形宽四角变椭圆形(input框)
1.设置px值
①根据元素标签实际的宽度计算出需要的px值
②宽度像素的20%左右值,border-radius:(box的宽度*20%)px;
2.设置%值
①border-radius:20%;
(五)正方形盒子变圆形
1.宽高一样
2.border-radius:50%;
3.border-radius:宽的一半px;
(六)css通用样式设置
body,p,h1,h2,h3,h4,h5,h6{margin:0;}
ul,ol{list-style:none;margin:0;padding:0;}
(七)css参考样式集合
一.字体属性:(font)
1.大小{font-size:px}
2.样式{font-style:oblique;}(偏斜体)italic;(斜体)normal;(正常)
3.粗细{font-weight:bold;}(粗体)lighter;(细体)normal(正常)
4.行高{font-height:normal}
5.修饰{text-decoration:underline;}(下划线)overline;(上划线)line-through;(删除线)blink;(闪烁)
二.常用字体:(font-family)
三.
(八)切换类名实现样式的更换jQuery和显示隐藏
$('#two').toggleClass('anotherClass')//重复切换anotherClass
jQuery中 toggle和sildeToggle方法都能实现对一个元素的显示和隐藏,区别是:
toggle:动态效果为从右至左。横向动作
slideToggle:动态效果为从下至上。竖向动作。(由下至上收缩)
(九)两端对齐(表单文字)
1 div.justify
2 {
3 text-align: justify; width:200px; font-size:15px; color:red;
4 border:1px solid blue; height:18px;
5 }
6 div.justify > span
7 {
8 display: inline-block /* Opera */;
9 padding-left: 100%;
10 }
11 HTML:
12
13 <div class="justify">hello, text justify.</div><br/>
14 <div class="justify"> hello, text justify.<span></span></div><br/>
15 <div class="justify">中 文 两 端 对 齐</div><br/>
16 <div class="justify">中 文 两 端 对 齐<span></span></div>
只有最后一个完成两端对齐。
除了要在块级元素加text-align:justify样式外,还需要在里面加一个空的span元素,并应用样式。另外,对于中文还必须用空格隔开汉字,否则也没有两端对齐的效果。