侧边栏

aquamarine">

最新消息

• 巴神自曝回国米？

  ！

  打包回家悍将迎接：

  欢迎

• 因扎吉亲口宣布AC米兰1人必留队钦点红黑军2珍宝
• 卡佩罗：

  AC米兰国米路还很长3年不犯错能缓过来

• 梅西制霸之路添新版图这次他想当欧洲联赛射手王
• 皇马公布战AC米兰22人名单这场球皇马赚足400万
• 国米签阿森纳锋霸定了！

  本人点头温格开口放行

• 皇马更衣室回应穆里尼奥：

  希望欧冠能遇到你！

lightgreen">

积分榜

主题部分

url（'1.jpg.png'）">

url（'2.fw.png'）">

url（'3.fw.png'）">

url（'4.fw.png'）">

lightgreen">

英超赛事

• 拿命死磕这就是英超！

  皇马巴萨来英超会如何

• 英名哨:

  小法那是绝对点球切尔西为假摔还债

• 切尔西一尊真龙变强无极限梅西能做的他也要做
• 切尔西又见半年前鬼影穆帅最强大招去哪了
• 切尔西造新版梅西+伊涅斯塔一狂神锁定英超第1
• 00000！

  切尔西一把灵刀自杀穆帅最爱神牌变废牌

• 穆帅暴怒:

  丑闻！

  英超在反切尔西裁判该羞愧

• 英超切尔西技术统计:

  空有传控优势射正仅有1次

lightgreen">

德甲赛事

• 队报评百大球星：

  诺伊尔力压C罗梅西居榜首

• 国家队队友让香川变过去式德甲总进球超前辈传奇
• 穆勒：

  瓜迪奥拉是最职业的教练他让拜仁变更强

• 动人圣诞！

  德国小球队震撼一幕3万个温暖灵魂

• 海因克斯：

  我推荐罗伊斯加盟皇马拜仁那位置人多

• 伤病错过世界杯丑闻--2014成罗伊斯最惨的一年
• 多特官方宣布签冬季首援东欧飞翼接班罗伊斯？

• 德国名模示爱罗伊斯:

  你去拜仁我就是你的（图）

• 德甲-狼堡2-1逆转稳居次席多特1-2负垫底队
• 还记得他吗？

  前拜仁后卫将出狱纵火烧自己房子

底部和细节调整

2、CSS代码

*{

margin:

0px;

padding:

0px;

font-family:

"微软雅黑";

}

#head{

background-color:

deepskyblue;

height:

50px;

width:

100%;

box-shadow:

cornflowerblue5px5px5px;

position:

fixed;

float:

top;

z-index:

100;

}

#head#head_contend{

margin-left:

15%;

background-color:

chartreuse;

height:

50px;

width:

75%;

}

#head_contend#first{

text-align:

left;

background:

powderblue;

width:

200px;

height:

50px;

float:

left;

}

#head_contend#admin{

text-align:

center;

background:

lightblue;

height:

50px;

width:

50px;

float:

right;

}

#head_contend#index{

text-align:

center;

background:

darkseagreen;

height:

50px;

width:

50px;

float:

right;

}

#body{

margin-left:

15%;

padding-top:

10px;

width:

75%;

float:

top;

z-index:

0;

}

#logo{

height:

50px;

margin-top:

50px;

padding:

0;

}

#rad{

margin:

5px;

height:

50px;

width:

100%;

border-radius:

10px;

box-shadow:

darkcyan5px5px10px;

}

#content{

border-radius:

10px;

width:

30%;

box-shadow:

darkcyan5px5px10px;

float:

left;

padding:

15px;

}

#content#content_top{

border:

5pxdimgreysolid;

border-radius:

10px;

width:

100%;

box-shadow:

darkcyan5px5px10px;

position:

relative;

float:

left;

margin-right:

5px;

background:

greenyellow;

;

}

#content#content_center{

border:

5pxdimgreysolid;

border-radius:

10px;

width:

100%;

box-shadow:

darkcyan5px5px10px;

position:

relative;

float:

left;

margin-right:

5px;

background:

turquoise;

}

#content#content_bottom{

border:

5pxdimgreysolid;

border-radius:

10px;

width:

100%;

box-shadow:

darkcyan5px5px10px;

position:

relative;

float:

left;

margin-right:

5px;

background:

palegreen;

}

#content1{

border:

5pxdimgreysolid;

border-radius:

10px;

width:

65%;

height:

250px;

box-shadow:

darkcyan5px5px10px;

float:

left;

background:

powderblue;

}

#content1#slid{

height:

100%;

width:

100%;

margin:

4px;

padding:

2px;

}

#slid#img{

border:

solid2pxrosybrown;

height:

190px;

width:

98%;

box-shadow:

lightblue2px2px2px;

padding-top:

2px;

}

#slid#mcimg{

border:

2pxdarkcyansolid;

height:

40px;

margin-top:

2px;

width:

58%;

padding-left:

40%;

padding-top:

2px;

overflow:

hidden;

}

#boot{

border:

5pxdimgreysolid;

border-radius:

10px;

width:

65%;

height:

500px;

box-shadow:

darkcyan5px5px10px;

float:

left;

}

#boot.c1{

border:

solid2pxgreenyellow;

border-radius:

5px;

width:

98%;

height:

200px;

box-shadow:

darkcyan5px5px10px;

float:

top;

}

#root{

border:

5pxdimgreysolid;

border-radius:

10px;

width:

100%;

height:

50px;

box-shadow:

darkcyan5px5px10px;

float:

left;

background-color:

deepskyblue;

}

#p1{

background:

cornflowerblue;

width:

35px;

height:

35px;

float:

left;

box-shadow:

darkcyan5px5px10px;

}

#p2{

background:

orange;

width:

35px;

height:

35px;

float:

left;

box-shadow:

darkcyan5px5px10px;

}

#p3{

background:

chartreuse;

width:

35px;

height:

35px;

float:

left;

box-shadow:

darkcyan5px5px10px;

}

#p4{

background:

orchid;

width:

35px;

height:

35px;

float:

left;box-shadow:

darkcyan5px5px10px;

}

.b1{

width:

47%;

height:

28%;

float:

left;

box-shadow:

darkcyan5px5px10px;

position:

absolute;

}

.b2{

background:

chartreuse;

width:

47%;

height:

28%;

float:

left;

font-size:

40px;

box-shadow:

darkcyan5px5px10px;

position:

absolute;

display:

none;

}

.b3{

background:

orange;

width:

47%;

height:

28%;

float:

left;

box-shadow:

darkcyan5px5px10px;

position:

absolute;

display:

none;

}

.b4{

background:

cornflowerblue;

width:

47%;

height:

28%;

float:

left;

box-shadow:

darkcyan5px5px10px;

position:

absolute;

display:

none;

}

h1{

color:

chocolate;

font-family:

sans-serif;

}

ul

{

list-style-type:

none;

margin:

0;

padding:

0;

overflow:

hidden;

}

.radli

{

float:

left;

}

.rada:

link,a:

visited

{

display:

block;

width:

150px;

height:

32px;

font-weight:

bold;

color:

#FFFFFF;

background-color:

lightblue;

text-align:

center;

padding:

4px;

text-decoration:

none;

text-transform:

uppercase;

padding-top:

10px;

}

.rada:

hover,a:

active

{

background-color:

aqua;

}

.blank{

border:

5pxdimgreysolid;

border-radius:

10px;

width:

98%;

box-shadow:

darkcyan5px5px10px;

float:

top;

margin-bottom:

5px;

}

.c1a{

color:

dodgerblue;

}

#logoh1{

color:

lime;

}

#logoh2{

color:

dodgerblue;

}

#content_topa{

color:

dodgerblue;

}

3、JS代码

/**

*Createdbyxxon2014/12/28.

*/

$（document）.ready（function（）{

$（"#p1"）.mouseenter（function（）{

varp1=$（"#p1"）;

p1.css（{background:

'#00ced1',boxshadow:

'red5px5px5px',fontsize:

'25px'}）;

p1.css（{border:

'solid2pxlavender'}）

$（".b1"）.css（{display:

'inherit'}）

$（".b2"）.css（{display:

'none'}）

$（".b3"）.css（{display:

'none'}）

$（".b4"）.css（{display:

'none'}）

}）

$（"#p1"）.mouseleave（function（）{varp1=$（"#p1"）;

varp1=$（"#p1"）;

p1.css（{background:

'cornflowerblue'}）;

}）

$（"#p2"）.mouseenter（function（）{

varp2=$（"#p2"）;

p2.css（{background:

'#00ced1'}）;

$（".b2"）.css（{display:

'inherit'}）

$（".b1"）.css（{display:

'none'}）

$（".b3"）.css（{display:

'none'}）

$（".b4"）.css（{display:

'none'}）

}）

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

静态 设计 页面 制作 课程设计

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。