这是主要内容部分，用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. Android 开发 Camera类的拍照与录像

    前言 在开发Android应用的时候,如果需要调用摄像头拍照或者录像,除了通过Intent调用系统现有相机应用进行拍照录像之外,还可以通过直接调用Camera硬件去去获取摄像头进行拍照录像的操作.本篇 ...

  2. asp.net 微信开发（二）

    本节我们主要讲解微信的调试: 前言:平时我们开发项目都是在本地就能进行项目的开发调试,但是在微信上就有难度了,因为微信的数据需要从微信服务器上面拿,所以就需要直接在网站上调试了,接下来就相关的一些个人 ...

  3. c#switch语句的用法

    switch条件语句是一种很常用的选择语句,它与if条件语句不同,它只针对某个表达式的值作出判断,从而决定执行哪一段代码. switch条件语句用到的关键字: switch case break de ...

  4. 容器部署解决方案Docker

      容器部署解决方案Docker 课程目标 目标1:了解Docker与虚拟机的不同点,相比的优势 目标2:掌握Docker的启动方法 目标3:掌握Docker镜像操作 目标4:掌握Docker容器操作 ...

  5. Python paramiko模块基本使用(一）

    使用paramiko模块登录远程主机,对日志进行统计分析. import paramiko def batch_count(days, hours, ips, user, passwd, source ...

  6. [PHP]正则表达式判断网址

    来源:https://segmentfault.com/q/1010000000584340/a-1020000000584362 Markdown 的作者之一写的正则表达式(原文在这) (?i)\b ...

  7. splash介绍及安装_mac

    一.splash介绍 Splash是一个Javascript渲染服务.它是一个实现了HTTP API的轻量级浏览器,基于Python3和Twisted引擎,可以异步处理任务,并发性能好. 二.spla ...

  8. 计算系统中互联设备Survey

    Survey of Inter-connects in computer system 姚伟峰 http://www.cnblogs.com/Matrix_Yao/ https://github.co ...

  9. SpringCloud-day08-Hystrix断路器

    8.Hystrix断路器 8.1.Hystrix简介 在分布式环境中,许多服务依赖项中的一些必然会失败.Hystrix是一个库,通过添加延迟容忍和容错逻辑,帮助你控制这些分布式服务之间的交互. Hys ...

  10. BASE64、MD5、SHA、HMAC几种加密算法

    本篇内容简要介绍BASE64.MD5.SHA.HMAC几种加密算法.    BASE64编码算法不算是真正的加密算法.    MD5.SHA.HMAC这三种加密算法,可谓是非可逆加密,就是不可解密的加 ...