您現在的位置是:電腦技術吧?>? 編程技術 ??>??css水平垂直居中,css中圖片垂直居中??>??正文詳情

css水平垂直居中,css中圖片垂直居中

休若蘭2019-11-17 04:10:36 人圍觀
簡介css垂直對齊今天,我想和大家分享純CSS實現的垂直時間線效果。垂直時間線適用于具有類似任務調度的頁面。實現采用藍色作為主題色,界面效果良好。讓我們看看呈現:實現代碼HTML

今天給大家分享一款純css實現的垂直時間線效果。

垂直時間線適合放在類似任務時間安排的網頁上。

該實現采用了藍色作為主題色,界面效果還不錯。

一起看下效果圖:

  實現的代碼。

  html代碼:代碼如下:div class=containerheader class=clearfixspanBlueprint span class=bp-icon bp-icon-about data-content=The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration./span/spanh1Vertical Timeline/h1nava target=_blank href=http://www.font color=#000000www.jb51.net/font/Article/9250 class=bp-icon bp-icon-prevdata-info=previous BlueprintspanPrevious Blueprint/span/a!--a href= _fcksavedurl= class=bp-icon bp-icon-next data-info=next BlueprintspanNext Blueprint/span/a--a target=_blank href=http://www.font color=#000000www.jb51.net/font/Article/9250 class=bp-icon bp-icon-dropdata-info=back to the Codrops articlespanback to the Codrops article/span/aa target=_blank href=http://www.font color=#000000www.jb51.net/font/Article/9250 class=bp-icon bp-icon-archivedata-info=Blueprints archivespanGo to the archive/span/a/nav/headerdiv class=mainul class=cbp_tmtimelinelitime class=cbp_tmtime datetime=2013-04-10 18:30span4/10/13/span span18:30/span/timediv class=cbp_tmicon cbp_tmicon-phone/divdiv class=cbp_tmlabelh2Ricebean black-eyed pea/h2pWinter purslane courgette pumpkin quandong komatsuna fennel green bean cucumberwatercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape radishbush tomato ricebean black-eyed pea maize eggplant. Cabbage lentil cucumber chickpeasorrel gram garbanzo plantain lotus root bok choy squash cress potato summer purslanesalsify fennel horseradish dulse. Winter purslane garbanzo artichoke broccoli lentilcorn okra silver beet celery quandong. Plantain salad beetroot bunya nuts black-eyedpea collard greens radish water spinach gourd chicory prairie turnip avocado sierraleone bologi./p/div/lilitime class=cbp_tmtime datetime=2013-04-11T12:04span4/11/13/span span12:04/span/timediv class=cbp_tmicon cbp_tmicon-screen/divdiv class=cbp_tmlabelh2Greens radish arugula/h2pCaulie dandelion maize lentil collard greens radish arugula sweet pepper water spinachkombu courgette lettuce. Celery coriander bitterleaf epazote radicchio shallot winterpurslane collard greens spring onion squash lentil. Artichoke salad bamboo shootblack-eyed pea brussels sprout garlic kohlrabi./p/div/lilitime class=cbp_tmtime datetime=2013-04-13 05:36span4/13/13/span span05:36/span/timediv class=cbp_tmicon cbp_tmicon-mail/divdiv class=cbp_tmlabelh2Sprout garlic kohlrabi/h2pParsnip lotus root celery yarrow seakale tomato collard greens tigernut epazotericebean melon tomatillo soybean chicory broccoli beet greens peanut salad. Lotusroot burdock bell pepper chickweed shallot groundnut pea sprouts welsh onion wattleseed pea salsify turnip scallion peanut arugula bamboo shoot onion swiss chard.Avocado tomato peanut soko amaranth grape fennel chickweed mung bean soybean endivesquash beet greens carrot chicory green bean. Tigernut dandelion sea lettuce garlicdaikon courgette celery maize parsley komatsuna black-eyed pea bell pepper auberginecauliflower zucchini. Quandong pea chickweed tomatillo quandong cauliflower spinachwater spinach./p/div/lilitime class=cbp_tmtime datetime=2013-04-15 13:15span4/15/13/span span13:15/span/timediv class=cbp_tmicon cbp_tmicon-phone/divdiv class=cbp_tmlabelh2Watercress ricebean/h2pPeanut gourd nori welsh onion rock melon mustard jcama. Desert raisin amaranthkombu aubergine kale seakale brussels sprout pea. Black-eyed pea celtuce bambooshoot salad kohlrabi leek squash prairie turnip catsear rock melon chard taro broccoliturnip greens. Fennel quandong potato watercress ricebean swiss chard garbanzo.Endive daikon brussels sprout lotus root silver beet epazote melon shallot./p/div/lilitime class=cbp_tmtime datetime=2013-04-16 21:30span4/16/13/span span21:30/span/timediv class=cbp_tmicon cbp_tmicon-earth/divdiv class=cbp_tmlabelh2Courgette daikon/h2pParsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyedpea maize scallion green bean spinach cabbage jcama bell pepper carrot onion cornplantain garbanzo. Sierra leone bologi komatsuna celery peanut swiss chard silverbeet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot./p/div/lilitime class=cbp_tmtime datetime=2013-04-17 12:11span4/17/13/span span12:11/span/timediv class=cbp_tmicon cbp_tmicon-screen/divdiv class=cbp_tmlabelh2Greens radish arugula/h2pCaulie dandelion maize lentil collard greens radish arugula sweet pepper water spinachkombu courgette lettuce. Celery coriander bitterleaf epazote radicchio shallot winterpurslane collard greens spring onion squash lentil. Artichoke salad bamboo shootblack-eyed pea brussels sprout garlic kohlrabi./p/div/lilitime class=cbp_tmtime datetime=2013-04-18 09:56span4/18/13/span span09:56/span/timediv class=cbp_tmicon cbp_tmicon-phone/divdiv class=cbp_tmlabelh2Sprout garlic kohlrabi/h2pParsnip lotus root celery yarrow seakale tomato collard greens tigernut epazotericebean melon tomatillo soybean chicory broccoli beet greens peanut salad. Lotusroot burdock bell pepper chickweed shallot groundnut pea sprouts welsh onion wattleseed pea salsify turnip scallion peanut arugula bamboo shoot onion swiss chard.Avocado tomato peanut soko amaranth grape fennel chickweed mung bean soybean endivesquash beet greens carrot chicory green bean. Tigernut dandelion sea lettuce garlicdaikon courgette celery maize parsley komatsuna black-eyed pea bell pepper auberginecauliflower zucchini. Quandong pea chickweed tomatillo quandong cauliflower spinachwater spinach./p/div/li/ul/div/div  css代碼:代碼如下:*, *:after, *:before{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}body, html{font-size: 100%;padding: 0;margin: 0;}/* Clearfix hack by Nicolas Gallagher: a href=http://nicolasgallagher.com/micro-clearfix-hack/http://nicolasgallagher.com/micro-clearfix-hack//a */.clearfix:before, .clearfix:after{content: ;display: table;}.clearfix:after{clear: both;}body{font-family: 'Lato' , Calibri, Arial, sans-serif;color: #47a3da;}a{color: #f0f0f0;text-decoration: none;}a:hover{color: #000;}.main, .container header{width: 90%;max-width: 69em;margin: 0 auto;padding: 0 1.875em 3.125em 1.875em;}.container header{padding: 2.875em 1.875em 1.875em;}.container header h1{font-size: 2.125em;line-height: 1.3;margin: 0 0 0.6em 0;float: left;font-weight: 400;}.container header span{display: block;position: relative;z-index: 9999;font-weight: 700;text-transform: uppercase;letter-spacing: 0.5em;padding: 0 0 0.6em 0.1em;}.container header span span:after{width: 30px;height: 30px;left: -12px;font-size: 50%;top: -8px;font-size: 75%;position: relative;}.container header span span:hover:before{content: attr(data-content);text-transform: none;text-indent: 0;letter-spacing: 0;font-weight: 300;font-size: 110%;padding: 0.8em 1em;line-height: 1.2;text-align: left;left: auto;margin-left: 4px;position: absolute;color: #fff;background: #47a3da;}.container header nav{float: right;text-align: center;}.container header nav a{display: inline-block;position: relative;text-align: left;width: 2.5em;height: 2.5em;background: #fff;border-radius: 50%;margin: 0 0.1em;border: 4px solid #47a3da;}.container header nav a span{display: none;}.container header nav a:hover:before{content: attr(data-info);color: #47a3da;position: absolute;width: 600%;top: 120%;text-align: right;right: 0;pointer-events: none;}.container header nav a:hover{background: #47a3da;}.bp-icon:after{font-family: 'bpicons';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;text-align: center;color: #47a3da;-webkit-font-smoothing: antialiased;}.container header nav .bp-icon:after{position: absolute;top: 0;left: 0;width: 100%;height: 100%;line-height: 2;text-indent: 0;}.container header nav a:hover:after{color: #fff;}.bp-icon-next:after{content: e000;}.bp-icon-drop:after{content: e001;}.bp-icon-archive:after{content: e002;}.bp-icon-about:after{content: e003;}.bp-icon-prev:after{content: e004;}@media screen and (max-width: 55em){.container header h1, .container header nav{float: none;}.container header span, .container header h1{text-align: center;}.container header nav{margin: 0 auto;}.container header span{text-indent: 30px;}}/* COMPONENT.CSS *//* Made with a href=http://icomoon.io/http://icomoon.io//a */.cbp_tmtimeline{margin: 30px 0 0 0;padding: 0;list-style: none;position: relative;}/* The line */.cbp_tmtimeline:before{content: '';position: absolute;top: 0;bottom: 0;width: 10px;background: #afdcf8;left: 20%;margin-left: -10px;}.cbp_tmtimeline li{position: relative;}/* The date/time */.cbp_tmtimeline li .cbp_tmtime{display: block;width: 25%;padding-right: 100px;position: absolute;}.cbp_tmtimeline li .cbp_tmtime span{display: block;text-align: right;}.cbp_tmtimeline li .cbp_tmtime span:first-child{font-size: 0.9em;color: #bdd0db;}.cbp_tmtimeline li .cbp_tmtime span:last-child{font-size: 2.9em;color: #3594cb;}.cbp_tmtimeline li:nth-child(odd) .cbp_tmtime span:last-child{color: #6cbfee;}/* Right content */.cbp_tmtimeline li .cbp_tmlabel{margin: 0 0 15px 25%;background: #3594cb;color: #fff;padding: 2em;font-size: 1.2em;font-weight: 300;line-height: 1.4;position: relative;border-radius: 5px;}.cbp_tmtimeline li:nth-child(odd) .cbp_tmlabel{background: #6cbfee;}.cbp_tmtimeline li .cbp_tmlabel h2{margin-top: 0px;padding: 0 0 10px 0;border-bottom: 1px solid rgba(255,255,255,0.4);}/* The triangle */.cbp_tmtimeline li .cbp_tmlabel:after{right: 100%;border: solid transparent;content: ;height: 0;width: 0;position: absolute;pointer-events: none;border-right-color: #3594cb;border-width: 10px;top: 10px;}.cbp_tmtimeline li:nth-child(odd) .cbp_tmlabel:after{border-right-color: #6cbfee;}/* The icons */.cbp_tmtimeline li .cbp_tmicon{width: 40px;height: 40px;font-family: 'ecoico';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;font-size: 1.4em;line-height: 40px;-webkit-font-smoothing: antialiased;position: absolute;color: #fff;background: #46a4da;border-radius: 50%;box-shadow: 0 0 0 8px #afdcf8;text-align: center;left: 20%;top: 0;margin: 0 0 0 -25px;}.cbp_tmicon-phone:before{content: e000;}.cbp_tmicon-screen:before{content: e001;}.cbp_tmicon-mail:before{content: e002;}.cbp_tmicon-earth:before{content: e003;}/* Example Media Queries */@media screen and (max-width: 65.375em){.cbp_tmtimeline li .cbp_tmtime span:last-child{font-size: 1.5em;}}@media screen and (max-width: 47.2em){.cbp_tmtimeline:before{display: none;}.cbp_tmtimeline li .cbp_tmtime{width: 100%;position: relative;padding: 0 0 20px 0;}.cbp_tmtimeline li .cbp_tmtime span{text-align: left;}.cbp_tmtimeline li .cbp_tmlabel{margin: 0 0 30px 0;padding: 1em;font-weight: 400;font-size: 95%;}.cbp_tmtimeline li .cbp_tmlabel:after{right: auto;left: 20px;border-right-color: transparent;border-bottom-color: #3594cb;top: -20px;}.cbp_tmtimeline li:nth-child(odd) .cbp_tmlabel:after{border-right-color: transparent;border-bottom-color: #6cbfee;}.cbp_tmtimeline li .cbp_tmicon{position: relative;float: right;left: auto;margin: -55px 5px 0 0px;}}  

版權聲明:本文由 休若蘭 整理編輯。

原標題:css,css實現垂直居中

轉載注明出處:http://www.dn9ww09s.icu/program/13049.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 三星手機突然網速很慢,三星s8上網速度慢

    三星手機突然網速很慢,三星s8上網速度慢 相關圖片手機網絡太慢了我相信對于三星手機用戶來說,最麻煩的是上網速度慢。三星上網速度慢怎么辦?三星上網速度慢怎么辦?讓我們用超人軟件來了解一下,三星的網速慢怎么辦?一。移...

  • 炫酷播放器,炫酷的播放器是怎樣弄的

    炫酷播放器,炫酷的播放器是怎樣弄的 相關圖片AcG播放器上圖是音頻播放器的用戶界面,其中還隱藏了歌曲的播放列表。整個播放器的界面除了大背景的人像圖和歌曲的星譜外,都是用CSS和字體來繪制的。看來唯一的困難就是CD和C電...

  • wps行距怎么調小,wps里行距怎么調整

    wps行距怎么調小,wps里行距怎么調整 相關圖片wps表格上下間距怎么調在使用WPS時,在輸入文檔內容的同時,我們還將設置文本的間距和行距,這將使文檔更加美觀,滿足我們的要求。但是,如果使用較少的WPS,則可以設置行距wps冒...

  • icon圖標,iconfont圖標

    icon圖標,iconfont圖標 相關圖片icon設計現在越來越多的移動應用和web應用開始重視動態效果的設計,它能給用戶帶來愉悅的交互體驗,是應用美觀的重要組成部分。(`)圖標,即圖標。在交互過程中,各種圖標的應圖...

  • 電腦用格式工廠怎么剪輯視頻,格式工廠截取片段

    電腦用格式工廠怎么剪輯視頻,格式工廠截取片段 相關圖片格式工廠無法再次截取作為互聯網上最強大的免費視頻編輯工具,format factory被認為有很多剛使用過這個軟件的新手朋友。他們不知道如何從format factory截取視頻以格式工廠如何剪掉不要...

  • ppt保存格式,excel保存格式

    ppt保存格式,excel保存格式 相關圖片excel保存后格式消失文本區域的格式在保存時可以保存到數據庫中,但在顯示時,由于/N和不能相互旋轉,頁面不能按開頭的格式顯示,因此在顯示頁面時,應該在值外嵌套一層標簽,即...

  • win10臨時文件能刪嗎,c盤臨時文件可以清理嗎

    win10臨時文件能刪嗎,c盤臨時文件可以清理嗎 相關圖片windows臨時安裝文件可以刪除嗎在Windows系統中,臨時文件的積累是導致系統運行緩慢的一個非常重要的原因。我可以刪除臨時Windows文件嗎?臨時windows文件夾在哪里?讓我們用超人軟win...

  • steam無充值加好友,steam怎么設置拒絕加好友

    steam無充值加好友,steam怎么設置拒絕加好友 相關圖片steam0級加好友如果在steam平臺上下載安裝游戲,當一些游戲需要邀請好友參與時,可以直接粉碎steam搜索好友,與好友一起體驗游戲的樂趣。但有些用戶仍然不知道如何在steam網頁版stea...

  • reset,reset是什么

    reset,reset是什么 相關圖片trip reset什么意思在當今的Web設計/開發實踐中,使用CSS向語義(x)HTML標記添加樣式樣式是一個重要的關鍵。在設計師的夢想中,有一個完美的世界:所有瀏覽器都可以理解和應用多電腦...

  • wps公式編輯器無法使用,wps重新安裝公式編輯器

    wps公式編輯器無法使用,wps重新安裝公式編輯器 相關圖片wps公式編輯如何改變字體在使用WPS進行編輯時,有時需要插入公式,但此時,我們發現公式的選項將變為灰色并且不可用。怎么了?WPS公式編輯器不能做什么?下面的小編輯為您帶來W...

熱評文章

  • word怎么讓頁碼從某一頁開始,word不顯示頁碼怎么辦

    word怎么讓頁碼從某一頁開始,word不顯示頁碼怎么辦 相關圖片wps怎么從第三頁開始設置頁碼當使用WPS輸入文檔時,我們有時會在文檔中添加頁碼,以便標準化和便于查看。但是,如果您的文檔包含封面和目錄,則封面和目錄的前兩頁應從頁碼中刪...

  • 釘釘管理員有哪些權限,釘釘管理員權限在哪里

    釘釘管理員有哪些權限,釘釘管理員權限在哪里 相關圖片釘釘群管理員權限釘住是目前非常流行的企業通信軟件。各部門組和企業集團之間可以方便的溝通,使團隊合作更加高效。各小組的組長管理基本上是各部門的組長。因為工作很忙,有...

  • 火焰特效,ae怎么做火焰特效

    火焰特效,ae怎么做火焰特效 相關圖片ae手上火焰特效本教程介紹了利用flash CS5創建鼠標觸發的煙花落下交互效果,主要是利用計算鼠標跟隨物體產生火花效果,用一定的規則將鼠標掃過屏幕,你可以看到華麗的互動效果Ia...

  • 出現異常,應用出現異常

    出現異常,應用出現異常 相關圖片ping的過程出現異常近日,不少pptv用戶和朋友反映,他們在使用pptv的過程中出現了異常錯誤。那么pptv的異常錯誤呢?現在,超人軟件編輯將介紹如何解決pptv的異常錯誤。讓我們QQ出現異...

  • 繪制矩形,在草圖中繪制矩形的方法

    繪制矩形,在草圖中繪制矩形的方法 相關圖片如何畫矩形讓我們看一看畫布上一個簡單的幾何矩形的繪圖。在畫布中,有三種方法可以繪制矩形:填充矩形、筆劃矩形和清除矩形。當然,我們也可以使用路徑來描繪所有形狀,包括...

  • 為什么下載不了pp助手,為何pp助手安裝失敗

    為什么下載不了pp助手,為何pp助手安裝失敗 相關圖片為什么用pp助手安裝不了軟件最近,很多小伙伴都反映,他們在使用PP助手安裝軟件時,總會提示出現安裝失敗的異常現象。PP助手安裝失敗的原因是什么?如果PP助手無法安裝應用程序,...

  • sgtool應用程序錯誤,logonui應用程序錯誤

    sgtool應用程序錯誤,logonui應用程序錯誤 相關圖片update.exe應用程序出錯想必很多用戶都遇到過這樣的情況:打開電腦后,系統會提示ravmond.exe應用程序出錯。如何解決ravmond.exe的應用錯誤?什么是ravmond.exe應用程序錯誤0xc0000142...

  • 涂鴉效果,涂鴉

    涂鴉效果,涂鴉 相關圖片人物涂鴉煙火制作的涂鴉效果作品題目:雨后廁所外的涂鴉創意:它展現了前現代年輕人的憤世嫉俗、些許頹廢和熱愛生活的態度這部作品需要:插件:eyecandy 4.0過濾字體:ps如何做涂鴉...

  • 王者榮耀被下架,王者被下架的英雄

    王者榮耀被下架,王者被下架的英雄 相關圖片王者榮耀游戲被下架本月,微信應用“腦王”排行榜和星級評定成為許多人朋友圈的新趨勢。但今天,當玩家向國王敞開心扉時,他們發現自己無法敞開心扉。他們提示因為違反規定而...

  • 調用,調用交易服務

    調用,調用交易服務 相關圖片嵌套調用調用JavaScript行為可以指定事件發生時要執行的自定義函數或JavaScript代碼。您可以編寫自己的JavaScript代碼,也可以使用Internet遞歸調用...

關注微信

变脸官网查询