<div>的默认字体

最新推荐文章于 2021-08-06 09:41:26 发布
最新推荐文章于 2021-08-06 09:41:26 发布
阅读量277 收藏
点赞数
分类专栏： 前端开发 文章标签： Eclipse CSS Web

昨天遇到了个问题，用<div>...</div>总是显示不出来，刚从eclipse转到web开发还真有点不适应，郁闷ing～，后来问了同事，于是说div默认的字体非常小，小到足以让人不能看见，oh my god！原来这样，于是乎给div加了css设置了字体。于是乎就出来了～

做web页面很有趣，慢慢积累吧！

iteye_19278
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html网页默认字体
weixin_33918114的博客
03-22 8311
2019独角兽企业重金招聘Python工程师标准>>> ...
div与span之间有什么区别
12-13
默认情况下，`<div>`的`display`属性为`block`，意味着它会像一个盒子一样独占一行。如果希望`<div>`表现得像行内元素，可以通过CSS设置`display: inline`来实现。 另一方面，`<span>`（Span）元素是一个行内元素，...
html的div修改字体,div字体大小_div内文字大小改变css代码
weixin_39796855的博客
06-03 1万+
控制div内文字字体大小，其实非常简单，一个CSS样式即可实现，字体大小均能根据需求自由设置。不同div内字体大小根据需求也可用自由改变。一、字体大小CSS样式font-size用法：p{font-size:14px}设置网页中p标签内字体大小为14px网页各大浏览器兼容最小字体为12px字体大小单位可用用px可用用em，根据需求选择，一般PC电脑网页采用px像素为单位。PX像素em相对单位二、d...
html中哪些字体不识别中文字体,div字体_正确设置div兼容的汉字中文字体
weixin_29144259的博客
06-09 663
这里可以学习DIV字体设置方法，同时如果设置常见中文汉字字体，就需要将汉字进行转化或使用英文对应汉字字体来兼容各大浏览器，这样CSS设置的字体才能兼容各地浏览器。一、全网页DIV默认字体设置div设置字体的CSS单词：font-family用法：div {font-family: "黑体",Arial, Helvetica, sans-serif}以上设置所有div中文为黑体，和英文为Arial,...
CSS——字体
qq_44621880的博客
04-08 420
CSS——字体 导读 字体系列 CSS fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体） CSS使用fonts－family属性定义文本的字体系列 ｐ｛fonts－family：＂微软雅黑＂；｝ ...
div怎么在css中设置字体大小,div字体大小设置 css设置div中字体大小尺寸样式
weixin_34142444的博客
08-04 1万+
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置，这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置，通过直接在div标签加字体大小属性样式和对div加class设置外部CSS字体大小样式，让大家掌握div内字体大小样式设置。一、div字体尺寸大小使用什么CSS单词？- 字体大小设置CSS单词无论哪种方式对字体大小设置，都要用到字体...
CSS3 面试题（1）
明天也要努力的博客
02-24 728
1. 介绍一下标准的 CSS 的盒子模型？与低版本 IE 的盒子模型有什么不同的？ 标准盒子模型：宽度 = 内容的宽度（content）+ border + padding + margin； 低版本 IE 盒子模型：宽度 = 内容宽度（content+border+padding）+ margin； 2. box-sizing 属性 用来控制元素的盒子模型的解析模式，默认为 content-box； context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 c
html div的运用
03-21
`<div>`是块级元素，意味着它默认会在新的一行开始，并占据整个宽度。相比之下，行内元素如`<span>`不会开启新的行，并且只占据必要的宽度。在网页设计中，常将`<div>`用于创建可独立调整大小和位置的区块。 3. ...
深入理解DIV和SPAN的区别
09-24
值得注意的是，虽然`<div>`和`<span>`的默认行为有所不同，但通过CSS的`display`属性，可以灵活地将块级元素转换为内联元素，或将内联元素转换为块级元素。例如，将`<div>`的`display`设为`inline`或`inline-block`...
CSS3实现DIV圆角效果完整代码
12-13
` 设置字体为Arial，如果用户系统中没有Arial，则会使用默认字体。 2. `border: 2px solid #379082;` 设置边框为2像素宽，实线，颜色为#379082（一种绿色）。 3. `border-radius: 20px;` 这是关键的CSS3属性，它定义...
font-awesome.min.css
04-22
css字体应用下载，下载下来直接可以在HTML里面加载进来应用
浅谈Span和Div的区别
12-13
相反，`<div>` 是一个块级元素，它会在页面上占据一整行，并且默认情况下，前后都会产生换行。`<div>` 主要用于组织和布局，它可以包含多个内联或块级元素，形成一个逻辑上的区块。在示例中，`<div id="scissors">` ...
HTML简介
倒霉娃不要倒霉的博客
08-08 224
HTML简介网页什么是网页什么是HTML常用浏览器常用浏览器内核Web 标准（重点）为什么需要 Web 标准Web 标准的构成 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页， 常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是HTML
57道CSS常问面试题及答案汇总
qq_27169469的博客
08-06 1354
1、介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2、box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 bo
一、Chrome浏览器调试工具/文档
草木红的博客
12-22 6846
[1].开调试窗口 mac: command+alt+i windows: F12 [2].暂停发生变化中的元素or属性 再在添加Break on的元素上取消断点。 [3].查看元素最终效果的样式 只关心最后的效果是哪些样式控制的可以通过Computed查看 [4]. 查看被压缩的css和js代码 找到被压缩的css或者js代码点击format，就可以得到展开后的代码，并且可以进行编辑。 [5]. 在Chrome中编辑样式并同步到本地文件中 将本地文件所在的文件夹添加到Chrome中 Chro
Day2
ChallengeFei的博客
09-16 155
学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签 掌握三种列表标签 掌握表格标签 掌握表格标签 掌握表单标签 掌握H5新增表单和表单属性 typora-copy-images-to: media 认识网页 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。 <img ...
使用div显示文字
muzi187的博客
01-09 4360
使用div显示文字时，想要只显示一行，且多余部分用省略号表示，只需设置div的style即可。 style="width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
input设置默认显示文字的两种方式
热门推荐
xmerji1955的博客
03-16 7万+
1.placeholder属性。在输入框为空的情况下会显示placeholder中的值。但是提交时不能直接取其值。2.value属性。在输入框加载的时候输入框中的值。提交时可直接获取。...
<template> <div class="Home"> <div class="index" id="mapTree"></div> <div class="top"> <div class="topLeft"> <div v-bind:class="{ redText: buttonStyle['Rail'], }" @click="toggleComponent('Rail')" > <a>电子围栏</a> </div> <div v-bind:class="{ redText: buttonStyle['Video'], }" @click="toggleComponent('Video')" > 视频监控 </div> <div v-bind:class="{ redText: buttonStyle['Location'], }" @click="toggleComponent('Location')" > 实时定位 </div> <div v-bind:class="{ redText: buttonStyle['Monitor'], }" @click="toggleComponent('Monitor')" > 环境检测 </div> </div> <div class="topRight"> <div>2</div> <div>2</div> <div>2</div> <div>2</div> </div> </div> <Rail v-if="currentComponent === 'Rail'" /> <Video v-if="currentComponent === 'Video'" /> <Location v-if="currentComponent === 'Location'" /> <Monitor v-if="currentComponent === 'Monitor'" /> </div> </template> <script> import Rail from "@/views/rail/rail.vue"; import Video from "@/views/video/video.vue"; import Location from "@/views/location/location.vue"; import Monitor from "@/views/monitor/monitor.vue"; let viewer; Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYzc0OGZjYi03NDY5LTRmMmQtYTc2YS05ZTY2YzZlMTRmYTQiLCJpZCI6MTM5MzQ0LCJpYXQiOjE2ODQzMTI2MjF9.nNF8IyvsjDSdeRJeea8ftf4TC1DOgSa_jue-ZZ0dZ8M"; export default { name: "MineHome", components: { Rail, Video, Location, Monitor, }, data() { return { currentComponent: "Rail", currentTab: "", // 记录当前选中的按钮 buttonStyle: { // 记录按钮样式 Rail: true, Video: false, Location: false, Monitor: false, }, }; }, mounted() { this.toggleComponent("Rail"); this.initMap(); }, methods: { // 初始化地图 initMap() { viewer = new Cesium.Viewer("mapTree", { infoBox: false, // 禁用infoBox }); // 加载倾斜模型 var tileset = new Cesium.Cesium3DTileset({ url: "http://47.104.159.54:8156/out2/tileset.json", }); viewer.scene.primitives.add(tileset); viewer.zoomTo(tileset); }, toggleComponent(componentName) { this.currentComponent = componentName; }, }, }; 根据这段代码实现 默认选中按钮字体颜色为红色 非选中为白色
最新发布
06-09
可以在 `buttonStyle` 对象中设置每个按钮的默认样式，然后在模板中使用 `v-bind:class` 绑定样式类即可。可以尝试以下代码： ```html <template> <div class="Home"> <div class="index" id="mapTree"></div> <div class="top"> <div class="topLeft"> <div :class="{ redText: buttonStyle['Rail'] }" @click="toggleComponent('Rail')" > <a>电子围栏</a> </div> <div :class="{ redText: buttonStyle['Video'] }" @click="toggleComponent('Video')" > <a>视频监控</a> </div> <div :class="{ redText: buttonStyle['Location'] }" @click="toggleComponent('Location')" > <a>实时定位</a> </div> <div :class="{ redText: buttonStyle['Monitor'] }" @click="toggleComponent('Monitor')" > <a>环境检测</a> </div> </div> <div class="topRight"> <div>2</div> <div>2</div> <div>2</div> <div>2</div> </div> </div> <Rail v-if="currentComponent === 'Rail'" /> <Video v-if="currentComponent === 'Video'" /> <Location v-if="currentComponent === 'Location'" /> <Monitor v-if="currentComponent === 'Monitor'" /> </div> </template> <script> import Rail from "@/views/rail/rail.vue"; import Video from "@/views/video/video.vue"; import Location from "@/views/location/location.vue"; import Monitor from "@/views/monitor/monitor.vue"; let viewer; Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYzc0OGZjYi03NDY5LTRmMmQtYTc2YS05ZTY2YzZlMTRmYTQiLCJpZCI6MTM5MzQ0LCJpYXQiOjE2ODQzMTI2MjF9.nNF8IyvsjDSdeRJeea8ftf4TC1DOgSa_jue-ZZ0dZ8M"; export default { name: "MineHome", components: { Rail, Video, Location, Monitor, }, data() { return { currentComponent: "Rail", currentTab: "", // 记录当前选中的按钮 buttonStyle: { // 记录按钮样式 Rail: true, Video: false, Location: false, Monitor: false, }, }; }, mounted() { this.toggleComponent("Rail"); this.initMap(); }, methods: { // 初始化地图 initMap() { viewer = new Cesium.Viewer("mapTree", { infoBox: false, // 禁用infoBox }); // 加载倾斜模型 var tileset = new Cesium.Cesium3DTileset({ url: "http://47.104.159.54:8156/out2/tileset.json", }); viewer.scene.primitives.add(tileset); viewer.zoomTo(tileset); }, toggleComponent(componentName) { this.currentComponent = componentName; // 更新按钮样式 for (let key in this.buttonStyle) { this.buttonStyle[key] = key === componentName; } }, }, }; </script> <style> .redText { color: red; } </style> ``` 这里使用了 `v-bind:class` 动态绑定样式类，当 `buttonStyle` 对象中对应的属性为真时，元素会添加 `redText` 样式类，从而显示为红色字体。在 `toggleComponent` 方法中，更新当前组件并更新按钮样式。注意还需要添加 `.redText` 样式定义才能实现红色字体。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值