ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

博客园小页面css完

2021-05-08 23:03:06  阅读:20  来源: 互联网

标签:background color 博客园 5px 10px font margin css 页面


骨架-----------------------------

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="cnblog.css"> </head> <body> <div class="left_style"> <div class="photo"> <!-- <img src="2.jpg" alt="">--> </div> <div class="name">涛哥的博客</div> <div class="name">这个人很帅什么都没有留下</div> <div> <ul class="list_style"> <li><a href="">关于我</a></li> <li><a href="">微博</a></li> <li><a href="">微信公众号</a></li></ul> </div> <div> <ul class="list_style"> <li>python</li> <li>java</li> <li>go</li></ul> </div> </div> <div class="right_style"> <div class="texe_info"> <div class="texe_title"> <span class="txt1">重金八万</span><span class="txt2">2021年5月8日</span></div> <div class="texe_party1"><p>拒绝还价</p></div> <hr> <div class="texe_party2"><span>#python &nbsp&nbsp #javascript</span></div></div> </div> </body> </html>
css-----------------------------------------------------------

.left_style{ height: 100%; width: 20%; float: left; background-color: rgb(78,78,78); position:fixed; /*top: 0;*/ } a{ text-decoration: none;/*文字装饰*/ color: aqua; } a:hover{color: white; } .list_style{ list-style-type: none; color:rgb(145,145,145); padding: 0; margin:100px; font-size: 20px; } body{margin: 0} .photo{ width: 200px; height: 200px; background-color: blue; border-radius: 50%; border: 3px white solid; background-image: url("2.jpg") ; /*不会溢出*/ /*overflow: hidden;*/ margin: auto auto; } .name{ font-size: 20px; color: honeydew; text-align: center; margin: 15px; } .right_style{ height: 1000px; width: 80%; float: right; background-color: #eeeeee; } .texe_info{background-color: aliceblue; height: 150px; margin: 20px 40px 10px 10px; box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5); text-indent: 1em; } .txt2{float: right; padding: 10px 10px; font-weight: bolder; } .txt1{font-size: 30px; font-weight: bolder; } .text_party1{ font-weight: bolder; } .texe_party2{padding: 10px 1px; font-weight: bolder; } .texe_title{ border-left: red solid 5px;}

 

标签:background,color,博客园,5px,10px,font,margin,css,页面
来源: https://www.cnblogs.com/OUYANGjt/p/14746809.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有