贴上源代码

<%@ 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. 青少年CTF平台-Web-POST&GET

    题目描述 一星简单题,看我如何给你过了. 启动环境,等待三十秒先喝口水. 做题过程 访问题目地址,说让我们用GET方式提交一个名称为get且值为0的变量. 在URL后面加上?get=0,回车.已经成功 ...

  2. 发布关于PostGIS对于USD格式的拓展

    我们非常高兴的发布为了一年一度的SIGGRAPH 2023发布关于为PostGIS支持USD格式的新拓展. 新添加了3个函数 ST_AsUSDA(geom geometry, usd_root_nam ...

  3. Python | 函数、数据容器

    1.函数 函数:是组织好的,可重复使用的,用来实现特定功能的代码段. 1.1 简单案例 重复使用计算字符串的长度 str1 = "heystar" str2 = "pyt ...

  4. 探索ChatGPT的Fine-tuning和Embeddings

    1.概述 今天我们将深入探索ChatGPT的两项核心技术:Fine-tuning(微调)和Embeddings(嵌入).这些技术在现代自然语言处理领域扮演着至关重要的角色,为模型的性能提升和适应特定任 ...

  5. Go 上下文的理解与使用

    为什么需要 context 在 Go 程序中,特别是并发情况下,由于超时.取消等而引发的异常操作,往往需要及时的释放相应资源,正确的关闭 goroutine.防止协程不退出而导致内存泄露.如果没有 c ...

  6. VulnStack - ATT&CK红队评估实战(一) Writeup

    VulnStack - ATT&CK红队评估实战(一) Writeup VulnStack(一)环境搭建 项目地址 http://vulnstack.qiyuanxuetang.net/vul ...

  7. 海量前端后台Java源码模板下载

    给大家收集了海量的模板和源码素材,可下载研究和学习使用. 一:前端响应式静态Html5+Css3网页模板(无后台)                1:PC模板:9900套响应式html5+css3网页 ...

  8. Burp Suite抓包工具配置代理手机抓取数据包

    工作中很多手机上的问题因为环境差异导致无法在pc设备上完整的模拟真实物理手机,因此需要方法能抓取到手机设备上所有数据包发送详情.发现了这个好用的数据包抓取工具Burp Suite. 一.配置流程: 1 ...

  9. Lua5.3 笔记

    Lua5.3 笔记 最近用skynet,sproto通讯,完全看不懂通讯二进制是怎么写的,发现都是string这个,string那个,完全理解不来. 于是查了一下string.pack的api,和之前 ...

  10. docker bridge网络类型研究

    bridge模式是docker的默认网络模式,使用docker run -p时,docker实际是在iptables做了DNAT规则,实现端口转发功能.可以使用iptables -t nat -vnL ...