一、还原字体和字号

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. 完全卸载Android Studio(卸载得干干净净)

    步骤其实很简单,一共三步,但是每一步都需要完成,步骤如下: 打开控制面板或腾讯软件管家等执行常规的卸载操作. 找到SDK的安装目录手动删除SDK. 进入“C:\Users\<你的用户名下> ...

  2. Android框架式编程之LiveData

    一.LiveData 介绍 LiveData是 Google 推荐的 Android 架构组件之一,是一个基于观察者模式的数据容器,但与一般的被观察者不同的是,它是有生命周期感知功能,解决了Andro ...

  3. Android 程序分析环境搭建-静态分析环境搭建

    1.2 静态分析环境搭建 这里主要讲一些用的比较顺手的工具,一并列出来,Uaa,等环境配置, 2,notepad++ ,everything , Jdgui ,idea, ida ,Fiddler , ...

  4. redis scan命令使用

      以前的项目中有用到redis的keys命令来获取某些key,知道看了这篇文章 https://mp.weixin.qq.com/s/SGOyGGfA6GOzxwD5S91hLw.安全起见,这次打算 ...

  5. Java之Lambda表达式

    函数式编程思想概述 面向对象过分强调“必须通过对象的形式来做事情”,而函数式思想则尽量忽略面向对象的复杂语法——强调做什么,而不是以什么形式做. 面向对象的思想: 做一件事情,找一个能解决这个事情的对 ...

  6. 在mysql中如何写注释

    MySql--三种注释写法 #这是注释/*注释内容*/ --  注释   (--与注释内容之间必须加空格)

  7. [考试反思]1113csp-s模拟测试114：一梦

    自闭.不废话.写一下低错. T1:觉得信心赛T1不会很恶心一遍过样例直接没对拍(其实是想写完T2之后回来对拍的) 状态也不好,基本全机房都开始码了我还没想出来(skyh已经开T2了).想了40多分钟. ...

  8. 新版Notepad++加十六进制查看的插件HexEditor

    Notepad++新版虽然去掉了在线插件商店功能,但是依然可以使用自定义插件 Notepad++下载地址 腾讯(请务必点普通下载):https://pc.qq.com/detail/0/detail_ ...

  9. 微信小程序的坑(持续更新中)

    参与微信小程序开发有一段时间了,先后完成信息查询类和交易类的两个不同性质的小程序产品的开发:期间遇到各种各样的小程序开发的坑,有的是小程序基础功能不断改进完善而需要业务持续的适配,有的是小程序使用上的 ...

  10. Gradle如何在任务失败后继续构建

    如果我们运行Gradle构建并且其中一项任务失败,则整个构建将立即停止.因此,我们可以快速反馈构建状态.如果我们不想这样做,并且希望Gradle执行所有任务,即使某些任务可能失败了,我们也可以使用命令 ...