网页制作css怎么制作
CSS 制作基础
CSS（层叠样式表）用于控制网页的样式和布局。通过CSS可以定义字体、颜色、间距、背景等样式属性。
内联样式
直接在HTML元素的style属性中编写CSS：
<p style="color: blue; font-size: 16px;">这是一段蓝色文字</p>内部样式表
在HTML文件的<head>部分使用<style>标签定义CSS：
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>外部样式表
创建单独的.css文件，并通过<link>标签引入HTML：
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css文件内容：
p {
color: blue;
font-size: 16px;
}常用CSS属性
文本样式
p {
color: #333; /* 文字颜色 */
font-family: Arial; /* 字体 */
font-size: 14px; /* 字号 */
font-weight: bold; /* 加粗 */
text-align: center; /* 对齐方式 */
line-height: 1.5; /* 行高 */
}盒模型
div {
width: 200px; /* 宽度 */
height: 100px; /* 高度 */
padding: 10px; /* 内边距 */
margin: 20px; /* 外边距 */
border: 1px solid #000; /* 边框 */
}背景与颜色
body {
background-color: #f0f0f0; /* 背景色 */
background-image: url('image.jpg'); /* 背景图 */
background-repeat: no-repeat; /* 不重复 */
}布局技术
Flexbox布局
.container {
display: flex; /* 启用flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.item {
flex: 1; /* 等分空间 */
}Grid布局
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
gap: 10px; /* 间距 */
}
.item {
grid-column: span 2; /* 跨两列 */
}定位
.box {
position: relative; /* 相对定位 */
}
.child {
position: absolute; /* 绝对定位 */
top: 10px;
left: 20px;
}响应式设计
媒体查询
@media (max-width: 768px) {
body {
font-size: 12px;
}
.container {
flex-direction: column;
}
}视口单位
.header {
height: 100vh; /* 视口高度 */
width: 100vw; /* 视口宽度 */
font-size: 5vw; /* 响应式文字 */
}动画效果
过渡动画
.button {
transition: all 0.3s ease;
}
.button:hover {
background-color: blue;
transform: scale(1.1);
}关键帧动画
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite alternate;
}实用技巧
变量使用
:root {
--main-color: #3498db;
}
.element {
color: var(--main-color);
}伪类和伪元素
a:hover {
color: red;
}
p::first-line {
font-weight: bold;
}浏览器前缀
.box {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
