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的属性

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

 

HTML与XHTML的区别-HTML和XHTML的区别

上一次 的文章,我们讲到了XHTML的发展历史和规范的一些要求,这一期,我们来讲讲他们具体有哪些差别!

一,XHTML中的标记名称必须小写

在HTML中,标记名称可以大写和小写,比如:
<BODY>
<p>这是一段话</p>
</BODY>

而在XHTML中,必须都小写,如下:
<body>
<p>这是一段话</p>
</body>

二,在XHTML中属性名称必须小写

和标记名称必须小写一样,属性名称也必须小写,比如下面这个代码,HTML中是正确的:
<IMG SRC=”123.jpg” WIDTH=”100″ HEIGHT=”100″ >

而在XHTML中这是错误的,必须写成:
<img src=”123.jpg” width=”100″ height=”100″ />

三,XHTML必须严格崁套

在下面的一个代码中,HTML是可以的,但是XHTML里面是错误的,比如:
<p><i>你好,SDT技术网</p></i>

在以前的html基础教程中我就提到过,这种写法是错误的,但是早期的HTML是可以这样写,希望跨入XHTML的时候大家不要犯这种错误,应该写成:
<p><i>你好,SDT技术网</i></p>

四,在XHTML中标记必须封闭

在之前,我就说过,大家要养成一个好习惯,写代码要封闭,这里的一段代码,html的确可以运行,但在XHTML里面就是错误了:
<p>这是一段话
<h1>这是一级标题

像上面两个代码,并没有封闭,这在XHTML中是严重错误的!
<p>这是一段话
<h1>这是一级标题 

五,XHTML中标记是空元素也必须封闭

在html中,下列代码是允许的,但是XHTML的严格要求来说,是错误的:
换行<br>
水平线<hr>
图像<img src=”1.jpg”>

而XHTML中应该写成:
换行<br />
水平线<hr />
图像<img src=”1.jpg” />

六,在XHTML中属性值必须用引号引起来

很多人写代码的时候,属性值就直接等于多少,而这在XHTML中是不允许的:
<a href=http://blog.xukhost.com>SDT技术网</a>

而这在XHTML中必须写成:
<a href=”http://blog.xukhost.com”>SDT技术网</a>

七:在XHTML中,属性值必须用完整形式

在html中一般用简写来设定属性值:
<input checked>

但是XHTML中必须写为:
<input checked=”checked” />

XHTML相对HTML来说,有以下几点区别:
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号””括起来
5.把所有<和&特殊符号用编码表示【比如<&lt;代替,>&gt;代替等】
6.给所有属性赋一个值
7.不要在注释内容中使“–”【 比如<!–这里是注释———这里是注释–>这里的中间的–不再有效,中间的–用=代替即可】
8.图片必须有说明文字 【每个图片标签都必须有ALT说明文字】

以上这些就是XHTML和HTML的区别,大家记下来,以后说到的CSS和这个有关