221 lines
5.8 KiB
HTML
221 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>仿简书详情页面</title>
|
|
<link rel="stylesheet" href="./css/clear.css">
|
|
<style>
|
|
body {
|
|
background: #f9f9f9;
|
|
}
|
|
.left {
|
|
float: left;
|
|
}
|
|
.right {
|
|
float: right;
|
|
}
|
|
.middle {
|
|
vertical-align: middle;
|
|
}
|
|
.header {
|
|
width: 100%;
|
|
height: 56px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,.05);
|
|
background: #fff;
|
|
}
|
|
.header_center {
|
|
width: 1440px;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.logo {
|
|
width: 60px;
|
|
height: 48px;
|
|
}
|
|
.menu {
|
|
height: 100%;
|
|
margin-left: 154px;
|
|
}
|
|
.menu li {
|
|
float: left;
|
|
line-height: 56px;
|
|
padding: 0 20px;
|
|
}
|
|
.menu li a {
|
|
font-size: 17px;
|
|
color: #333;
|
|
}
|
|
.menu li input {
|
|
width: 160px;
|
|
padding: 8px 36px 8px 16px;
|
|
box-sizing: border-box;
|
|
border-radius: 17px;
|
|
border: none;
|
|
background: #f2f2f2;
|
|
background-image: url("./img/sss.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 22px 22px;
|
|
background-position: 120px center;
|
|
}
|
|
.setting {
|
|
height: 100%;
|
|
}
|
|
.setting li {
|
|
float: left;
|
|
line-height: 52px;
|
|
margin-right: 10px;
|
|
}
|
|
.setting li:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.auth {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.auth+img {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.vip {
|
|
width: 52px;
|
|
height: 24px;
|
|
}
|
|
.font {
|
|
width: 24px;
|
|
height: 14px;
|
|
}
|
|
.wirte {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.xwz {
|
|
width: 74px;
|
|
height: 22px;
|
|
padding: 8px 16px;
|
|
border: 1px solid #ec7259;
|
|
background: #ec7259;
|
|
border-radius: 50px;
|
|
}
|
|
.xwz {
|
|
color: #fff;
|
|
}
|
|
.content {
|
|
width: 1000px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
margin-top: 10px;
|
|
}
|
|
.content_left {
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
width: 730px;
|
|
margin-right: 10px;
|
|
background: #fff;
|
|
}
|
|
.content_right {
|
|
width: 260px;
|
|
background: #fff;
|
|
}
|
|
.user_message {
|
|
margin-top: 15px;
|
|
}
|
|
.user_message img {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 100%;
|
|
}
|
|
.message_right {
|
|
margin-left: 8px;
|
|
padding-top: 3px;
|
|
}
|
|
.top_title span {
|
|
font-size: 15px;
|
|
font-weight: bolder;
|
|
}
|
|
.top_title p{
|
|
padding: 2px 9px;
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 17px;
|
|
border-radius: 30px;
|
|
border: 1px solid #ec7259;
|
|
text-align: center;
|
|
line-height: 17px;
|
|
color: #ec7259;
|
|
font-size: 12px
|
|
}
|
|
.top_info {
|
|
color: #969696;
|
|
font-size:14px;
|
|
}
|
|
.content_left h2{
|
|
border-left: 6px solid #ec7259;
|
|
padding-left: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="header">
|
|
<div class="header_center">
|
|
<img class="logo left" src="./img/logo.png" alt="">
|
|
|
|
<ul class="menu left">
|
|
<li><a href="">发现</a></li>
|
|
<li><a href="">关注</a></li>
|
|
<li><a href="">消息</a></li>
|
|
<li>
|
|
<input type="text" placeholder="搜索">
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="setting right">
|
|
<li>
|
|
<img class="font middle" src="./img/font.png" alt="">
|
|
</li>
|
|
<li>
|
|
<img class="vip middle" src="./img/vip.png" alt="">
|
|
</li>
|
|
<li>
|
|
<img class="auth middle" src="./img/auth.png" alt="">
|
|
<img src="./img/drop.png" alt="">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="" class="xwz">
|
|
<img class="wirte" src="./img/bji.png" alt="">
|
|
<span>写文章</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="content_left left">
|
|
<h2>avicat Premium for Mac的破解教程</h2>
|
|
<div class="user_message">
|
|
<img class="left" src="https://upload.jianshu.io/users/upload_avatars/2925683/46e9598d606f.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="">
|
|
<div class="message_right left">
|
|
<div class="top_title">
|
|
<span>用户名</span>
|
|
<p>关注</p>
|
|
</div>
|
|
<div class="top_info">
|
|
12 2018.03.22 11:56:59 字数 1,398 阅读 134,301
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content_right left"></div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html> |