模拟京东案例准备：

截图（效果图PSD文件）

搭建项目环境     (结构样式行为分离)  

HTML 核心文件     index.html     

CSS       控制样式     

base.css(基础样式)       global.css(全局样式)  

Image      放图片的文件夹   

JS     音频视频.....

站点

站点 == 项目 == 项目文件夹 == （根目录）

 

引入图标

下载

        京东： "http://www.jd.com/favicon.ico" 　　www.jd.com/favicon.ico           能下载京东图标

        所有：网站名（带www.）/favicon.ico    下载所有网站的图标

引入图标

<link rel="shortcut icon" href="favicon.ico"/>

可制作ico的网站：bitbug.net      

  <link rel="shortcut icon" href=" /favicon.ico" />  "shortcut???不加

 

 

小知识

font :  加粗  字号/行高  格式；    行高如果不写，默认为0；

 

u   ins     下划线

i   em      倾斜

s   del      删除线

 

vertical-align:midden;      去掉图片默认间距

font-weight:  normal;         加粗变正常

font-style:  normal;           倾斜变正常

text-decoration: none;         下划线删除线变正常

outline-style: none;           去除蓝色外边框

resize:  none;               禁止文本框拖拽

行高可以继承

文字居中： 

　　text-align：center；　　//不能精准定位

　　padding-left ／ padding-right：   ???自适应大小

　　定位和margin；

　　margin可以设置负值   padding不行  。且都可以使用百分比。

行内元素只能设置左右margin，转换成块元素才可以设置上下margin；

子盒子不能根据static定位，只能根据absolute／relative。fixed定位

驼峰命名：除第一个单词外，其他的单词首字母大写

 

先写普通标签-->特别的标签  -->详细的写

css下面的代码样式会覆盖上面的，优先级为后来者具上 （左右，左优先 ，上下，上优先）

选择器尽量不要超过3个， 多了容易造成重叠困难 

command+shift+c 检查所选元素    mac是command+option+i   进入开发者模式

 

盒子的稳定性：

　　只给宽高的盒子（高度剩余法）

　　只给padding的盒子 （padding里面不能有内容，宽度不确定的时候使用，可填充背景颜色）

　　给margin的盒子 （容易出现塌陷，不能继承背景色）

bd+ ；border ：1px solid #000；

　　

做logo

　　要加文字

　　文字移除：text-indent：-9999px；    首行缩进

　　　　　　   加链接（a标签） 给a链接七位数的em/八位数的px 会出现bug，链接点不到

　　　　　      logo图屁啊做a标签背景

 

 

模拟鼠标

 cursor：pointer; 鼠标变小手

 cursor：move ；鼠标变成死角箭头

 cursor：text ； 鼠标变成工形插入条光标

 cursir：default ； 鼠标变成小白 

 

CSS鼠标样式语法如下：

任意标签中插入 style="cursor:*"  
例子：<span style="cursor:*">文本或其它页面元素</span>  <a href="#" style="cursor:*">文本或其它页面元素</a>  注意把 * 换成如下15个效果的一种：

下面是对这15种效果的解释。移动鼠标到解释上面，即可看到鼠标起了什么变化～

hand是手型    
例子：鼠标手型效果   <a href="#"  " style="cursor:hand">CSS鼠标手型效果</a>

pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。 
例子：<a href="#" " style="cursor:pointer">CSS鼠标手型效果</a>

crosshair是十字型 
例子： <a href="#" style="cursor:crosshair">CSS鼠标十字型 效果</a>

help是问号
例子：   <a href="#" " style="cursor:help">CSS鼠标问号效果</a>

hand是手型 
pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。 
crosshair是十字型 
text是移动到文本上的那种效果 
wait是等待的那种效果 
default是默认效果 
help是问号 
e-resize是向右的箭头 
ne-resize是向右上的箭头 
n-resize是向上的箭头 
nw-resize是向左上的箭头 
w-resize是向左的箭头 
sw-resize是左下的箭头 
s-resize是向下的箭头

 

不使用hover外部CSS样式实现hover鼠标悬停改变样式

http://www.divcss5.com/jiqiao/j698.shtml

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有