千峰WebPC端页面制作案例
生活随笔
收集整理的這篇文章主要介紹了
千峰WebPC端页面制作案例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?制作如下界面：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0; padding: 0;}ul{list-style: none;}img{display: block;}a{text-decoration: none; color:white;}h1,h2,h3,h4,h5,h6{font-size: 16px;}#main{background-color: black;width: 1253px; height: 244px; margin:0 auto;z-index: 0;position: relative;}#main h2{color: white;margin-left: 7px;margin-top: 9px;margin-bottom: 18px; }#main img{width: 227px; height: 127px;border-radius:10px;}#main .box{float: left;}#main #outer1{margin-left: 7px;margin-right: 24px;}#main .outer{margin-right: 24px;}#main .content{height: 34px;line-height: 34px;font-size: 16px;bottom: -14px;text-align: left;}#main .c{text-indent: 7px;}#main .smallWord{color: #8c8c8c;} #main .pic p{width: 36px; height: 20px; background: #fddc82;z-index: 1;color: #663d00;border-radius: 5px;text-align: center;}#main .pic .a{position: absolute;left: 194px;top: 45px;}#main .pic .b{position: absolute;left: 445px;top: 45px;}#main .pic .d{position: absolute;left: 695px;top: 45px;}#main .pic .e{position: absolute;left: 1197px;top: 45px;}#main .comment{z-index: 1;color: white;font-size: 14px;} #main .comment .mhl{position: absolute; top:136px;left: 15px;}#main .comment .ry{position: absolute; top:136px;left: 270px;}#main .comment .ejz{position: absolute; top:136px;left: 522px;}#main .comment .zyq{position: absolute; top:136px;left: 772px;}#main .comment .lyj{position: absolute; top:136px;left: 1022px;}</style> </head> <body><div id="main"><h2> 猜你會追</h2><div class="box"> <img src="../images/TX1.png" alt="" id="outer1"><a href="#"> <p class="c content">夢華錄</p> </a><p class="c smallWord">劉亦菲陳曉共闖大宋繁華</p></div><div class="box"><img src="../images/TX2.png" alt="" class="outer"><a href="#"> <p class="content">你是我的榮耀</p> </a><p class="smallWord">楊洋迪麗熱巴共譜浪漫愛情</p></div><div class="box"><img src="../images/TX3.png" alt="" class="outer"><a href="#"> <p class="content">二進(jìn)制戀愛</p> </a><p class="smallWord">莊達(dá)菲任宥綸鮮甜初戀</p></div><div class="box"><img src="../images/TX4.png" alt="" class="outer"><a href="#"> <p class="content">在一起</p> </a><p class="smallWord">群星還原抗“疫”記憶</p></div><div class="box"><img src="../images/TX5.png" alt=""><a href="#"> <p class="content">老友記 第二季</p> </a><p class="smallWord">美劇友情愛情天花板</p></div><div class="pic"><p class="a">VIP</p> <p class="b">VIP</p><p class="d">VIP</p><p class="e">VIP</p></div><div class="comment"><span class="mhl"> 全40集 </span><span class="ry"> 全32集 </span><span class="ejz"> 全24集 </span><span class="zyq"> 全20集 </span><span class="lyj"> 全24集 </span></div></div> </body> </html>注意點(diǎn)：
PC端企業(yè)類：
?
????????????????通欄：自適應(yīng)瀏覽器的寬度。
????????????????版心：固定一個寬度，并且讓容器居中。
?
<ul><li style="background-image: url(../images/TX1.png);"><a href="#"> </a></li></ul>- 可以對ul設(shè)置寬高，但只對ul設(shè)置寬高時，由于背景圖片是加在li內(nèi)的，所以最后的效果只有l(wèi)i默認(rèn)大小的圖片，要想獲取整張圖片，必須將ul和li設(shè)置一樣的寬高或直接在ul中加img。
-
在如上代碼的條件下，只有將a標(biāo)簽轉(zhuǎn)成塊并添加寬高才能點(diǎn)擊
-
<p>標(biāo)簽內(nèi)的文本需要換行可以用<br>實現(xiàn)
- ?文字居中：text-align:center;? ? ? ? 圖片居中：在<div>內(nèi)? margin:0 auto;
- <li>中不能直接加<img>，解決方法是： <li> <a href=""> <img src="" alt=""> </a> </li><p> <li> <img src="" alt=""> </li> </p>
- <i>標(biāo)簽：
??????????????????????????????????????
*{margin: 0;padding: 0;} ul,ol{list-style: none;} img{display: block;} a{text-decoration: none; color: #646464;} h1,h2,h3{font-size: 16px;} body{font-family: Arial;}.l{float: left;} .r{float: right;} .clera:after{content: ""; display: block; clear: both;} .container{width: 1080px; margin: 0 auto; position: relative;} .container-fluid{width: 100%;}#head{height: 81px;} #head .head_logo{width: 162px; height: 44px;margin-top: 19px;} #head .head_menu{font-size: 14px;line-height: 81px;} #head .head_menu li{float: left; margin-left: 58px;}.area_title{margin-top: 60px; text-align: center;} .area_title h2{height: 20px; line-height: 20px; font-size: 20px; color: #363636;background: url(../bwsmpic/pic11.png) no-repeat center 5px;font-weight: normal;} .area_title p{color: #9F9F9F; font-size: 14px; line-height: 34px;}#foot{background: #66c5b4;} #foot .container{height: 54px; line-height: 54px; font-size: 12px; color: white;} #foot div a{color: white; margin: 0 10px;} <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/common.css"><style>#banner{position: relative;}#banner .banner_list{ width: 100%; height: 469px; position: relative;}#banner .banner_list li{width: 100%; height: 100%; background: center 0 no-repeat;position: absolute;top: 0;left: 0;opacity: 0;z-index: 1;}#banner .banner_list li.active{opacity: 1; z-index: 10;}#banner .banner_list a{display: block; width: 100%; height: 100%;}#banner .banner_btn{width: 100%; position: absolute; bottom: 43px; z-index: 20; font-size: 0;text-align: center;}#banner .banner_btn li{display: inline-block; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; box-sizing: border-box; margin: 0 6px; cursor: pointer;} /* cursor:光標(biāo) */#banner .banner_btn li.active{background: white;}#service{overflow: hidden; min-height: 407px;} /* 防止margin傳遞 */#service .service_list{text-align: center; margin-top: 34px;}#service .service_list li{float: left; width: 250px; margin: 0 10px;}#service .service_list div{width: 97px; height: 97px; margin: 0 auto;}#service .service_list li:nth-of-type(1) div{background-image: url(./bwsmpic/pic2.png);}#service .service_list li:nth-of-type(2) div{background-image: url(./bwsmpic/pic3.png);}#service .service_list li:nth-of-type(3) div{background-image: url(./bwsmpic/pic4.png);}#service .service_list li:nth-of-type(4) div{background-image: url(./bwsmpic/pic5.png);}#service .service_list h3{font-size: 18px; color: #434343; line-height: 36px; margin-top: 25px;}#service .service_list p{font-size: 14px; color: #6D6D6D; line-height: 22px;}#case{background: #f8f8f8;}#case .container{min-height: 460px; overflow: hidden;}#case .case_title{margin-top: 55px;}#case .case_title h2{color: #66C5B4;}#case .case_list{margin-top: 28px;}#case .case_list li{float: left; width: 340px; margin: 0 10px;}#case .case_btn{width: 176px; height: 37px; background: #66C5B4; margin: 0 auto;border-radius: 25px; text-align: center; line-height: 37px; font-size: 14px; margin-top: 236px;}#case .case_btn a{display: block; width: 100%; height: 100%; color: white;}#news{min-height: 450px; overflow: hidden;}#news .area_title{margin-top: 65px;}#news dl{margin-top: 48px;}#news dt{width: 234px;}#news dd{width: 846px;}#news .news_list{width: 100%; }#news .news_list li{width: 50%; float: left; margin-bottom: 48px;}#news .news_date{width: 71px; height: 70px; border-right: 1px solid #DCDCDC; text-align: center;}#news .news_date i{color: #66C5B4; font-size: 39px; display: block;font-weight: bold;}#news .news_date span{color: #999999; font-size: 20px; line-height: 36px;}#news .news_text{width: 310px; margin-left: 80px; }#news .news_text h3{font-size: 14px;}#news .news_text a{color: #3F3F3F; }#news .news_text p{ color: #A4A4A4; font-size: 12px; line-height: 21px; margin-top: 17px;}</style> </head> <body><div id="head" class="container"><div class="head_logo l"><a href="#"> <img src="./bwsmpic/pic10.png" alt="博文尚美" title="博文尚美"></a></div><ul class="head_menu r"><li><a href="#"> HOME </a></li><li><a href="#"> ABOUT </a></li><li><a href="#"> PROTFOLIO </a></li><li><a href="#"> SERVICE </a></li><li><a href="#"> NEWS </a></li><li><a href="#"> CONTACT </a></li></ul></div><div id="banner" class="container-fluid"><ul class="banner_list"><li class="active" style="background-image: url(./bwsmpic/pic1.png);"><a href="#"></a></li><li style="background-image: url(./bwsmpic/pic1.png);"><a href="#"></a></li><li style="background-image: url(./bwsmpic/pic1.png);"><a href="#"></a></li><li style="background-image: url(./bwsmpic/pic1.png);"><a href="#"></a></li></ul><ol class="banner_btn"><li class="active"></li><li></li><li></li><li></li></ol></div><div id="service" class="container"><div class="area_title"><h2>服務(wù)范圍</h2><p>OUR SERVICES</p></div><ul class="service_list"><li><div> </div><h3> 1.WEB DESIGN </h3><p> 企業(yè)品牌網(wǎng)站設(shè)計/手機(jī)網(wǎng)站制作<br> <!-- <br>標(biāo)簽：自動換行 -->動畫網(wǎng)站創(chuàng)意設(shè)計 </p></li><li><div> </div><h3> 2.GRAPHIC DESIGN </h3><p> 標(biāo)志logo設(shè)計/產(chǎn)品宣傳冊設(shè)計<br> 企業(yè)廣告/海報設(shè)計 </p></li><li><div> </div><h3> 3.E-BUSINESS PLAN </h3><p> 淘寶/天貓裝修設(shè)計及運(yùn)營推廣<br> 企業(yè)微博、微信營銷 </p></li><li><div> </div><h3> 4.MAILBOXAGENTS </h3><p> 騰訊/網(wǎng)易企業(yè)郵箱品牌代理<br> 個性化郵箱定制開發(fā) </p></li></ul></div><div id="case" class="container-fluid"><div class="container"> <div class="area_title"><h2> { 客戶案例 } </h2><p>with the best professional technology,to design the best innovative web site </p></div><ul class="case_list clear"><li><a href="#"> <img src="./bwsmpic/pic6.png" alt=""> </a></li><li><a href="#"> <img src="./bwsmpic/pic7.png" alt=""> </a></li><li><a href="#"> <img src="./bwsmpic/pic8.png" alt=""> </a></li></ul><div class="case_btn"><a href="#"> VIEW MORE </a></div></div></div><div id="news" class="container"> <div class="area_title"><h2> 最新資訊 </h2><p> THE LATEST NEWS</p></div><dl><dt class="l"><img src="./bwsmpic/pic9.png" alt=""></dt><dd class="l"><ul class="news_list"><li><div class="news_date l"><i>09</i><span>Jan</span></div><div class="news_text"><h3> <a href="#"> 網(wǎng)站排名進(jìn)入前三的技巧說明 </a> </h3><p> 很多客戶都會納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎首頁，更不用說進(jìn)首頁前三了。那么網(wǎng)站優(yōu)... </p></div></li><li><div class="news_date l"><i>08</i><span>Jan</span></div><div class="news_text"><h3> <a href="#"> flash網(wǎng)站制作的優(yōu)缺點(diǎn) </a> </h3><p> 雖然HTML5程序語言出現(xiàn)，大有逐漸代替Flash網(wǎng)站制作的意味，但是過于生硬的HTML5動畫效果，始終... </p></div></li><li><div class="news_date l"><i>07</i><span>Jan</span></div><div class="news_text"><h3> <a href="#"> 做個網(wǎng)站多少錢？ </a> </h3><p> “做個網(wǎng)站多少錢？”很多客戶打電話過來直接第一句就拋出來的問題。這好比買輛車多少錢，你是要... </p></div></li><li><div class="news_date l"><i>06</i><span>Jan</span></div><div class="news_text"><h3> <a href="#"> 哪些網(wǎng)站優(yōu)化手法屬于網(wǎng)站過度優(yōu)化 </a> </h3><p> 大部分人都想讓自己的網(wǎng)站，一夜之間出現(xiàn)在搜索引擎首頁，獨(dú)占鰲頭。但是事實告訴我們羅馬不是一... </p></div></li></ul></dd></dl></div><div id="foot" class="container-fluid"><div class="container"> <p class="l"> Copyright 2006 - 2014 Bowenshangmei Culture All Rights Reserved </p><div class="r"> <a href="#"> Home </a> | <a href="#"> About </a> | <a href="#"> Portfolio </a> | <a href="#"> Contact </a></div></div></div> </body> </html>PC端游戲類
總結(jié)
以上是生活随笔為你收集整理的千峰WebPC端页面制作案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 专门设计界面,andro
- 下一篇： 头痛啊...