这是主要内容部分，用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. 001.[python学习]写在前面的

    0.多动手写写也许你所说的问题就不是问题: 1.最好的帮助文档是dir和help,如下图: 2.如果为了快速完成任务可以选择IDE,否则尽量不要依赖它,因为它的智能导致自己的无能: 3.也许有其他语言 ...

  2. MogoDB（6）--mongoDB高可用和4.0特性

    5.1.MongoDB 用户管理 1.用户管理1.1.添加用户为 testdb 添加 tom 用户 use testdb db.createUser({user:"tom",pwd ...

  3. delphi frame 添加 create onshow 事件

    delphi frame  添加 create onshow 事件 https://www.cnblogs.com/Gufan/archive/2011/09/06/2538932.html proc ...

  4. 尚硅谷springboot学习34-整合SpringData JPA

    SpringData简介

  5. vue项目tips

    在main.js引入了封装好的各组件,包括echarts.自定义组件等

  6. VUE页面渲染问题

    <!DOCTYPE html> <html> <head> <script src="./vue.min.js"></scri ...

  7. HTTP请求方式

    HTTP协议中请求的8中方法 OPTIONS获取服务器支持的HTTP请求方法: HEAD跟get很像,但是不返回响应体信息,用于检查对象是否存在,并获取包含在响应消息头中的信息. GET向特定的资源发 ...

  8. html跳动的心实现代码

    <style>         .box{             width: 200px;             height: 400px;             positio ...

  9. eos dapp开发

    https://blog.csdn.net/u010665359/article/details/82906497

  10. （九）random、os、time、datetime、hashlib、pymysql、excel、sys、string相关模块

    1.random模块 1 import random,string 2 print(string.printable) #代表所有的 数字+字母+特殊字符 3 4 print(random.randi ...