JavaScript_Homework3
JavaScript作业三 CSS应用
JavaScript作业三
【任务4-1】使用CSS样式美化购物列表页面中的菜单导航栏
<html>
<head>
<title>title>
<style type="text/css">
*{padding:0;margin:0}
li,ul{list-style:none}
.nav_bg{background:#ce2626;width:100%;color:#fff}
.nav_content{width:1200px;margin:0 auto;height:40px;line-height:40px}
.nav{width:700px;float:left;margin-left:200px}
.nav li{font-size:16px;font-weight:700;color:#fff;width:80px;float:left;text-align:center;margin-right:15px}
.orange{font-weight:700;color:#f60}
.nav_active{background:#b12121}
a.white{color:#fff;text-decoration:none}
a.white:hover{color:#ff0;text-decoration:none}
style>
head>
<body>
<div class="nav_bg">
<div class="nav_content">
<ul class="nav">
<li><a href="#" class="white">首页a>li>
<li><a href="#" class="white">最新上架a>li>
<li>品牌活动li>
<li>原厂直供li>
<li>团购li>
<li>限时抢购li>
<li>促销打折li>
ul>
div>
div>
body>
html>【任务4-2】使用CSS样式美化购物列表页面中的商品展示区
<html>
<head>
<title>title>
<style type="text/css">
body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000}
*{padding:0;margin:0}
li,ul{list-style:none}
.middle{float:left;width:690px}
.pic_list{float:left}
.pic_list dl{float:left;width:152px;margin:0 10px 10px}
.price{font-size:15px;font-weight:700;color:red;float:left}
.price2{font-size:12px;font-weight:700;color:red;text-align:center}
.font12{font-size:12px;color:#ccc;float:right}
.pic_list dl img{padding:5px;border:1px solid #ccc;margin-bottom:10px}
.pic_list dl dd{float:left}
.pic_title{background:#ff9c01;line-height:40px;font-size:16px;text-indent:20px;text-align:left;width:680px;float:left;color:#fff;margin:0 10px 10px}
.pic_list2 li{float:left}
.pic_list2{margin:0 6px 0 12px}
.pic_list2 li{width:160px;float:left;margin:5px 4px}
style>
head>
<body>
<div class="middle">
<h1 class="pic_title">最新上架h1>
<div class="pic_list">
<dl>
<div><a href="">
<img src="images/shopshow/yifu1.jpg">a>div>
<dt><span class="price">¥198.00元span>
<span class="font12">324人购买span>dt>
<dd>冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣dd>
dl>
<dl>
<div><img src="images/shopshow/yifu2.jpg">div>
<dt><span class="price">¥69.00元span>
<span class="font12">534人购买span>dt>
<dd>夏新款韩版 透气舒适简约半截袖T恤衫dd>
dl>
<dl>
<div><img src="images/shopshow/yifu3.jpg">div>
<dt><span class="price">¥160.00元span>
<span class="font12">643人购买span>dt>
<dd>韩版甜美气质亮片热气球字母中长款圆领短袖T恤dd>
dl>
<dl>
<div><img src="images/shopshow/yifu4.jpg">div>
<dt><span class="price">¥210.00元span>
<span class="font12">678人购买span>dt>
<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫dd>
dl>
<dl>
<div><img src="images/shopshow/yifu5.jpg">div>
<dt><span class="price">¥70.00元span>
<span class="font12">735人购买span>dt>
<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫dd>
dl>
<dl>
<div><img src="images/shopshow/yifu6.jpg">div>
<dt><span class="price">¥146.00元span>
<span class="font12">634人购买span>dt>
<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫dd>
dl>
<dl>
<div><img src="images/shopshow/yifu7.jpg">div>
<dt><span class="price">¥69.00元span>
<span class="font12">734人购买span>dt>
<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫dd>
dl>
<dl>
<div><img src="images/shopshow/yifu8.jpg">div>
<dt><span class="price">¥239.00元span>
<span class="font12">534人购买span>dt>
<dd>2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫dd>
dl>
div>
<h1 class="pic_title">最新动态h1>
<div class="pic_list">
<dl>
<div><img src="images/shopshow/dress5.jpg">div>
<dd>夏新款韩版 透气舒适简约半截袖T恤衫dd>
dl>
<dl>
<div><img src="images/shopshow/dress6.jpg">div>
<dd>夏新款韩版 透气舒适简约半截袖T恤衫dd>
dl>
<dl>
<div><img src="images/shopshow/dress7.jpg">div>
<dd>夏新款韩版 透气舒适简约半截袖T恤衫dd>
dl>
<dl>
<div><img src="images/shopshow/dress8.jpg">div>
<dd>夏新款韩版 透气舒适简约半截袖T恤衫dd>
dl>
div>
div>
body>
html>【任务5-1】使用CSS样式实现购物列表页面的整体布局
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="css/show_frame.css">
head>
<body>
<div class="top_bg">
<div class="top_content">div>
div>
<div class="clear">div>
<div class="logo">
<a href="../index.html"><img src="images/logo.jpg">a>
<img src="images/banner.jpg" class="floatr">
div>
<div class="nav_bg">div>
<div class="main">
<ul class="menu">ul>
<div class="middle">
<h1 class="pic_title">最新上架h1>
<div class="pic_list">div>
<h1 class="pic_title">品牌活动h1>
<div class="pic_list2">div>
div>
<div class="right_nav">
<h1 class="notice_title">热门推荐h1>
<ul class="pic_list3">ul>
div>
div>
<div class="clear">div>
<div class="footer">
<div class="foot_title">div>
<ul class="foot_list">ul>
<div class="clear">div>
<div class="foot_line">div>
div>
body>
html>【任务5-2】使用CSS样式实现购物列表页面的左侧导航栏部分
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>漫步时代广场-购物列表-底部模块title>
<style type="text/css">
body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000}
*{padding:0;margin:0}
li,ul{list-style:none}
img{border:none}
.font16{font-size:16px;font-weight:700}
.clear{clear:both}
.floatl{float:left}
.footer{width:100%;background:#efefef;height:310px;margin-top:15px}
.foot_title{background:#6a6665;width:100%;height:40px;padding-top:8px}
.foot_pic{margin:0 auto;width:1200px}
.padding-bottom{padding-bottom:10px}
.padding-top{padding-top:10px}
.foot_line{border-bottom:1px solid #ccc;font-size:12px;margin-top:10px}
.line1{background:url(../images/line1.jpg) no-repeat;width:20px;height:100px;display:inline-block}
.red1{background:url(../images/red1.jpg) no-repeat;width:35px;height:31px;display:block}
.red2{background:url(../images/red2.jpg) no-repeat;width:35px;height:31px;display:block}
.foot_list>li{float:left;width:170px}
.foot_list{width:1100px;margin:0 auto;padding-top:20px}
.foot_list li ul{padding-left:10px}
style>
head>
<body>
<Br/>g
<table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#6a6665" height="35" class="foot_bg">
<tr>
<td class="padding-top">
<table width="1200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" align="center"><img src="images/gray1.jpg">td>
<td width="20%" align="center"><img src="images/gary2.jpg">td>
<td width="20%" align="center"><img src="images/gray3.jpg">td>
<td width="20%" align="center"><img src="images/gray4.jpg">td>
<td width="20%" align="center"><img src="images/gray5.jpg">td>
tr>
table>
td>
tr>
<tr>
<td bgcolor="#efefef" class="foot_line padding-top">
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img src="images/red1.jpg"><br>
<img src="images/line1.jpg"/>td>
<td width="15%" valign="top">
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td class="font16 padding-bottom">新手指导td>tr>
<tr><td>用户注册td>tr>
<tr><td>电话下单td>tr>
<tr><td>购物流程td>tr>
<tr><td>购物保障td>tr>
<tr><td>服务协议td>tr>
table>
td>
<td align="center" valign="top"><img src="images/red2.jpg"><br>
<img src="images/line1.jpg"/>td>
<td width="15%" valign="top">
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td class="font16 padding-bottom">支付方式td>tr>
<tr><td>货到付款td>tr>
<tr><td>商城卡支付td>tr>
<tr><td>支付宝 网银支付td>tr>
<tr><td>优惠卷td>tr>
table>
<td align="center" valign="top"><img src="images/red3.jpg"><br>
<img src="images/line1.jpg"/>td>
<td width="15%" valign="top">
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td class="font16 padding-bottom">配送方式td>tr>
<tr><td>闪电发货td>tr>
<tr><td>满百包邮td>tr>
<tr><td>配送范围及时间td>tr>
<tr><td>验收及签收td>tr>
<tr><td>服务协议td>tr>
table>
td>
<td align="center" valign="top"><img src="images/red4.jpg"><br>
<img src="images/line1.jpg"/>td>
<td width="15%" valign="top">
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td class="font16 padding-bottom">售后服务td>tr>
<tr><td>退换货协议td>tr>
<tr><td>关于发票td>tr>
<tr><td>退换货流程td>tr>
<tr><td>退换货运费td>tr>
table>
td>
<td align="center" valign="top"><img src="images/red5.jpg"><br>
<img src="images/line1.jpg"/>td>
<td width="15%" valign="top">
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td class="font16 padding-bottom">关于账号td>tr>
<tr><td>修改个人信息td>tr>
<tr><td>修改密码td>tr>
<tr><td>支付宝 网银支付td>tr>
<tr><td>找回密码td>tr>
table>
td>
<td align="center" valign="top"><img src="images/red6.jpg"><br>
<img src="images/line1.jpg"/>td>
<td width="15%" valign="top">
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td class="font16 padding-bottom">优惠活动td>tr>
<tr><td>竞拍须知td>tr>
<tr><td>抢购须知td>tr>
table>
td>
tr>table>
td>
tr>
<tr>
<td bgcolor="#efefef" align="center" class="padding-top">
Copyright 2015-2020 Q- Walking
Fashion E&S漫步时尚广场（QST教育）版权所有<br/> 湖南娄底 湖南人文科技学院
阳光五栋 咨询热线：187-1185-7095<br/>
<img src="images/foot_pic.jpg">td>
tr>
tr>
td>
table>
body>
html>