贴上源代码

<%@ 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. centos7安装weblogic

    前言 简介:weblogic是java应用服务器软件的一种,类似于tomcat,但功能更多,适用于大型应用场景. 版本: 系统:centos 7(最小化安装,无图形化界面) jdk: oraclejd ...

  2. 解决win10/ubuntu端口占用问题

    win10解决方案 首先打开cmd命令行 命令行里输入 netstat -ano|findstr 被占用端口号 然后可以看到占用该端口号的pid 输入taskkill -f -pid pid号即可 u ...

  3. Programming abstractions in C阅读笔记: p118-p122

    <Programming Abstractions In C>学习第49天,p118-p122,总结如下: 一.技术总结 1.随机数 (1)seed p119,"The init ...

  4. 安装iTerm2和oh-my-zsh

    安装iTerm2和oh-my-zsh 此文是在参考许多教程(见目录:参考)并结合本人安装经历写下的一篇关于iTerm2和oh-my-zsh的认识和超级详细安装教程.全文所有图片均为本人截屏拍摄.希望能 ...

  5. Excel中的数值四舍五入方法详解

    在日常工作和数据处理中,我们经常需要对数值进行四舍五入操作.Excel作为一款强大的电子表格软件,提供了多种方法来实现数值的四舍五入.本文将介绍Excel中常用的四舍五入函数及其基本使用方法. ROU ...

  6. 使用 OpenTelemetry 构建 .NET 应用可观测性（2）：OpenTelemetry 项目简介

    前世今生 OpenTracing OpenTracing 项目启动于 2016 年,旨在提供一套分布式追踪标准,以便开发人员可以更轻松地实现分布式追踪. OpenTracing 定义了一套 Traci ...

  7. Andrew Ng 机器学习&深度学习课程 代码作业解答 集合

    写在最前 ​ 2018年是对自己来说是崭新的一年,在过去的3个多月里,从最基础的lr, 学到现在的LSTM, GAN..感觉第一次追上了计算机科学飞速发展的浪潮.虽然很多地方都仍是一知半解,但时间还长 ...

  8. 4399 Flash游戏专用浏览器, 无需安装Flash插件

    目前所有的主流浏览器都已经不再支持Flash了,即使有一些国内浏览器还支持flash,但只能安装国内特供版Flash Player. 但问题的关键在于,这个国内特供版跟 Adobe 海外发行的版本是两 ...

  9. MySQL实战实战系列 04 深入浅出索引（上）

    提到数据库索引,我想你并不陌生,在日常工作中会经常接触到.比如某一个 SQL 查询比较慢,分析完原因之后,你可能就会说"给某个字段加个索引吧"之类的解决方案.但到底什么是索引,索引 ...

  10. 「atcoder - agc054c」Roughly Sorted

    link. 高妙题,我只会到构造下界那一步-- 构造下界比较容易,只需要注意到交换一次最多让序列向合法迫近一步即可.则答案下界为 \(\sum_i \max\{\left(\sum_{j < i ...