HTML/CSS——PC端博文尚美网页
生活随笔
收集整理的這篇文章主要介紹了
HTML/CSS——PC端博文尚美网页
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
源代碼
HTML
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./style/style.css"><title>博文尚美</title> </head> <body><div id="head" class="container"><div class="head_logo l"><img src="./image/logo.png" alt="博文尚美" title="博文尚美LOGO"></div><ul class="head_menu r"><li><a herf="#">HOME</a></li><li><a herf="#">ABOUT</a></li><li><a herf="#">PROTFOLIO</a></li><li><a herf="#">SERVICE</a></li><li><a herf="#">NEWS</a></li><li><a herf="#">CONTACT</a></li></ul></div><div id="banner" class="container_fluid"><ul class="banner_list"><li class="active" style="background-image: url(./image/banner.png)"><a href="#"></a></li><li style="background-image: url(./image/banner.png)"><a href="#"></a></li><li style="background-image: url(./image/banner.png)"><a href="#"></a></li><li style="background-image: url(./image/banner.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 SERVICE</p></div><ul class="service_list"><li><div></div><h3>1.WEB DESIGN</h3><p>企業(yè)品牌網(wǎng)站設(shè)計/手機(jī)網(wǎng)站制作<br>動畫網(wǎng)站創(chuàng)意設(shè)計</p></li><li><div></div><h3>2.WEB DESIGN</h3><p>企業(yè)品牌網(wǎng)站設(shè)計/手機(jī)網(wǎng)站制作<br>動畫網(wǎng)站創(chuàng)意設(shè)計</p></li><li><div></div><h3>3.WEB DESIGN</h3><p>企業(yè)品牌網(wǎng)站設(shè)計/手機(jī)網(wǎng)站制作<br>動畫網(wǎng)站創(chuàng)意設(shè)計</p></li><li><div></div><h3>4.WEB DESIGN</h3><p>企業(yè)品牌網(wǎng)站設(shè)計/手機(jī)網(wǎng)站制作<br>動畫網(wǎng)站創(chuàng)意設(shè)計</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 innocative site</p></div><ul class="case_list clear"><li><a href="#"><img src="./image/gk.png" alt></a></li><li><a href="#"><img src="./image/gk.png" alt></a></li><li><a href="#"><img src="./image/gk.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>TEN LATEST NEWS</p></div><dl><dt class="l"><img src="./image/news.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 l"><h3><a href="#">網(wǎng)站排名進(jìn)入前三的技巧說明</a></h3><p>很多客戶都會納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎首頁，更不用說首頁前三了。那么網(wǎng)站就...</p></div></li><li><div class="news_date l"><i>08</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">網(wǎng)站排名進(jìn)入前三的技巧說明</a></h3><p>很多客戶都會納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎首頁，更不用說首頁前三了。那么網(wǎng)站就...</p></div></li><li><div class="news_date l"><i>07</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">網(wǎng)站排名進(jìn)入前三的技巧說明</a></h3><p>很多客戶都會納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎首頁，更不用說首頁前三了。那么網(wǎng)站就...</p></div></li><li><div class="news_date l"><i>06</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">網(wǎng)站排名進(jìn)入前三的技巧說明</a></h3><p>很多客戶都會納悶為什么自己的網(wǎng)站老是優(yōu)化不到搜索引擎首頁，更不用說首頁前三了。那么網(wǎng)站就...</p></div></li></ul></dd></dl></div><div id="foot" class="container_fluid"><div class="container"><p class="l">Copyright 2019 Bowenshangmei Culyure 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>CSS
*{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;} .clear: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; }#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;left: 0;top: 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: 39px;left: 0px; z-index: 20;font-size: 0;text-align: center;} #banner .banner_btn li{display:inline-block;width: 12px;height: 12px; border: 2px solid white;border-radius: 50%;box-sizing: border-box;margin: 0 6px;cursor: pointer;} #banner .banner_btn li.active{background: white;}#service{overflow: hidden;min-height: 407px;} #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: 102px;height: 102px;margin: 0 auto;} #service .service_list li:nth-last-of-type(1) div{background-image: url(../image/mini_ico.png)} #service .service_list li:nth-last-of-type(2) div{background-image: url(../image/mini_ico.png)} #service .service_list li:nth-last-of-type(3) div{background-image: url(../image/mini_ico.png)} #service .service_list li:nth-last-of-type(4) div{background-image: url(../image/mini_ico.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;}.area_title{margin-top: 61px; text-align: center;} .area_title p{font-size: 14px;line-height: 34px;color: #9f9f9f;} .area_title h2{font-size: 20px;line-height: 20px;height: 20px;color: #363636;font-weight: normal}#case{background-color: #f8f8f8;} #case .container{min-height: 460px;overflow: hidden;} #case .area_title{margin-top: 55px;text-align: center;} #case .area_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-color:#66C5B4;margin: 0 auto;border-radius: 25px;line-height: 37px; text-align: center;font-size: 14px;margin-top: 36px;} #case .case_btn a{display: block;width: 100%;height: 100%;color: white;}#news{min-height: 450px;overflow: hidden;} #news .area_title{margin-top: 65px;text-align: center;} #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: 70px;height: 70px; border-right: 2px solid #dcdcdc;text-align: center;} #news .news_date i{font-size: 39px;color: #66C5B4;display: block;font-weight: bold;} #news .news_date span{color: #999999;font-size: 20px;line-height: 36px;} #news .news_text{width: 310px;margin-left: 20px;} #news .news_text h3{font-size: 14px;} #news .news_text h3 a{color: #3f3f3f;} #news .news_text p{color: #4a4a4a;font-size: 12px;line-height: 21px;margin-top: 17px;}#foot{background-color: #66C5B4;} #foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;} #foot div a{color: white;margin: 0 10px;}運(yùn)行效果?
原作品效果：
仿制品效果：
素材資源
https://www.17sucai.com/preview/330046/2015-08-19/%E5%8D%9A%E6%96%87%E5%B0%9A%E7%BE%8E/index.html
https://www.zcool.com.cn/work/ZNjIzOTEwNA==.html?switchPage=on
?
總結(jié)
以上是生活随笔為你收集整理的HTML/CSS——PC端博文尚美网页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HMTL/CSS——下拉菜单DEMO
- 下一篇： HTML/CSS——PC端QQ飞车官网首