该文章详细介绍了Web前端开发中的关键概念和技术，包括CSS的@media查询用于响应式设计，@font-face定义自定义字体，动画效果如transition和transform，以及3D旋转效果。此外，还探讨了网页布局的不同模式如国字型和T字型布局，并提供了一个制作校园官网的实践案例，涉及到导航栏的交互设计和CSS样式应用。
系列文章传送门：
文章目录：
一、@media查询
二、@font-face字体
三、动画
四、3D旋转效果
五、网页布局
六、相关练习：制作校园官网
一、@media查询
作用：主要用于在不同设备显示不同的页面。
（电视：TV 电脑：screen 打印机：print 所有：all）
可设PC端：@media screen and (min-width:800px){......}（宽大于800显示）
可设手机端：@media screen and (max-width:800px){........}（宽小于800显示）
二、@font-face字体
格式：
@font-face {
font-family: 自定义字体名;
src: url("字体路径");
}
调用：font-family:自定义字体名
PS：字体别乱商用，注意版权问题。
三、动画
（一）过渡效果：transition：1s
transition 四个参数 第一个设置参与过渡属性，第二个过渡时长 ，第三个 过渡的时间曲线，第四个延时多久后进行动画
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容：
1、规定希望把效果添加到哪个 CSS 属性上
2、规定效果的时长
3、效果触发时间（如鼠标hover等）
（二）变换效果：transform
1、translate() 方法
translate是一种平移效果，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。
例如：transform: translate(100px,100px);
2、rotate() 方法
rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
例如：transform: rotate(30deg);
3、scale() 方法
scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。
例如：transform: scale(2,0.5);
4、skew() 方法
skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。
例如：transform: skew(0deg,0deg);
（三）动画效果：keyframes
创建：@keyframes myAnimation{.......}
调用：animation: myAnimation 3s 10 linear;
动画属性：动画名称 持续时长 播放次数 动画运动的时间曲线
（四）渐变效果：background-image
1、默认渐变方向由上至下：background-image: linear-gradient(#f00,#00f);
2、指定方向渐变：background-image: linear-gradient(to top,#f00,#00f);
3、指定两个方向合成方向：background-image: linear-gradient(to top right,#f00,#00f);
4、也可以使用角度 ,沿着x轴负半轴开始计算角度： background-image: linear-gradient(90deg,#f00,#00f);
5、也可以多个颜色进行渐变： background-image:linear-gradient(to top,red,yellow,green);
6、重复性渐变：background-image:repeating-radial-gradient(red,yellow 25%,green 50%);
四、3D旋转效果
（一）设置动画轴心 ：transform-origin: left;
（二）沿X轴旋转：transform:rotateX(50deg);
（三）沿Y轴旋转：transform:rotateY(50deg);
（四）沿Z轴旋转：transform:rotateZ(50deg);
五、网页布局
（一）国字型布局
这种布局是普通也是常见的，一些大型网站经常使用这种类型。它的特点就是规范，内容主次由上到下，网页上面是标题条幅、导航栏，下面就是网站相关内容信息等。
（二）工/T字型布局
内容主次清晰，导航信息分别页面两侧，而网页的重要内容部分中间位置，符合人们的阅读习惯，以及重点的聚焦。
（三）三字型布局
“三”型布局具有简洁明快的艺术效果，适合于艺术类、收藏类、展示类网站。这种布局往往采用简单的图像和线条代替拥挤的文字，给浏览者以强烈的视觉冲击。
（四）pop布局
指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。
（五）圣杯布局/双飞翼布局
它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。
六、相关练习：制作校园官网
练习代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>华南农业大学珠江学院</title>
<style>
*{
padding: 0;
margin: 0;
}
a{
color: white;
text-decoration: none;
}
#boss{
background-color: #3d3bb8;
}
.daohang{
width: 100%;
height: 110px;
}
.daohang_kuang{
width: 70%;
height: 110px;
background-color: #3d3bb8;
margin: auto;
}
.daohang_kuang > div{
float: left;
}
.daohang_one{
width: 350px;
margin-top: 20px;
}
.daohang_two{
margin-left: 20px;
}
.daohang_three{
margin-top: 20px;
}
.daohang_three > div{
float: left;
margin: 10px;
}
.chaxun{
text-align: right;
margin-top: 0px;
}
.chaxun > input{
width: 200px;
height: 38px;
border-radius: 19px;
border: 0px;
font-size: 5px;
margin-top: 3px;
padding-left: 28px;
}
.zi_one{
color: white;
font-size: 12px;
font-weight: 520;
text-align: center;
opacity: 0.8;
}
.menu_1{
background-color: white;
width: 120px;
position: absolute;
list-style: none;
display:none;
left: 612px;
}
.menu_1 > li{
height: 30px;
font-size: 8px;
text-align: center;
margin-top: 15px;
}
.menu_2{
background-color: white;
width: 120px;
left: 110px;
position: absolute;
display: none;
}
.menu_2 > ul > li{
height: 30px;
font-size: 8px;
text-align: center;
margin-top: 15px;
list-style: none;
left: 115px;
}
#li_3{
position: relative;
}
#li_3:hover > .menu_2{
display: block;
}
.zi_one:hover{
opacity: 1;
}
#zi > div:hover{
opacity: 1;
}
#zi:hover>.menu_1{
display: block;
}
#zi > div{
color: white;
font-size: 12px;
font-weight: 520;
text-align: center;
text-decoration: none;
position: relative;
top: 0px;
opacity: 0.8
}
</style>
</head>
<body>
<div id="boss">
<div class="daohang">
<div class="daohang_kuang">
<div class="daohang_one">
<img src="主页logo.png" width="100%"/>
</div>
<div class="daohang_two">
<div class="chaxun">
<input type="text" name="caxun" placeholder="请输入搜索内容"/>
</div>
<div class="daohang_three" style="clear: both;">
<div class="zi_one"><a href="#">首页</a></div>
<div id="zi">
<div><a href="#">学校概况</a></div>
<ul class="menu_1">
<li>学校简介</li>
<li>现任领导</li>
<li id="li_3">
校长寄语
<div class="menu_2">
<ul>
<li>学校简介</li>
<li>现任领导</li>
<li>校长寄语</li>
<li>师资队伍</li>
<li>校园风光</li>
<li>华珠大事记</li>
<li>华珠荣誉</li>
<li>专业介绍</li>
</ul>
</div>
</li>
<li>师资队伍</li>
<li>校园风光</li>
<li>华珠大事记</li>
<li>华珠荣誉</li>
<li>专业介绍</li>
</ul>
</div>
<div class="zi_one"><a href="#">信息公开专栏</a></div>
<div class="zi_one"><a href="#">机构设置</a></div>
<div class="zi_one"><a href="#">党建网</a></div>
<div class="zi_one"><a href="#">教务管理</a></div>
<div class="zi_one"><a href="#">招生就业</a></div>
<div class="zi_one"><a href="#">OA管理</a></div>
<div class="zi_one"><a href="#">数字资源</a></div>
<div class="zi_one"><a href="#">加入我们</a></div>
</div>
</div>
</div>
</div>
<div>
<img src="111-1-scaled.jpg" width="100%"/>
</div>
</div>
</body>
</html>都看到这里了，创作不易，大家点个赞再走呗！！！- ̗̀(๑ᵔ⌔ᵔ๑)
2627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
