如何使用HTML+CSS實現TG-vision 主頁制作_CSS教程_CSS_網頁制作

來源:腳本之家  責任編輯:小易  

123456789101112131415161718192021222324252627282930313233343536!doctypehtml><html><head><meta charset="utf-8"><title>示例</title><style type="text/css">.menu{ width:200px;padding:10px;background:#333;}ul{ padding:0;border-bottom:1px dotted#FFFFFF;}ul li{ line-height:24px;color:#CCC;border-top:1px dotted#FFFFFF;}ul li a{ color:#FFF;font-family:"Microsoft Yahei;text-decoration:none;}</style></head><body><div class="menu"><ul><li>課程大綱</a></li><li><a href="#">妙味視頻</a></li><li><a href="#">妙味論壇</a></li></ul></div></body>www.anxorj.tw防采集請勿采集本網。

本次我們用HTML+CSS布局來對TG-vision 雙暉傳媒的主頁進行一個初步的搭建。

頁面布局 用CSS 來布局很容易。如果你已經習慣用表格布局的話,起先會感覺比較所以,舉個例子,你需要一個頁面腳注,你可以用id“footer”為HTML增加一個塊,然后使用如下的CSS: footer { clear:both;}

一.頂部logo及導航條

DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> include file=\"bottom.asp\"%>

1.HTML代碼

1.3.家用電器 書籍 手機數碼 日用百貨 這4個可以使用<H1></H1>標簽,再在CSS中定義它的字的顏色(黃)和背景色.(淺灰) 4.每個分類下面的具體品種可以使用<UL><LI></LI></UL>標簽,

<!--頂部開始--><div class="topheader"> <!--雙暉logo--> <div class="logo"> <img src="images/logo.jpg" alt=""> </div> <!--頂部導航條--> <div class="navheader" id="Tapbar"> <div class="nav" > <a href="#">首頁</a> </div> <div class="nav"> <a href="#porfolio">案例</a> </div> <div class="nav"> <a href="#services">服務</a> </div> <div class="nav"> <a href="#about us">關于</a> </div> <div class="nav"> <a href="#contact us">聯系</a> </div> </div></div>

把表單寫在form里,其他的用input實現,css主要定義寬高和邊框以及居中就可以了

2.css代碼

.topheader{ height: 65px; width: 99%; /*頂部背影顏色*/ background-image: url(images/top_header_bg.gif); background-repeat:repeat; /*頂部區域固定在最上方,隨著滾動條的滾動而移動*/ position: fixed ; top: 0; z-index: 9999; /*調整到最上面第一層*/}/*logo圖片布局*/.logo{ height: 62px; width: 220px; float: left; margin-left: 250px;}/*導航條布局*/.navheader{ width: 600px; height: 65px; float: right; margin-right: 130px; margin-top: 15px;}/*導航條布局*/.nav{ width: 80px; height: 40px; float: left; margin-right: 10px; text-align:center; line-height: 40px;}/*調整a標簽,去掉下劃線*/.navheader a{ text-decoration: none; font:18px "新宋體"; color: white;}/*通過hover,使得當鼠標懸停在nav區域時,nav區域顏色變為設置顏色*/.nav:hover{ background-color: #ff6666; border-radius: 5px; /*添加一個弧度*/}

二.中心區域展示圖片

1.HTML代碼

1.3.家用電器 書籍 手機數碼 日用百貨 這4個可以使用<H1></H1>標簽,再在CSS中定義它的字的顏色(黃)和背景色.(淺灰) 4.每個分類下面的具體品種可以使用<UL><LI></LI></UL>標簽,

<div class="focusBar"> <div class="Focusout"> <!--插入中心圖片--> <div class="focus"> <img src="images/focus/11.jpg" alt=""> </div> <!--插入中心圖片--> <div class="focus"> <img src="images/focus/12.jpg" alt=""> </div> </div> <!--圖片底部區域--> <div class="focusbuttom"></div></div>

2.css代碼

/*中心區域布局*/.focusBar{ height: 500px; width: 100%; background-color: #141414; padding-top: 130px;} /* 中心圖片區域布局 */.Focusout{ width: 1000px; height: 400px; margin:0 auto ; /* 中心圖片區域水平舉居中 */}.focus{ width: 1000px; height: 500px; float: left; position: absolute;}.focusbuttom{ height: 100px; width: 100%; background-color: #e8e8e8;}

3.網頁布局后樣式

圖片來源于莫天888

三.porfolio部分

1.HTML代碼

1.3.家用電器 書籍 手機數碼 日用百貨 這4個可以使用<H1></H1>標簽,再在CSS中定義它的字的顏色(黃)和背景色.(淺灰) 4.每個分類下面的具體品種可以使用<UL><LI></LI></UL>標簽,

<div class="titleBar1"id="porfolio"></div> <!--porfolio下方圖片展示--><div class="porfolio"> <div class="porfoliobox"> <div class="porfolioobox1"> <img src="images/portfolio/p1.jpg" width="330px" alt=""> </div> <div class="porfolioobox1 boxmargin"> <img src="images/portfolio/p2.jpg" width="330px"alt=""> </div> <div class="porfolioobox1"> <img src="images/portfolio/p3.jpg"width="330px" alt=""> </div> </div> <div class="porfoliobox"> <div class="porfolioobox2"> <img src="images/portfolio/p4.jpg" width="330px" alt=""> </div> <div class="porfolioobox2 boxmargin"> <img src="images/portfolio/p5.jpg" width="330px" alt=""> </div> <div class="porfolioobox2"> <img src="images/portfolio/p6.jpg" width="330px" alt=""> </div> </div> <div class="porfoliobox"> <div class="porfolioobox3"> <img src="images/portfolio/p7.jpg" width="330px" alt=""> </div> <div class="porfolioobox3 boxmargin"> <img src="images/portfolio/p8.jpg" width="330px" alt=""> </div> <div class="porfolioobox3"> <img src="images/portfolio/p9.jpg" width="330px" alt=""> </div> </div>

2.css

/*porfolio標題布局*/.titleBar1{ width: 100%; height: 70px; background-image: url(images/col_tit.gif); background-repeat:no-repeat; background-position: center 0; background-color: #f3f3f3; margin: 10px 0;}/*porfolio展示區域布局*/.porfolio{ width: 100%; height: 615px;}.porfoliobox{ height: 206px; width: 1000px; margin: 0 auto;}/*展示圖片布局*/.porfolioobox1,.porfolioobox2,.porfolioobox3{ height: 195px; width: 330px; float: left;}.boxmargin{ margin: 0 5px;}

3.網頁布局后樣式

圖片來源于莫天888

四. services部分

1.HTML代碼

1.3.家用電器 書籍 手機數碼 日用百貨 這4個可以使用<H1></H1>標簽,再在CSS中定義它的字的顏色(黃)和背景色.(淺灰) 4.每個分類下面的具體品種可以使用<UL><LI></LI></UL>標簽,

<!--services標題--><div class="titleBar2" id="services"></div> <!-services 主體部分--><div class="services"> <div class="servicesbox"> <div class="servicesbox1"> <img src="images/ser_box1.jpg" alt=""> <P>移動產品解決方案</P> <span>iOS/Android/微信公眾平臺 APP交互設計、視覺設計、HTML5開發、功能定制開發</span> </div> <div class="servicesbox1 servicesbox2"> <img src="images/ser_box2.jpg" alt=""> <p>應用軟件解決方案</p> <span> 多操作系統多平臺的應用軟件交互設計、視覺設計、應用端開發服務</span> </div> <div class="servicesbox1"> <img src="images/ser_box3.jpg" alt=""> <p>網絡及網路產品解決方案</p> <span> 根據用戶的需求、市場狀況、企業情況等進行綜合分析可用性的Web解決方案</span> </div> <!--clients區域采用ul布局圖片--> <div class="clients"> <ul> <li><img src="images/clients/tg_clients_1.gif" alt=""></li> <li><img src="images/clients/tg_clients_2.gif" alt=""></li> <li><img src="images/clients/tg_clients_3.gif" alt=""></li> <li><img src="images/clients/tg_clients_4.gif" alt=""></li> <li><img src="images/clients/tg_clients_5.gif" alt=""></li> <li><img src="images/clients/tg_clients_6.gif" alt=""></li> <li><img src="images/clients/tg_clients_7.gif" alt=""></li> <li><img src="images/clients/tg_clients_8.gif" alt=""></li> <li><img src="images/clients/tg_clients_9.gif" alt=""></li> <li><img src="images/clients/tg_clients_10.gif" alt=""></li> <li><img src="images/clients/tg_clients_11.gif" alt=""></li> <li><img src="images/clients/tg_clients_12.gif" alt=""></li> <li><img src="images/clients/tg_clients_13.gif" alt=""></li> <li><img src="images/clients/tg_clients_14.gif" alt=""></li> <li><img src="images/clients/tg_clients_15.gif" alt=""></li> <li><img src="images/clients/tg_clients_16.gif" alt=""></li> <li><img src="images/clients/tg_clients_17.gif" alt=""></li> <li><img src="images/clients/tg_clients_18.gif" alt=""></li> </ul> </div> </div></div>

2.css

/*services標題布局*/.titleBar2{ width: 100%; height: 70px; background-image: url(images/col_tit.gif); background-repeat:no-repeat; background-position: center -70px; background-color: #f3f3f3; margin: 10px 0;}/*services主體布局*/.services{ width: 1000px; height:570px; margin: 0 auto;}.servicesbox{ width: 1000px; height:270px;}.servicesbox1{ width: 320px; height: 270px; background-color: #f3f3f3; float: left; text-align: center;}.servicesbox2{ margin: 0 20px}.servicesbox1 p{ font:20px "華文宋體"; padding-bottom: 5px;}.servicesbox1 span{ font:15px "華文宋體";}/*services下方網站圖片布局*/.clients{ width:1000px; height: 265px; float: left; overflow: hidden;}/*ul布局配置*/.clients ul{ width:1000px; height: 246px; padding-inline-start: 0px; /*去掉li前面符號占據的空間*/}ul, li, dl, dt, dd { list-style-type: none;}/*li布局配置*/.clients li { width: 165px; height: 80px; overflow: hidden; /*隱藏*/ float: left; display: list-item; text-align: -webkit-match-parent; border: 0.5px solid #f3f3f3;}

3.網頁布局后樣式

來源于莫天888

五. about us 部分

1.HTML

<!--about us標題--><div class="titleBar3" id="about us"></div><!--about us中心區域--><div class="about"><!--about us最上方圖片展示--> <div class="aboutshow"> <div class="show"> <img src="images/shshow/ss12.jpg" alt=""> </div> <div class="show showmargin"> <img src="images/shshow/ss22.jpg" alt=""> </div> <div class="show"> <img src="images/shshow/ss32.jpg" alt=""> </div> </div> <!--about us中間簡介部分--> <div class="aboutshow2"> <div class="auoutlogo"> <img src="images/about_logo.jpg" alt=""> </div> <p>雙暉傳媒(TGVISION)成立于2006年,我們是一支融交互、創新、視覺設計、產品研發于一體的專業品牌策劃與制作團隊,鼎力為國內外知名企業提供全方位多平臺的產品服務解決方案。以專業的交互設計、創新理念、視覺呈現,服務國內外企業多達100余家,成功案例300余例。涉及IT、汽車、教育、房地產、金融等各個行業,擁有包括中國移動、中國電信、百度、新浪、淘寶、索尼、聯想、人民網、中國日報等企業在內的成功案例,在國內擁有較高美譽。</p> </div> <!--about us底部介紹--> <div class="aboutshow3"> <div class="showtime"> <img src="images/about_num1.gif" width="332px"> <p>我們通過研究理解用戶的思維、行為、和目標,挖掘用戶對產品使用的潛在需求,通過我們服務于各行業客戶的豐富經驗,結合品牌的優勢進行分析,讓用戶在情緒上、行為上感知產品的創新、感受完美的體驗。超越品牌的價值。</p> </div> <div class="showtime showtimemargin"> <img src="images/about_num2.gif" width="332px"> <p>我們是一只富有激情的創新團隊。我們將設計通過情感的表達把用戶和產品很自然的連接在一起,讓用戶享受使用產品的愉悅,以此來強化對產品、品牌的體驗認知!通過自然的交互和生動的設計展現出來,用一個充滿情感化的設計打動用戶!</p> </div> <div class="showtime"> <img src="images/about_num3.gif" width="332px"> <p> 為客戶提供品牌化、一站式的解決方案。服務涵蓋了互聯網,掌上移動設備、桌面平臺以及電子消費類產品等。為客戶提供從品牌設計、概念設計、交互設計、視覺設計、功能研發到最終產品實現。為客戶提供真正具有創新價值的產品體驗。 </p> </div> </div></div>

2.css

/*services標題布局*/.titleBar3{ width: 100%; height: 70px; background-image: url(images/col_tit.gif); background-repeat:no-repeat; background-position: center -140px; background-color: #f3f3f3; margin: 10px 0;}/*services中心區域布局*/.about{ width: 100%; height: 715px;}/*services第一部分圖片區域布局*/.aboutshow{ width: 1000px; height: 260px; margin: 0 auto;}.show{ float: left;}.showmargin{ margin: 0 12.5px;}、/*services中部簡介布局*/.aboutshow2{ width: 1000px; height: 120px; background-color: #f3f3f3; margin: 0 auto; border: 0.5px solid #141414;}.auoutlogo{ float: left; padding-right: 10px; padding-top: 5px;}.aboutshow2 p{ width: 800px; padding-top: 5px; margin-right: 10px; background-color: #f3f3f3; float: right; font: 15px "華文仿宋";}/*services底部簡介布局*/.aboutshow3{ width: 1000px; height: 300px; margin: 0 auto; margin-top: 30px;}.showtime{ width: 332px; height:299px; border-top: 1px outset #787676; border-bottom: 1px outset #787676; float: left;}.showtimemargin{ border-left: 1px outset #787676; border-right: 1px outset #787676;}.showtime p{ font: 15px "華文宋體"; padding-top: 20px;}

3.網頁布局后樣式

來源于莫天888

六.contact us部分

1.HTML

<!--contact us標題--><div class="titleBar4" id="contact us"></div><!--contact us主體部分--><div class="contact"> <div class="contactbox"> <div class="contactbox1"> <ul> <li class="contact_1"><h3>告訴我們您的需求</h3></li> <li class="contact_2"> <input type="text"value="填寫姓名" class="clients_3"> <input type="text"value="聯系電話"> </li> <li class="clients_4"><input type="text" value="電子郵箱" ></li> <li class="clients_4"><input type="text" value="您的公司" ></li> <li class="clients_5"> <textarea cols="80" rows="20">填寫詳細信息</textarea> <input type="submit"> </li> </ul> </div> <div class="contactbox2"> <img src="images/bottomlogo.jpg" width="320px" alt=""> <div class="contactbox3"> <img src="images/temp_map.jpg" width="320px" alt="" class="bottom"> </div> </div> </div>

2.css

/*contact us標題布局*/.titleBar4{ width: 100%; height: 70px; background-image: url(images/col_tit.gif); background-repeat:no-repeat; background-position: center -210px; background-color: #f3f3f3; margin: 10px 0;}/*contact us主體布局*/.contact{ width: 100%; height: 620px;}.contactbox{ width: 1000px; height: 620px; margin: 0 auto;}.contactbox1{ width: 640px; height: 620px; float: left; overflow: hidden;}/*ul布局*/.contact ul{ width: 640px; padding-inline-start: 0px; /*隱藏li符號占據區域的空間*/}/*li布局*/.contact li{ width: 640px; margin: 0; padding-top: 10px; list-style-type:none; overflow: hidden;}.contact input[type=text]{ width: 300px; height: 40px; font: 15px "華文宋體" ; background-color: rgba(250,250,250,0.8);}.contact input[type=submit]{ width: 150px; height: 45px; background-color: #ff6666;}.clients_3{ margin-right: 18px;}.clients_4 input[type=text]{ width: 630px;}.clients_5 { width: 640px; height: 353px;}.contactbox2{ width: 320px; height: 630px; float: right; padding-top: 34px;}.bottom{ padding-top: 86px;}.contactbox3{ width: 320px; height: 335px; float: right;}

3.網頁布局后樣式

來源于莫天888

七.網頁構建源代碼及圖片鏈接

鏈接: https://pan.baidu.com/s/1p-wi4g8rloHotNx4te4r5A

提取碼: 52hc

初次制作,對于網頁架構并不是特別清楚,網頁制作的臨摹完成度并不是特別好,代碼寫的也并不清晰明了。請各位大佬悉心賜教。

到此這篇關于如何使用HTML+CSS實現TG-vision 主頁制作的文章就介紹到這了,更多相關css TG-vision 主頁制作內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!

假設廣告圖片為<div id="ad"><img/>CSS使用浮動定位position:fixed;使圖片廣告浮在最上層z-index:12;定位圖片廣告初始位置top:10px;left:20px;JavaScriptvar ad=document.getElementById("ad");獲取ad的寬度和高度wad=ad.offsetWidth;had=ad.offsetHeight;獲取屏幕的寬度和高度w=document.body.clientWidth;h=document.body.clientHeight;假設橫向速度為x,縱向速度為yvar x=10;var y=15;函數function move(){ad.style.left+x+"px;ad.style.top+y+"px;if(parseInt(ad.style.left)+wad>=w|parseInt(ad.style.left)){x=-x;}if(parseInt(ad.style.top)+had>=h|parseInt(ad.style.top)){y=-y;}定時器setTimeout("move()",1000);}執行函數move();內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • 解決css樣式沖突的幾個辦法(小結)
  • css 中使用徑向漸變實現卡券效果
  • css3里box-shadow屬性的使用方法示例詳解
  • css垂直居中的另類實現代碼詳解(不走尋常路)
  • css viewport 單位 實現快速布局
  • css布局兩個button在同父標簽中左右兩側分布的方法
  • css變量對js交互組件開發帶來的提升與變革示例代碼詳解
  • 完美解決webpack打包css背景圖片路徑問題
  • 純css實現選中商品后右下角顯示√號功能
  • css 實現動態二級菜單
  • 怎樣使用HTML、CSS和JavaScript共同實現:
  • 這個效果如何用html+css實現,求助
  • 怎么用html+css實現以下形式
  • 如何利用html和css實現一個下拉頁面
  • JavaScript 如何使用css結合html實現網頁布局?
  • 如何用HTML+CSS實現圖片的轉換
  • 如何用HTML和Css實現這個圖片
  • 怎么用HTML和CSS實現?
  • 如何用html和css實現如下圖的效果:
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程csstg-vision主頁制作css 實現動態二級菜單css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字解決css樣式沖突的幾個辦法(小結)css 中使用徑向漸變實現卡券效果css3里box-shadow屬性的使用方法示例詳解css垂直居中的另類實現代碼詳解(不走尋常路)css viewport 單位 實現快速布局css布局兩個button在同父標簽中左右兩側分布的方法css變量對js交互組件開發帶來的提升與變革示例代碼詳完美解決webpack打包css背景圖片路徑問題純css實現選中商品后右下角顯示√號功能css 實現動態二級菜單
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载