0
点赞
收藏
分享

微信扫一扫

java培训记录Day06 2022/3/19星期六

北冥有一鲲 2022-03-22 阅读 36
html前端

目录

今日简述

今日新技能

1.grid布局

基本概念

display: grid 

grid-template-columns 属性，grid-template-rows 属性

auto-fill（自动填充）

fr 关键字

设置行间距和列间距

grid-template-areas

设置单元格内容的水平位置和垂直内容

设置内容区域在容器里面的水平位置和垂直位置

今日任务

今日代码​

今日简述

第六天了，今天 小雨转中雨，13°~5°。

上午9.20了依旧没见到一个老师，难道他们双休，我们997？？？

9.30开搞B站

下午：AX210网卡驱动官网地址

英特尔® Wi-Fi 6E AX210 (intel.cn)

今日新技能

1.grid布局

基本概念

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，Grid 布局只对项目生效。

display: grid 

指定一个容器采用网格布局。

div {
      display: grid;
    }

grid-template-columns 属性，grid-template-rows 属性

grid-template-columns属性定义每一列的列宽

grid-template-rows属性定义每一行的行高。

.container {
     display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    //使用百分比
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    //使用repeat
    //repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
    grid-template-columns: repeat(2, 100px 20px 80px);
    //使用auto-fill    自动填充
    grid-template-columns: repeat(auto-fill, 100px);
    //使用fr 关键字
    //如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
    grid-template-columns: 1fr 1fr;
    //fr可以与绝对长度的单位结合使用，这时会非常方便。
    grid-template-columns: 150px 1fr 2fr;
    //使用minmax
    //minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数分别为最小值和最大值            
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);
    //使用auto关键字 表示由浏览器自己决定长度
    grid-template-columns: 100px auto 100px;
    }

auto-fill（自动填充）

.container {
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px);
    }

fr 关键字

如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      //fr可以与绝对长度的单位结合使用，这时会非常方便。
      grid-template-columns: 150px 1fr 2fr;
    }

设置行间距和列间距

grid-row-gap属性设置行与行的间隔（行间距），

grid-column-gap属性设置列与列的间隔（列间距）。

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式（先行后列）

grid-template-areas

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。

grid-template-areas属性用于定义区域。

使用时需要先在项目中设定名字

.box1{
     grid-area: a;
    }

示例

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

如果某些区域不需要利用，则使用"点"（.）表示。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

设置单元格内容的水平位置和垂直内容

justify-items属性设置单元格内容的水平位置（左中右）

align-items属性设置单元格内容的垂直位置（上中下）

简写形式;：place-items

这两个属性的写法完全相同，都可以取下面这些值。

.container {
  justify-items: start;
}

设置内容区域在容器里面的水平位置和垂直位置

justify-content属性是整个内容区域在容器里面的水平位置（左中右）

align-content属性是整个内容区域的垂直位置（上中下）

简写形式：place-content

这两个属性的写法完全相同，都可以取下面这些值。

start - 对齐容器的起始边框。

end - 对齐容器的结束边框。

center - 容器内部居中。

stretch - 项目大小没有指定时，拉伸占据整个网格容器。

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

今日任务

1.把模拟B站的网页搞定

今日代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/1.css"/>
		<style type="text/css">
			
			/* div{
				border: 1px solid red;
			} */
			:root{
				--text1:#18191C;
				--background1:#F6F7F8;
			}
			/* 去掉a标签的下划线 */
			/* a{
				text-decoration: none;
				
			}
			 */
			/* .main{border: none;} */
			.head{
				width: 100%; height: 155px;
				background: url(img/background1.jpg); background-position:0px 200px ;background-size:cover;}
			/* 顶部左边 */
			.head_left{width: 480px;height: 64px;float: left;}
			.head_left li{line-height: 50px; float: left;}
			.head_left li a{color: #FFF; font-size: 14px;text-decoration: none;margin-left: 21px;}
			/* 顶部中间 */
			.head_mid{width: 715px;height: 64px; float: left;}	
			.head_mid_search{height:44px ;width:500px ;display: flex; flex-direction: row;margin: 10px auto;background-color: #F1F2F3;border: 1px solid #e3e5e7; border-radius: 10px;}
			.head_mid div input{width: 450px;height: 40px; border: 0px;border-radius: 10px;background-color: #F1F2F3; font-size: 20px;}
			.head_mid_search_icon{width: 32px;height: 32px;margin: 4px;}
			/* 设置鼠标放到搜索框，颜色的变化 */
			.head_mid_search:hover {background-color: white;}
			.input:hover{background-color: white;}
			/* 顶部右边 */
			.head_right{width: 480px;height: 64px; float: left;display: flex;flex-direction: row;justify-content: center;}
			.head_right li{display: flex;flex-direction: column;width: 65px;margin-top: 8px; justify-content: center;}
			.head_right a{display: flex;flex-direction: column ;width: 50px;justify-content: center;
			/* 设置——去掉链接的额外效果，并添加想要的效果 */
				color: #FFF; font-size: 14px;text-decoration: none;}
			.head_right a img{margin-left: 10px;height: 22px;width: 21px;}
			
			/* 身体部分 */
			.body{width: 1500px;height: 600x; margin: 0 auto;}
			/* 身体——导航栏 */
			.navigation{width: 1498px;height: 120px; display: flex;flex-direction: row;justify-content: space-around; align-items: center;}
			/* 导航栏——左边 */
			/* 使用Flex布局 */
			.navigation_left{width: 210px;height: 72px;}
			.navigation_left ul{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-around;}
			.navigation_left ul li{width: 200;height: 70px; display: flex;flex-direction: row;align-items: center;}
			.navigation_left ul li a{display: flex;flex-direction: column;align-items: center;color: #18191C; font-size: 14px;text-decoration: none;font-weight: 700;}
			.navigation_left ul li a img{width: 40px;height: 40px;}
			.navigation_left ul li a span{}
			/* 导航栏——中间 */
			/* 尝试使用grid布局 */
			/* 中间由一个div直接包裹24个a标签 */
			.navigation_mid{width: 970px;height: 72px;
				display:grid;grid-auto-flow: column;grid-template-rows: repeat(2,1fr);}
			.navigation_mid a{width: 72px;height: 30px;line-height: 30px;text-align: center;background-color:#CCFFFF;color: #18191C; font-size: 14px;text-decoration: none;font-weight: 700;
							border: none;border-radius: 7px;}
			.navigation_mid a:hover{background-color: #CCFF66;}
			/* 导航栏——右边 */
			.navigation_right{width:260px ;height: 72px;display: flex;}
			.navigation_right ul{display: flex;flex-direction: row;width:260px ;height: 72px;flex-wrap: wrap;justify-content: space-around;align-items: center;}
			.navigation_right ul li{display: flex;flex-direction: row;width: 78px;height: 32px;}
			.navigation_right ul li a{text-decoration: none;flex-direction: row;color: #18191C; font-size: 14px;text-decoration: none;font-weight: 700;}
			.navigation_right ul li a img{width: 14px;height: 14px;}
			/* 身体——主要内容 */
			.content1{width: 1498px;height: 410px;display: flex;}
			/* 内容1——左边——大图片 */
			.content1_left{width: 570px;height: 400px;display: flex;flex-direction: column;}
			.content1_left img{width: 565px;height: 312px;border: none;border-radius: 7px 7px 0 0 ;}
			.content1_img_bto{background-color: rgb(100,63,51) ;width: 565px;height: 100px; border: none;
							display: flex;flex-direction:row ;
							/* box-shadow: 0px -30px 80px 10px rgba(100,63,51,1) outset; */
							border-radius: 0 0 7px 10px;}
			.content1_img_bto span{font-size: 20px;font-weight: 400px;line-height: 25px;color: #fff;margin: 20px; 20px}
			/* 内容1——右边		八个图片+介绍 */
			/* 外层grif里面flex */
			.content1_right{width: 920px;height: 400px;display: flex;}
			.content1_right ul{display: flex;flex-direction: row;flex-wrap: wrap;}
			.content1_right ul li{display: flex;flex-direction: column; width: 230px;height: 190px;}
			.content1_right ul li a{text-decoration: none;}
			.content1_right ul li a:hover{color: #00FFFF;}
			.content1_right ul li img{width: 220px;height: 122px;border-radius: 7px;}
			.content1_right_a1{color: var(--text1); font-size: 15px;}

			/* 身体——广告部分 */
			.AD{width: 1498px;height: 255px;}
			.AD_icon{height: 40px; font-size: 24px;font-weight: 400px;color: var(--text1);display: flex;flex-direction: row;}
			
			.AD_content ul {display: flex;flex-direction: row;justify-content: space-between;}
			.AD_content ul li {height: 210px; }
			.AD_content ul li a{text-decoration: none;}
			.AD_content ul li a:hover{color: #008B8B;}
			.AD_content ul li a img {width: 290px;height: 160px;border: none; border-radius: 7px;}
			
			
			
			/* 底部 */
			.foo{width: 100%; height: 200px; background-color: var(--background1);}
			.foo_center{width: 1200px;height:120px ;margin: 20px auto;padding: 30px;}
			.foo_left{width:350px ;height: 100px;float: left;margin-right: 30px;margin-left: 30px;color: var(--text1);font-size: 14px;}
			.foo_left p{display: inline-block; font-size: 16px;}
			.foo_left ul li{float: left;margin: 10px 14px 0px 0px;}
			.foo_left ul li a{text-decoration:none;color:#333;}
			.foo_middle{width:350px ;height: 100px;float: left;margin-right: 30px;}
			.foo_right{width:350px ;height: 100px;float: left;}
			
			/* 去掉搜索框点击后的边框 */
			input {outline:none;border:none;outline-color: "red";}
		</style>
	</head>
	<body>
		<div class="main">
			<!-- 最顶部的导航 -->
			<div class="head">
				<!-- 顶部左边 -->
				<ul class="head_left">
					<li><a href="#">首页 </a></li>
					<li><a href="#">番剧 </a></li>
					<li><a href="#">直播 </a></li>
					<li><a href="#">游戏中心 </a></li>
					<li><a href="#">会员购 </a></li>
					<li><a href="#" class="comic">漫画 </a></li>
					<li><a href="#">赛事 </a></li>
					<li><a href="#">下载APP </a></li>
				</ul>
				<!-- 顶部中间 -->
				<div class="head_mid">
					<div class="head_mid_search">
						<input type="search" class="input"  placeholder="这里是搜索框" x-webkit-speech="" x-webkit-grammar="builtin:search" lang="zh-CN">
						<div class="head_mid_search_icon">
							<a href="#">
								<img src="img/搜索.svg" width="32px" height="32px">
							</a>
							
						</div>
					</div>
				</div>
				<!-- 顶部右边 -->
				<ul class="head_right">
					<li>
						<a href="#"> 
							<img src="img/会员.svg" >
							<span >大会员</span>
						</a>
					</li>
					<li>
						<a href="#"> 
							<img src="img/会员.svg" >
							<span >大会员</span>
						</a>
					</li>
					<li>
						<a href="#"> 
							<img src="img/会员.svg">
							<span >大会员</span>
						</a>
					</li>
					<li>
						<a href="#"> 
							<img src="img/会员.svg">
							<span >大会员</span>
						</a>
					</li>
					<li>
						<a href="#"> 
							<img src="img/会员.svg">
							<span >大会员</span>
						</a>
					</li>
					<li>
						<a href="#"> 
							<img src="img/会员.svg">
							<span >大会员</span>
						</a>
					</li>
				</ul>
			</div>
			<!-- 身体部分——开始 -->
			<div class="body">
				<!-- 身体——导航条 -->
				<div class="navigation">
					<!-- 导航栏分为三个部分 -->
					<!-- 导航栏——左边 -->
					<div class="navigation_left">
						<ul>
							<li>
								<a href="#">
									<img src="img/动态.svg" >
									<span>动态</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/动态.svg" >
									<span>热门</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/动态.svg" >
									<span>频道</span>
								</a>
							</li>
						</ul>
						
					</div>
					<!-- 导航栏——中间 -->
					<div class="navigation_mid">
						<a href="#">番剧</a>
						<a href="#">国创</a>
						<a href="#">综艺</a>
						<a href="#">动画</a>
						<a href="#">鬼畜</a>
						<a href="#">舞蹈</a>
						<a href="#">娱乐</a>
						<a href="#">科技</a>
						<a href="#">美食</a>
						<a href="#">汽车</a>
						<a href="#">运动</a>
						<a href="#">VLOG</a>
						<a href="#">电影</a>
						<a href="#">电视剧</a>
						<a href="#">纪录片</a>
						<a href="#">游戏</a>
						<a href="#">音乐</a>
						<a href="#">影视</a>
						<a href="#">知识</a>
						<a href="#">资讯</a>
						<a href="#">生活</a>
						<a href="#">时尚</a>
						<a href="#">动物圈</a>
						<a href="#">更多</a>
					</div>
					<!-- 导航栏——右边 -->
					<div class="navigation_right">
						<ul>
							<li>
								<a href="#">
									<img src="img/专栏.svg" >
									<span>专栏</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/专栏.svg" >
									<span>活动</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/专栏.svg" >
									<span>社区中心</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/专栏.svg" >
									<span>直播</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/专栏.svg" >
									<span>课堂</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/专栏.svg" >
									<span>新歌热榜</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 身体——主要内容 -->
				<div class="content1">
					<!-- 分成左右两部分 -->
					<!-- 内容1——左边 -->
					<div class="content1_left">
						<img src="img/B站1.png"  >
						<div class="content1_img_bto">
							<span>瀚海沙漠遇悍匪，郡主又美救英雄</span>
						</div>
					</div>

					<!-- 内容1——右边 -->
					<div class="content1_right">
						<ul>
							<li>
								<a href="#" class="content1_right_a1">
									<img src="./img/B2.png" >
									<h3>
										谁动了我的注册表？注册表比对分析工具 
									</h3>
									
								</a>
								<a href="#">
									<span>有限的未知 &nbsp; &nbsp;&nbsp;· 2.28</span>
								</a>
							</li>
							<li>
								<a href="#" class="content1_right_a1">
									<img src="./img/B2.png" >
									<h3>
										谁动了我的注册表？注册表比对分析工具
									</h3>
									
								</a>
								<a href="#">
									<span>有限的未知 &nbsp; &nbsp;&nbsp;· 2.28</span>
								</a>
							</li>
							<li>
								<a href="#" class="content1_right_a1">
									<img src="./img/B2.png" >
									<h3>
										谁动了我的注册表？注册表比对分析工具 
									</h3>
									
								</a>
								<a href="#">
									<span>有限的未知 &nbsp; &nbsp;&nbsp;· 2.28</span>
								</a>
							</li>
							<li>
								<a href="#" class="content1_right_a1">
									<img src="./img/B2.png" >
									<h3>
										谁动了我的注册表？注册表比对分析工具 
									</h3>
									
								</a>
								<a href="#">
									<span>有限的未知 &nbsp; &nbsp;&nbsp;· 2.28</span>
								</a>
							</li>
							<li>
								<a href="#" class="content1_right_a1">
									<img src="./img/B2.png" >
									<h3>
										谁动了我的注册表？注册表比对分析工具 
									</h3>
									
								</a>
								<a href="#">
									<span>有限的未知 &nbsp; &nbsp;&nbsp;· 2.28</span>
								</a>
							</li>
							<li>
								<a href="#" class="content1_right_a1">
									<img src="./img/B2.png" >
									<h3>
										谁动了我的注册表？注册表比对分析工具 
									</h3>
									
								</a>
								<a href="#">
									<span>有限的未知 &nbsp; &nbsp;&nbsp;· 2.28</span>
								</a>
							</li>
							<li>
								<a href="#" class="content1_right_a1">
									<img src="./img/B2.png" >
									<h3>
										谁动了我的注册表？注册表比对分析工具 
									</h3>
									
								</a>
								<a href="#">
									<span>有限的未知 &nbsp; &nbsp;&nbsp;· 2.28</span>
								</a>
							</li>
							<li>
								<a href="#" class="content1_right_a1">
									<img src="./img/B2.png" >
									<h3>
										谁动了我的注册表？注册表比对分析工具 
									</h3>
									
								</a>
								<a href="#">
									<span>有限的未知 &nbsp; &nbsp;&nbsp;· 2.28</span>
								</a>
							</li>
						</ul>
						
						
						
						
					</div>
				</div>
				<!-- 推广 -->
				<div class="AD">
					<div class="AD_icon">
						<img src="img/宣传推广.svg" width="34px" height="34px" >
						<span>&nbsp;推广</span>
					</div>
					
					<div class="AD_content">
						<ul>
							<li>
								<a href="#">
									<img src="img/B3.png" >
									<h3>每天建模一小时，自由接单做副业！</h3>
								</a>
								<a href="#">
									<span>广告位招租！</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/B3.png" >
									<h3>每天建模一小时，自由接单做副业！</h3>
								</a>
								<a href="#">
									<span>广告位招租！</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/B3.png" >
									<h3>每天建模一小时，自由接单做副业！</h3>
								</a>
								<a href="#">
									<span>广告位招租！</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/B3.png" >
									<h3>每天建模一小时，自由接单做副业！</h3>
								</a>
								<a href="#">
									<span>广告位招租！</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/B3.png" >
									<h3>每天建模一小时，自由接单做副业！</h3>
								</a>
								<a href="#">
									<span>广告位招租！</span>
								</a>
							</li>
							
						</ul>
					</div>
				</div>
			</div>
			<!-- 底部 -->
			<div class="foo">
				<div class="foo_center">
					<div class="foo_left">
						<p>bilibili</p>
						<ul>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">联系我们</a></li>
							<li><a href="#">用户协议</a></li>
							<li><a href="#">加入我们</a></li>
							<li><a href="#">友情链接</a></li>
							<li><a href="#">隐私协议</a></li>
							<li><a href="#">bilibili认证</a></li>
							<li><a href="#">Investor Relations</a></li>
						</ul>
					</div>
					<div class="foo_middle">
						
					</div>
					<div class="foo_right">
						
					</div>
					
				</div>
				
			</div>
		</div>
	</body>
</html>

举报

相关推荐

星期六

系统Python后端开发

java笔记Day06

javajava-ee开发语言

Java学习day06

java开发语言后端

Java自学 day06

java

Java基础day06

java开发语言

Day06

java

java学习笔记day06

java后端

Java阶段三Day06

vue.js前端javascript

Day06 方法

java开发语言后端

day06 笔记

java
0 条评论