java培训记录Day06 2022/3/19星期六（网页布局：grid）
2024-04-30 10:50:58
目录
今日简述
今日新技能
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的网卡到了，先把驱动下好，晚上回去装
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
这两个属性的写法完全相同，都可以取下面这些值。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）。
.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>有限的未知 · 2.28</span></a></li><li><a href="#" class="content1_right_a1"><img src="./img/B2.png" ><h3>谁动了我的注册表？注册表比对分析工具</h3></a><a href="#"><span>有限的未知 · 2.28</span></a></li><li><a href="#" class="content1_right_a1"><img src="./img/B2.png" ><h3>谁动了我的注册表？注册表比对分析工具 </h3></a><a href="#"><span>有限的未知 · 2.28</span></a></li><li><a href="#" class="content1_right_a1"><img src="./img/B2.png" ><h3>谁动了我的注册表？注册表比对分析工具 </h3></a><a href="#"><span>有限的未知 · 2.28</span></a></li><li><a href="#" class="content1_right_a1"><img src="./img/B2.png" ><h3>谁动了我的注册表？注册表比对分析工具 </h3></a><a href="#"><span>有限的未知 · 2.28</span></a></li><li><a href="#" class="content1_right_a1"><img src="./img/B2.png" ><h3>谁动了我的注册表？注册表比对分析工具 </h3></a><a href="#"><span>有限的未知 · 2.28</span></a></li><li><a href="#" class="content1_right_a1"><img src="./img/B2.png" ><h3>谁动了我的注册表？注册表比对分析工具 </h3></a><a href="#"><span>有限的未知 · 2.28</span></a></li><li><a href="#" class="content1_right_a1"><img src="./img/B2.png" ><h3>谁动了我的注册表？注册表比对分析工具 </h3></a><a href="#"><span>有限的未知 · 2.28</span></a></li></ul></div></div><!-- 推广 --><div class="AD"><div class="AD_icon"><img src="img/宣传推广.svg" width="34px" height="34px" ><span> 推广</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>
java培训记录Day06 2022/3/19星期六（网页布局：grid）相关推荐
- java培训记录Day02 2022/3/15星期二
今天是培训的第二天,天气很晴朗... 目录 今日任务 行级标签 超链接 超链接的三种应用场合 超链接中的target属性 超链接伪类 常用的特殊符号 Frameset iframe iframe与fr ...
- java培训记录Day03 2022/3/16星期三
今天是培训的第三天,天气依旧晴朗... 上午老师讲昨天的PPT,属实无聊.一上午啥也没干,等干饭 下午还是不知道干嘛,人麻了,头疼. 下午终于讲课了,还不错. 目录 今日任务: CSS布局 块级元素( ...
- java培训记录Day09 2022/3/22星期二（数组）
目录 今日简介: 今日知识 数组: 声明数组变量 创建数组 数组元素的默认初始化值 For-Each 循环 二维数组的使用 java.util.Arrays 今日代码: 1.数组反转 2.数组复制 今 ...
- java培训记录Day18 2022/3/31星期四（super+多态+抽象类）
目录 super关键字 super的使用,调用属性和方法 super调用构造器 多态性 多态的使用 为什么要使用多态 多态性只适用于方法不适用于属性 instanceof:向下转型 代码块 抽象类(a ...
- 2022年南京Java培训机构排名，实力突出遥遥领先
2022年南京Java培训机构排名,实力突出遥遥领先 近日,中国权威机构公布了2022年南京Java培训机构排名,本次排名第一的机构仍是动力节点,在2021年中,动力节点在Java培训机构排名中始终始 ...
- 2023年，最新最权威的上海Java培训机构排行榜出炉！
2022也许你的很多学习和工作计划都被打乱,但是过去的2022不管多艰难,多难熬.都已经成为过去式.2023悄然而至,新的一年,你我都该有新气象新动力,学习什么时候开始都不晚,想跨行从事软件开发.IT ...
- java培训教程分享：Java中用户如何自定义异常?
我们在学习java技术的时候应该有了解过,在java中是定义了很多的异常类的,虽然这些大量异常类可以帮助我们描述编程时出现的大部分异常情况,但是在程序开发中有时可能需要描述程序中特有的异常情况,例如在 ...
- 零基础参加java培训如何学习
零基础的同学想要学好java技术,一定要比有基础的学员更加努力才可以,因为java技术要学习的东西有很多,在Java培训学习的过程中也是要掌握一定的技巧和方法的,下面就为大家详细的介绍一下零基础参加j ...
- idea 删除 output directory文件_郑州Java培训新手必知的IDEA高频快捷键
IDEA,全称IntelliJ IDEA,是Java编程语言开发的集成环境,而IntelliJ在业界被公认为最好的Java开发工具.IDEA提倡智能编码,在使用IDEA编辑器的过程中,如果你能够熟练的 ...
最新文章
- ICLR认知科学@AI workshop一览
- C语言13567星号如何输出,c语言程序编程心得
- 部门角色权限rbac_k8s十 | 一文读懂基于角色的权限控制RBAC
- 秒懂5G！通俗易懂外行也能看明白
- linux之head命令
- bootstrap简单使用
- PB datawindow中的文本调整打印长度
- 运算阶乘的代码_【必修1】2.4可以复用的代码
- iptables学习笔记：端口转发之“外网访问内网”
- ML.NET 1.3.1 发布，.NET 跨平台机器学习框架
- wpf展开树节点_回归树分析与sklearn决策树案例，来玩一会
- 《Cassandra权威指南》第二版书评及访谈
- halcon学习之运动跟踪定位
- SQL数据库学习之路（八）
- 23模式之: 迭代器模式demo
- 网络安全管理规章制度
- Go语言详解内存对齐
- 税控服务器组件接口v2.1.1.1,税控开票服务器组件接口规范标准版V1.9(2016.04.04).pdf...
- 入职阿里1年后，我才真正见识到它的真实模样
- 每日牛客网-2022/1/4 错题解析