web程序设计（6）——Flex和Grid布局

最新推荐文章于 2023-03-22 18:23:35 发布

My_summers

最新推荐文章于 2023-03-22 18:23:35 发布

阅读量887

点赞数 2

分类专栏： Web 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44164249/article/details/103929043

版权

Web 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

实验要求

使用Grid或是flex布局技术实现一张弹性的川大主页（www.scu.edu.cn）
在这里插入图片描述

实验目的

熟练掌握flex和Grid布局

实验内容

首先设置一个大容器container,将container的布局设为grid,即把disaplay设为grid,按照基本操作流程，也就是
【把display设为grid;
通过grid-template-columns,grid-template-rows设置布局区域的行和列的大小;
通过grid-column和grid-row定义容器子元素（grid-item）的位置】
由于这次页面版面结构比较清晰，可以分为3列，6行的结构，所以可以使用grid-template-areas,这样各个项目在网页的位置就基本解决了。
CSS:

.container {
            display: grid;
            width: 80%;
            height: 1200px;
            grid-gap: 1.2rem;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1.2fr 0.9fr 3fr 3fr 2.5fr 1fr;
            grid-template-areas:
                "header1 . header2"
                "head head head"
                "main main aside1"
                "main main aside2"
                "content1 content2 content3"
                "footer footer footer";
            margin: 20px auto;
        }

接下来写网页的开头一行，开头最左边和最右边都有元素，也就是第一列的川大logo和第三列的link和登陆表单，将这两个元素的grid-area属性分别设为header1，header2，在container的grid-template-areas中设置它的排版，占据第1.2行的第一和第三列，中间用‘.’表示项目为空。
优化logo图片，链接和表单，链接设置鼠标悬停，点击等状态的不同演示
效果图：
设置导航栏，占据所有列，0.9行（已经在container的grid-template-areas调整好了，只需给它取个grid-area名字就可以），调整背景颜色，在里面放入链接导航到相关界面
效果图：
接下来是content1，第1-2列放置川大宣传图，第3列放置aside1，在这里使用span很方便.这里不需要再采用float来重复定位div的位置，代码简化了。

<div class="aside1">
            <span><a href="" class="f3">焦点新闻</a></span>
            <hr />
            <a href="" class="f1" style="font-size: 18px">激扬青春活力一四川大学2018年运动会举行</a>
            <div class="s3">
                <img src="mainpic.jpg" height="100%" width="100%">
            </div>
        </div>

在这里插入图片描述

部分栏目设置，只要在container使用grid-template-areas,这样解决定位问题了，只需要将栏目的文字链接设置一下属性就可以。
Html:

<div class="content2">
            <span><a href="" class="f3">通知公告</a></span>
            <hr />
            <a href="" class="f1" style="font-size: 18px">关于开展“119消防宣传日”系列安全宣传活动的通知</a><br />
            <a href="" class="f1" style="font-size: 18px">
                关于办理四川大学2019年度机动车出入证的通知</a><br />
            <a href="" class="f1" style="font-size: 18px">四川大学关于组织2019年上半年汉语教师志愿者报名的通知</a><br />
        </div>

CSS：

.f1 {
            text-decoration: none;
            color: black;
            position: relative;
            font-size: 16px;
        }

        .f1:link {
            color: black;
        }

        .f1:hover {
            color: yellow;
        }

        .f1:active {
            color: brown;
        }

效果图：
在这里插入图片描述
6. 尾部页面，占据网页一整行，同样在其grid-area中设置名字，但是，注意到footer里面还有三个元素，对于container来说这三个元素是孙子元素，不能用网格定位，所以还是采用float属性来定位，示例：
CSS:

.g4 {
            float: left;
            position: relative;
            width: 30%;
            padding: 2%;
        }

        .g5 {
            float: left;
            position: relative;
            width: 40%;
            color: whitesmoke;
            font-size: 22px;
        }

        .g6 {
            float: right;
            position: relative;
            width: 30%;
            padding: 1%;
            margin-top: 3%;
        }

效果图：
在这里插入图片描述

实验效果

在这里插入图片描述

实验完整代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>四川大学主页山寨版</title>
	<style>
		/* body {
			margin: 0;
			padding: 0;
		} */

		.wrapper {
			width: 90vw;
			margin: 0.2vw auto;
			display: flex;
			flex-direction: column;
			min-height: 90vh;
		}

		.header {
			width: calc(90vw - 0.4vw);
			margin: 0.2vw;
			flex-grow: 0;
		}
		.header1 {
			float: left;
			width: 33%;
			padding-bottom: 0.5vw;
		}

		.header2 {
			width: 33%;
			float: right;
			padding-bottom: 0.5vw;
		}
		.s1 {
			margin-top: 1vw;
			position: relative;
			background-color: grey;
			height: 25%;
			width: 75%
		}

		.s2 {
			position: relative;
			background-color: grey;
			height: 25%;
			width: 75%
		}

		.s3 {
			height: 50%;
			float: left;
		}

		.index {
			width: calc(85vw - 0.4vw);
			margin: 0.2vw;
			padding-left: 4vw;
			padding-top: 0.4vw;
			padding-bottom: 0.4vw;
			flex-grow: 0;
			background-color: firebrick;

		}

		.main {
			display: flex;
			width: calc(90vw - 0.4vw);
			flex-grow: 1;
		}

		.main>* {
			margin: 0.2vw;
			font-size: 2ex;
			padding: 10px;

		}

		.content {
			width: 70%;
			flex-grow: 1;
			flex-shrink: 1;
		}

		.aside {
			width: 30%;
		}

		.content1 {
			width: 34vw;
		}

		.content2 {
			width: 34vw;
		}

		.content3 {
			width: 30.5vw;
		}

		.footer {
			display: flex;
			width: calc(90vw - 0.4vw);
			margin: 1vw;
			font-size: 5ex;
			background: black;
			color: silver;
			text-align: center;
			flex-grow: 0;

		}

		
		.s4 {
			position: relative;
			width: 30vw;
			padding: 2%;
		}

		.s5 {
			position: relative;
			width: 40vw;
			color: whitesmoke;
			font-size: 22px;
		}

		.s6 {
			position: relative;
			width: 30vw;
		}




		.f1 {
			text-decoration: none;
			color: black;
			position: relative;
			font-size: 16px;
		}

		.f1:link {
			color: black;


		}

		.f1:hover {
			color: yellow;
		}

		.f1:active {
			color: brown;
		}


		.f2 {
			text-decoration: none;
			color: whitesmoke;
			position: relative;
			font-size: 22px;
		}

		.f2:link {
			color: black;


		}

		.f2:hover {
			color: yellow;
		}

		.f2:active {
			color: brown;
		}


		.f3 {
			text-decoration: none;
			color: black;
			position: relative;
			font-size: 22px;
		}

		.f3:link {
			color: black;


		}

		.f3:hover {
			color: yellow;
		}

		.f3:active {
			color: brown;
		}

		.f4 {
			text-decoration: none;
			color: floralwhite;
			position: relative;
			font-size: 14px;
		}

		.f4:link {
			color: black;


		}

		.f4:hover {
			color: yellow;
		}

		.f4:active {
			color: brown;
		}

		.w1 {
			font-size: 14px;
			color: dimgrey;
			position: relative;
		}

		.link1 {
			position: relative;


			margin-left: 8%
		}

		.link2 {
			position: relative;


			margin-left: 8%
		}

		.link3 {
			position: relative;


			margin-left: 8%
		}

		.link4 {
			position: relative;




			margin-left: 3%
		}
	</style>
</head>

<body>
	<div class="wrapper">
		<div class="header">
			<div class="header1">
				<img src="chuanda.png" height="90%" width="90%" alt="logo" />
			</div>
			<div class="header2">
				<div class="s1">
					<span class="link1"><a href="" class="f1">信息公开</a></span>
					<span class="link2"><a href="" class="f1">投稿系统</a></span>
					<span class="link3"><a href="" class="f1">ENGLISH</a></span>
				</div>
				<div class="s2">
					<span class="link1"><a href="" class="f1">信息门户</a></span>
					<span class="link2"><a href="" class="f1">站内查询</a></span>
					<span class="link3"><a href="" class="f1">邮件系统</a></span>

				</div>
				<div class="s3">
					用户名：<input type="text" name="single" value="" maxlength="15" /><br />
					密 码： <input type="password" name="pass" maxlength="15" />
					<input type="button" value="登陆" />
				</div>
			</div>

		</div>
		<div class="index">
			<span class="link4"><a href="" class="f2">学校概况</a></span>
			<span class="link4"><a href="" class="f2">新闻资讯</a></span>
			<span class="link4"><a href="" class="f2">教育教学</a></span>
			<span class="link4"><a href="" class="f2">科学研究</a></span>
			<span class="link4"><a href="" class="f2">师资队伍</a></span>
			<span class="link4"><a href="" class="f2">交流合作</a></span>
			<span class="link4"><a href="" class="f2">招生就业</a></span>
			<span class="link4"><a href="" class="f2">机构设置</a></span>
			<span class="link4"><a href="" class="f2">文化资源</a></span>
		</div>
		<div class="main">

			<div class="content">
				<img src="timg.jpg" height="100%" width="100%" alt="main" />

			</div>
			<div class="aside">
				<div class="aside1">
					<span><a href="" class="f3">焦点新闻</a></span>
					<hr />
					<a href="" class="f1" style="font-size: 18px">激扬青春活力一四川大学2018年运动会举行</a>
					<div class="s3">
						<img src="mainpic.jpg" height="100%" width="100%">
					</div>

				</div>




				<div class="aside2">
					<span><a href="" class="f3">综合新闻</a></span>
					<hr />
					<a href="" class="f1" style="font-size: 18px">教育部批复四川大学立项建设“疾病分子网络前沿科学中心”</a><br />
					<a href="" class="f1" style="font-size: 18px">三金两银！第四届中国“互联网+”大学生创新创业大赛川大学子再创佳绩</a><br />


				</div>
			</div>

		</div>
		<div class="main">
			<div class="content1">
				<span><a href="" class="f3">学术看板</a></span>
				<hr />
				<a href="" class="f1" style="font-size: 18px">天台哲学及其现代意义</a><br />
				<a href="" class="f1" style="font-size: 18px">华严哲学的人生宇宙观</a><br />
				<a href="" class="f1" style="font-size: 18px">Review of Trump Benefit-Cost Analysis to replace Obama
					Clean Power Plan</a><br />


			</div>

			<div class="content2">
				<span><a href="" class="f3">通知公告</a></span>
				<hr />
				<a href="" class="f1" style="font-size: 18px">关于开展“119消防宣传日”系列安全宣传活动的通知</a><br />
				<a href="" class="f1" style="font-size: 18px">
					关于办理四川大学2019年度机动车出入证的通知</a><br />
				<a href="" class="f1" style="font-size: 18px">四川大学关于组织2019年上半年汉语教师志愿者报名的通知</a><br />
			</div>
			<div class="content3">
				<span><a href="" class="f3">热点专题</a></span>
				<hr />
				<img src="theme1.jpg" width="45%" height="40%" alt="main" />
				<img src="theme2.jpg" width="45%" height="40%" alt="main" />
				<img src="theme3.jpg" width="45%" height="40%" alt="main" />
				<img src="theme4.jpg" width="45%" height="40%" alt="main" />
			</div>

		</div>



		<div class="footer">

			<div class="s4">
				<img src="footer-logo.png" width="80%" height="80%" alt="main" />

			</div>
			<div class="s5">
				<span class="w1">（望江校区）成都市一环路南一段24号 邮编：610065</span><br />
				<span class="w1">（华西校区）成都市人民南路三段17号 邮编：610041</span><br />
				<span class="w1">（江安校区）成都市双流区川大路 邮编：610207</span><br />
				<span class="w1"> &nbsp;&nbsp;Copyright©2002-2018四川大学版权所有</span><br />
			</div>

			<div class="s6">
				<span class="link4"><a href="" class="f4">实用信息</a></span>
				<span class="link4"><a href="" class="f4">办事大厅</a></span>
				<span class="link4"><a href="" class="f4">招标投标</a></span><br />
				<span class="link4"><a href="" class="f4">风光人文</a></span>
				<span class="link4"><a href="" class="f4">书记信箱</a></span>
				<span class="link4"><a href="" class="f4">校长信箱</a></span>

			</div>



		</div>



	</div>

</body>

</html>

My_summers

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web程序设计（6）——Flex和Grid布局

实验要求使用Grid或是flex布局技术实现一张弹性的川大主页（www.scu.edu.cn）实验目的熟练掌握flex和Grid布局实验内容首先设置一个大容器container,将container的布局设为grid,即把disaplay设为grid,按照基本操作流程，也就是【把display设为grid;通过grid-template-columns,grid-template...
复制链接

扫一扫

专栏目录