这是主要内容部分，用html实现版块分布。

接下来是样式部分。

让页面所有元素的padding和margin都设置为0 ；

否则加入一张大的覆盖的背景图片后，会由于浏览器的缘故，图片周边有白边；

设置背景图，并且把字体设置为微软雅黑；

注意代码格式，同样是background就一起写在后面，最好不要使用注释代码，否则浏览器会多次重复检索，会降低页面显示速度；

板块位置设置为相对，设置字体背景块颜色；

opacity为设置透明度，前一个opacity取值范围是0-100,后一个opacity取值范围是0-1，越接近0就越透明；

给正文部分板块设置绝对路径，行间距等；

对超链接设置样式：

link:连接平常的状态

visited:连接被访问过之后

hover:鼠标放到连接上的时候

active:连接被按下的时候

这几个属性顺序不能颠倒，一般正常顺序为：link，visited，hover，active，即
a:link 
a:visited 
a:hover
a:active

代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>东野圭吾</title>
        <style>
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: url(./img/timg4Y6FJHB6.jpg) no-repeat center 0px fixed;
        background-size: cover;
    /*
    background-position: center 0;
    background-size: cover;
    background-attachment:fixed;
    background-repeat:no-repeat;
    */
    font-family: "微软雅黑", sans-serif;
}

.dise {
    position: relative;
    top: 150px;
    background-color: #4F4F4F;
    width: 1300px;
    height: 400px;
    filter:alpha(opacity:30);
    opacity:0.5;font-family: "微软雅黑"
}

.neirong1{
    position: absolute;
    left: 300px;
    top: 170px;
    padding: 10px;
    width: 400px;
    color: black;
    margin-bottom: 10px;
    font-size: 22px;font-family: "微软雅黑"
}

.neirong2 {
    position: absolute;
    top: 350px;
    left: 300px;
    padding: 10px;
    width: 400px;
    color: black;
    margin-bottom: 10px;
    font-size: 22px;
}

.neirong3 {
    position: absolute;
    top: 150px;
    left: 750px;
    padding: 10px;
    width: 400px;
    color: black;
    margin-bottom: 10px;
    font-size: 22px;
    line-height:40px;
}

a:link {
    color: #FF0000;
    text-decoration: underline;
}

a:visited {
    color: #FFFFFFFF;
    text-decoration: none;
}

a:hover {
    color: #000000;
    text-decoration: none;
}

a:active {
    color: #FFFFFF;
    text-decoration: none;
}

</style>
</head>
<body>
    <div class="dise"></div>
        <div class="neirong1">东野圭吾（ひがしの けいご，Higashino Keigo），日本推理小说作家。
            代表作有<a href="#">《放学后》</a>
            <a href="#">《秘密》</a>
            <a href="#">《白夜行》</a>
            <a href="#">《以眨眼干杯》</a>等。
            1958年2月4日出生于日本大阪。</div>

            <div class="neirong2">毕业于大阪府立大学电气工学专业，
                之后在汽车零件供应商日本电装担任生产技术工程师，并进行推理小说的创作。
                1985年，凭借《放学后》获得第31回江户川乱步奖，从此成为职业作家，开始专职写作。 </div>

            <div class="neirong3">1999年<a href="#">《秘密》</a>获第52届日本推理作家协会奖，
                2006年<a href="#">《嫌疑人X的献身》</a>获134届直木奖，
                东野圭吾从而达成了日本推理小说史上罕见的“三冠王”。
                2017年4月，第11届中国作家富豪榜子榜单“外国作家富豪榜”发布，
                东野圭吾问鼎外国作家富豪榜首位。 </div>
</body>
</html>

运行结果如下图：

css样式最好和html内容分开写，单独创一个css文件，在html中用link标签链；

最后注意排版，美观！！！

初学html，任务1：一个简单html页面，要求：内容页面装一篇文章 用html来分段的更多相关文章

  1. HTTP lab01 做一个简单的测试用 web页面

      做一个简单的测试用 web页面     1.安装httpd服务   yum install httpd   安装完httpd服务后,系统就自动生成了/var/www/html目录     创建一个 ...

  2. 通过Nginx实现一个简单的网站维护通知页面

    原文:https://www.zhyd.me/article/106 在网站发版时,总会有那么一小段时间服务是访问不通的,一般用户看到的都会是一个502的错误页面 那么可以通过nginx实现一个简单的 ...

  3. 一个简单的修改 iis默认页面的方法..

    1. IIS 默认打开的是欢迎页面 2. 然后找到了一个比较简单的修改默认界面的方法: 找到这个文件的默认路径 C:\inetpub\wwwroot 然后修改 iisstart.htm 文件 在hea ...

  4. 初学javascript，写一个简单的阶乘算法当作练习

    代码如下: <script> var a = prompt("请输入值"); function mul(a){ if(a==1){ return 1; } return ...

  5. 一个简单的python线程池框架

    初学python,实现了一个简单的线程池框架,线程池中除Wokers(工作线程)外,还单独创建了一个日志线程,用于日志的输出.线程间采用Queue方式进行通信. 代码如下:(不足之处,还请高手指正) ...

  6. python 搭建一个简单的 搜索引擎

    我把代码和爬好的数据放在了git上,欢迎大家来参考 https://github.com/linyi0604/linyiSearcher 我是在 manjaro linux下做的, 使用python3 ...

  7. Android下实现一个简单的计算器源码

    下面的内容是关于Android下实现一个简单的计算器的内容. import android.app.Activity; import android.os.Bundle;import android. ...

  8. 十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

    上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题.今天我们来重新调整一下列表页面和内容页面,使我们做的后台 ...

  9. 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面

    script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...

随机推荐

  1. java 中的interface是否继承object

    首先我们从C++说起, c++可以多继承.也就是一个类型 --- class,可以继承自2个以上的父类型.多继承导致一个问题,很多人知道.例如,如果类型B,类型C均继承自类型A.然后类型D继承自类型B ...

  2. Linux 文件目录管理命令

    1.touch 用于设置空白文件或设置文件时间 touch命令参数及作用 参 数                                                             ...

  3. swoole结合支持thinkphp 5.0版本

    安装swoole pecl install swoole 修改PHP配置文件php.ini加入 extension=swoole.so 有可能不需要人工去加,安装时自动加入进来了, 查看swoole扩 ...

  4. HTTP 响应代码

    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成.响应分为五类:信息响应, ...

  5. C++重写new和delete，比想像中困难

    关于C++内存管理这话题,永远都不过时.在我刚出道的时候,就已经在考虑怎么检测内存泄漏(https://www.cnblogs.com/coding-my-life/p/3985164.html).想 ...

  6. 查询当前局域网下所有IP和物理网卡地址

    WIN+R –> 打开cmd 键入 arp -a

  7. tensorflow，object，detection，在model zoom，新下载的模型，WARNING:root:Variable [resnet_v1_50/block1/unit_3/bottleneck_v1/conv3/BatchNorm/gamma] is not available in checkpoint

    现象: WARNING:root:Variable [resnet_v1_50/block1/unit_1/bottleneck_v1/conv1/BatchNorm/beta] is not ava ...

  8. 初学python笔记----字符串

    ---恢复内容开始--- 1.在python中,用引号括起来的都是字符串,引号可以是单引号,也可以是双引号 2.修改字符串的大小写 3.字符串拼接用“+” 4.制表符("\t"), ...

  9. Java框架spring 学习笔记（十八）：事务管理（xml配置文件管理）

    在Java框架spring 学习笔记(十八):事务操作中,有一个问题: package cn.service; import cn.dao.OrderDao; public class OrderSe ...

  10. mongodb突然出现不是内外部命令或可执行

    可能因为晚上突然停电,电脑突然关机,给mongoDB造成影响,第二天出现了: 通过百度搜索与尝试:https://blog.csdn.net/hh12211221/article/details/78 ...