一、还原字体和字号

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. 学习之Redis（二）

    Redis的对象和数据结构 一.字符串对象(请参考学习之Redis(一):https://www.cnblogs.com/wbq1994/p/12029516.html) 二.列表对象 列表对象的编码 ...

  2. C#后台架构师成长之路-Orm篇体系

    成为了高工,只是完成体系的熟练,这个时候就要学会啃一些框架了... 常用Orm底层框架的熟悉: 1.轻量泛型的DBHelper,一般高工都自己写的出来的 2.EF-基于Linq的,好好用 3.Keel ...

  3. diango入门(持续更新中)

    学习注意点:理顺项目逻辑,记住重点,项目做好重点注释保留好,以后做项目了能知道这样可以实现,忘了回来查 下载 命令行 pip install django==1.11.26 -i https://py ...

  4. 由随机数rand5实现随机数rand7

    rand5表示生成随机数1,2,3,4,5 rand7表示生成随机数1,2,3,4,5,6,7 要通过rand5构造rand7现在可能没有什么思路,我们先试着用rand7生成rand5 rand7生成 ...

  5. go 语言 搭建 图片上传 服务器

    工具: LiteIDE 配置: 代码:list.html <!doctype html> <html> <head> <meta charset=" ...

  6. RTP中的H264的SVC相关信息

    概览 本文简单的介绍了rtp中的h264的svc相关信息 h264的svc相关格式信息 从RTP Payload Format for H.264 Video可以看见264在rtp的传输过程中,在rt ...

  7. MySQL数据库解决大数据量存储问题

    转载自:https://www.cnblogs.com/ryanzheng/p/8334915.html 提问:如何设计或优化千万级别的大表?此外无其他信息,个人觉得这个话题有点范,就只好简单说下该如 ...

  8. 构建和管理有效API市场的关键步骤

    API市场关键要点 各个行业的公司正在寻找通过外部API扩展服务来塑造数字业务的方法.然而,要获得API的真正好处,是需要超越基本的API管理,再到创建API市场,这是一种专注于连接生产者和消费者的专 ...

  9. C#_.NetFramework_Web项目_NPOI_EXCEL数据导入

    [推荐阅读我的最新的Core版文章,是最全的介绍:C#_.NetCore_Web项目_EXCEL数据导出] 项目需要引用NPOI的Nuget包: B-2--EXCEL数据导入--NPOI--C#获取数 ...

  10. Vue-element-admin实现菜单根据用户权限动态加载

    之前有一些网友对我那个IT部门信息管理系统(http://caijt.com/it)的前端感兴趣,我已经开源到github(https://github.com/Caijt/itsys-ui) 上面有 ...