html练习1
2020-06-05 05:11
309 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .all { display:flex; flex-direction:column; } .head{ width: 100%; height: 80px; border: black solid 2px; } .main{ width: 100%; display:flex; height: 300px; flex-direction:row; margin: 10px auto; } .logo { width: 60px; height: 20px; margin: 10px; border: black solid 2px; text-align: left; } .name { width: 100px; height: 20px; text-align: right; margin-bottom: 10px; margin-right: 10px; border: black solid 2px; float: right; } .footer { width: 100%; height: 20px; text-align: center; border: black solid 2px; } .content { width: 100%; height: 100%; margin-right: 10px; border: black solid 2px; } .aside { width: 200px; border: black solid 2px; height: 20px; } </style> </head> <body> <div class="all"> <div class="head"> <div class="logo">Logo</div> <div class="name">用户名</div> </div> <div class="main"> <div class="content">content-自适应宽度</div> <div class="aside">aside-定宽 200px</div> </div> <div class="footer">footer</div> </div> </body> </html>
相关文章推荐
- HTML 通知公告练习
- #小练习 SGMLParser 解析 HTML
- 11-22-HTML-canvas太极练习
- Html&css提升01-表单练习
- HTML练习---网易邮箱登陆
- 第四章html上机练习5 制作团队风采页面
- HTML嵌入PHP小练习
- HTMl上机练习5
- HTML第8章上机练习1
- 【练习】HTML+CSS
- html常用标签认识与练习(二)
- Html/CSS登陆界面个人练习
- HTML&CSS----练习隐藏导航栏(初级)
- html练习
- html 中 table 的练习 关于合并单元格
- 12-27作业:HTML按钮练习
- HTML+CSS学习时课本上一些练习
- 第四章html上机练习4 开心餐厅介绍页面
- HTML第七章上机练习1
- 智能专项练习--HTML+CSS+bootstrap(2)