进阶HTML CSS Step2-任务2

最新推荐文章于 2024-06-30 09:56:50 发布
最新推荐文章于 2024-06-30 09:56:50 发布
阅读量566 收藏
点赞数
分类专栏： 前
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LH_1999/article/details/81368879
版权

这次的任务是创建一个布局，可以选用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>

北极熊的芒果糖
关注
专栏目录
CSS中的steps()函数表现
黑夜来袭Z
09-08 2759
step(arg1,arg2) arg1:是一个数字表示动画的状态从0%到100%经历多少步。 arg2：值可以为start或end,默认为end。 情形1：end表示在一个周期的结尾赋值，当值为end时会由默认状态0%到第一次变更值作为第一步，并忽略掉最后一步。 该过程分为以下几个阶段: 第一阶段：默认状态到第一次赋值之前(不显示文字，此时的width大小为0) 第二阶段：第一次赋值到第二次赋值之前(显示"前"，此时的width大小为20px) 第三阶段:第二次赋值到第三次赋值之前(显示".
【译】css动画里的steps()用法详解
weixin_33962621的博客
09-29 1222
原文地址：http://designmodo.com/steps-c...原文作者：Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑。一开始我不清楚怎样使用它，于是搜索出了两个案例：typing demo by Lea Verou 和 animated sprite sheet by Simurai...
【CSS】深入理解CSS 的steps()函数
最新发布
读心悦
06-30 345
steps()函数为CSS动画提供了一种步进的方式，使得动画可以在离散的步骤之间变化，这在许多动画场景中都非常有用。通过合理地使用steps()函数，你可以创建出更加有趣和吸引人的动画效果。
css【详解】steps()函数
朝阳39的博客
10-12 859
steps(number, position) number 整数值，表示把动画分成了多少段。 position 可选参数，表示动画跳跃执行是在时间段的开始还是结束。 —— start 在时间段的开头处跳跃 —— end 在时间段的结束处跳跃 动画效果见 https://demo.cssworld.cn/new/5/4-7.php —— step-start等同于steps(1,start)，表示“一步到位”； —— step-end等同于steps(1,end)或者steps(1)，表示“
CSS3动画——steps函数
angry_rooster的博客
02-12 4492
CSS3动画中应用的定时函数（timing function）常用的有内置关键字linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end，另外还有两个内置的缓动函数cubic-bezier(), steps() 其中steps()这个函数是将整个动画过程分为指定的步数（在动画过程中插值，显示指定位置的快照），并在一个动画循环的时间内按照一定规则走完划分的步数。常用的场景是将多个动画帧组合成连续的动态效果，如下北极熊动画 实现北极熊奔
大数据技术之_19_Spark学习_02_Spark Core 应用解析+ RDD 概念 + RDD 编程 + 键值对 RDD + 数据读取与保存主要方式 + RDD 编程进阶 + 实际案例演示
黑泽君
04-26 1374
大数据技术之_19_Spark学习_02_Spark Core 应用解析+ RDD 概念 + RDD 编程 + 键值对 RDD + 数据读取与保存主要方式 + RDD 编程进阶 + 实际案例演示
python初中级开发面经(持续更新2020-3-7)
weixin_45163798的博客
03-12 6647
前言：欢迎各位留言补充遗漏的知识点，本文适用于初中级开发求职~ 文章目录0. 开发者(程序猿)tip(杂)1.游戏后端架构设计1.1 设计方案1.2 web服务架构1.3 运维监控2 面试控场2.1 技术面2.1.1 专业能力2.1.2 综合素质2.2 leader面2.3 HR面2.4 自我介绍2.5 职业规划2.6 离职原因（丧命题）2.7 公司认同3 python3.1 语言特点3.1.1 ...
Spring Boot入门到精通（超详细）
qq_41627024的博客
06-06 6099
本文主要讲了Springboot从基础到高阶涉及到的相关技术，让读者能够快速入门，深入了解Springboot框架，并能够熟练的使用springboot，快速提升个人技能。
Spider爬虫笔记[更新中...]
qq_42858191的博客
08-31 3725
urllib urllib库是python中最基本的一个网页请求库，可以模拟浏览器行为，向指定的服务器发送一个请求，并可以保存服务器返回的数据。 request下的urlopen()和urlretrieve() urlopen() from urllib import request # urlopen() 打开一个网站 resp = request.urlopen('http://www.baidu.com') # read()读取内容 print(resp.read()) # read()读取内容 #
压力测试 JMeter 性能监控 jvisualvm 性能调优
chengqingshihuishui的博客
08-06 2315
1、性能指标 1.1 基本概念 TPS：系统每秒处理的交易数 1.2 行业要求 金融行业：1000TPS~50000TPS，不包括互联网化的活动 保险行业：100TPS~100000TPS，不包括互联网化的活动 制造行业：10TPS~5000TPS 互联网电子商务：10000TPS~10000000TPS 互联网中型网站：1000TPS~50000TPS 互联网小型网站：500TPS~10000TPS 2、JMeter 直接官网下载下来解压后，进入bin/jmeter.bat 即可
进阶HTML CSS Step3-任务1
LH_1999的博客
08-12 419
tep3： 学习CSS3 要求：了解CSS3与CSS2.1的区别，了解CSS3的几大重要模块 重点掌握： 选择器、盒子模型（使用&lt;div&gt;布局） 任务1：使用盒子模型创建如下图所示布局： 经过这次学习，已经可以较为熟练的使用div分块及CSS3，此次任务比较简单，源代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...
DIV+CSS的StepByStep步骤导航栏.
weixin_34356310的博客
11-26 188
2019独角兽企业重金招聘Python工程师标准>>> ...
css3中animation的steps分步动画
細水、長流√的专栏
02-28 2599
css的animation中，有一种描述动画变化速率的东西，例如常见的linear,ease-in,ease-out等，这些都是连续的变化，还有一种叫做steps的，它用来描述一种不连续的动画，也就是逐帧动画。如果为end，走的就是1,2,3,4,5。这个图，我相信大家肯定都看过，但是这个图，很容易让人产生误解，steps中的number，指的是走了number步，但是实际上呢，却是将整个动画分成了number+1份。设置为end，丢弃最后一个，只播放1，2，3，4，5，6，可以完整播放。
html5 input step,HTML Input Time step用法及代码示例
weixin_31433527的博客
06-15 401
属性值：它包含一个值，即数字，用于指定“时间”字段的合法数字间隔。seconds:当秒数达到60时，使用数字“1”，“2”，“10”或“30”。milliseconds:它以(。)开头，当毫秒数达到1000时，使用数字“.010”，“.050”，“.20”。返回值：它返回一个字符串值，该字符串值表示合法的数字间隔，以秒或毫秒为单位。示例1：本示例说明了如何返回属性。DOM Input Time s...
HTML 5 step 属性
yin_ping1101的博客
01-22 3721
HTML 5  step 属性 step 属性规定输入字段的合法数字间隔（假如 step="1"，则合法数字应该是 -1、0、1、2，以此类推）。 step 属性可以与 max 以及 min 属性配合使用，以创建合法值的范围。 举例：一小段含step属性的HTML代码： 这小段代码就是限制输入的只能是数字，并且是0-1之间的小数，并设置小数点后面最多有两位小数 注：step、
html中steps属性是什么意思,理解CSS3 Animation中的steps()
weixin_39952502的博客
06-08 860
对CSS3 Animation，相信大家都不陌生了，其有八大属性：animation-name：动画名称animation-duration：规定完成一个周期所花费的时间(秒或毫秒)animation-delay：定义动画开始前等待的时间，以秒或毫秒计。默认值为0animation-iteration-count：规定动画被播放的次数(默认1)animation-play-state：规定动画是否...
团队介绍的HTML-CSS网页模板详解
资源摘要信息: "HTML-CSS-网页模板-团队介绍" 本资源是一个HTML和CSS技术结合制作的网页模板，特别适用于团队介绍页面的设计与实现。该模板主要涉及了HTML（HyperText Markup Language）和CSS（Cascading Style ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值