JD . 简单的网站构成、引入图标、去除 图片间距…

2018-06-24 01:05:45来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

模拟京东案例准备:

截图(效果图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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:转载:利用本地存储实现记录滚动条的位置

下一篇:background相关属性