前端页面布局，初步搭建论坛架子学习笔记

<!DOCTYPE html>
<html>
	<head>

		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div class="divbkg">
			<div class="divside">
				<p >个人信息</p>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
				<li>aaaaaaaaa</li>
			
			</div>
			<div>
				<div class="divsignin">
					<div style="float: left;color: chartreuse;"> 
						个人中心|钱包|微信二维码|支付宝
					</div>
					<div style="float: right;">
						登录|登出
					</div>
					
				</div>
				<div class="divcatalog">
					目录
				</div>
				
			</div>
			<div class="slideshow">
				轮播图1
			</div>
		
			<div class="divpromote">
				<p>推广</p>
				<p>推广</p>
				<p>推广</p>
				<p>推广</p>
				<p>推广</p>
				<p>推广</p>
				<p>推广</p>
				<p>推广</p>
				<p>推广</p>
				<p>推广</p>
				<p>推广</p>
				<p>推广</p>
			</div>
			
		</div>
		
	</body>
	<style>
		/* 样式分为id和class样式 ，对应div定义#和. */
		
		.divside{
			width: 10%;
			height: 600px;
			float: left;
			border-style: solid;
		}
		.divcatalog{
			width: 90%;
			height: 50px;
			float: left;
			text-align:left;
			padding-right: 20px;
		}
		.divsignin{
			width: 90%;
			height: 30px;
			float: left;
			text-align:right;
			padding-right: 20px;
			/* margin-right: 1px; */
		}
		.divpromote{
			width: 10%;
			height: auto;
			/* 设置到side下面 */
			clear: both;
			border-style: solid;
		}
		.slideshow{
			text-align: center;
			background-color: aqua;
			width: 90%;
			height: 500px;
			float: left;
		}
		div{
			/*
			 margin:  可用设置两个或者多个div之间的间隔大小
			 border:  div的边界设置,不影响div尺寸的大小
			 padding: div的填充物，div里的内容会随着padding的边距大小设置而变化
			 
			 */
			position: relative;
			/* float: left; */
			color: black; 
			background: gray;
			/* margin: 1px 1px; */
			/* border: red 1px ; */
			border: black 1px;
			/* 固定大小 */
			box-sizing: border-box;
			/* dashed:虚线 solid:实线 */
			/* border-style: solid; */
			/* width: 10%;
			height: 200px; */
			/* 设置div半透明 */
			/* filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5; */
		}
		.divbkg{
			width: 100%;
			height: auto;
			background-image: url(img/back1.jpg);
		}
	
	</style>
</html>
Code神之手
发布了109 篇原创文章 · 获赞 2 · 访问量 5703
私信关注
前端页面布局，初步搭建论坛架子学习笔记

猜你喜欢
