CSS 后台布局实例

2025-02-23 技术教程

下面的例子是一个简单的布局

最上面是header，左边是一个logo（老男孩），右边是用户的登录信息

中间一大块是内容，内容左侧是菜单，右侧是具体的内容

代码如下：

body的margin为0，确保边上全部填满

absolute 确保位置不变; 注意如果他的父级标签有relative，他相对于这个父级标签的位置不变，否则相对于body的位置不变

overflow 在内容超过标签范围之后会自动加个滚轮

font-awesome插件可以使用现成的小标签

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="font-awesome-4.7.0/css/font-awesome.min.css"/><style>body{margin:0;}.left{float:left;}.right{float:right;}.pg-header{height:48px;background-color:#2459a2;color:white;line-height:48px;}.pg-header.logo{width:200px;background-color:#204982;text-align:center;}.pg-header.icons{padding:020px;}.pg-header.icons:hover{background-color:#204982;}.pg-header.user{margin-right:60px;padding:020px;color:white;height:48px;}.pg-header.user:hover{background-color:#204982;}.pg-header.user.aimg{height:40px;width:40px;margin-top:4px;border-radius:50%;}.pg-header.user.b{z-index:20;position:absolute;top:48px;right:0;background-color:white;color:black;width:160px;display:none;font-size:14px;line-height:30px;}.pg-header.user.ba{padding:5px;color:black;text-decoration:none;}.pg-header.user.ba:hover{background-color:#dddddd;}.pg-header.user:hover.b{display:block;}.pg-header.user.ba{display:block;}.pg-content.menu{position:absolute;top:48px;left:0;bottom:0;width:200px;background-color:#dddddd;}.pg-content.content{position:absolute;top:48px;right:0;bottom:0;left:200px;overflow:auto;z-index:9;}</style></head><body><divclass="pg-header"><divclass="logoleft">老男孩</div><divclass="userright"><aclass="a"href="#"><imgsrc="22.jpg"></a><divclass="b"><ahref="#">我的资料</a><ahref="#">注销</a></div></div><divclass="iconsright"><iclass="fafa-commenting-o"aria-hidden="true">5</div><divclass="iconsright"><iclass="fafa-bell-o"aria-hidden="true"></div></div><divclass="pg-content"><divclass="menuleft">a</div><divclass="contentleft"><div>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</div></div></div><divclass="pg-footer"></div></body></html>

效果如下

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。