天天生鲜商品详情页HTML+css
生活随笔
收集整理的這篇文章主要介紹了
天天生鲜商品详情页HTML+css
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>天天生鮮-商品詳情頁</title><link rel="stylesheet" href="./css/main.css"><link rel="stylesheet" href="./css/reset.css"><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> </head> <body><!-- 頭部信息 --><div class="header_con"><div class="header"><div class="welcome">歡迎來到天天生鮮!</div><div class="user_login"><a href="">登錄</a><span>|</span><a href="">注冊</a><span>|</span><a href="">我的購物車</a><span>|</span><a href="">我的訂單</a></div></div></div><div class="search_bar clearfix"><a href="#" class="logo fl"><img src="./images/logo.png"></a><div class="search_con fl"><input type="text" class="input_text fl" placeholder="搜索商品"><input type="button" class="input_btn fr" value="搜索"></div><div class="guest_card fr"><a href="#" class="card_name fl">我的購物車</a><div class="goods_count fl">1</div></div></div><!-- 商品信息欄 --><div class="navbar_con"><div class="navbar clearfix"><div class="subnav_con fl"><h1>全部商品分類 <i></i></h1></div><ul class="navlist fl"><li><a href="">首頁</a></li><li><a href="">手機生鮮</a></li><li><a href="">抽獎</a></li></ul></div></div><div class="submena clearfix"><a href=" ">全部分類</a><span>></span><a href=" ">新鮮水果</a><span>></span><a href=" ">商品詳情</a></div><div class="center_con clearfix"><div class="main_menu fl"><img src="./images/goods_detail.jpg"></div><div class="goods_detail_list fr"><h3>大興大棚草莓</h3><p>草莓漿果柔軟多汁，味美爽口，適合速凍保險貯藏，草莓速凍后，可以保持原有的色、香、味，既便于貯藏，又便于外銷。</p><div class="prize_bar"><div class="show_prize fl">￥<em>16.80</em></div><div class="show_unit fl">單位：500g</div></div><div class="goods_num clearfix"><div class="num_name fl">數量：</div><div class="num_add fl"><input type="text" class="num_show fl" value="1"><a href="javascript:;" class="add fr">+</a><a href="javascript:;" class="minus fr">-</a></div></div><div class="total">總價：<em>16.80元</em></div><div class="operate_btn"><a href="" class="buy_btn">立即購買</a><a href="" class="add_cart">加入購物車</a></div></div></div></body> </html>css代碼塊——main.css
body{font-family: 'Microsoft YaHei';color:#666;font-size:12px; } /*頂部條狀態(tài)*/ .header_con{height:29px;background-color: #f7f7f7;border-bottom:1px solid #ddd; } .header{width:1200px;height:29px;margin:0 auto;1 }.welcome{font:12px/29px 'Microsoft YaHei UI';float: left; } .user_login{height: 29px;line-height: 29px;float: right; } .user_login a{color:#666; } .user_login a:hover{color: #f80; } .search_bar{width:1200px;height:115px;margin:0 auto; } .logo{width:151px;height:59px;margin:29px 0 0 17px; } .search_con{width:616px;height:38px;border:1px solid #37ab40;margin:34px 0 0 123px;/*雪碧圖的放大鏡作背景圖*/background:url(../images/icons.png) 10px -335px no-repeat; } .search_con .input_text{width:470px;height:37px;border:0px;margin-left:37px;outline:none; } .search_con .input_btn{width:100px;height:38px;background-color: #37ab40;border:0;font:14px/38px 'Microsoft YaHei UI';color:#fff;/*鼠標變成手*/cursor:pointer; } .guest_card{width:200px;height:40px;margin-top:34px; } .card_name{width:158px;height:38px;border:1px solid #ddd;font:14px/38px 'Microsoft YaHei UI';color:#37ab40;text-indent:56px;background:url(../images/icons.png) 10px -300px no-repeat #f7f7f7; } .goods_count{width: 40px;height:40px;background-color:#f80;font:bold 18px/40px 'Microsoft YaHei UI';text-align:center;color:#fff; } .navbar_con{height:40px;border-bottom:2px solid #37ab30;/*background: red;*/ } .navbar{width:1200px;height:40px;margin:0 auto;/*background: red;*/ } .subnav_con h1{width:200px;height:40px;background-color: #37ab40;font:14px/40px 'Microsoft YaHei UI';text-align:center;color:#fff; } .subnav_con i{width: 11px;height: 7px;background:url(../images/down.png) left center no-repeat;overflow: hidden;display: inline-block; } .navlist{overflow:hidden; } .navlist li{float:left;height:14px;padding:0 25px;border-left:1px solid #666;margin-left:-2px;margin-top:13px; } .submena{width: 1200px;height: 30px;margin: 0 auto;/*background:yellow;*/ } .submena a{color:#37ab40;line-height: 30px; }.center_con{width: 1200px;height: 350px;margin: 0 auto;/*background: yellow;*/ } .center_con .main_menu{width:350px;height:350px;overflow:hidden; } .goods_detail_list{width:730px;height:350px; } .goods_detail_list h3{font-size:24px;line-height:24px;color:#666;font-weight:normal; } .goods_detail_list p{color:#666;line-height:40px; } .prize_bar{height:72px;background-color:#fff5f5;line-height:72px; } .prize_bar .show_prize{font-size:20px;color:#ff3e3e;padding-left:20px } .prize_bar .show_pirze em{font-style:normal;font-size:36px;padding-left:10px } .prize_bar .show_unit{padding-left: 150px; } .goods_num{height: 52px;margin-top: 19px;/*background: yellow;*/ } .goods_num .num_name{width:70px;height:52px;line-height:52px; } .goods_num .num_add{width:75px;height:50px;border:1px solid #dddddd; } .goods_num .num_add .num_show{width:49px;height:50px;text-align:center;line-height:50px;border:0px;outline:none;font-size:14px;color:#666; } .goods_num .num_add .add,.goods_num .num_add .minus{width:25px;line-height:25px;text-align:center;border-left:1px solid #ddd;border-bottom:1px solid #ddd;color:#666;font-size:14px; } .goods_num .num_add .minus{border-bottom:0px; } .total{height: 35px;line-height: 35px;margin-top: 25px;/*background: yellow;*/ } .total em{font-style:normal;color:#ff3e3e;font-size:18px } .operate_btn{height:40px;margin-top:35px;font-size:0;position:relative; } .operate_btn .buy_btn,.operate_btn .add_cart{display:inline-block;width:178px;height:38px;border:1px solid #c40000;font-size:14px;color:#c40000;line-height:38px;text-align:center;background-color:#ffeded; } .operate_btn .add_cart{background-color:#c40000;color:#fff;margin-left:10px;position:relative;z-index:10; }reset.css
body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,input{margin:0;padding:0; }ul{list-style:none; } a{text-decoration:none; }em{font-style:normal; }img{border:0px; }h1,h2,h3,h4,h5,h6{font-size:100%; } .clearfix:before,.clearfix:after{content:"";display:table; } .clearfix:after{clear:both; } .clearfix{zoom:1; }.fl{float:left; } .fr{float:right; }頁面效果圖，大概就是這個樣子的了，后面需要的話可以再加。
總結
以上是生活随笔為你收集整理的天天生鲜商品详情页HTML+css的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机应用 范文,计算机应用基础(范文)
- 下一篇： 计算机软件及应用stata,蒙特卡洛模拟