标签：size Python top 练习 简单 font margin left
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="ss.css">
</head>
<body class="clearfix">
<div class="left_div">
<div class="left_top">
<div class="portrait">
<img src="https://img1.baidu.com/it/u=4139746764,2918951882&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
</div>
<div class="username">
<span class="blog-username">博客</span>
</div>
<div class="signature">
<span>简介</span>
</div>
</div>
<div class="left_auto">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="felt_lower">
<ul>
<li><a href="">#python</a></li>
<li><a href="">#java</a></li>
<li><a href="">#golang</a></li>
</ul>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
<div class="right_div">
<div class="v1">
<div class="v1-title">
<span class="title-b">标题</span>
<span class="title-time">时间</span>
</div>
<div class="v1-desc">
<span class="desc-jj">简介</span>
</div>
<div class="v1-info">
<span>Python</span>
<span>Golang</span>
</div>
</div>
</div>
</body>
</html>
CSS代码
/*博客园首页css文件*/
body {
margin: 0;
background-color: #eeeeee;
}
a {
text-decoration: none;
color: darkgoldenrod;
}
a:hover {
color: aliceblue;
}
ul {
list-style-type: none;
padding-left: 0;
}
/*防塌陷*/
/*.clearfix:after{*/
/* content: '';*/
/* clear: both;*/
/* display: inline-block;*/
/*}*/
/*左侧*/
.left_div {
left: 0;
top: 0;
float: left;
width: 20%;
height: 100%;
background-color: darkgray;
position: fixed;
}
/*左上*/
.left_top {
text-align: center;
}
/*左侧头像*/
.portrait {
width: 300px;
height: 300px;
border: 3px solid white;
overflow: hidden;
border-radius: 50%;
margin: 10px auto;
}
.portrait img {
max-width: 100%;
}
/*博客div*/
/*博客span*/
.blog-username {
font-size: 28px;
margin-top: 10px;
}
/*简介*/
.signature {
font-size: 28px;
margin-top: 10px;
}
/*左中*/
.left_auto {
text-align: center;
margin-top: 150px;
font-size: 36px;
}
/*左下*/
.felt_lower {
text-align: center;
margin-top: 200px;
font-size: 36px;
}
/*右侧*/
.right_div {
float: right;
width: 80%;
}
.v1 {
margin: 20px 50px 20px 20px;
background-color:beige;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.6);
}
.v1-title {
font-weight: bolder;
border-left:8px solid red;
}
.title-b {
font-size: 48px;
}
.title-time {
float: right;
font-size: 24px;
margin-right: 20px;
margin-top: 10px;
}
.title-b {
margin-left: 20px;
}
.v1-desc {
margin-top: 10px;
font-size: 38px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
.desc-jj {
margin-left: 30px;
}
.v1-info {
font-size: 30px;
margin-left: 30px;
margin-top: 10px;
}
标签：size,Python,top,练习,简单,font,margin,left 来源： https://www.cnblogs.com/yuanyangguo/p/15880518.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。