JS+CSS图片新闻效果

最新推荐文章于 2024-04-18 20:05:02 发布
最新推荐文章于 2024-04-18 20:05:02 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 14-WEB基础 文章标签： css float border div function button
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML lang = zh - CN xmlns = " http://www.w3.org/1999/xhtml " >
< HEAD >< TITLE > 图片新闻效果 </ TITLE >
< META http - equiv = Content - Type content = " text/html; charset=gb2312 " >
< META content = " index, follow "  name = robots >
< META content = " index, follow "  name = googlebot >
< STYLE type = text / css > BODY  {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center
}
TABLE  {
    FONT-SIZE: 12px
}
TD  {
    FONT-SIZE: 12px
}
P  {
    FONT-SIZE: 12px
}
SELECT  {
    FONT-SIZE: 12px
}
INPUT  {
    FONT-SIZE: 12px
}
DIV  {
    FONT-SIZE: 12px
}
UL  {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI  {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
FORM  {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
A IMG  {
    BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
FORM  {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
INPUT  {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
SELECT  {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H6  {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
A:link  {
    COLOR: #000; TEXT-DECORATION: none
}
A:visited  {
    COLOR: #000; TEXT-DECORATION: none
}
A:active  {
    COLOR: #000; TEXT-DECORATION: none
}
A:hover  {
    COLOR: #ff0000; TEXT-DECORATION: none
}
.center  {
    FLOAT: none; MARGIN: 0px auto; WIDTH: 1000px
}
.bgwhite  {
    FLOAT: left; WIDTH: 1000px; BACKGROUND-COLOR: #ffffff
}
.width990  {
    FLOAT: none; MARGIN: 0px auto; WIDTH: 990px; HEIGHT: auto
}
.margin_t_5  {
    MARGIN-TOP: 5px
}
.margin_t_30  {
    MARGIN-TOP: 30px
}
.margin_l_5  {
    MARGIN-LEFT: 4px
}
.margin_l_7  {
    MARGIN-LEFT: 7px
}
.padding_l_30  {
    PADDING-LEFT: 30px
}
.padding_l_26  {
    PADDING-LEFT: 26px
}
.padding_l_560  {
    PADDING-LEFT: 530px
}
.ls2  {
    LETTER-SPACING: 2px
}
.lh22  {
    LINE-HEIGHT: 22px
}
.lh24  {
    LINE-HEIGHT: 24px
}
.lh30  {
    LINE-HEIGHT: 30px
}
.f12b  {
    FONT-WEIGHT: bold; FONT-SIZE: 12px
}
.f14  {
    FONT-SIZE: 14px
}
.f14b  {
    FONT-WEIGHT: bold; FONT-SIZE: 14px
}
.white  {
    COLOR: #fff
}
.white A:link  {
    COLOR: #fff
}
.white A:visited  {
    COLOR: #fff
}
.white A:active  {
    COLOR: #fff
}
.orange  {
    COLOR: #ff6600
}
.orange A:link  {
    COLOR: #ff6600
}
.orange A:visited  {
    COLOR: #ff6600
}
.orange A:active  {
    COLOR: #ff6600
}
.orange A:hover  {
    COLOR: #ff6600
}
.head_menu  {
    FILTER: dropshadow(color=#000000,offx=1,offy=1); COLOR: #ffffff
}
.pic_border  {
    BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 1px solid
}
.pic_border_black  {
    BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
.red_link  {
    COLOR: #ff0000
}
.red_link A:link  {
    COLOR: #ff0000
}
.red_link A:visited  {
    COLOR: #ff0000
}
.red_link A:active  {
    COLOR: #ff0000
}
.red_link A:hover  {
    COLOR: #ff6600
}
.blue_link  {
    COLOR: #10326b
}
.blue_link A:link  {
    COLOR: #10326b
}
.blue_link A:visited  {
    COLOR: #10326b
}
.blue_link A:active  {
    COLOR: #10326b
}
.blue_link A:hover  {
    COLOR: #ff6600
}
.blue1_link  {
    COLOR: #999999
}
.blue1_link A:link  {
    COLOR: #3366cc
}
.blue1_link A:visited  {
    COLOR: #3366cc
}
.blue1_link A:active  {
    COLOR: #3366cc
}
.blue1_link A:hover  {
    COLOR: #ff6600
}
.red_link1  {
    COLOR: #d90000
}
.red_link1 A:link  {
    COLOR: #d90000
}
.red_link1 A:visited  {
    COLOR: #d90000
}
.red_link1 A:active  {
    COLOR: #d90000
}
.red_link1 A:hover  {
    COLOR: #ff0000
}
.headborder  {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px
}
.logo  {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_01.gif); FLOAT: left; WIDTH: 226px; HEIGHT: 114px
}
.headright  {
    FLOAT: left; WIDTH: 774px
}
.headright_part1  {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_02.gif); FLOAT: left; OVERFLOW: auto; WIDTH: 774px; HEIGHT: 28px
}
.headright_part1 LI  {
    FLOAT: left; MARGIN: 0px 2px; LINE-HEIGHT: 28px
}
.headright_part1_img  {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_04.gif) no-repeat center 50%; WIDTH: 17px; HEIGHT: 24px
}
.input  {
    BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; MARGIN: 4px 0px; BORDER-LEFT: #999999 1px solid; WIDTH: 55px; BORDER-BOTTOM: #999999 1px solid; HEIGHT: 18px
}
.login  {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/login.gif) no-repeat; FLOAT: left; MARGIN: 5px 0px; WIDTH: 51px; HEIGHT: 17px
}
.reg  {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/reg.gif) no-repeat; FLOAT: left; MARGIN: 5px 0px; WIDTH: 51px; HEIGHT: 17px
}
.headright_part2  {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_05.gif); FLOAT: left; WIDTH: 774px; HEIGHT: 86px
}
.headmemu_left  {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_06.gif) no-repeat; FLOAT: left; MARGIN: 12px 0px 9px; WIDTH: 17px; HEIGHT: 65px
}
.headmemu_center  {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_07.gif) repeat-x; FLOAT: left; MARGIN: 12px 0px 9px; WIDTH: 730px; HEIGHT: 65px
}
.headmemu_right  {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_08.gif) no-repeat; FLOAT: left; MARGIN: 12px 0px 9px; WIDTH: 15px; HEIGHT: 65px
}
.headmenu720a  {
    FLOAT: left; MARGIN: 9px 0px 0px; WIDTH: 730px
}
.headmenu720a LI  {
    DISPLAY: block; FLOAT: left; WIDTH: 91px; LINE-HEIGHT: 30px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center
}
.headmenu720b  {
    FLOAT: left; WIDTH: 730px; LINE-HEIGHT: 21px; TEXT-ALIGN: center
}
.top_pic  {
    BORDER-RIGHT: #87a3d1 1px solid; BORDER-TOP: #87a3d1 1px solid; BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_21.gif) no-repeat center 50%; FLOAT: left; BORDER-LEFT: #87a3d1 1px solid; WIDTH: 335px; BORDER-BOTTOM: #87a3d1 1px solid; HEIGHT: 300px
}
.top_art  {
    BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_20.gif) repeat-x 50% top; FLOAT: left; WIDTH: 395px
}
.top_art_today  {
    PADDING-RIGHT: 7px; PADDING-LEFT: 6px; BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_22.gif) no-repeat center 50%; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 395px; PADDING-TOP: 7px; HEIGHT: 63px
}
.top_art_all  {
    FLOAT: left; OVERFLOW: auto; WIDTH: 395px; HEIGHT: 268px
}
.top_art_all LI  {
    FLOAT: left
}
.top_art_all .left  {
    PADDING-LEFT: 8px; FLOAT: left; WIDTH: 193px; TEXT-ALIGN: left
}
.top_art_all .line  {
    FLOAT: left; WIDTH: 15px; TEXT-ALIGN: left
}
.top_art_all .right  {
    FLOAT: left; WIDTH: 186px; TEXT-ALIGN: left
}
.top_art_bottom  {
    BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 1px; FLOAT: left; PADDING-BOTTOM: 1px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 395px; PADDING-TOP: 1px; BORDER-BOTTOM: #cccccc 1px solid
}
.top_art_bottom UL  {
    HEIGHT: 90px; BACKGROUND-COLOR: #f6f6ed
}
.top_art_bottom LI  {
    FLOAT: left; BACKGROUND-COLOR: #f6f6ed
}
</ STYLE >

< BODY >
  < DIV class = top_pic >
     < STYLE type = text / css >
#f_div  {
    MARGIN: 6px auto 0px; OVERFLOW: hidden; WIDTH: 320px; HEIGHT: 250px
}
#f_imgDiv  {
    OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 250px
}
#f_img  {
    BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
#f_infoDiv  {
    WIDTH: 100%; POSITION: relative; TOP: -22px
}
#f_buttonDiv  {
    OVERFLOW: hidden; WIDTH: 100%; MARGIN-RIGHT: 1px; HEIGHT: 21px; TEXT-ALIGN: left
}
#f_line  {
    BACKGROUND: #fff; FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=50, finishY=100,style=1,opacity=0,finishOpacity=100); FLOAT: right; OVERFLOW: hidden; WIDTH: 40%; HEIGHT: 1px
}
#f_buttonDiv DIV  {
    BACKGROUND: #fff; FLOAT: right; WIDTH: 1px; HEIGHT: 21px
}
#f_buttonDiv .bg  {
    BACKGROUND: #fff; FILTER: Alpha(Opacity=40); FLOAT: right; WIDTH: 21px; HEIGHT: 21px
}
#f_buttonDiv A  {
    DISPLAY: block; FONT-SIZE: 10px; FLOAT: right; OVERFLOW: hidden; WIDTH: 21px; COLOR: #fff; PADDING-TOP: 5px; FONT-FAMILY: Arial, Helvetica, sans-serif; POSITION: absolute; HEIGHT: 21px; TEXT-ALIGN: center; TEXT-DECORATION: none
}
#f_buttonDiv A:link  {
    COLOR: #000
}
#f_buttonDiv A:visited  {
    COLOR: #000
}
#f_buttonDiv A:active  {
    COLOR: #000
}
#f_buttonDiv A:hover  {
    BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:link  {
    BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:visited  {
    BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:active  {
    BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:hover  {
    BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:hover  {
    BACKGROUND: #ff6600
}
#f_text  {
    MARGIN-TOP: 8px; OVERFLOW: hidden; LINE-HEIGHT: 26px; HEIGHT: 26px; TEXT-ALIGN: center
}
#f_text A:link  {
    COLOR: #000; TEXT-DECORATION: none
}
#f_text A:visited  {
    COLOR: #000; TEXT-DECORATION: none
}
#f_text A:active  {
    COLOR: #000; TEXT-DECORATION: none
}
#f_text A:hover  {
    COLOR: #ff6600; TEXT-DECORATION: none
}
</ STYLE >
     < DIV id = f_div >
       <!-- 图片区域 -->
       < DIV id = f_imgDiv ></ DIV >
       < DIV id = f_infoDiv >
         <!-- 数字按钮区域 -->
         < DIV id = f_buttonDiv ></ DIV >
       </ DIV >
     </ DIV >
     <!-- 焦点文字区域 -->
     < DIV class = f12b id = f_text ></ DIV >
     < SCRIPT >
// 可修改区域
var  imgWidth = 320 ;
 var  imgHeight = 250 ;
 var  _timeOut_ = 5000 ;
 var  show_text  =   true ;  // 是否显示焦点文字
var  timeOut = _timeOut_;
 var  timeOut2 = _timeOut_ / 2 ; // onmouseout img后需要切换的时间
var  now = 0 ;               // 第一张图
var  target = " _blank " ;    // 打开方式
var  button_on  = ' on ' ;  // 当前焦点对应按钮的样式名
var  button_off  = '' ; // 非当前焦点对应按钮的样式名
// 不可修改区域
var  imgUrl  =   new  Array();
 var  imgText  =   new  Array();
 var  imgLink  =   new  Array();
 var  imgAlt =   new  Array();
 // var menuList = new Array();//菜单menu
var  ver = 2 ;  // 兼容浏览器版本 默认2 为非ie
var  firstTime = true ;
 var  n  =- 1 ;
imgUrl[ ++ n] = ' http://www.pcgames.com.cn/netgames/xwkx/gnww/images/picpath/pczhh0820002.jpg ' ;
imgText[n] = ' <a href="http://www.pcgames.com.cn/netgames/xwkx/gnww/0708/933872.html" target="_blank" class=linkblack>史上最强 安全套做成游戏周边</a> ' ;
imgLink[n] = ' http://www.pcgames.com.cn/netgames/xwkx/gnww/0708/933872.html ' ;
imgAlt[n] = ' 史上最强 安全套做成游戏周边 ' ;
imgUrl[ ++ n] = ' http://www.pcgames.com.cn/games/tt/images/picpath/ccccccc15224154.jpg ' ;
imgText[n] = ' <a href="http://www.pcgames.com.cn/netgames/netmm/" target="_blank" class=linkblack>前RF代言人范冰冰清凉比基尼释放激情写真</a> ' ;
imgLink[n] = ' http://www.pcgames.com.cn/netgames/netmm/ ' ;
imgAlt[n] = ' 前RF代言人范冰冰清凉比基尼释放激情写真 ' ;
imgUrl[ ++ n] = ' http://www.pcgames.com.cn/games/tt/images/picpath/PCgames070817vanilogobig.jpg ' ;
imgText[n] = ' <a href="http://fight.pcgames.com.cn/mm/" target="_blank" class=linkblack>PlayGirl魔兽血精灵MM左小娜性感内衣秀</a> ' ;
imgLink[n] = ' http://fight.pcgames.com.cn/mm/ ' ;
imgAlt[n] = ' PlayGirl魔兽血精灵MM左小娜性感内衣秀 ' ;
imgUrl[ ++ n] = ' http://www.pcgames.com.cn/cartoon/dl/wall/images/picpath/pcgames0818CP2_320.jpg ' ;
imgText[n] = ' <a href="http://www.pcgames.com.cn/cartoon/bbs/c72" target="_blank" class=linkblack>C72预热之四：[和]激萌萝莉壁纸大赏</a> ' ;
imgLink[n] = ' http://www.pcgames.com.cn/cartoon/bbs/c72 ' ;
imgAlt[n] = ' C72预热之四：[和]激萌萝莉壁纸大赏 ' ;
imgUrl[ ++ n] = ' http://www.pcgames.com.cn/games/tt/images/picpath/pcgame0820jiaodian01.jpg ' ;
imgText[n] = ' <a href="http://www.pcgames.com.cn/pcgames/pczq/xj4/index.html" target="_blank" class=linkblack>中日决战!云天河大战克劳德爆笑同人漫画(1)</a> ' ;
imgLink[n] = ' http://www.pcgames.com.cn/pcgames/pczq/xj4/index.html ' ;
imgAlt[n] = ' 中日决战!云天河大战克劳德爆笑同人漫画(1) ' ;
imgUrl[ ++ n] = ' http://www.pcgames.com.cn/games/tt/images/picpath/pcgames0818crazytaxi320.jpg ' ;
imgText[n] = ' <a href="http://www.pcgames.com.cn/tvgames" target="_blank" class=linkblack>极速!《疯狂出租车 车费战争》游戏下载</a> ' ;
imgLink[n] = ' http://www.pcgames.com.cn/tvgames ' ;
imgAlt[n] = ' 极速!《疯狂出租车 车费战争》游戏下载 ' ;
 var  count = 0 ;
 for  (i = 0 ;i < imgUrl.length;i ++ )  {
if( (imgUrl[i]!="") && (imgText[i]!="")&& (imgLink[i]!="")&& (imgAlt[i]!="")) {
count++;
} else {
break;
}
}
function  p$(string) {
document.write(string);
}
function  $(id) {
return document.getElementById(id);
}
// 固定图片size
p$( " <style> #f_img { width: " + imgWidth + " px;height: " + imgHeight + " px;</style> " );
 function  change() {
if (ver==1){
with($('f_img').filters[0]){
Transition=1;
apply();
play(); 
}
}
if (firstTime){ firstTime=false;timeOut=_timeOut_/1000;}
else{     
$('f_img').src=imgUrl[now];
$('f_img').alt=imgAlt[now];
$('f_imgLink').href=imgLink[now];
if (show_text) $('f_text').innerHTML=imgText[now];        
for (var i=0;i<count;i++) {
$('b'+i).className="button";
//$('f_menu'+i).className="";
}
$('b'+now).className="on";    
//$('f_menu'+now).className="on";     
now=(now>=imgUrl.length-1)?0:now+1;
timeOut=_timeOut_;         
}
theTimer=setTimeout("change()", timeOut);
}
function  b_change(num) {
window.clearInterval(theTimer); 
now=num;
firstTime=false;
change();
}
// draw 渐变line （即css:f_line)
function  draw_line() {
var div = document.createElement("div");    
div.id = 'f_line';
$('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0));            
}
// 表现层 start        
// 图片
var  a  =  document.createElement( " a " );        
a.id = " f_imgLink " ;
a.target = target;
a.href = imgLink[now];    
$( ' f_imgDiv ' ).appendChild(a);
 var  img  =  document.createElement( " img " );    
img.id = " f_img " ;
img.width = imgWidth;
img.height = imgHeight;
img.src = imgUrl[now];
img.alt = imgAlt[now];
a.appendChild(img);
 // 数字按钮
for  ( var  i = count - 1 ;i >= 0 ;i -- ) {
var div_bg = document.createElement("div");        
div_bg.id = 'div_bg'+i;
div_bg.className='bg';
$('f_buttonDiv').appendChild(div_bg);    
var a = document.createElement("a");        
a.id = 'b'+i;
a.className = (i==now+1)?"button_on":"button_off";        
a.title=imgAlt[i];
a.innerHTML=i+1;
a.href='javascript:b_change('+i+')';        
$('div_bg'+i).appendChild(a);    
var div= document.createElement("div");
$('f_buttonDiv').appendChild(div);            
}         
 if  (show_text) $( ' f_text ' ).innerHTML  =  imgText[now];
 // 表现层 end
$( ' f_img ' ).onmouseover = function () {window.clearInterval(theTimer);}
$( ' f_img ' ).onmouseout = function () {theTimer=setTimeout("change()", timeOut2);}
try {  //滤镜版本
new ActiveXObject("DXImageTransform.Microsoft.Fade");
$('f_img').filters[0].play();      
ver=1;
draw_line(); 
}
catch  (e) {ver=2;}
var  theTimer  =  setTimeout( " change() " , _timeOut_ / 1000 );
 </ SCRIPT >
   </ DIV >
</ BODY ></ HTML >
 
flashlm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片幻灯展示html（flash）实现
05-25
图片幻灯展示html（flash）实现
图片集新闻HTML源码
01-08
收集更改过的新闻图片集新闻HTML源码，可左右滑屏翻页！
163图片新闻切换效果
03-30
163图片新闻切换效果! 值得下载看看!资源免费,大家分享!!
JS多种新闻图片切换效果
12-13
JS多种新闻图片切换效果源码，已经封装好JS，只需简单调用即可。
js做的新闻图片切换效果
03-17
NULL 博文链接：https://yuxuguang.iteye.com/blog/565725
初学者使用html制作的一个新闻页面
热门推荐
qq_51191109的博客
02-21 1万+
目录 一些会运用到的知识： ​新闻图示 代码如下： Css：中文翻译是层叠样式表（html的化妆师） 1.Css的语法 2.内部样式表： 3.选择器 4.Css的属性 新闻图示 代码如图所示 这是一个自己学习看视频后运用的学习笔记 一些会运用到的知识： 1.图片插入标签： <img src=”图片地址（图片路径）”width=“图片的宽度”height=“图片的高度”> 注意点：src必须要有，路径必须...
HTML5基础学习（3）：新闻列表、图片的使用
游王子的博客
09-15 3071
一、新闻列表 在网页中模拟百度新闻列表，如下图所示： （1）新建新闻列表目录： （2）<title>标签中编写的是网页的名字： （3）科技后面的灰色字母暂时还无法实现，先用图片代替： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度新闻列表</title> </head> <body&g..
简单说一个CSS综合案例
hfdxmz_3的博客
05-27 612
<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 ..
基于jQuery焦点图片新闻代码（JS+CSS）
GoodShot的专栏
11-22 1086
基于jQuery技术的实用用代码。 电信下载点 网通下载点
淘宝店图片新闻(Css+js)代码
10-08
朋友让帮忙整理一下淘宝店图片新闻展示的效果代码，所以整理了一份。此系统是利用CSS+Javascript来实现的图片展示系统。效果展示请查看：http://shop34929604.taobao.com/
ASP.NET新闻系统发布教程(3-2)
06-11
ASP.NET 系统 新闻发布 教程;此压缩包为部分视频.
163图片新闻切换（html+js）
09-05
163图片新闻切换（html+js）163图片新闻切换（html+js）
Javascript+CSS实现Flash动态新闻效果（pp原创）
10-30
Javascript+CSS实现Flash动态新闻效果（pp原创）
100多个JQuery效果示例（实例）div+css+javascrpit
04-09
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
使用div+css开发个人网站毕业设计.doc
05-26
使用div+css开发个人网站毕业设计 目 录 前 言 1 第一章 网站开发背景 2 第一节 web概述 2 一、认识WEB 2 二、认识WEB2.0标准 2 第二章 DIV+CSS详解 5 第一节 DIV+CSS简介 5 第二节 级联样式表简介 6 第三节 DIV+CSS...
CSS显示模式
小何代码咖啡馆
04-18 965
元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。当网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页。
CSS简介与CSS选择器
小何代码咖啡馆
04-17 974
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
css中设置元素大小的属性block-size
最新发布
qwguo
04-18 486
的逻辑组合，允许你同时设置元素的最小和最大高度。这些属性旨在让布局不再依赖于传统的物理方向（如上下左右），而是基于逻辑方向（如开始、结束、之前、之后）。这有助于在水平和垂直方向都能更好地控制布局，特别是在多语言环境中，其中文本可能从右到左或从下到上流动。因此，在使用此属性时，建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。属性一起使用，以控制元素的盒模型（包括内容、内边距和边框）如何计算其总大小。是 CSS 中的一个属性，它用于设置元素的块级尺寸（即元素的高度）。
html+css+js制作原神官网
04-06
最后，我们需要将HTML文件和CSS文件放在同一个文件夹中，并将图片等资源文件也放在该文件夹中，以确保网站可以正常显示。 以上就是制作原神官网的基本步骤，当然，具体的细节和效果可以根据实际需要进行调整和修改...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值