font-size: 1.1em的概念

本文详细解释了如何使用CSS中的font-weight和font-size属性来实现文本加粗和大小调整,通过实例展示了em单位如何计算实际字体大小。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

相当于:
font-weight:bold;
font-size:1.1em;
加粗,以及当前字体的1.1倍。 

em等于一个字体大小。
比方当前定义了BODY是10px;
某个元素又定义了1.1em; 那么此时字体等于11px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IIS 10.0 详细错误 - 404.0 - Not Found</title> <style type="text/css"> <!-- body { margin: 0; font-size: .7em; font-family: Verdana, Arial, Helvetica, sans-serif; } code { margin: 0; color: #006600; font-size: 1.1em; font-weight: bold; } .config_source code { font-size: .8em; color: #000000; } pre { margin: 0; font-size: 1.4em; word-wrap: break-word; } ul, ol { margin: 10px 0 10px 5px; } ul.first, ol.first { margin-top: 5px; } fieldset { padding: 0 15px 10px 15px; word-break: break-all; } .summary-container fieldset { padding-bottom: 5px; margin-top: 4px; } legend.no-expand-all { padding: 2px 15px 4px 10px; margin: 0 0 0 -12px; } legend { color: #333333; ; margin: 4px 0 8px -12px; _margin-top: 0px; font-weight: bold; font-size: 1em; } a:link, a:visited { color: #007EFF; font-weight: bold; } a:hover { text-decoration: none; } h1 { font-size: 2.4em; margin: 0; color: #FFF; } h2 { font-size: 1.7em; margin: 0; color: #CC0000; } h3 { font-size: 1.4em; margin: 10px 0 0 0; color: #CC0000; } h4 { font-size: 1.2em; margin: 10px 0 5px 0; } #header { width: 96%; margin: 0 0 0 0; padding: 6px 2% 6px 2%; font-family: "trebuchet MS", Verdana, sans-serif; color: #FFF; background-color: #5C87B2; } #content { margin: 0 0 0 2%; position: relative; } .summary-container, .content-container { background: #FFF; width: 96%; margin-top: 8px;
04-01
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <%@page import="util.Info"%> <%@page import="dao.CommDAO"%> <%@page import="util.PageManager"%> <html> <head> <title>收入</title> <LINK href="css.css" type=text/css rel=stylesheet> <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js" charset="gb2312"></script> <LINK href="images/style2.css" type=text/css rel=stylesheet> <script type="text/javascript" src="js/popup.js"></script> <style type="text/css"> #button1 { width: 80px; height: 35px; background-color: 008AFF; font-family: '微软雅黑', sans-serif; font-size: 15px; color: #ffffff; border: solid 0px #EDCE0F; border-radius: 3px; } input[type="text"],#btn1,#btn2 { box-sizing: border-box; text-align: left; font-size: 1.1em; color: #777777; height: 40px; border: 1px solid E3E2E5; width: 350px; border-radius: 3px; padding: 3px 15px 1px 15px;/*设置input内边距*/ } </style> </head> <body> <p> <br> <% Calendar calendar = Calendar.getInstance(); int month = calendar.get(Calendar.MONTH) + 1; int year = calendar.get(Calendar.YEAR); String y = request.getParameter("year"); String m = request.getParameter("month"); if(y!=null&&!"".equals(y)){ year = Integer.parseInt(y); month = Integer.parseInt(m); } String par = ""; if(month<10){ par = year + "-0" + month; }else{ par = year + "-" + month; } String yonghu = ""; String leixing = ""; String jine = ""; String username = ""; if(!"".equals(request.getParameter("username"))&&request.getParameter("username")!=null){ username = request.getParameter("username"); } String sql = "select * from shouru where yonghu='" + username + "' and riqi like '%" + par + "%' "; double ze = 0; double se = 0; double ne = 0; double xe = 0; double yt = 0; double zz = 0; for (HashMap map : new CommDAO().select(sql)) { leixing = (String) map.get("leixing"); jine = (String) map.get("jine"); yonghu = (String) map.get("yonghu"); if (map.get("leixing").equals("工资")) { ze = ze + Float.valueOf(jine).floatValue(); } if (map.get("leixing").equals("理财收入")) { se = se + Float.valueOf(jine).floatValue(); } if (map.get("leixing").equals("其他收入")) { ne = ne + Float.valueOf(jine).floatValue(); } zz = ze + se + ne + xe; } %> </p> <form action="srtt2.jsp?f=f" method="post" name="form1" > <table width="98%" border="0" align="center" cellpadding="3" cellspacing="1" class="newsline" bgColor="#ffffff"> <tr> <td> <select name="year" style="height: 40px;width: 200px;border: 1px solid E3E2E5;font-size: 18px;"> <% int yy = calendar.get(Calendar.YEAR); for(int i=yy-10;i<=yy;i++){ %> <option value="<%=i %>" <%if(i==year){%> selected <%} %>><%=i %>年</option> <% } %> </select> <select name="month" style="height: 40px;width: 200px;border: 1px solid E3E2E5;font-size: 18px;"> <% for(int i=1;i<=12;i++){ %> <option value="<%=i %>" <%if(i==month){%> selected <%} %>><%=i %>月</option> <% } %> </select> <select name="username" style="height: 40px;width: 200px;border: 1px solid E3E2E5;font-size: 18px;"> <option value="">请选择</option> <% String url = ""; String sql3 = "select * from yonghuzhuce where 1=1 "; ArrayList<HashMap> list = PageManager.getPages(url, 100, sql3, request); for (HashMap map : list) { %> <option value="<%=map.get("yonghuming") %>" <% if(username.equals(map.get("yonghuming"))){%>selected<%} %> ><%=map.get("xingming") %></option> <% } %> </select> <input type="submit" name="Submit" id="button1" value="查询" id="button2" /> </td> </tr> </table> <br> <table width="98%" border="0" align="center" cellpadding="3" cellspacing="1" class="newsline" bgColor="#ffffff"> <tr> <td width="40%" bgcolor='#E1F2F4' align="center"> <div align="center" class="STYLE1"> <%=year %>年<%=month %>月 </div> </td> <td bgcolor='#E1F2F4' align="center"> <font style="font-family:'微软雅黑'">金额</font> </td> </tr> <tr> <td bgcolor='#E1F2F4' align="center"> <font style="font-family:'微软雅黑'"> 工资收入 </font> </td> <td align="center"> <div align="center"><%=ze%>元 </div> </td> </tr> <tr> <td bgcolor='#E1F2F4' align="center"> <font style="font-family:'微软雅黑'"> 理财收入 </font> </td> <td> <div align="center"><%=se%>元 </div> </td> </tr> <tr> <td bgcolor='#E1F2F4' align="center"> <font style="font-family:'微软雅黑'"> 其他收入 </font> </td> <td> <div align="center"><%=ne%>元 </div> </td> </tr> <tr> <td bgcolor='#E1F2F4' align="center"> <font style="font-family:'微软雅黑'"> 合计 </font> </td> <td> <div align="center"><%=zz%>元 </div> </td> </tr> </table> <br><br> <table width="98%" border="0" align="center" cellpadding="3" cellspacing="1" class="newsline" bgColor="#ffffff"> <tr> <td width="12%" bgcolor='#E1F2F4' align="center"> <font style="font-family:'微软雅黑'"><%=year %>年<%=month %>月</font> </td> <td width="88%" bgcolor='#E1F2F4' align="center"> <font style="font-family:'微软雅黑'">金额</font> </td> </tr> <tr> <td bgcolor='#E1F2F4' align="center"> <font style="font-family:'微软雅黑'">工资收入</font> </td> <td><%=ze%>元 <table width="<%=(ze / zz * 1050)%>" border="1" bgcolor="#CCCC33"> <tr> <td>   </td> </tr> </table> </td> </tr> <tr> <td bgcolor='#E1F2F4' align="center"> <font style="font-family:'微软雅黑'">理财收入</font> </td> <td><%=se%>元 <table width="<%=(se / zz * 1050)%>" border="1" bgcolor="#000000"> <tr> <td>   </td> </tr> </table> </td> </tr> <tr> <td bgcolor='#E1F2F4' align="center"> <font style="font-family:'微软雅黑'">其他收入</font> </td> <td><%=ne%>元 <table width="<%=(ne / zz * 1050)%>" border="1" bgcolor="#339900"> <tr> <td>   </td> </tr> </table> </td> </tr> </table> </form> <br> <table width="98%" border="0" align="center" cellpadding="3" cellspacing="1" class="newsline" bgColor="#ffffff"> <tr> <td> <font color="red" style="font-family:'微软雅黑'">理财建议:</font> <% if(zz>0&&zz<5000){ %> <font color="red" style="font-family:'微软雅黑'">整体收入不高,注意将支出重点放在日常生活上。</font> <% }else if(5000<=zz&&zz<10000){ %> <font color="red" style="font-family:'微软雅黑'">整体收入可观,可进行一些风险较低的理财和基金,市面上涌现大量的基金可供选择,请谨慎挑选。</font> <% }else if(zz>=10000){ %> <font color="red" style="font-family:'微软雅黑'">收入可观,建议可入手几只中高风险的基金或关注股票行情。温馨提醒:股市有风险,投资须谨慎。</font> <% } %> </td> </tr> </table> </body> </html> 在不改变原始代码中加入折线图
05-13
### 实现方案 要在Java JSP页面中添加折线图以展示工资、理财和其他收入数据,可以采用JavaScript图表库(如Chart.js)。以下是具体实现方法: #### 技术栈说明 为了绘制折线图并将其嵌入到JSP页面中,需要用到以下技术: - **前端**:HTML、CSS 和 JavaScript (Chart.js 库用于绘图)[^1]。 - **后端**:Spring Boot 或其他 Java Web 框架提供数据接口[^2]。 --- ### 步骤描述 #### 1. 准备数据模型 定义一个Java类来存储收入数据。例如: ```java public class IncomeData { private String date; private double salaryIncome; // 工资收入 private double financialIncome; // 理财收入 private double otherIncome; // 其他收入 public IncomeData(String date, double salaryIncome, double financialIncome, double otherIncome) { this.date = date; this.salaryIncome = salaryIncome; this.financialIncome = financialIncome; this.otherIncome = otherIncome; } // Getters and Setters... } ``` 通过Controller返回JSON格式的数据给前端: ```java import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import java.util.ArrayList; import java.util.List; @RestController public class IncomeController { @GetMapping("/income-data") public List<IncomeData> getIncomeData() { List<IncomeData> data = new ArrayList<>(); data.add(new IncomeData("January", 5000, 1000, 300)); data.add(new IncomeData("February", 6000, 1200, 400)); data.add(new IncomeData("March", 7000, 1500, 500)); return data; } } ``` --- #### 2. 配置前端页面 在JSP文件中引入必要的资源,并编写脚本加载数据和渲染图表。 ##### HTML结构 ```jsp <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Income Chart</title> <!-- 引入Chart.js --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <div style="width: 80%; margin: auto;"> <canvas id="incomeChart" width="400" height="200"></canvas> </div> <script type="text/javascript"> fetch('/income-data') // 调用后端API获取数据 .then(response => response.json()) .then(data => { const labels = data.map(item => item.date); const salaryDataset = data.map(item => item.salaryIncome); const financialDataset = data.map(item => item.financialIncome); const otherDataset = data.map(item => item.otherIncome); const ctx = document.getElementById('incomeChart').getContext('2d'); const incomeChart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [ { label: 'Salary Income', data: salaryDataset, borderColor: 'blue', borderWidth: 2, fill: false }, { label: 'Financial Income', data: financialDataset, borderColor: 'green', borderWidth: 2, fill: false }, { label: 'Other Income', data: otherDataset, borderColor: 'red', borderWidth: 2, fill: false } ] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } }); }) .catch(error => console.error('Error fetching data:', error)); </script> </body> </html> ``` --- ### 关键点解析 1. **数据传递** 使用RESTful API将后端数据传输至前端。这里采用了`fetch()`函数请求数据[^2]。 2. **图表配置** 利用Chart.js的`new Chart()`方法初始化折线图实例,并设置多个数据集分别表示不同类型的收入。 3. **样式调整** 可自定义颜色、线条宽度以及是否填充区域等属性,使图表更直观易读。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值