css/js 图片自适应、自动满屏和拉伸问题解决

网站要自适应,其中一个工作就是必然要对图片的宽度进行处理。一般来说,网站图片插入的时候,编辑器会自动增加width和height的值,也就是图片的宽度高度,虽然可以去掉,也可以定义,但是也比较麻烦。下面给出几个方案

自适应大小

首先通过浏览器-审核元素-定位到img图标标签的上一层DIV,或者直接把所有图片的宽度都自适应。直接用img也可以。

上面图片可以看出定位到 .tab-content ,那么代码如下:

  1. .tab-content img {
  2. max-width:  100%;
  3. widthauto;
  4. heightauto;
  5. }

这里的max-width是定义最大宽度,也就是最大的宽度是多少,可以是固定值也可以是比例。

自动满屏

上面这个方法,有时候在屏幕比较大的时候,图片又显得比较小了。比如图片750px,实际的地方又按照比例分配剩下比较大的空间,想填充满屏,或者几乎满屏,可以这样。

  1. .tab-content img {
  2.     max-width100%;
  3.     widthauto;
  4.     heightauto;
  5.     min-width100%;
  6. }

这里介绍下,min-width 是定义最小宽度,也就是最小显示多少,可以是固定的值也可以是百分比。

图片拉伸解决

就象前面所说的,也是这个文章重点写的(毕竟上面的内容网上应该还是很多介绍的)。插入图片会自动载入宽度高度。定义了宽度,高度就会拉伸,但是页面又是就近原则处理的,也就是会收到height的影响。那么我们可以去掉这个高度吗?手工去掉显然太麻烦。所以用JS。

  1. var arr = $(‘img’);
  2. arr.each(function() {
  3.    $(this).css(‘height’,’auto’);
  4. });

上面这个方法,可以给img标签添加height=”auto”的定义。这样如果原来有定义高度的会被覆盖掉。

PS:需要jquery库的支持哈。

begin二次开发-调整页脚友链宽度

页脚的友链这个默认全宽,其实挺好看的。但是如果有一些用户自己弄了跟随小工具,到这个地方可能会挡住?所以可以修改下CSS。

后台-外观-编辑-style.css,搜索:#links

  1. /** 链接 **/
  2. #links {
  3.     margin: 0 –2px;
  4. /*增加这一行*/
  5.     width760px;
  6. }

修改增加width定义即可。但是,会发现一个问题,相对的链接都缩小了,怎么办呢?修改这里。

  1. @media screen and (min-width1024px) {
  2. .lx7 {
  3.     width: 14.2857%; /* 改为 20% */
  4.     transition-duration: .5s;
  5.     }
  6. }

大概的样子如图:【文件回滚原因,此图为补充截图

links-width-760

然后,我们缩小屏幕,会发现在某些宽度下,排版有点问题。对比了中间的代码,发现其实是比例,而不是PX,所以,第一个修改代码的地方,应该改为这样。

  1. /** 链接 **/
  2. #links {
  3.     margin: 0 –2px;
  4. /* 下面的px改为百分比 */
  5.     width: 70.4%;
  6. }

这样就OK了,继续缩小,又发现问题,于是我们需要借助一个好东西,那就是@media属性。

  1. /* 搜索类似代码 */
  2. /** 等于或小于900px **/
  3. @media screen and (max-width900px) {
  4.     #primary {
  5.         width: 99.9%;
  6.     }
  7. /* 后面添加下面代码 */
  8. #links {
  9.     margin: 0 –2px;
  10.     width: 99.9%;
  11. }

这样修改后,基本就OK了。继续缩小友链会隐藏起来,如果希望很小的时候也能看到,以此类推的思路去修改样式即可。这里不再继续讲。

教程,主要是给思路,思路有了,以后才能自己自定义的修改。

begin主题修改-页脚改为三栏模式

begin主题设计的非常不错,不过不同人的需求是不一样的,比如我,就想弄成三栏的,会点CSS的人自然不难,不过对于新手可能有点麻烦了。思路还是一样,审核元素,查看样式。

begin-foot-w-1

我们把鼠标放在已经添加了两个小工具的页脚的其中一个工具栏标题的地方,然后右键,选择审核元素,然后可以从样式里面找到代码如图:

begin-foot-w-2

我们可以看到审核元素右边,DIV对应的CSS代码,宽度是百分之五十,我们要改为三,平均分是33.33 ,那么把50改为33.33 即可,或者四栏,也就是25。

begin-foot-w-3

具体样式代码如下:

Code   ViewPrint
  1. .footer-widget .widget {
  2.     background#555;
  3.     floatleft;
  4.     width: 33.33%;
  5.     padding: 0 20px;
  6.     bordernone;
  7.     box-shadow: none;
  8. }

这个样式文件是style.css 样式文件,在后台-外观-编辑 进去就默认打开这个文件。如果审核看到的不是这个样式文件,而外观编辑这里没索引到,那么就上去FTP下载来修改,建议用编辑器,如notepad++ 之类的。

CSS技巧–CSS定义左右排版

如何定义两个DIV左右排版布局呢?只需要简单的CSS代码即可,比如 左边是 class=”left”,右边是 class=”right” 下面举例:

  1. .left {
  2.     float:left;
  3.     width:60%;
  4. }
  5. .right {
  6.     margin-left:60%;
  7.      width:40%;
  8. }

这里的 .left 定义了靠左,宽度百分之六十,.right 定义了从左边百分之六十开始,宽度百分之四十,根据自己需要调整举例,比如 右边的从左边百分之六十五开始,宽度百分之三十五,则

  1. .right {
  2.     margin-left:65%;
  3.     width:35%;
  4. }

自己根据需要去调整啦!

自定义百度分享样式固定侧栏-CSS样式

这个教程是鸟哥那里转载过来的,不过我做了个小小修改,因为我在运用到其他网站的时候出现样式冲突,修改被冲突的DIV就好了,HTML代码如下:

  1. <!– 分享 –>  
  2. <div id=“share-baidu”>    
  3.     <div class=“share-baidu”>    
  4.         <div id=“bdshare” class=“bdshare_t bds_tools get-codes-bdshare”>    
  5.             <a class=“bds_tsina”></a>    
  6.             <a class=“bds_tqq”></a>    
  7.             <a class=“bds_qzone”></a>    
  8.             <a class=“bds_taobao”></a>  
  9.             <a class=“bds_qq”></a>  
  10.             <span class=“bds_more”></span>    
  11.         </div>    
  12.         <div style=“clear:both;”></div>    
  13.     </div>    
  14. </div>    
  15. <script type=“text/javascript” id=“bdshare_js” data=“type=tools&amp;uid=0” ></script>    
  16. <script type=“text/javascript” id=“bdshell_js”></script>    
  17. <script type=“text/javascript”>    
  18. document.getElementById(“bdshell_js”).src = “http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=” + Math.ceil(new Date()/3600000)    
  19. </script>    

把这个代码放到网站页脚,后面的taobao和qq,是我自己改的,大家可以参考这里 自定义!

然后把下面这个样式表加在自己的样式表文件里面

  1. <style type=“text/css”>  /* 如果直接加在html文件里请带上 */  
  2. #share-baidu {    
  3.     display:block;    
  4.     width:35px;    
  5.     margin-left:-546px;/* 修改左右位置 */    
  6.     position:fixed;    
  7.     left:50%;    
  8.     top:420px;/* 修改上下位置 */    
  9.     _margin-left:-546px;/* IE6修改左右位置 */    
  10.     _position:absolute;    
  11.     _margin-top:420px;/* IE6修改上下位置 */    
  12.     _top:expression(eval(document.documentElement.scrollTop));    
  13.     }    
  14. .share-baidu {    
  15.     background:#fff;    
  16.     width:24px;    
  17.     border1px solid #ccc;    
  18.     border-radius:5px 0 0 5px;    
  19.     }    
  20. #bdshare_l {    
  21.     border-radius: 5px;    
  22.     }    
  23. div #bdshare_l_c {    
  24.     border1px solid #ccc;    
  25.     border-radius: 5px;    
  26.     }    
  27. #bdshare h6, #bdshare_s h6,#bdshare p, #bdshare_s p {    
  28.     display:none;    
  29.     }    
  30. </style> /* 如果直接加在html文件里请带上 */  

-baidu 是被我修改过的DIV,因为,如果直接用share有时候会和某些网站主题样式冲突,所以改了DIV名称!

另外,如果加在CSS文件里面,不需要前后两个style标签,如果是直接加载显示文件的话,就需要了,这个,会点代码的人应该都懂…

文章参考:http://zmingcx.com/fixed-baidu-share-button.html

baidu-share

利用CSS3实现页面淡入动画特效[@keyframes]

利用CSS3动画属性“@keyframes ”可实现一些动态特效,具体网上找资料看看,我这里是转载了一个例子,本站亲测有效!

在火狐24版、chrome29版、IE10中测试通过。IE9及以下浏览器不支持此特效。

代码如下:【知更鸟主题的可以直接引用,其他的修改其中 #wrapper 为你的主题ID或类的名称即可。】

  1. @keyframes fade-in {    
  2.     0% {opacity: 0;}/*初始状态 透明度为0*/    
  3.     40% {opacity: 0;}/*过渡状态 透明度为0*/    
  4.     100% {opacity: 1;}/*结束状态 透明度为1*/    
  5. }    
  6. @-webkit-keyframes fade-in {/*针对webkit内核*/    
  7.     0% {opacity: 0;}    
  8.     40% {opacity: 0;}    
  9.     100% {opacity: 1;}    
  10. }    
  11. #wrapper {      
  12.     animation: fade-in;/*动画名称*/    
  13.     animation-duration: 1.5s;/*动画持续时间*/    
  14.     -webkit-animation:fade-in 1.5s;/*针对webkit内核*/    
  15. }    

另外,可针对页面某部分延长显示时间,比如侧边栏,再加上一句:

  1. #sidebar {      
  2.     animation: fade-in;    
  3.     animation-duration: 4s;    
  4.     -webkit-animation:fade-in 1.5s;    
  5. }    

转自:http://zmingcx.com/css3-fade-animation.html

CSS基础学习第二节:CSS的基本概念

上一篇CSS的文章里面让大家大概的了解了下CSS,都可以看出,CSS是一种强化网站前端开发,让网站前端开发更丰富和多样化的语言,那么,我们先来看看CSS 概述:

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件
  • 多个样式定义可层叠为一

CSS的好处:

  • 解决了HTML在不同浏览器里面的排版有差异而引起的排版问题
  • 极大的提高了工作效率
  • 多重样式将层叠为一个

关于层叠次序:

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

【以上内容整理自互联网】

好了,基础的认识也就到这里,我们下一节继续深入讲解!

CSS基础学习第一节:认识DIV+CSS

在前面的HTML的分类我们可以了解了HTML的基本使用方法,关于更多的HTML标签可以去HTML手册查然后灵活利用,这里我们开始来说说CSS了【PS:由于一直忙没时间续写教程不好意思】

CSS的全称是(Cascading Style Sheets),也就是所谓的层叠样式表!前面我们了解了HTML和XHTML就知道,CSS是一种前端开发语言,掌控着整个网站的设计和外观架构,那么,我们来初步认识CSS吧!

下面来看一组代码:

/* CSS Document */
<html>
<head>
<title>CSS</title>
<meta http-equiv=”Content-Type”content=”text/html;charset=gb2312″>
<style>
h2{
font-family:Arial, Helvetica, sans-serif; color:#0000FF;
}
</style>
</head>

<body>
<h2>这是上面定义的样式</h2>
<p>这是普通样式</p>
</body>
</html>

效果如下图:

在这里,我们分析下CSS,CSS的好处在于,你定义了<h2>标签是什么字体,什么颜色,甚至定义了其他属性,你下面用h2标签定义起来的字体就都是那样了,这样就方便了许多,不用重复的去定义一个标签的字体怎么样!

并且,CSS的属性是层叠的,继承的,比如你h2的字体定义蓝色,然后定义<center>的字体的其他属性,那么你<h2>下的<center>下的字体会继承上面的两个属性,当然有重复属性定义会取优先值,这些以后和你们说!

然后,CSS的大概的定义方法如上:

用“<meta http-equiv=”Content-Type”content=”text/html;charset=gb2312″>”定义CSS

<style>下定义CSS的属性

属性里面用:来赋值,用;来分开,就是这么简单啦!

 

[收藏]CSS技巧-CSS隐藏文字的方法

建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义。

在CSS中如何以图代字,找了一下CSS隐藏文字的方法,有以下几条:

1、display: none;
这个大家普遍说法是,搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,不为隐藏的对象保留物理占位空间。GG也搜CSS文件?不过如果用这个方法,<h1>如何设计,也是难题。

2、visibility: hidden;
和display:none; 相对应,为隐藏的对象保留物理占位空间。

3、overflow: hidden;
这是网上用的最多的方法,但是我认为对于隐藏h1标签的“站点名称”文字,不太合适,原因我在最后说。
.texthidden {
display: block;
overflow: hidden;
width: 0;
height: 0;
}

4、positon: absolute;
用绝对定位将其推出可视区,不过虽然可视性不存在,但仍占据物理空间,与隐藏文字的宗旨相背,另外我个人不喜欢用绝对坐标定位magin这个属性,margin在不同浏览器中总是带来不可预料的Bug。
.texthidden {
positon: absolute;
margin-top: -9999px;
margin-left:- 9999px;
}

5、text-indent: -9999px;
把 h1作为一个块来显示(display: block;),指定长宽(和图片一样大小),然后指定h1的背景图片,也就是将我们需要的图片作为h1这个标签的背景。而h1标签中插入的,仍然是作为 字符形式出现的博客标题,然后用text-indent: -9999px;将文字甩到屏幕看不到的地方,9999px应该是足够了,谁的屏幕也没那么大吧。

h1 a {
height: 30px;
width: 165px;
float: left;
text-indent: -9999px;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
display: block;
position: relative;
}

<h1>
<a href=http://www.seo100.net/>百度优化</a>
</h1>

总结一下:

如果不考虑搜索引擎的因素,方案一无疑最佳的,适合内网站点使用,并不是一无是处。

方案二,可以用在特殊的占位场合,了解一下,没坏处。

方案三,网上都说好,如果不是h1标签,还真可以用它。

方案四,嗯,前面说我不喜欢。

方案五,在h1使用上语义明确,符合语义化定义。text- indent就是首行缩进,大家都在中文段落,首行空两格用过它。这里通过负值缩进,使文字超出可视区,而这时h1下的背景就显示出来了,h1中包含 的<a>标签又不影响使用,对于隐藏文字“站点名称”应该是最佳方案了。但对于多段文字的隐藏这个方法就不适合了。

这里还有个问题,就是点击<h1><a>链接时,会产生一个虚线框,对于IE还好,没什么问题,虚线框只是在背影图片大小。但是Firefox就有些麻烦,它把缩进的文字范围也包含进来了,这样不是很美观。

于是需要屏掉点击时产生的虚线框,IE和FF屏虚线框方法不一样。IE采用的遍历方法(HTC,css表达式)有些耗系统资源,正好我们只需要隐藏FF下的虚线框就行了,IE就不管了,说一下Firefox如何去掉链接的虚线框的方法。

a {
outline: none;          /* 去掉Firefox点击时产生的虚线框 */
}