进阶HTML CSS Step2-任务2

这次的任务是创建一个布局，可以选用table，也可以选用div，这里我选用的是div，文末也借鉴了同学的table方法。

我用到了4个大的div分块，其中两个div分块中均含有div子分块：

<div class="no1">
	<img src="img/no1.jpg" style="width:1340px;height:140px;"/>
	<div class="box">
    <div class="left">
        <a href="我的校园.html" title="点击进入我的校园页面"><strong>我的校园</strong></a>
    </div>
    <div class="center">
        <a href="校园生活.html" title="点击进入校园生活页面"><strong>校园生活</strong></a>
    </div>           
    <div class="right">
        <a href="我的家乡.html" title="点击进入我的家乡页面"><strong>我的家乡</strong></a>
    </div>
</div>

<div class="box2">
	<div class="one">
		<strong>计算中心</strong>
	</div>
	<div class="two">
		<strong>资环学院</strong>
	</div>
	<div class="three">
		<strong>信息学院</strong>
	</div>
	<div class="four">
		<strong>动科学院</strong>
	</div>
</div>

用浮动模式float可实现多个div分块并列一行，height与line-height的值相同时可实现文字在div分块中垂直居中：

<style>
            .box {border:2px black solid; width:400px;height:120px;}
            .box div { float:left;}
            .box .left {border-right:5px white solid;width:300px; 
                        height:80px;line-height:80px;background:turquoise;}
            .box .center {border-right:5px white solid;width:300px; 
                        height:80px;line-height:80px;background:turquoise;}
            .box .right {border-right:5px white solid;width:730px; 
                        height:80px;line-height:80px;background:turquoise;}
</style>

绝对定位和相对定位结合可以实现两个div分块的相对位置的分布（父元素设置position：relative ，子元素设置position：absolute ； top：**px ； left：**px；）实现子元素相对父元素的顶端**px，左端**px：

<style>
            .box2{float:left;position:relative;}
            .box2 .one {border-top:5px white solid;width:350px; 
                        height:95px;line-height:95px;background:royalblue;}
            .box2 .two {border-top:5px white solid;width:350px; 
                        height:95px;line-height:95px;background:royalblue;}            
            .box2 .three {border-top:5px white solid;width:350px; 
                        height:95px;line-height:95px;background:royalblue;}
            .box2 .four {border-top:5px white solid;width:350px; 
                        height:95px;line-height:95px;background:royalblue;}            
                 
</style>
<style>
            .box3{position: absolute;top:232px;left:363px;}

利用flex流动布局，实现子div在父元素div中的垂直居中 display：flex；align-items：center；：

 <style>
            .box3{position: absolute;top:232px;left:363px;}
            .box3{border-top:5px white solid;width:985px; 
                        height:395px;background:royalblue;
                        display:flex;                     
                        align-items:center;}                
            .box4{line-height:50px;}
 </style>

附上源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的网站</title>
		<style>
		
			<style>
            .box {border:2px black solid; width:400px;height:120px;}
            .box div { float:left;}
            .box .left {border-right:5px white solid;width:300px; 
                        height:80px;line-height:80px;background:turquoise;}
            .box .center {border-right:5px white solid;width:300px; 
                        height:80px;line-height:80px;background:turquoise;}
            .box .right {border-right:5px white solid;width:730px; 
                        height:80px;line-height:80px;background:turquoise;}
            </style>
            <style>
            .box2{float:left;position:relative;}
            .box2 .one {border-top:5px white solid;width:350px; 
                        height:95px;line-height:95px;background:royalblue;}
            .box2 .two {border-top:5px white solid;width:350px; 
                        height:95px;line-height:95px;background:royalblue;}            
            .box2 .three {border-top:5px white solid;width:350px; 
                        height:95px;line-height:95px;background:royalblue;}
            .box2 .four {border-top:5px white solid;width:350px; 
                        height:95px;line-height:95px;background:royalblue;}            
                 
            </style>
            <style>
            .box3{position: absolute;top:232px;left:363px;}
            .box3{border-top:5px white solid;width:985px; 
                        height:395px;background:royalblue;
                        display:flex;                     
                        align-items:center;}                
            .box4{line-height:50px;}
            </style>
		</style>
			
	</head>
	<body>
		<div class="no1">
			<img src="img/no1.jpg" style="width:1340px;height:140px;"/>
		<div class="box">
            <div class="left">
            	<a href="我的校园.html" title="点击进入我的校园页面"><strong>我的校园</strong></a>
            </div>
            <div class="center">
            	<a href="校园生活.html" title="点击进入校园生活页面"><strong>校园生活</strong></a>
            </div>           
            <div class="right">
            	<a href="我的家乡.html" title="点击进入我的家乡页面"><strong>我的家乡</strong></a>
            </div>
        </div>
		<div class="box2">
			<div class="one">
			<strong>计算中心</strong>
			</div>
			<div class="two">
			<strong>资环学院</strong>
			</div>
			<div class="three">
			<strong>信息学院</strong>
			</div>
			<div class="four">
			<strong>动科学院</strong>
			</div>
		</div>
		<div class="box3">
			<div class="box4">
			<form>
				用户名：
				<input type="text" name="myName">
				<br>
				密码：&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="password" name="myPassword">
				<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="submit"  value="确定" name="submit" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="reset"  value="重置" name="reset" />
			</form>
			</div>
		</div>
	</body>
</html>

我的实现界面：

借鉴 table：


<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>简单校园页面</title>

		<style type="text/css">

			body{font-family:"microsoft yahei";}

			img{width:516px;height:100px}

			td{background:dodgerblue;}

			div{text-align:left;}

			.ad{

				font-weight:bold;

				width: 299px;

				border-width:1px;

				border-style:solid;

				border-color:gainsboro;

				}

			.bd{

				font-weight:bold;

				width:130px;

				height: 70px;

				border-width:1px;

				border-style:solid;

				border-color:gainsboro;

				｝

		</style>

	</head>

	<body>

		<img src="41.jpg" alt="找不到图片">

		<br>

		<table class="ta">

			<tbody>

				<tr>

					<td class="ad" style="background:lightgreen;width:100px;height: 50px;">我的校园</td>

					<td class="ad" style="background:lightgreen;width:100px;height: 50px;">校园生活</td>

					<td class="ad" style="background:lightgreen">我的家园</td>

				</tr>

			</tbody>

		</table>

		<table class="ta">

			<tbody>

				<tr>

					<td class="bd">计算中心</td>

					<td class="bd" rowspan="4" style="width:375px;height:70px">

						<form method="post" action="index.html">

							<label>用户名：</label>&nbsp;&nbsp;

							&nbsp;&nbsp;&nbsp;&nbsp;

							<input type="text" name="用户名">

							<br><br>

							<label>

								<span style="letter-spacing:15px;">密码：</span>

							</label>

							<input type="password" name="密码">

							<br><br>

							<div>

								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

								<input type="submit" value="确定" name="submitBtn">

								&nbsp;&nbsp;&nbsp;&nbsp;

								<input type="reset" value="重置" name="resetBtn">

							</div>

						</form>

					</td>

				</tr>

				<tr>

					<td class="bd">资环学院</td>

				</tr>

				<tr>

					<td class="bd">信息学院</td>

				</tr>

				<tr>

					<td class="bd">动科学院</td>

				</tr>

			</tbody>

		</table>

	</body>

</html>

进阶HTML CSS Step2-任务2

猜你喜欢