JavaScript作业三 CSS应用


最终效果 {#最终效果}

这里写图片描述

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

CSS:

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

<span class="line">.nav_font16{</span> <span class="line"> font-size:16px;</span> <span class="line"> font-weight:700;</span> <span class="line"> color:#fff</span> <span class="line">}</span>

<span class="line">.orange{</span> <span class="line"> font-weight:700;</span> <span class="line"> color:#f60</span> <span class="line">}</span>

<span class="line">.nav_active{</span> <span class="line"> background:#b12121;</span> <span class="line"> padding:5px 0;</span> <span class="line"> height:30px</span> <span class="line">}</span>

<span class="line">a.white{</span> <span class="line"> color:#fff;</span> <span class="line"> text-decoration:none</span> <span class="line">}</span>

<span class="line">a.white:hover{</span> <span class="line"> color:#ff0;</span> <span class="line"> text-decoration:none</span> <span class="line">}</span>

<span class="line">.shopcart{</span> <span class="line"> background:url(../images/shoppingcart.png) no-repeat center;</span> <span class="line"> width:16px;</span> <span class="line"> height:16px;</span> <span class="line"> display:inline-block</span> <span class="line">}</span>

 

【任务4-2】使用CSS样式美化购物列表页面中的商品展示区。 {#【任务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样式实现购物列表页面的整体布局。 {#【任务5-1】使用CSS样式实现购物列表页面的整体布局。}

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

 

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

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

<span class="line">.table1 tr td{</span> <span class="line"> height:33px;</span> <span class="line"> background:#fafafa;</span> <span class="line"> font-size:14px;</span> <span class="line"> text-indent:10px;</span> <span class="line"> text-align:left</span> <span class="line">}</span>

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

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

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


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