云麓谷第一次培训笔记

最新推荐文章于 2024-07-19 15:32:49 发布

Hyummmm

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量367

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/qq_51065482/article/details/109251681

版权

云麓谷第一次培训笔记

学习内容

网页构建总体思路

构建好html骨架

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 </body>
</html>

分析网页样例的总体布局，并用div进行所需模块的初始布局，加入图片和文字元素
为元素添加CSS样式，使之更为美观，使用外联样式表（表命名后缀为css）
```
<link href="index.css" type="text/css" rel="stylesheet" />
```

编码规范

HTML和CSS编码规范

Flex弹性盒子布局

Flex布局的指定

.box{
   display：flex；
}

主轴方向的确定（flex-direction）

row：水平方向，起点左端
row-reverse：水平方向，起点右端
column：垂直方向，起点上沿
column-reserve：垂直方向，起点下沿

主轴上的对齐方式（justify-content）

flex-start：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

交叉轴对齐方式（align-items）

flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

主轴与交叉轴的判断方式

例一

header

主轴为水平方向（row）

.box{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

例二

footer

主轴为垂直方向

.box{
    display:flex;
    flex-direction: column;
    align-items: center;    
}

图片长廊的换行（flex-wrap）

nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

实战反思

下划线的两种实现方式

利用hr标签完成
```
<hr width="30px" color="#e7e7e7">
```
利用div盒子设置单边border实现
```
border-bottom: 1px solid #e7e7e7;
```

如图的实现方式

footer

思路：设置图片的圆形边框并添加padding→利用position：relative和top实现上移盖住div盒子的border-top→使用background-color解决padding透明映线问题

.footer-logo img{
    border-radius: 50% ;
    border:solid #e7e7e7 1px;
    padding:20px;
    width:45px;
    height:45px;
    position:relative ;
    top:-46px;
    background-color: #FFFFFF;
}

固定式导航栏的实现

position:sticky;
top:0;
width:100%;
background-color: #FFFFFF;

总结

结构化去写，先有框架再装细节
flex布局下关注父级与子级，想要对一些元素进行排序，要在他们的父级元素上使用flex布局

position:sticky;
top:0;
width:100%;
background-color: #FFFFFF;

Hyummmm

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
云麓谷第一次培训笔记

云麓谷第一次培训笔记学习内容网页构建总体思路构建好html骨架<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> </body></html>
复制链接

扫一扫