1.final-html(css)
2017-03-29 本文已影响4人
syeturing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>homework</title>
<link rel="stylesheet" href="css/semantic.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Ralway" rel="stylesheet">
</head>
<style media="screen">
.ui.basic.segment {
transform: translate(-50%);
position: absolute;
left: 50%;
margin-top: 55px;
width: 400px;
}
.the_captain {
font-family: "Open Sans",sans-serif;
font-size: 20px;
}
.extra.content {
font-family: "Ralway",sans-serif!important;
}
.column {
margin-left: -10px;
margin-right: -10px;
margin-bottom: 10px;
}
.ui.basic.buttons {
transform: translate(-50%);
position: absolute;
left: 45%;
top: 105%;
margin-bottom: 40px;
}
.ui.button {
height: 45px;
}
.ui.inverted.fixed.borderless.menu.red.menu {
background-color: #db2828
}
</style>
<body>
<!--导航栏部分-->
<div class="ui inverted fixed borderless menu red menu" style="color:#ee4b4a">
<div class="item">
<div class="ui image">
</div>
</div>
<div class="right menu">
<div class="item">
<div class="ui circular image" style="margin-right:10px">
</div>
<span style="inverted">admin</span>
</div>
<div class="item">
<button class="ui circular inverted button" type="button" name="button">Logout</button>
</div>
</div>
</div>
<!--目录栏部分-->
<div class="ui basic segment">
<div class="ui fluid three item menu" style="top:50px;position:absolute">
<div class="grey active item">
<p style="font-weight:bold">All</p>
</div>
<div class="grey active item">
<p style="font-weight:bold">New</p>
</div>
<div class="item">
<p style="font-weight:bold">Editor's</p>
</div>
</div>
</div>
<!--卡片栏部分-->
<div class="ui basic segment" style="width:1000px;margin-top:-18px;left:730px;">
<div class="ui three column grid" style="top:200px;position:absolute">
<div class="column">
<div class="ui fluid card" style="width:270px;height:200px;">
<div class="image" >
</div>
</div>
<div class="content">
<div class="ui header">
<p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
</div>
</div>
<div class="extra content">
<i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
<i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
</div>
</div>
<div class="column">
<div class="ui fluid card" style="width:270px;height:200px;">
<div class="image" >
</div>
</div>
<div class="content">
<div class="ui header">
<p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
</div>
</div>
<div class="extra content">
<i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
<i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
</div>
</div>
<div class="column">
<div class="ui fluid card" style="width:270px;height:200px;">
<div class="image" >
</div>
</div>
<div class="content">
<div class="ui header">
<p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
</div>
</div>
<div class="extra content">
<i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
<i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
</div>
</div>
<div class="column">
<div class="ui fluid card" style="width:270px;height:200px;">
<div class="image" >
</div>
</div>
<div class="content">
<div class="ui header">
<p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
</div>
</div>
<div class="extra content">
<i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
<i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
</div>
</div>
<div class="column">
<div class="ui fluid card" style="width:270px;height:200px;">
<div class="image" >
</div>
</div>
<div class="content">
<div class="ui header">
<p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
</div>
</div>
<div class="extra content">
<i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
<i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
</div>
</div>
<div class="column">
<div class="ui fluid card" style="width:270px;height:200px;">
<div class="image" >
</div>
</div>
<div class="content">
<div class="ui header">
<p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
</div>
</div>
<div class="extra content">
<i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
<i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
</div>
</div>
<div class="column">
<div class="ui fluid card" style="width:270px;height:200px;">
<div class="image" >
</div>
</div>
<div class="content">
<div class="ui header">
<p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
</div>
</div>
<div class="extra content">
<i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
<i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
</div>
</div>
<div class="column">
<div class="ui fluid card" style="width:270px;height:200px;">
<div class="image" >
</div>
</div>
<div class="content">
<div class="ui header">
<p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
</div>
</div>
<div class="extra content">
<i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
<i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
</div>
</div>
<div class="column">
<div class="ui fluid card" style="width:270px;height:200px;">
<div class="image" >
</div>
</div>
<div class="content">
<div class="ui header">
<p class="the_captain" style="width:300px;">Lorem ipsum dolor sit amet si</p>
</div>
</div>
<div class="extra content">
<i class="grey floated eye icon"></i><span style="color:#cbcdc4">10K</span><span style="color:#cbcdc4"> |</span>
<i class="grey floated check icon"></i><span style="color:#cbcdc4">10 people got it</span>
</div>
</div>
<!--按钮部分-->
<div class="ui basic buttons">
<button class="ui button">
<i class="red left arrow icon"></i>
</button>
<button class="ui button">
<i class="red right arrow icon"></i>
</button>
</div>
</div>
</div>
</body>
</html>
