一、还原字体和字号

1.利用fireworks切片以及文本添加的功能可以用来定位我们想要的文字是什么字体，行高又是多少，但其实很low，是我们人工挑选出来的。

2.注意点：在企业开发中，如果一个盒子中存储的是文字，那么一般情况下我们会以盒子左边的内边距为基准，不会以右边的内边距为基准，因为这个右边的内边距会有误差（每一行的最后一个字放不下了，只能换一行，导致原来的这一行右边距反而大了一些）

二、文字界面

1.做一个网页的顺序

（1）先清空所有的边距


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

            margin:0;padding:0

        }

（2）从外向内

（3）从上而下


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {

            margin: 0;

            padding: 0

        }

        div{

            margin:0 auto;

            box-sizing: border-box;

            width:372px;

            height:232px;

            border:1px solid #666;/*颜色中两位是一个颜色，应该有六位，但是如果两位一样则可以省略为一位，即这一行颜色全名为#666666*/

            padding:15px;

        }

        h1{

            font-family: "微软雅黑";

            font-size:18px;

            border-bottom:1px solid;

            padding-bottom:10px;

        }/*我们用div标签设置整体的布局，用span标签来设置里面细节的部分，如下设置NEW....*/

        span{

            font-size:14px;/*这里面还有优先级，小标签继承了大标签的特性，同时自己设置的属性又会覆盖原来继承的属性*/

        }

        ul{

            list-style:None;/*这个我们复习了去掉行前面的小圆点*/

            margin-top:10px;

​

        }

        ul li {

            line-height:30px;/*复习了行高*/

            border-bottom:1px dashed;

            padding-left:20px;

            font-size:12px;

            font-family:"微软雅黑";

            font-color:#242424;

        }

</style>

</head>

<body>

<div>

    <h1>最新文章/<span>NEW Articles</span></h1>

    <ul><!--这里还复习了条目的表示方法及其快捷键：ul>li*5再加tab-->

        <li>优秀的国民</li>

        <li>厉害的足球</li>

        <li>富饶的江西</li>

        <li>牛逼的赞800</li>

        <li>还有无敌的我</li>

    </ul>

</div>

</body>

</html>

通过上面的例子，我们一步一步演示了如何将我们的网页实现出来，这种静态网页的布局按照上面的散布进行编写。

四、源码：

d119_edit_static_webpage_of_word.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/d119_edit_static_webpage_of_word.html

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载43-还原字体和字号、文字界面的更多相关文章

  1. H5 56-还原字体和字号

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSDN-markdown编辑器语法——字体、字号与颜色

     Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.但是它本身是不支持修改字体.字号与颜色等功能的!   CSDN-markd ...

  3. Unity编辑器下，界面替换NGUI字体以及字号

    项目中有需要批量替换字体以及字号的需求,一般也就是多语言处理吧. 提供界面如下: 手机拍图,就这样凑合看吧.但是代码不打折. 紧急避让,我只提供修改UILabel以及UIPopupList 下的字体, ...

  4. Ueditor设置默认字体、字号、行间距，添加字体种类（转）

    Ueditor默认字体.字号.行间距的修改: ueditor默认字号是16号,默认字体为sans-serif,默认行间距为5px,如下图所示: 首先,修改ueditor.all.js文件中如上图红框中 ...

  5. markdown语法之字体、字号、颜色以及背景色

    字体.字号与颜色 html标签:<font> font标签属性: face:字体 size:规定文本的尺寸大小. 可能的值:从 1 到 7 的数字. 浏览器默认值是 3. color: 颜 ...

  6. （原创）高DPI适配经验系列：（三）字体与字号、缩放锚点

    一.前言 程序最基本的元素,就是文本,也就是字体.如果程序未进行高DPI的适配,最直观的感受便是字体的模糊.所以本篇便来说一下高DPI适配中的字体问题. 高DPI的适配,简单来说便是便是根据不同的DP ...

  7. ubuntu文字界面与图形界面切换

    redhat: (据说是) 图形界面->文字界面:crtl+alt+F1~6 文字界面->图形界面:crtl+alt+F7 -------------------------------- ...

  8. Ubuntu登录异常： 输入正确的密码， 但是却无法进入系统， 总是返回到登录界面， 但是用ctrl+alt+F1-F文字界面登录都可以进入。

    今天打开电脑的时候, 在输入密码之后, 未进入ubuntu的桌面, 而是显示了几行英文之后有返回到了登录界面.显示的英文如下: could not write bytes: Broken pipe   ...

  9. Linux图形界面和文字界面的切换

    Ctrl+Alt+F1~F6:切换到文字界面 登陆tty1~tty6终端, 运行等级为run level 3 Ctrl+Alt+F7 或者输入命令startX:切换到图形界面,运行等级为run lev ...

随机推荐

  1. 【转载】Java程序模拟公安局人员管理系统

    编程题:公安人员的管理系统1) 学生类:a) 属性:i. 身份号—默认没有,需要手动进行输入ii. 姓名iii. 性别iv. 年龄v. 密码vi. 居住地址vii. 注册日期viii. 人员的信誉程度 ...

  2. 一次在CentOS系统单用户模式下使用passwd命令破密失败的案例

    某次遇到需要进入系统的单用户模式进行破密操作,结果却显示如下: 根据提示:Permission denied(缺少权限) 此时查看/usr/bin/passwd 权限: 正常情况下的权限应该是如下: ...

  3. JavaScript-----7.循环

    1.循环 在JS中主要有以下三种类型的循环 for循环 while循环 do...while循环 2. for循环 2.1 语法结构如下: for (初始化变量: 条件表达式: 操作表达式) { // ...

  4. acwing 849 Dijkstra求最短路 I 模板

    地址 https://www.acwing.com/problem/content/description/851/ 给定一个n个点m条边的有向图,图中可能存在重边和自环,所有边权均为正值. 请你求出 ...

  5. 使用python - selenium模拟登陆b站

    思路 输入用户名密码点击登陆 获取验证码的原始图片与有缺口的图片 找出两张图片的缺口起始处 拖动碎片 功能代码段 # 使用到的库 from selenium import webdriver from ...

  6. ETCD:实验特性和APIs

    原文地址:Experimental features and APIs 大多数情况下,etcd项目是稳定的,但我们仍在快速发展! 我们相信快速发布理念. 我们希望获得有关仍在开发和稳定中的功能的早期反 ...

  7. 为什么 Go 标准库中有些函数只有签名，没有函数体？

    如果你看过 Go 语言标准库,应该有见到过,有一些函数只有签名,没有函数体.你有没有感觉到很奇怪?这到底是怎么回事?我们自己可以这么做吗?本文就来解密它. 首先,函数肯定得有实现,没有函数体,一定是在 ...

  8. 移除 DevExpress 的 XtraForm 标题文字阴影

    问题 在使用 DevExpress 开发 WinForm 程序时,我是使用的默认皮肤进行开发.但客户要求标题栏背景色改为蓝色,标题文字颜色改为白色. 改颜色比较简单,参考了 DevExpress Su ...

  9. SSH框架之Spring第一篇

    1.1. spring概述: 1.1.1 spring介绍 : Spring是分层的Java SE/EE应用 full-stack轻量级开源框架,以IoC(Inverse Of Control : 反 ...

  10. Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题

    场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...