商品詳情頁html,天天生鮮商品詳情頁HTML+css

body{

font-family: 'Microsoft YaHei';

color:#666;

font-size:12px;

}

/*頂部條狀態*/

.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;

}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/531570.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/531570.shtml
英文地址,請注明出處:http://en.pswp.cn/news/531570.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Netbeans不能正常啟動glassfish或者部署失敗不能運行的問題

錯誤信息:D:\臨時文件\netbeans\WebTest\build\web中部署GlassFish Server 4, deploy, Connection refused: connect, falseD:\臨時文件\netbeans\WebTest\nbproject\build-impl.xml:1048: 尚未部署該模塊。有關詳細信息, 請查看服務器日志。構建失敗 (總時間: 7 秒…

js實現圖片加載特效(從左到右,百葉窗,從中間到兩邊)

/*  網上百度的&#xff0c;感覺”從中間到兩邊“的效果寫的不是很好&#xff0c;改了一下&#xff0c;感覺可以了&#xff01;*/<html><head><title></title><meta http-equiv"Content-Type" content"text/html; charsetUTF-8&qu…

給html動態添加css樣式,JavaScript動態添加css樣式和script標簽

[動態添加css樣式]window.οnlοadfunction(){var headdocument.getElementsByTagName(head)[0];     //獲取到head元素var linkdocument.createElement(link);             //創建link元素節點&#xff0c;也就是link標簽link.rel"stylesheet";  …

java中Cookie中文字符亂碼問題

如果Cookie中的Value 中有中文字符出現&#xff0c;在加入Cookie的時候&#xff0c;會出現下面的錯誤&#xff1a;  java.lang.IllegalArgumentException: Control character in cookie value or attribute.當我們設定Cookie的Value的值得時候&#xff1a;  cookie.setValue…

湖北省仙桃市2021年高考成績查詢,2021年4月湖北仙桃市自考成績查詢時間和有效期是多久?...

2021年4月湖北仙桃市自考成績查詢時間和有效期是多久?根據《2021年4月湖北自考成績公布及復查事項通知》知悉&#xff0c;2021年4月湖北仙桃市自考成績查詢時間為5月12日起&#xff0c;官方成績查詢入口已開通。一、2021年4月湖北仙桃市自考成績查詢入口及流程2021年4月湖北仙…

html5 手機拍視頻濾鏡,用canvas實現圖片濾鏡效果附演示_html5教程技巧

這是一個很有意思的特效&#xff0c;模擬攝像機拍攝電視屏幕畫面時出現點狀顆粒的效果。顆粒的大小通過變換矩陣實現&#xff0c;可以任意調節&#xff0c;有興趣研究的朋友可以嘗試更多的效果&#xff0c;代碼沒有經過優化&#xff0c;只是一個粗糙的Demo&#xff0c;大家可以…

java中得到classpath和當前類的絕對路徑的一些方法(路徑中的%20進行替換空格)...

原網址&#xff1a;http://blog.csdn.net/shendl/article/details/1427475&#xff08;注意&#xff1a;利用下面方式得到路徑&#xff0c;如果路徑中有空格字符&#xff0c; 那么會有"%20"進行替換&#xff0c; 所以得到之后再將"%20"替換成空格&#xff…

計算機的好處英語,電腦的好處英語演講稿

電腦的好處英語演講稿The computer plays the vital role in ours life, the computer may help us to handle very many matters: The data computation, the study entertainment, the office automation, the control production, draws money automatically, long-distance…

jsp實現簡單的分頁

效果如下&#xff1a;<%-- Document : pageCreated on : 2014-11-18, 8:55:02Author : HJZ --%><%page contentType"text/html" pageEncoding"UTF-8"%> <!DOCTYPE html> <html><head><script language "javas…

臺式計算機有什么配置,目前臺式電腦的主流配置有哪些?

主流配置的話&#xff0c;目前CPU基本都上八代8100/8400/8700主板b360m板子比較火&#xff0c;不超頻很合適內存條的話360只支持2666所以一般都是上8g2400的條子硬盤的話現在固態降價了&#xff0c;且主板支持nvme 256g性價比不錯 看需求&#xff0b;機械顯卡的話1060系列甜品級…

javaBean和jsp應用

原網頁&#xff1a;http://www.douban.com/note/102320977/ JavaBean是一種可復用&#xff0c;跨平臺的組件。共有兩種JavaBean&#xff1a;一種無用戶界面&#xff0c;這種一般用于處理數據運算&#xff0c;操作數據庫等。另一種是有用戶界面(User Interface)的JavaBean. 在Js…

計算機重應用,裝了一大堆應用,iPhone6會變重嗎?

你有沒有想過&#xff0c;iPhone買來以后裝入數十甚至上百個應用&#xff0c;手機是否在重量上發生了變化。廣泛接受馬克思主義教育的人類表示&#xff1a;別鬧了&#xff0c;數據和信息屬于意識&#xff0c;怎么能有重量(或者應該叫質量)。更何況這個所謂的“信息爆炸”時代每…

SQLExecption:Operation not allowed after ResultSet closed解決辦法

原網址&#xff1a;http://blog.csdn.net/sku0923/article/details/1722370 一個stmt多個rs進行操作引起的ResultSet已經關閉錯誤 一個stmt多個rs進行操作. 那么從stmt得到的rs1,必須馬上操作此rs1后,才能去得到另外的rs2,再對rs2操作. 不能互相交替使用,會引起rs已經關閉錯誤.…

2003正在鎖定計算機,WIN2003 自動鎖定怎么解決?

那么網速慢的作祟者是什么呢&#xff1f;依筆者推斷原因主要有二。■網絡協議配置問題&#xff0c;■WinXP計劃任務的問題。但如果其它Windows電腦在網上鄰居中根本看不到WinXP那臺電腦&#xff0c;便可能是用戶鎖定和安全策略沒有設置好。這時就需要從以下幾個方面入手&#x…

Ajax在IE瀏覽器會出現中文亂碼解決辦法

在AJAX瀏覽器來進行發送數據時&#xff0c;一般它所默認的都是UTF-8的編碼. Ajax在IE瀏覽器會出現中文亂碼的情況&#xff01;解決辦法如下<script type"text/javascript"> function showDiv(str){ document.getElementById("picDiv").style.displ…

用計算機彈正義之道,正義之道

“正道的光&#xff0c;照在了大地上&#xff0c;把每個黑暗的地方全部照亮&#xff0c;坦蕩是光&#xff0c;像男兒的胸膛&#xff0c;有無窮的力量如此堅強……”黃渤的歌曲《正義之道》抖音上太火了&#xff0c;聽著聽著聽著不由想起今天發生在我們班里的一件事。“老師小某…

讓div垂直以及水平居中瀏覽器窗口

首們需要position:absolute;絕對定位&#xff0c;或者position:fixed。而層的定位點&#xff0c;使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。  如&#xff1a;一個層寬度是400&#xff0c;高度是300。使用絕對定位距離上部與左部都設置成50%。而margin-…

計算機輔助初中英語教學,初中英語CAI課件制作初探

初中英語CAI課件制作初探時間&#xff1a;2007-03-30欄目&#xff1a;初中英語CAI課件制作初探肖應綱 吉州區電教站 胡小英 吉安縣萬福中學[創作說明]隨著計算機多媒體技術的飛速發展&#xff0c;越來越多的教師&#xff0c;特別是英語教師&#xff0c;已經嘗試計算機輔助…

URL中的特殊字符

原網址&#xff1a;http://pichcar.iteye.com/blog/676292 URL中的特殊字符 有些符號在URL中是不能直接傳遞的&#xff0c;如果要在URL中傳遞這些特殊符號&#xff0c;那么就要使用他們的編碼了。編碼的格式為&#xff1a;%加字符的ASCII碼&#xff0c;即一個百分號%&#xff0…

電子商務專業需要考計算機證嗎,電子商務必考的證有哪些

2020-03-14 16:31:11文/鐘詩賀電子商務是當今非常熱門的學科&#xff0c;必考的專業證書主要有電子商務員、電子商務師等等。電子商務專業介紹電子商務專業是融計算機科學、市場營銷學、管理學、經濟學、法學和現代物流于一體的新型交叉學科。該專業培養掌握計算機信息技術、市…