semanticui布局活动筛选添加效果代码
代码语言：html
所属分类：布局界面
代码描述：semanticui布局活动筛选添加效果代码，可以选择列表项，添加活动内容。
代码标签： semanticui 活动 筛选
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/semantic.2.0.8.css">
<style>
.agendaheader{
padding-top:15px;
}
.agenda-item {
margin-left: 10px;
line-height: 1.4em !important;
}
.sidebar-container {
width: 260px;
overflow: hidden;
height: 100%;
position: fixed;
margin: 0;
top: 0;
left: 0;
}
.pusher {
padding-left: 260px;
}
.footer {
position: fixed !important;
background: #E6E6E6 !important;
bottom: 0px;
height: 75px;
width: 100%;
left: 260px;
}
.save-button{
position: fixed;
right: 10px;
bottom: 12px;
}
.pusher {
margin-bottom: 80px;
}
.side-agenda-item {
color: white !important;
}
.sidebar::-webkit-scrollbar { width: 0 !important }
.sidebar { -ms-overflow-style: none; }
.sidebar { overflow: -moz-scrollbars-none; }
</style>
</head>
<body translate="no" >
<div class="ui bottom attached segment">
<div class="sidebar-container">
<div class="ui visible fixed inverted left vertical sidebar menu">
<div class="item">
<div class="header">
Justin Jones - Agenda
</div>
</div>
<div class="item">
<div class="header">Saturday January 23</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Dog Sledding</span><br>8:00 am - 10:30 am
</a>
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Snowshoe</span><br>12:00 pm - 3:30 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Mistress America</span><br>6:00 pm - 8:00 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Wahso</span><br>8:15 pm - 11:00 pm
</a>
</div>
<div class="agendaheader header">Sunday January 24</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Full day ski instructor</span><br>9:00 am - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Lift Ticket</span><br>9:00 am - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Last Days in the Desert</span><br>6:00 pm - 8:05 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Chimayo</span><br>8:15 pm - 11:00 pm
</a>
</div>
<div class="agendaheader header">Monday January 25</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Massage</span><br>9:00 am - 9:50 am
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Stein</span><br>7:00 pm - 11:30 pm
</a>
</div>
<div class="agendaheader header">Tuesday January 26</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Cross Country Skiing</span><br>9:00 am - 12:00 pm
</a>
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Call Me Lucky</span><br>2:00 pm - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >I'll See You In My Dreams</span><br>5:30 pm - 8:05 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Grappa</span><br>8:15 pm - 11:00 pm
</a>
</div>
</div>
<div class="item">
<div class="header">
Hollie Jones - Agenda
</div>
</div>
<div class="item">
<div class="header">Sunday January 24</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Full day ski instructor</span><br>9:00 am - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Lift Ticket</span><br>9:00 am - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Last Days in the Desert</span><br>6:00 pm - 8:05 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Chimayo</span><br>8:15 pm - 11:00 pm
</a>
</div>
<div class="agendaheader header">Monday January 25</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Massage</span><br>9:00 am - 9:50 am
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Stein</span><br>7:00 pm - 11:30 pm
</a>
</div>
<div class="agendaheader header">Tuesday January 26</div>
<div class="menu">
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Cross Country Skiing</span><br>9:00 am - 12:00 pm
</a>
<a class="item agenda-item" href="#">
<span class="side-agenda-item" >Call Me Lucky</span><br>2:00 pm - 4:00 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >I'll See You In My Dreams</span><br>5:30 pm - 8:05 pm
</a>
<a class="item agenda-item" href="#">
<i class="large user icon" data-content="Group Activity"></i>
<span class="side-agenda-item" >Dinner at Grappa</span><br>8:15 pm - 11:00 pm
</a>
</div>
</div>
</div>
</div>
<div class="pusher">
<div class="ui container">
<div class="ui basic segment">
<h1 class="ui header">Available Activities</h1>
<div class="ui icon top left pointing dropdown button blue">
<i class="filter icon"></i>
<span class="text">All Dates</span>
<div class="menu">
<div class="header">Available Days</div>
<div class="item">Jan 23 - Saturday</div>
<div class="item">Jan 24 - Sunday</div>
<div class="item">Jan 25 - Monday</div>
<div class="item">Jan 26 - Tuesday</div>
</div>
</div>
<div class="ui icon top left pointing dropdown button blue">
<i class="sort content descending icon"></i>
<span class="text">Sort Activities</span>
<div class="menu">
<div class="header">Sort By</div>
<div class="item">Date</div>
<div class="item">Categories</div>
</div>
</div>
<select id="activity-filter" name="activity-filter" multiple="" class="ui dropdown">
<i class="filter icon"></i>
<option value="">Showing All Activities</option>
<option value="dogsled">Dogsled</option>
<option value="crosscountrskiing">Cross Country Skiing</option>
<option value="film">Film</option>
<option value="skiing">Skiing</option>
<option value="snowshoeing">Snow Shoeing</option>
<option value="snowboarding">Snow Boarding</option>
<option value="snowbobiling">Snow Mobiling</option>
<option value="spa">Spa</option>
</select>
<button class="ui but.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0