JavaScript_Homework6

最新推荐文章于 2020-05-27 11:23:53 发布

VIP文章 qq_37777236

最新推荐文章于 2020-05-27 11:23:53 发布

阅读量870

点赞数

本文链接：https://blog.csdn.net/qq_37777236/article/details/80247744

版权

JavaScript作业六 HTML5应用

JavaScript作业六

【任务9-1】实现商品详情页面的框架结构

这里写图片描述

html代码

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>漫步时尚广场-商品详情</title>
<link href="css/detail_frame.css" rel="stylesheet" type="text/css">
</head>
<body>
<article id="main"> 
  <!--顶部区域 start-->
  <header class="top_bg">
  </header>
  <!--顶部区域 end--> 
  <!--logo和banner start-->
  <div class="logo">
    <img src="images/logo.jpg" >
    <img src="images/banner.jpg" >
</div>
  <!--logo和banner  end--> 
  <!--菜单导航 start-->
  <nav class="nav_bg"></nav>
     <!--菜单导航 end--> 
     <!--中间部分 start-->
<section>
<div class="main">
      <nav class="menu"></nav>
    <!--中间区 start-->
    <div class="middle">
        <h1 class="pic_title">商品详情</h1>
        <div class="clear"></div>
        <div class="left_pic"></div>
        <article class="tab_content2 none"></article>
        <article class="tab_content3 none"></article>
    <!--品牌活动-->
     <h1 class="pic_title">看了又看</h1>
     <div class="clear"></div>
    <ul class="pic_list4"></ul>
    </div>
    <!--中间区 end--> 
    <!--右侧热门推荐 start-->
    <aside class="right_nav"></aside>
</div>
</section>
 <!--右侧热门推荐 end--> 
  <!--中间部分 end-->
  <footer>
    <div class="clear"></div>
    <div class="foot">
      <div class="foot_title"></div>
      <ul class="foot_list"></ul>
      <div class="clear"></div>
      <div class="foot_line"></div>
     </div>
</footer>
</article>
</body>
</html>

css代码

@charset "utf-8";
body{
   font-size:12px;font-family:microsoft yahei;margin:0;color:#000;}
*{
   padding:0;margin:0}
img{
   border:none;}
.clear{
   clear:both;}
.main{
   margin:10px auto;}
a:hover{
   color:#ce2626;text-decoration:none;}
/*头部*/
.top_bg{
   background:#f7f7f7;height:30px;line-height:30px;}
.logo{
   margin:5px auto;}
.nav_bg{
   background:#ce2626;width:100%;color:#fff;height:30px;}
a.white:hover{
   color:#ff0;text-decoration:none;}
/*左侧导航*/
.menu{
   width:220px;float:left;border:1px solid #e5e4e1;height:350px;
       background-color:#FFC;}
/*中间部分*/
.middle{
   float:left;width:690px;}
.left_pic{
   height:200px; background-color:#6CF; margin-bottom:10px;
       margin-left:10px;}
.pic_title{
   background:#ff9c01;line-height:35px;font-size:14px;
       text-indent:20px;text-align:left;width:680px;float:left;
       color:#fff;margin:0 10px 10px;}
/*右侧公告*/
.right_nav{
   width:280px;height:270px;border:1px solid #eee;float:right;
       background-color:#fCC;}
/*foot*/
.pic_list4{
   height:200px; background-color:#CCC;margin-left:10px;}
.foot_title{
   background:#6a6665;width:100%;height:40px;padding-top:8px;}
.foot_line{
   border-bottom:1px solid #ccc;font-size:12px;margin-top:10px;}
.foot_list{
   width:100%;margin:0 auto;padding-top:20px; height:60px;
       background-color:#ddd;}

【任务9-2】商品详情页面的整体实现

这里写图片描述

商品详情页面css html代码见最后

@charset "utf-8";
body{
   font-size:12px;font-family:microsoft yahei;margin:0;color:#000;}
*{
   padding:0;margin:0;}
li,ul{
   list-style:none;}
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;}
.clear{
   clear:both;}
.floatl{
   float:left;}
.floatr{
   float:right;}
.main{
   margin:10px auto;width:1200px;}
/*头部*/
.top_bg{
   border-bottom:1px solid #ccc;font-size:12px;font-family:"宋体";
    line-height:30px;background:#f7f7f7;height:30px;line-height:30px;}
.top_content{
   width:1200px;margin:0 auto;}
.logo{
   margin:5px auto;width:1200px;}
.nav_bg{
   background:#ce2626;width:100%;color:#fff;}
.nav_content{
   width:1200px;margin:0 auto;height:40px;line-height:40px;}
.menu_nav{
   width:700px;float:left;margin-left:200px;}
.menu_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;}
.shopcart{
   background:url(../images/shoppingcart.png)    no-repeat;width:16px;height:16px;display:inline-block;float:left;
    margin:5px 5px 0 0;}
/*左侧导航*/
.right_arrow{
   background:url(../images/arrow_r.jpg)  no-repeat;

最低0.47元/天解锁文章

qq_37777236

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
JavaScript_Homework6

JavaScript作业六 HTML5应用 JavaScript作业六【任务9-1】实现商品详情页面的框架结构 html代码 <!doctype html><html><head><meta charset="utf-8"><title>漫步时尚广场-商品详情</title><link href="css/detail_frame.css" rel="stylesheet
复制链接

扫一扫