目录
1. text-decoration：None（让文字的下划线消失）
2. hover：让用户在将鼠标放到文字上，文字显示为下划线。
6. position布局（分为relative和absolute）
一、如何用CSS进行版面设计和网页的美化
总共有三种方法
1. 直接将语法写在html标签里
例子：
<h1 style="color: brown;">你好</h1>用style的color属性，直接将文字改成别的颜色。
但是这样太耗时费力，如果页面有很多个文本。
2. 把CSS语法统一写到head标签里
例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
color:brown;
}
</style>
</head>这里加了一个<style>区块，在里面将正文里所有出现过的h2颜色都统一设置为了brown。
省时省力（对于页面较少的网站来说）
除了修改颜色之外，还能修改字体大小（font-size)
3. 将CSS单独提出来变成一个样式表
先要单独开一个新的文件，后缀为.css
将原本在html文件中的head文件里的设置放到里面
具体语法如下：（无需<style>...</style>)
h2{
color:brown;
}
p2{
color:red;
}但是在这之后，还需要将这个css文件连接回原来的html文件。
所以在原来的html文件里加上这段
(<link rel="stylesheet" href = style.css>）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href = style.css>
</head>其中，rel代表所指向的文件类型，因为这里是样式表，所以是stylesheet。
href指向文件所在的路径
二、CSS三大元素
1. Border（边框）
在style.css里对应要修改样式的内容
语法：border: 边框粗细，颜色和线条样式
header, section, footer {
backaround-color: 0#d6cCC2；
border:5px 口#9d8189 solid;
}solid（一般的直线）
dashed（虚线）
dotted（圆点线）
2. Padding（内边距）
内容与边框之间的空隙大小
2.1 只输入一个值
这个值会套用在外边框的四周
2.2 只输入两个值
上下、左右
2.2 只输入三个值
按上、左右、下的边去调整
2.2 输入四个值
padding: 30px（上）,0px（右）,20px（下）,10px（左）
顺时针3. margin（外边距）
不同网页元素之间的距离
语法与Padding一致
可以重设这三大元素，在style.css里修改
* {
padding: 0;
margin: 0;
}三、常用语法
1. text-decoration：None（让文字的下划线消失）
设置为underline则为让它有下划线
header a {
color:white;
text-decoration: none;
header a:hover {
text-decoration: underline;
}2. hover：让用户在将鼠标放到文字上，文字显示为下划线。
3. 将导航栏变成行内元素（变成横的）
header li {
display:inline;
}4. margin-right（右边距）
header li{
display: inline;
margin-right: 4vw;
}这里的vw（viewpoint width）表示视窗宽度
4vw表示页面宽度的4%
还有margin-bottom（底部外边距）
5. height（所占高度）
6. position布局（分为relative和absolute）
注意：使用relative时，从原先所在位置移动
比如
header {
position:relative;
left:50px; top:100px;
}这里表示在原先的位置上左边多出50像素，上方多出100像素
7. 放logo
background-image:url（相对路径）;
background-image:url(images/logo.svg) ;
#（把logo图片换上来，但因为为了有助于搜索引擎理解网页内容，所以这里的文字不能取代，
这里就用了背景图片）
background-repeat: no-repeat; （这是为了不要重复加载背景图）
background-position: center;（将背景居中）
width:210px;（logo的宽度）
text-indent: -9999px;（将原有的文字推的很远）8.为section分组
因为如果单纯在.css文件中对所有section进行更改，会使其他section丧失灵活性。
所以这里需要为section分组。
分组方式：
<section class = "任何想要的名称">使用方式（在样式表中使用）：
."对应的section的组名"{
属性
}记得要加.
9.添加背景图片时
此时用no-repeat，以防重叠
但是这会导致图片与边框间有一定的间隙，为了填补间隙，需要调节图片的尺寸。
调节尺寸的方法：
background-size:cover;
background-position: center;（使图片居中）
10. Flexbox（实现灵活布局）
使用方式：在html的父元素中，写入
display:flex;这就能让子元素产生各种排列的方式(各方块各代表一个部分里的内容）
但是使用后，会让子元素变成横向展示，若要变成原先的竖向堆叠，
则要使用
flex-direction:column;比如：水平置中
justify-content:center;
再比如：伸展到父元素的两侧
justify-content:space-between;
均分子元素以外的空隙：
justify-content:space-evenly;
垂直置中：
align-items:center;
11. 边框圆角效果
border-radius: 5px;12. 辅助标签(div)
用于划分或组织html的元素
用法可参考下方：
<div class="info">
<h2>8月1日大安旗艦店隆重開張！</h2>
<p>享受花園庭院的悠閒時光，內用座位區美食相伴，<br>
即日起來店消費加 LINE 好友可獲精緻小點心，等您一同品味！</p>
</div>就是相当于把两块子元素封装在一起，并设置类名。
13. 几个对齐属性的区别和效果
1⃣️align-content属性
作用：设置同一列子元素在Y轴的对齐方式
2⃣️justify-content属性
作用：设置同一行子元素在X轴的对齐方式
3⃣️align-items属性
作用：设置同一行子元素在Y轴的对齐方式
总而言之，"text-align" 用于控制文本的水平对齐，而 "align-items" 和 "justify-content" 用于控制 flex 容器中项目的垂直和水平对齐。
14. cursor（让鼠标移到按钮上时，变成手指的形状）
cursor:pointer;15. 单独对输入框文字进行更改
input：：placeholder{
属性
}注意这里不需要加类名
16. 单独对鼠标移到输入框时输入框颜色的更改
一般预设的输入框颜色是黑色
若要更改，需使用
input:focus {
outline:none;
border-color:white;
}这里是让边框去除颜色后，变成白色
17. 固定导航栏，使网页下滑时导航栏仍在上方
在.css文件中，将导航栏的position改成fixed即可
但是这样的话，原本下方的区块会往上移动，弥补先前导航所占的空间。
而为了弥补这一缺陷，可以将第二区块的height加大，并调节标题的上边距，
就能完成这一缺陷。
18. 在X轴上使元素移动的语法
transform: translate(-50%);表示往左移动50%的距离
19. 汉堡选单（菜单栏的按钮）
注意，这里是html
<button class="menu">☰</button>☰是汉堡选单按钮的字符代码
当需要隐藏它时，可使用
display:none;将其隐藏
同样，需要显示时，使用
display:block;隐藏边框时，可使用
border:none四、响应式设计（Responsive Design）
目的：为了让页面缩放时，在页面内容大小改变时，能够维持原有的比例进行缩放。
具体语法如下：
@media screen and (max-width: 768px){
这里表示当屏幕小于768像素时界面变化的属性
}五、动画效果（animation)
先在.css文件中
@keyframes change-color {
from {background-color: red;}
to {background -color: blue;}
}
这里的change-color是动画的名字
这里表示改变颜色，从红色变成蓝色
. box-animation {
animation-name: change-color:
animation-duration:2s
}这里表示对box进行一个动画效果，animation-name表示指向哪个animation
duration表示动画的时间。
animation-iteration-count:infinite这里表示无限重复
animation-delay:2s这里表示进入网页2s后开启动画效果
41
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
