贴上源代码

<%@ page language="java" contentType="text/html; charset=UTF-8"

         pageEncoding="UTF-8" %>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>首页</title>

    <style>

        * { padding: 0;

            margin: 0;

            font-family: "微软雅黑" ;

        }

        /*.container{*/

        /*    width: 100%;*/

        /*    margin: 0 auto;*/

        /*}*/

        .header {

            height: 72px;

            /*width: 100%;*/

            background: #458fce;

            /*overflow: hidden;*/

            /*zoom: 1;*/

        }

        /*注意这边有个空格*/

        .header .logo {

            color: #fff;

            line-height: 72px;font-size: 30px;

            margin-left: 20px;

            /*width: 200px;*/

            /*height: 80px;*/

            display: inline-block;

            /*text-align: center;*/

            /*line-height: 80px;*/

            float: left;/*因为没有加这个语句导致卡了好几个小时，没有实现置顶*/

            font-weight: 500;

        }

        ul li {

            list-style: none;

        }

        .header ul li.first {

            margin-left: 30px ;

            background:#74b0e2 ;

        }

        .header ul li {

            float: left;

            color: #fff;

            display: inline-block;

            width: 112px;

            height: 72px;

            text-align: center;

            line-height: 72px;

            cursor: pointer;

        }

        /*.header ul li a {*/

        /*    padding: 0 20px;*/

        /*    height:80px;*/

        /*    line-height: 80px;*/

        /*    display: block;*/

        /*    font-size: 16px;*/

        /*}*/

        /*.header ul li a:hover{*/

        /*    color:#fff;*/

        /*}*/

        a {

            color: #fff ;

            text-decoration: none ;

        }

        /*下面不能有空格*/

        .header ul li:hover {

            background:#74b0e2 ;

        }

        .header .login {

            float: right ;

            color: #fff ;

            line-height: 72px ;

            margin-right: 20px ;

        }

    </style>

</head>

<body>

<%--<div class="container">--%>

<div class="header">

    <div class='logo'>原创文字</div>

    <ul>

        <li class='first'><a href="javascript:void(0)">首页</a></li>

        <li><a href="javascript:void(0)">原创故事</a></li>

        <li><a href="javascript:void(0)">热门专题</a></li>

        <li><a href="javascript:void(0)">欣赏美文</a></li>

        <li><a href="javascript:void(0)">赞助</a></li>

    </ul>

    <div class='login'>

        <span><a href="javascript:void(0)">登陆</a></span>

        <span>|</span>

        <span><a href="javascript:void(0)">注册</a></span>

    </div>

</div>

<%--</div>--%>

</body>

</html>

效果图

CSS+HTML初学跟踪项目记录笔记【防丢失】（文章发布系统）二【鸽了】的更多相关文章

  1. 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 （第二节）

    说明 本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误.因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期 ...

  2. 【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 （第十二节）

    好的,那么在上一节中呢,评论功能的后台已经写好了,这一节,先把这部分后台代码和前台对接一下. 1.评论功能实现 我们修改一下保存评论按钮的点击事件,用jQuery的方式获取文本框中的值,然后通过aja ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（35）-文章发布系统②-构建项目

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(35)-文章发布系统②-构建项目 注:阅读本文,需要阅读本系列的之前文章 代码生成器下载地址(文章开头处) ...

  4. JAVAEE期末项目------文章发布系统

    项目文档和代码的GitHub地址:https://github.com/xiangbaobaojojo/- 1.项目介绍 (计科四班  蔡春燕 20150141401)和我 陈香宇(计科四班  201 ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（35）-文章发布系统②-构建项目

    系列目录 注:阅读本文,需要阅读本系列的之前文章 代码生成器下载地址(文章开头处) 接下来我们建立数据库的表和各层的代码 我们只需要两张表,文章列表(MIS_Article)和类别表(MIS_Arti ...

  6. PHP实战-文章发布系统学习记录

    跟随大师的步伐,一步一步向前行进,PHP学习之路中的历程. 如果图片不能正常查看请访问云笔记链接 http://note.youdao.com/share/?id=3c25d8c03ef946d9c6 ...

  7. PHP与MYSQL结合操作——文章发布系统小项目（实现基本增删查改操作）

    php和mysql在一起几十年了,也是一对老夫老妻了,最近正在对他们的爱情故事进行探讨,并做了一个很简单的小东西——文章发布系统,目的是为了实现mysql对文章的基本增删查改操作 前台展示系统有:文章 ...

  8. [Openwrt 项目开发笔记]：Openwrt平台搭建（一）

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 最近开始着手进行Openwrt平台的物联网网关设 ...

  9. [Openwrt 项目开发笔记]：PHP+Nginx安装（七）

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 在上一节中,我们已经搭建了MySQL数据库了,因 ...

  10. [Openwrt 项目开发笔记]：MySQL配置（六）

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 在本人的项目中,运行在路由器上的服务器采用Ngi ...

随机推荐

  1. linux离线安装docker与compose

    前言 系统版本:centos 7.ubuntu 20.04 docker版本:v19.03.9.官方下载地址 docker-compose版本:v2.2.3.官方下载地址 官方提供免安装的二进制程序包 ...

  2. java file I/O流

    一．File的简介:(java.io包) 生活中的文件: (1)文件的作用:持久化(瞬时状态的对立面状态) (1)文件的定义:一堆数据的集合 (2)文件存储的位置:磁盘,硬盘,软盘,U盘等等 计算机中 ...

  3. 解决linux系统的kdump服务无法启动的问题

    **问题:项目麒麟系统服务器的kdump服务无法启动,没有相关日志无法定位问题.** 1.查看服务状态是关闭的,重启系统也无法启动 systemctl status kdump 2.修改grub参数 ...

  4. Jmeter读取结果文件报错Error loading results file解决方法

    最近在项目性能测试过程中,遇到jmeter读取jtl文件出错的问题,如下图所示: 方法一:修改配置文件 将要读取结果文件的组件Configure界面配置都勾选上,默认情况下有些选项没勾选会出错. 第一 ...

  5. 聊一聊使用Spring事物时不生效的场景

    前言 今天介绍一下Spring事物不生效的场景,事物是我们在项目中经常使用的,如果是Java的话,基本上都使用Spring的事物,不过Spring的事物如果使用不当,那么就会导致事物失效或者不回滚,最 ...

  6. 安卓APK加固工具 如何进行实名认证购买和激活

    安卓APK资源混淆加密重签名工具 价格表 授权时长 价格 1小时 49 1天 99 1个月 199 1个季度 399 半年 599 1年 799 付费版功能 功能点 免费版 付费版 去除广告信息 × ...

  7. Spring Event 观察者模式, 业务解耦神器

    观察者模式在实际开发过程中是非常常见的一种设计模式. Spring Event的原理就是观察者模式,只不过有Spring的加持,让我们更加方便的使用这一设计模式. 一.什么是观察者模式 概念: 观察者 ...

  8. 树莓派4b装系统到运行 Blazor Linux 本地程序全记录

    在Linux下运行gui程序,咱也是第一次做,属于是瞎子过河乱摸一通,写得有什么不对和可以优化的地方,希望各位看官斧正斧正. 1. 下载烧录器 https://www.raspberrypi.com/ ...

  9. 6.1 KMP算法搜索机器码

    KMP算法是一种高效的字符串匹配算法,它的核心思想是利用已经匹配成功的子串前缀的信息,避免重复匹配,从而达到提高匹配效率的目的.KMP算法的核心是构建模式串的前缀数组Next,Next数组的意义是:当 ...

  10. 算法——AcWing算法提高课中代码和题解

    文章目录 第一章 动态规划 (完成情况:64/68) 数字三角形模型 最长上升子序列模型 背包模型 状态机模型 状态压缩DP 区间DP 树形DP 数位DP 单调队列优化DP 斜率优化DP 第二章 搜索 ...