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

引言:

本篇博客对简单的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;
}

3. 可视化效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/809162.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日一题 — 将 x 减到 0 的最小操作数

思路&#xff1a; 题目要求是让我们从数组的最左端和最右端进行操作&#xff0c;这样的话解题的难度大大提升&#xff0c;我们可以用 正难则反 的思想&#xff1a; 题目中要求是减去数组中的数刚好等于X&#xff0c;我们可以转换成 数组中某一段的和等于 数组的总长减去X(sum -…

Godot插值、贝塞尔曲线和Astar寻路

一、插值 线性插值是采用一次多项式上进行的插值计算&#xff0c;任意给定两个值A和B&#xff0c;那么在A和B之间的任意值可以定义为&#xff1a;P(t) A * (1 - t) B * t&#xff0c;0 < t < 1。 数学中用于线性拟合&#xff0c;游戏应用可以做出跟随效果&#xff08;…

vivado FFT IP核使用

matlab生成正弦函数 采样点数为512&#xff0c;每个采样点位宽为16位&#xff0c;其中最高位为符号为&#xff08;0正&#xff0c;1负&#xff09;。换句话说&#xff0c;如果用ROM存储正弦函数的coe文件的话&#xff0c;ROM ip核的位宽设置为16&#xff0c;深度为512. clear…

Vue ElementUI el-input-number 改变控制按钮 icon 箭头为三角形

el-input-number 属性 controls-position 值为 right 时&#xff1b; <el-input-number v-model"num" controls-position"right" :min"1" :max"10"></el-input-number>原生效果 修改后效果 CSS 修改 .el-input-number…

STM32电机控制SDK介绍

目录 一、STM32 MC SDK包含以下项目&#xff1a; 二、电机控制应用流程 三、 MC 软件应用程序设计工作流程 四、STM32 MC固件 五、PMSM FOC 库 一、STM32 MC SDK包含以下项目&#xff1a; STM32 MC firmwareSTM32 MC WorkbenchSTM32 MC Board ManagerSTM32 Motor PilotTh…

项目从 Mysql切换 PostgreSQL 改造及踩坑记录

0、前言 原项目框架 SpringBoot MybatisPlus Mysql 1、切换流程 1.1、项目引入postgresql驱动包 由于我们要连接新的数据库&#xff0c;理所当然的要引入该数据库的驱动包&#xff0c;这与mysql驱动包类似 <dependency><groupId>org.postgresql</groupId…

MongoDB常用命令总结

《【快捷部署】017_MongoDB&#xff08;6.0.14&#xff09;》 讲述了如何快捷部署MongoDB&#xff0c;今天我们来总结一下MongoDB常用的shell命令。 一、基本操作&#xff08;CRUD&#xff09; #创建集合&#xff0c;名为 users db.createCollection("users")# 插入…

免费搭建幻兽帕鲁服务器(Palworld免费开服教程)

随着互联网技术的不断发展和普及&#xff0c;网络游戏已经成为了人们休闲娱乐的重要方式之一。而在众多网络游戏中&#xff0c;幻兽帕鲁以其独特的游戏设定和玩法&#xff0c;吸引了大量玩家的关注。为了满足广大玩家的需求&#xff0c;本文将介绍如何免费搭建幻兽帕鲁服务器&a…

Green Hills 自带的MULTI调试器查看R7芯片寄存器

Green Hills在查看芯片寄存器时需要导入 .grd文件。下面以R7为例&#xff0c;演示一下过程。 首先打开MULTI调试器&#xff0c;如下所示View->Registers&#xff1a; 进入如下界面&#xff0c;选择导入寄存器定义文件.grd&#xff1a; 以当前R7芯片举例&#xff08;dr7f7013…

Python+Appium自动化测试(ios+Android)

一、软件安装 安装清单&#xff1a; JDKPythonnode.jsandroid-sdk(作者通过Android Studio安装)iOS-deploybrewlibimobiledevice依赖库ideviceinstallercarthage依赖库 appium-doctor&#xff08;安装后可在命令行中通过命令:appium-doctor检查还少啥&#xff09; WebDriverAg…

应急响应-战中反制对抗上线CSGoby蚁剑Sqlmap等安全工具

知识点 战中-反制-安全工具篇CS反制(有版本限制) Goby反制&#xff08;有版本限制&#xff0c;新版goby已修复&#xff09; Antsword反制(有版本限制&#xff0c;别人也不一定用蚁剑) AWVS反制(有版本限制&#xff0c;在awvs 10版本存在&#xff09; BURP反制(有版本限制&…

基于python的天气数据可视化系统、Flask框架,爬虫采集天气数据,可视化分析

系统介绍 基于Python的天气预测可视化分析系统&#xff0c;该项目的主要流程和功能包括&#xff1a; 数据获取&#xff1a; 使用Python的pandas库从2345天气网&#xff08;http://tianqi.2345.com/Pc/GetHistory&#xff09;抓取山东省各市区县在2021年至2023年间的天气历史数…

C语言 | Leetcode C语言题解之第21题合并两个有序链表

题目&#xff1a; 题解&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/typedef struct ListNode ListNode; struct ListNode* mergeTwoLists(struct ListNode* list1, struct ListNode* list2) {/…

钉钉和金蝶云星空接口对接实战

钉钉和金蝶云星空接口对接实战 对接源平台:钉钉 钉钉&#xff08;DingTalk&#xff09;是阿里巴巴集团打造的企业级智能移动办公平台&#xff0c;是数字经济时代的企业组织协同办公和应用开发平台。钉钉将IM即时沟通、钉钉文档、钉闪会、钉盘、Teambition、OA审批、智能人事、钉…

django 模板js文件为什么最后引入

<!-- 引入Bootstrap JS --> <script src"https://cdn.jsdelivr.net/npm/bootstrap5.3.0/dist/js/bootstrap.bundle.min.js"></script> 为什么最后引入例子 <!-- templates/inspection_records.html --><!DOCTYPE html> <html lang…

ShardingSphere再回首

概念&#xff1a; 连接&#xff1a;通过协议 方言及库存储的适配&#xff0c;连接数据和应用&#xff0c;关注多模数据苦之间的合作 增量&#xff1a;抓取库入口流量题提供重定向&#xff0c; 流量变形(加密脱敏)/鉴权/治理(熔断限流)/分析等 可插拔&#xff1a;微内核 DDL:cr…

2024最新AI系统【SparkAI】,ChatGPT商业运营版系统源码/ai问答/ai绘画/GPTs,SunoAI音乐生成大模型/带分销AIGC搭建部署教程

一、文章前言 SparkAi创作系统是基于ChatGPT进行开发的ai智能问答系统和Midjourney-AI绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已…

MySQL进阶一

目录 1.使用环境 2.条件判断 2.1.case when 2.2.if 3.窗口函数 3.1.排序函数 3.2.聚合函数 ​​​​​​​3.3.partiton by ​​​​​​​3.4.order by 4.待续 1.使用环境 数据库&#xff1a;MySQL 8.0.30 客户端&#xff1a;Navicat 15.0.12 2.条件判断 2.1.ca…

手机银行客户端框架之EMAS介绍

EMAS简介 阿里巴巴应用研发平台&#xff08;Enterprise Mobile Application Studio&#xff0c;简称EMAS&#xff09;&#xff0c;是面向全端场景&#xff08;移动App、H5应用、小程序、Web应用、PC应用等&#xff09;的一站式应用研发平台。EMAS基于广泛的云原生技术&#xf…

5G智慧港口简介(一)

引言 港口作为交通运输的枢纽,在促进国际贸易和地区发展中起着举足轻重的作用,全球贸易中约 90% 的贸易由海运业承载,作业效率对于港口至关重要。在“工业 4.0”、“互联网 +”大发展的时代背景下,港口也在进行数字化、全自动的转型升级。随着全球 5G 技术浪潮的到来,华为…