贴上源代码

<%@ 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. Win11 开启 telnet

    'telnet' 不是内部或外部命令,也不是可运行的程序或批处理文件. 首先我们打开底部"开始菜单",如图所示.接着打开其中的"设置". 然后进入左边的&quo ...

  2. 规范代码编写风格就用 eslint 和 prettier

    eslint 可以用于规范我们的编码,使得项目中的代码风格一致,更利于阅读和维护,而 prettier 可以在当我们代码不符合 eslint 规范是进行部分自动修复. eslint 通过 npm in ...

  3. 如何选择最适合您的Excel处理库？

    摘要:本文由葡萄城技术团队于博客园原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 引言 GcExcel和POI是两个应用于处理Excel文件的技 ...

  4. 重学JavaScript Promise API

    在这篇教程中,我们将掌握如何在JavaScript中创建并使用Promise.我们将了解Promise链式调用.错误处理以及最近添加到语言中的一些Promise静态方法. 什么是Promise? 在J ...

  5. erlang和rabbitMq在ubuntu上的安装过程

    安装rabbitMQ的前提是安装上erlang,所以从erlang安装开始. 安装erlang 1,先升级一下 $:sudo apt-get update 如果软件源有问题 修改etc/apt/sou ...

  6. 设置启动WebSocket并配置程序池

    开启WebSocket服务 1.导航到"控制面板" > "程序" > "程序和功能" > "启用或禁用 Wind ...

  7. 分享一个 SpringBoot + Redis 实现「查找附近的人」的小技巧

    前言 SpringDataRedis提供了十分简单的地理位置定位的功能,今天我就用一小段代码告诉大家如何实现. 正文 1.引入依赖 <dependency> <groupId> ...

  8. Tcp/Ip协议 A类B类C类D类 地址

    TCP(传输控制协议):负责和远程主机连接  Ip(网际协议):负责寻址,使报文发送到其该在的地方 Ip地址:是TCP/IP的网络层用以标识网络中主机的逻辑地址,可以唯一标识Interent中的一台主 ...

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

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

  10. ISO/OSI七层模型的分层与作用

    ISO/OSI的七层模型 第七层:应用层 为用户提供服务,给用户一个操作界面,如window的图形界面,Linux的命令行: 第六层:表示层 数据提供表示:把01二进制转换为图像数字等用户可以看懂的内 ...