一、还原字体和字号

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. Docker 常用操作命令

    一. docker安装  方式1 本地安装: 1)下载docker安装文件: 2)执行安装命令  yum localinstall *: 3)安装完之后 重启 systemctl restart do ...

  2. 基于Redis扩展模块的布隆过滤器使用

    什么是布隆过滤器?它实际上是一个很长的二进制向量和一系列随机映射函数.把一个目标元素通过多个hash函数的计算,将多个随机计算出的结果映射到不同的二进制向量的位中,以此来间接标记一个元素是否存在于一个 ...

  3. docker下MySQL的主从复制

    MySql的主从复制 sudo docker pull MySQL:5.7 拉取MySQL的镜像文件(版本号为 5.7) sudo docker run -p 3339:3306 --name mas ...

  4. 【转】开发一个这样的 APP 要多长时间？

    作者:蒋国刚 www.cnblogs.com/guogangj/p/4676836.html 呵呵. 这是一个“如有雷同,纯属巧合”的故事,外加一些废话,大家请勿对号入座.开始了…… 我有些尴尬地拿着 ...

  5. Web安全测试学习笔记-DVWA-SQL注入-1

    SQL注入的定义网上很多,作为一个初学者,我对SQL注入的理解是这样的:网站应用一般都有后台数据库(不论是关系型还是非关系型),用户在网站上的绝大部分操作,最终都会跟数据库交互(也就是执行一串SQL语 ...

  6. UTXO和Account模型一个都不能少

    UTXO对于非区块链从业人员来说可能比较陌生,UTXO的全称是Unspent Transaction Output,这中本聪在比特币中的一个天才设计.而Account模型就很常见,也很容易理解,你银行 ...

  7. ASP.NET中的身份验证

    身份验证方式windows passport form none授权allow 允许deny 拒绝特殊符号 *代表所有用户 ?代表匿名用户跳转配置<system.web><autho ...

  8. Java：程序不过是几行代码的集合

    程序不过是几行代码的集合.就像下面这样: public class Test { public static void main(String[] args) { System.out.println ...

  9. NIO中Buffer的重要属性关系解析

    Buffer 是java NIO中三个核心概念之一 缓存, 在java的实现体系中Buffer作为顶级抽象类存在 简单说,Buffer在做什么? 我们知道,在java IO中体系中, 因为InputS ...

  10. python文件夹遍历,文件操作,获取文件修改创建时间

    在Python中,文件操作主要来自os模块,主要方法如下: os.listdir(dirname):列出dirname下的目录和文件os.getcwd():获得当前工作目录os.curdir:返回当前 ...