贴上源代码

<%@ 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. [Go笔记] 基础-01: Golang发展简史、著名项目及基本使用

    引言 Golang,又称Go语言,是一门开源的静态类型编译型编程语言.自从2007年由谷歌的罗伯特·格里泽默(Robert Griesemer).罗布·派克(Rob Pike)和肯·汤普森(Ken T ...

  2. 从浅入深了解.NET Core MVC 2.x全面教程

    一.基础 1.默认配置 使用Kestrel Web Server ASP.NET Core内置--跨平台 IIS集成 UseIIS() UseIISIntergration() Log IConfig ...

  3. 实现无限存储：基于JuiceFS 创建 Samba 和 NFS 共享

    随着企业数据量的持续增长,存储容量需求日益增大.如何采用没有容量上限的云存储替换本容量有限的本地磁盘,已成为广泛的需求和共识.特别是在企业中常用的 Samba 和 NFS 共享,如果能够使用云存储作为 ...

  4. 深入浅出 Typescript

    TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程). TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计 ...

  5. 一次Java内存占用高的排查案例，解释了我对内存问题的所有疑问

    原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,非公众号转载保留此声明. 问题现象 7月25号,我们一服务的内存占用较高,约13G,容器总内存16G,占用约85%,触发了内存报警(阈值8 ...

  6. 选择合适的方法进行API接口调试

    随着互联网的快速发展,API(Application Programming Interface)接口在软件开发中扮演着重要的角色.调试API接口是确保系统正常运行的关键步骤之一.本文将介绍如何选择适 ...

  7. 震坤行根据ID取商品详情 API

    item_get-根据ID取商品详情 注册开通 zhenkunhang.item_get 公共参数 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中) se ...

  8. subDomainBrute源码分析

    SubDomainsBrute简介 ​ SubDomainsBrute是一款目标域名收集工具 ,用小字典递归地发现三级域名.四级域名.五级域名等不容易被探测到的域名.字典较为全面,小字典就包括3万多条 ...

  9. TCP连接的关键之谜：揭秘三次握手的必要性

    TCP 连接建立 当我们浏览网页.发送电子邮件或者进行在线游戏时,我们常常不会想到背后复杂的网络连接过程.然而,正是这些看似不起眼的步骤,确保了我们与服务器之间的稳定通信.其中最重要的步骤之一就是TC ...

  10. 数字时代的自我呈现：探索个人形象打造的创新工具——FaceChain深度学习模型工具

    数字时代的自我呈现:探索个人形象打造的创新工具--FaceChain深度学习模型工具 1.介绍 FaceChain是一个可以用来打造个人数字形象的深度学习模型工具.用户仅需要提供最低一张照片即可获得独 ...