界面设计【1】-项目的UI设计css

news2024/11/26 12:46:33

引言：

本篇博客对简单的css html界面设计做了简要介绍

这篇博客主要就是介绍了做横向项目中，CSS界面设计与优化。

界面设计【1】-项目的UI设计css

1. 什么是css?
2. css编程demo
3. 可视化效果

1. 什么是css?

CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于设计网页布局和外观的标记语言。具体来说，CSS有以下特点和作用：

CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、XHTML等格式）文档的呈现。CSS描述了在屏幕、纸质、音频等媒介中元素应该如何被渲染的问题。

2. css编程demo

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>My Resume</title>
</head>
<body>
  <div class="resume">
    <div class="header">
      <h1>Andrew Kawasaki</h1>
      <p>Web Developer</p>
    </div>
    <div class="section">
      <h2>Education</h2>
      <p>Doctor's in Computer Science - XYZ University</p>
    </div>
    <div class="section">
      <h2>Experience</h2>
      <p>Doctor of Engineering</p>
      <p>Posdoctoral Researcher</p>
    </div>
    <div class="section">
      <h2>Skills</h2>
      <ul>
        <li>Fault Diagnosis</li>
        <li>Machinery Dynamic Modeling</li>
        <li>Python & Matlab</li>
      </ul>
    </div>
  </div>
</body>
</html>

css代码如下：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.resume {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 2px solid #333;
  border-radius: 10px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  margin: 0;
  font-size: 2em;
}

.section {
  margin-bottom: 20px;
}

h2 {
  margin-bottom: 10px;
}

ul {
  padding-left: 20px;
}

ul li {
  list-style: square;
}