页面布局练习
Posted eat-too-much
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面布局练习相关的知识，希望对你有一定的参考价值。
简介
页面布局是一个让人头大的问题，今天好好研究一下
参考页面
https://www.runoob.com/try/try.php?filename=tryhtml_layout_divs
https://blog.csdn.net/wkj001/article/details/102881080
code html
<!--
* @Author: your name
* @Date: 2020-04-09 11:54:13
* @LastEditTime: 2020-04-09 14:57:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: incubator-echarts-4.7.0learn est.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<link rel="stylesheet" type="text/css" href="testStyle.css" />
</head>
<body>
<div class="container">
<div class="box">
<div class="header">
<span>header</span>
</div>
<div class="content">
<div class="content_menu">菜单</div>
<div class="content_body">body</div>
<div class="content_footer">footer</div>
</div>
</div>
</div>
</body>
</html>
code css
.box{
clear:both;
width:auto;
margin:0 auto;
height: auto;
text-align: center;
font-size:0;
/* line-height: 60px; */
}
.container{
margin:0 auto;
}
.header{
width:90%;
/* height:30px; */
height:30px;
background: orange;
margin: 0 auto;
font-size: 14px;
}
.header span{
display:block;
text-align: center;
line-height: 30px;
}
.content{
position: relative;
width:100%;
margin:0 auto;
font-size: 0;
}
.content_menu{
/* position: relative; */
width: 20%;
height:480px;
display: inline-flex;
background-color: aqua;
font-size: 14px;;
}
.content_body{
/* position: relative; */
width:70%;
height:480px;
background: olive;
display: inline-flex;
font-size: 14px;;
/* margin-left: 0; */
}
.content_footer{
position: relative;
background: orangered;
width:90%;
margin: 0 auto;
font-size: 14px;;
}
以上是关于页面布局练习的主要内容，如果未能解决你的问题，请参考以下文章
Python练习册 第 0013 题： 用 Python 写一个爬图片的程序，爬 这个链接里的日本妹子图片 :-)，(http://tieba.baidu.com/p/2166231880)(代码片段