这是主要内容部分，用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. SAP Solution Manager 能够连接到 SAP Service Marketplace

    使用 在该步骤中,您要确保 SAP Solution Manager 能够连接到 SAP Service Marketplace. 作业 SAP Support Portal(SAPOSS)的 RFC ...

  2. CentOS使用nginx部署https服务

    nginx安装参考:https://www.cnblogs.com/taiyonghai/p/6728707.html 自签证书生成参考:https://gmd20.github.io/blog/op ...

  3. pymssql包安装方法

    https://docs.microsoft.com/en-us/sql/connect/python/pymssql/python-sql-driver-pymssql

  4. Docker 多主机方案

    利用OpenVSwitch构建多主机Docker网络 [编者的话]当你在一台主机上成功运行Docker容器后,信心满满地打算将其扩展到多台主机时,却发现前面的尝试只相当于写了个Hello World的 ...

  5. Winform 中写代码布局中遇到的控件遮盖问题

    在winform中编程时,需要动态向主窗体中增加菜单栏和用户控件,菜单栏需要设置DockStyle为Top ,而设置用户控件的DockStyle为Fill,之后在加载的时候,出现了菜单栏遮盖用户控件的 ...

  6. Python序列化操作与反序列操作

    一.概念 序列化:转向一个字符串数据类型序列:字符串 二.需要做序列化操作的情况1.数据存储2.网络上数据传输 从数据类型到字符串的过程叫序列化从字符串到数据类型的过程叫反序列化 三.现有序列化模块1 ...

  7. Adobe CC 下载地址

    Adobe CC 2015下载地址 Photoshop http://trials3.adobe.com/AdobeProducts/PHSP/16/win32/Photoshop_16_LS20_w ...

  8. Cocos2dx开发之设计模式

    cocos2dx的几种常见设计模式 一 单例模式 Cocos2dx中的单例有:CCDirector,CCTextureCache,CCSpriteFrameCache,CCScriptEngineMa ...

  9. 哈尔滨工程大学ACM预热赛(A,C,H,I)

    A: 链接:https://ac.nowcoder.com/acm/contest/554/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言655 ...

  10. vue 配置了全局的http拦截器，单独某个组件不需要这个拦截器，如何设置

    之前写过关于全局配置http拦截器的随笔,现在有个需求,在微信支付时,生成二维码,页面显示一个遮罩层,二维码页面需要每两秒请求一次接口,若返回结果为已支付,则进行页面跳转,但因为全局http中load ...