简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html元素与css样式的学习第二课（文本控制）-2018年8月13日23点50分
Blogger Information
Blog 11
fans 0
comment 0
visits 7642
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html元素与css样式的学习第二课（文本控制）-2018年8月13日23点50分
victor的博客
Original
614 people have browsed it

第二次作业，内容简介的是图文页面：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework2</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="shortcut icon" type="image/png" href="assets/img/favicon.ico" />
    <!--引入浏览器标签里面的小图片-->
    <!--<link rel="stylesheet" type="text/css" href="assets/css/index.css">-->
    <!--引入css外部文件-->
    <style>
        body{margin: 0 auto;padding: 0;font-family: Simhei,"sans serif";}
        article{width: 640px;margin: 0 auto;padding: 5px;}
        article h1{margin: 15px auto;}
        article p{margin: 15px auto;font-size: 1rem;}
        article p.sm{font-size: .8rem;color: rgb(153,153,153);}
        article p.text-center{text-align: center;}
        article p.align-right{text-align: right;}
        article p.margin-top-lg{margin-top: 2.5rem;}
        article p .fr{color: #00a8e6;float: right;}
        article img{margin: 0 auto;display: block;width: 65%;}
    </style>
</head>
<body>

<article>
    <h1>国内思想周报｜异烟肼与养狗文明</h1>
    <!--h1 抬头-->
    <p class="sm">2018-08-08 <span class="fr">黄晓明</span></p>
    <p>异烟肼与养狗文明</p>
    <p>8月8日，一篇题为“遛狗要拴绳，异烟肼倒逼中国养狗文明”的文章在微信朋友圈广泛传播。文章作者“紫竹张先生”介绍称，异烟肼是一种抗结核病的物，对人类有益无害，而对犬类具备非常强的毒杀作用。用异烟肼毒狗的做法近来在全国流行，让很多城市养狗人士不得不在遛狗时拴绳，带来了“倒逼中国养狗文明的进步”的机会。</p>
    <!--p 文章段落-->
    <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3861356213,626543462&fm=173&app=25&f=JPEG?w=600&h=454&s=B7BA3C8BEA1036D6DE4979030300E001" alt="狗狗" />
    <!--img 图片-->
    <p class="text-center">漂亮的狗狗</p>
    <p>漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗</p>
    <p>漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗</p>
    <p>漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗</p>
    <p>杨津涛认为，漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗漂亮的狗狗<a href="https://www.baidu.com" target="_blank" title="返回百度">返回百度</a></p>

    <p class="align-right margin-top-lg">狗狗编辑</p>
</article>
<!--article 作为容器，把内容装在里面-->


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结果图：

homework2.png

手写作业图片：

C4CDA4801260039A9C028B6911B64E44.jpg

总结性评论：

今天主要学习了一些主要常用的html代码，比如说：h1,h2,h3,h4,h5,h6,span,p,img；还有一些常用的css属性和值，比如说：display: block/inline/inline-block; text-align:left/center/right/justify；background-color: #333(这里可以加各种颜色，rgb或者#十六进制)；color:#333(这里可以加各种颜色，rgb或者#十六进制)；font-size: 16px/1rem/1em ... 等。

元素分为块级元素，行内元素，分别是display:block/inline；块级元素独自占一行，行内元素独自不会占一行；块级元素可以设置height和width，行内元素设置不了；块级元素可以设置margin及padding值，行内元素同样设置不了。此外还有一个块级元素和行内元素的中间混搭物；叫inline-block，这货既可以设置长宽，又可以添加margin，padding值，还可以和行内元素并排放置。


Correction status：qualified

Teacher's comments：缺少手写代码哦！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！