JavaScript作业三 CSS应用


最终效果

这里写图片描述

【任务4-1】使用CSS样式美化购物列表页面中的菜单导航栏。

CSS:

/*头部*/
.top_line{
border-bottom:1px solid #ccc;
font-size:12px;
font-family:"宋体";
line-height:30px
}

.nav_font16{
font-size:16px;
font-weight:700;
color:#fff
}

.orange{
font-weight:700;
color:#f60
}

.nav_active{
background:#b12121;
padding:5px 0;
height:30px
}

a.white{
color:#fff;
text-decoration:none
}

a.white:hover{
color:#ff0;
text-decoration:none
}

.shopcart{
background:url(../images/shoppingcart.png) no-repeat center;
width:16px;
height:16px;
display:inline-block
}

 

【任务4-2】使用CSS样式美化购物列表页面中的商品展示区。

body{
font-size:12px;
font-family:microsoft yahei;
margin:0;color:#000
}

a{
color:#000;
text-decoration:none
}

a:hover{
color:#ce2626;
text-decoration:none
}

img{
border:none
}

.font14{
font-size:14px;
font-weight:700
}
.font16{
font-size:16px;
font-weight:700
}
.padding-top{
padding-top:8px
}

 

【任务5-1】使用CSS样式实现购物列表页面的整体布局。

body{
font-size:12px;
font-family:microsoft yahei;
margin:0;color:#000
}
a{
color:#000;
text-decoration:none
}
a:hover{
color:#ce2626;
text-decoration:none
}
img{
border:none
}
.font14{
font-size:14px;
font-weight:700
}
.font16{
font-size:16px;
font-weight:700
}
.padding-top{
padding-top:8px
}
/*头部*/
.top_line{
border-bottom:1px solid #ccc;
font-size:12px;
font-family:"宋体";
line-height:30px
}
.nav_font16{
font-size:16px;
font-weight:700;
color:#fff
}
.orange{
font-weight:700;
color:#f60
}
.nav_active{
background:#b12121;
padding:5px 0;
height:30px
}
a.white{
color:#fff;
text-decoration:none
}
a.white:hover{
color:#ff0;
text-decoration:none
}
.shopcart{
background:url(../images/shoppingcart.png) no-repeat center;
width:16px;
height:16px;
display:inline-block
}
/*左侧导航*/
.table1 tr th{
height:33px;
background:#e5e4e1;
font-size:15px;
text-indent:10px;
text-align:left
}
.table1 tr td{
height:33px;
background:#fafafa;
font-size:14px;
text-indent:10px;
text-align:left
}
.red_dot{
font-size:25px;
margin-right:10px;
background:url(../images/red_dot.gif) no-repeat;
width:8px;height:8px;
display:inline-block
}
/*右侧公告*/
.notice_title{
font-size:16px;
text-indent:20px;
text-align:left
}
.gray_dot{
color:#ccc;
font-size:25px;
margin-right:10px;
background:url(../images/gray_dot.gif) no-repeat;
width:8px;
height:8px;
display:inline-block
}
.notice_text{display:block;
width:230px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
text-align:left
}
/*foot*/
.foot_bg{
line-height:20px;
padding-top:10px;
font-size:12px
}
.padding-bottom{
padding-bottom:10px
}
.foot_line{
border-bottom:1px solid #ccc;
font-size:12px;
margin-top:10px
}

 

【任务5-2】使用CSS样式实现购物列表页面的左侧导航栏部分。

/*左侧导航*/
.table1 tr th{
height:33px;
background:#e5e4e1;
font-size:15px;
text-indent:10px;
text-align:left
}

.table1 tr td{
height:33px;
background:#fafafa;
font-size:14px;
text-indent:10px;
text-align:left
}

.red_dot{
font-size:25px;
margin-right:10px;
background:url(../images/red_dot.gif) no-repeat;
width:8px;height:8px;
display:inline-block
}

声明:May丶乘剑的部落小阁|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - JavaScript作业三 CSS应用


一个偶尔努力、偶尔懈怠的"搬砖"人