html练习1

最新推荐文章于 2024-06-14 08:20:46 发布

桜島麻衣ちゃん

最新推荐文章于 2024-06-14 08:20:46 发布

阅读量119

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_43595306/article/details/104121594

版权

<!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>

桜島麻衣ちゃん

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html练习1

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .all { display...
复制链接

扫一扫