微风轻吟挽歌
微风轻吟挽歌

纯css简单导航栏的制作及问题

导航栏的总体制作

效果演示

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            color: aliceblue;
        }

        .demu>ul>li {
            float: left;
        }

        nav {
            position: relative;
            background-color: hsl(240, 67%, 53%);
            width: 100%;
            height: 40px;
            /* text-align: center; */
        }

        nav>ul {
            width: 900px;
            /* display: inline-block; */
            height: 40px;
            margin: auto;

        }


        .demu ul li a {
            width: 160px;
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            background-color: hsl(240, 67%, 53%);
            transition: all 2s;
        }

        .demu ul li a:hover {
            background-color: rgb(26, 102, 196);
        }

        .demu ul li:hover .suplist {
            display: block;
        }

        .suplist {
            position: absolute;
            width: 160px;
            display: none;
            opacity: .9;
        }

        .box {
            clear: both;
        }
       /* 此box为导航栏下方的div可用作测试，代码效果为清除浮动（float）  */

        .line {
            height: 40px;
            width: 1px;
            opacity: .6;
        }

        .one {
            background-image: linear-gradient(transparent, #031733, transparent);
        }

        .two {
            background-image: linear-gradient(transparent, #afc4e8, transparent);
        }
    style>
head>

<body>
    <nav class="demu">
        <ul>
            <li><a href="">首页a>li>
            <li class="line one">li>
            <li class="line two">li>
            <li><a href="">其他部分a>
                <ul class="suplist">
                    <li><a href="">下拉列表1a>li>
                    <li><a href="">下拉列表2a>li>
                    <li><a href="">下拉列表3a>li>
                ul>
            li>
            <li class="line one">li>
            <li class="line two">li>
            <li><a href="">公司简介a>
                <ul class="suplist">
                    <li><a href="">内容自改a>li>
                    <li><a href="">下拉列表02a>li>
                    <li><a href="">下拉列表03a>li>
                ul>
            li>
            <li class="line one">li>
            <li class="line two">li>
            <li><a href="">摸鱼睡觉a>
                <ul class="suplist">
                    <li><a href="">下拉列表01a>li>
                    <li><a href="">下拉列表02a>li>
                    <li><a href="">下拉列表03a>li>
                ul>
            li>
            <li class="line one">li>
            <li class="line two">li>
            <li><a href="">导航栏a>
                <ul class="suplist">
                    <li><a href="">下拉列表01a>li>
                    <li><a href="">下拉列表02a>li>
                    <li><a href="">下拉列表03a>li>
                ul>
            li>

        ul>
    nav>
   
body>

html>

知识点小结

1. float 需要将li左浮动让所有导航栏在同一排

 .demu>ul>li {
            float: left;
        }

代码出自上方导航栏

效果演示：
未浮动
纯css简单导航栏的制作及问题_第1张图片

浮动后
请添加图片描述

2.a标签的css reset

 a {
            text-decoration: none;
            color: aliceblue;
            /* 设置颜色为白色以及去除下划线*/
        }

效果
在这里插入图片描述

3.下拉列表的隐藏以及位置固定

 .demu ul li:hover .suplist {
            display: block;
        }
/* demu为nav的类选择器在小编代码中两者为一个可以直接替换*/
        .suplist {
            position: absolute;
            /* 定位 */
            width: 160px;
            display: none;
            opacity: .9;
        }

4.渐变颜色的产生以及延时动画

        /* 颜色渐变*/
 .one {
            background-image: linear-gradient(transparent, #031733, transparent);
        }

        .two {
            background-image: linear-gradient(transparent, #afc4e8, transparent);
        }
 
      /* 延时动画*/
          div{
            width: 40px;
            height: 40px;
            background-color: aqua;
            transition: all 3s;
        }
        div:hover{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
        }

效果展示

5.导航栏不随页面的放缩移动，但始终处于屏幕中间位置

 nav>ul {
            width: 900px;
            /* display: inline-block; */
            height: 40px;
            margin: auto;

        }
```/*设置ul为固定宽度但是能装下所有的li */
 nav {
            position: relative;
            background-color: hsl(240, 67%, 53%);
            width: 100%;
            height: 40px;
            /* text-align: center; */
        }
/* 设置nav宽度为百分比*/

优势 这样的导航栏放缩后背景颜色不会随放缩而不在页面中央，且li位置固定不会随放大页面被挤出来

6.透明度

 opacity: .9;

效果演示
纯css简单导航栏的制作及问题_第2张图片

你可能感兴趣的:(css,html,前端)

  • 《恐龙餐厅菜单页面代码说明文档》 欣然～ html5
    一、整体概述此HTML文件构建了一个恐龙餐厅的菜单页面，用户能够浏览菜品、将菜品添加到购物车，并进行支付操作。页面运用HTML搭建结构，CSS进行样式设计，JavaScript实现交互功能。二、HTML结构1.文档头部（）html恐龙餐厅菜单/*CSS样式代码*/：声明文档类型为HTML5。：指定文档语言为中文（中国大陆）。：设置字符编码为UTF-8，确保中文等字符能正确显示。：让页面在不同设备上
  • 基于html5QrCode实现的H5扫码功能（uni-app v2版本） _虾仁不眨眼_ 移动端H5uni-apphtml5
    1.安装（选择一种方式）使用npmHtml5Qrcodenpm链接npmihtml5-qrcode直接引入html5-qrcode.min.js文件（本例使用此方法）2.扫码组件代码（先引入Html5Qrcode资源）exportdefault{name:'Scan',model:{props:'value',event:'close'},props:{value:{type:Boolean,de
  • el-upload 禁用且隐藏上传按钮 _虾仁不眨眼_ Vue2elementui
    1.现象el-upload上传图片组件禁用时，仍然显示上传按钮，不美观。2.解决方案el-upload组件上，动态添加禁用时的类名(如：hide)，通过css隐藏上传按钮。代码实现如下：::v-deep.hide.el-upload--picture-card{display:none;}3.实现效果只有查看的样式拉(#^.^#)
  • input限制只能输入正整数 _虾仁不眨眼_ javascripthtml5
    要限制input元素只能输入正整数，可以使用以下几种方法：1.使用HTML5的type="number"属性这种方式可以限制输入框只接受数字输入，并且可以通过min和step属性设置最小值和步长。2.使用正则表达式进行输入验证使用@input事件监听输入框的输入事件，并在validateInput方法中使用正则表达式过滤掉非数字和非正整数的字符。//html//jsmethods:{validat
  • 前端大屏触摸签名实现 风无雨 前端前端
    参考：JavaScript实现手写签名，可触屏手写，支持移动端与PC端双端保存_js手写签名-CSDN博客https://www.cnblogs.com/smileZAZ/p/17219400.html1.新建一个canvas元素获取canvas上下文，绘制初始矩形，设置高度宽度，初始绘制位置0,0//创建上下文constctx=canvas.getContext('2d')2.监听touchst
  • 移动端Canvas实现手写签名 不知名靓仔 canvas
    引言在移动应用开发中，手写签名功能的集成已经成为许多业务场景的标配，比如电子合同签署、医疗记录确认或是物流配送签收等。本文将详细阐述如何在移动端实现手写签名，包括技术选型、具体实现步骤以及优化建议，帮助开发者快速上手并构建高质量的手写签名体验。技术选型1.使用CanvasAPIHTML5的CanvasAPI提供了在网页上绘制图形的能力，包括路径、文本、图像等，非常适合用来捕捉和展示手写签名。在移动
  • 最新微信小程序面试题集结 江湖二哥 微信小程序前端面试小程序
    1、微信小程序与H5的区别?第一条是运行环境的不同传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。第二条是开发成本的不同只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BuG第三条是获取系统级
  • 2021-05-25 张辣鸡 爬虫记录python爬虫
    解决12306抢票系统弹出来的弹窗问题应为疫情原因进入12306网站登陆界面弹出来这样一个界面进入登陆界面的网站，把鼠标放在确定的位置右键点击检查，找到#我把它放在另一个函数中，这样调用就可以了defclick_ok1(self):bounce_button=driver.find_element_by_css_selector(".btn.btn-primary.ok")bounce_butto
  • 使用yolov8+flask实现精美登录界面+图片视频摄像头检测系统 FL1623863129 深度学习YOLOflaskpython
    这个是使用flask实现好看登录界面和友好的检测界面实现yolov8推理和展示，代码仅仅有2个html文件和一个python文件，真正做到了用最简洁的代码实现复杂功能。测试通过环境：windowsx64anaconda3+python3.8ultralytics==8.3.81flask==1.1.2torch==2.3.0运行步骤：安装好环境执行pythonlogin.py后端实现代码：from
  • 第四章：高级特性与最佳实践 - 第五节 - Tailwind CSS 代码组织和维护技巧
    在大型项目中，良好的代码组织和维护策略对于项目的可持续发展至关重要。本节将介绍如何在使用TailwindCSS的项目中组织和维护代码，以提高开发效率和代码质量。目录结构规范推荐的项目结构src/├──styles/│├──base/││├──typography.css││├──colors.css││└──reset.css│├──components/││├──button.css││├──c
  • 第四章：高级特性与最佳实践 - 第三节 - Tailwind CSS 性能优化策略
    在使用TailwindCSS开发大型项目时，性能优化是一个不可忽视的话题。本节将从构建性能、运行时性能、文件体积等多个维度，详细介绍TailwindCSS的性能优化策略。构建优化优化扫描范围//tailwind.config.jsmodule.exports={content:[//只扫描实际使用的文件'./src/pages/**/*.{js,jsx,ts,tsx}','./src/compon
  • 第四章：高级特性与最佳实践 - 第五节 - Tailwind CSS 代码组织和维护技巧
    在大型项目中，良好的代码组织和维护策略对于项目的可持续发展至关重要。本节将介绍如何在使用TailwindCSS的项目中组织和维护代码，以提高开发效率和代码质量。目录结构规范推荐的项目结构src/├──styles/│├──base/││├──typography.css││├──colors.css││└──reset.css│├──components/││├──button.css││├──c
  • 第四章：高级特性与最佳实践 - 第四节 - Tailwind CSS CSS 提取和打包优化
    在现代前端工程中，CSS的提取和打包优化对于项目性能至关重要。本节将详细介绍如何在使用TailwindCSS的项目中实现CSS的高效提取和打包优化。CSS提取策略MiniCssExtractPlugin配置//webpack.config.jsconstMiniCssExtractPlugin=require('mini-css-extract-plugin')module.exports={mo
  • 订单管理系统 大学生数据库大作业/数据库实践MYSQL 陌路物是人非 数据库课程设计
    订单管理系统从入门到入土下载Maven，Nodejs创建一个数据库sql_end，创建四个数据库表，并确保用户名为root用户密码为123456再IDEA中加载Springboot依赖（可以直接新建一个任意名称的文件夹，项目导入spring的框架），启动spring项目打开index.html输入用户名和密码，点击注册，再点击登录点击个人中心，点击修改用户信息，修改自己的余额点击逛店铺，选择一个商
  • 如何设计一个高并发的秒杀架构？ 老程不秃 数据结构Java后端架构java数据结构程序人生spring
    写在前面高并发下如何设计秒杀系统？这是一个高频面试题。这个问题看似简单，但是里面的水很深，它考查的是高并发场景下，从前端到后端多方面的知识。秒杀一般出现在商城的促销活动中，指定了一定数量（比如：10个）的商品（比如：手机），以极低的价格（比如：0.1元），让大量用户参与活动，但只有极少数用户能够购买成功。这类活动商家绝大部分是不赚钱的，说白了是找个噱头宣传自己。虽说秒杀只是一个促销活动，但对技术要
  • 【电商项目】-设置跨域配置实现前后端分离 总是幸福的老豌豆 日常工作总结解决跨域请求
    前言最近在开发前后端分离的电商项目，前端框架是VUE，后端是我们熟悉的springboot框架，做过前后端分离项目的同学，‍肯定晓得我们项目会存在跨域请求的问题，下面贴出项目中的配置类，来解决跨域请求问题：packagecom.zcw.config;importorg.springframework.context.annotation.Bean;importorg.springframework
  • 程序调用Sql Server存储过程超时，但是数据库执行存储过程无异常的问题剖析 .Net 爱好者 c#.net.netcore
    在前端程序调用存储过程时出现执行超时，而直接在数据库中执行存储过程没有问题，这种情况可能与以下几个因素有关：1.查询计划缓存和参数嗅探SQLServer会为存储过程生成并缓存查询计划，以便在后续执行时提高性能。然而，查询计划是基于第一次执行时的参数生成的，这被称为“参数嗅探”。如果第一次执行时的参数与后续执行时的参数差异较大，可能会导致不适合的查询计划，从而影响性能。重新编译存储过程会使SQLSe
  • ARM N2微架构介绍 「已注销」 CPU微架构verilog
    简介之前在“ARMV2处理器微架构介绍”一文中介绍了面向服务器、云计算等应用的ARMV2处理器微架构，V系列具有更强性能，N系列强调性能和功耗等方向的平衡，本文就将介绍一下ARMN2处理器微架构相比较前代的一些提升。尽管ARM还具备一代N1/V1的服务器端处理器，但严格意义讲N2是ARM相对成熟的第一代服务器端处理器IP。前端Front-End前端的设计相比较前代可以说是巨大提升，预测和取指依然是
  • python xpath定位元素方法_关于python中的xpath解析定位 weixin_39975366 pythonxpath定位元素方法
    爬取的网站：http://jbk.39.net/chancegz/这里只针对个别属性值：#例如：'别名'下的span标签文本，‘发病部位'下的span标签文本以及‘挂号科室‘下的span标签文本#defdisease(url):text=get_html(url)tree=etree.HTML(text)bm=tree.xpath('//ul[@class="information_ul"]/li
  • XPath简介——完整入门和详解 葡萄架子 网络协议前端
    XPath简介——完整入门和详解**XPath的用法场景****XPath的基本语法****1.树型结构概念****2.XPath基本路径语法****定位方式及详细语法讲解**示例HTML结构：**1.路径选择****基础语法：层级表示法****查询所有匹配的节点****2.位置选取语法****单个节点索引选择****结合多个位置过滤****3.属性条件过滤**属性查询示例：含动态匹配：**4.文
  • js中的export、import、export default等导入导出全解 庸懒 笔记
    前端因为规范不同，所以不同的环境会有不同的导入导出方法，因为经常弄混所以特地记一下方便以后查阅记忆，本笔记都是自己总结或查阅资料得出，如有错误请帮忙指出。因为前端的导入导出主要分为commonjs和ES6modules两种标准，其中commonjs主要用于node环境，而ES6modules主要用于浏览器环境，但是ES6modules是兼容commonjs标准的，所以这就很容易让人弄混，本文也将从
  • 什么是遍历？ dengjuanshou7445 javascriptViewUI
    jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过jQuery遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对DOM进行遍历。图示解释：元素是的父元素，同时是其中所有内容的祖先。元素是元素的
  • html-to-image的使用及图片变形和无图问题修复 庸懒 前端
    html-to-image的使用及图片变形和无图问题修复最近迭代的时候因为新增了一个需求，需要前端提供素材及样式给后端，后端同步渲染，但是因为部分样式问题后端无法实现所以决定前端将页面生成图片然后传递给后端使用，本文记录一下使用的过程及遇到的部分问题。技术调研现在将页面元素转换成图片的插件有很多，普遍使用的技术原理都是利用canvas或者SVG将页面元素转换成画布或者svg元素，然后再转成图片。这
  • css3+Grid 一一代码 css3css
    CSSGrid的核心概念有哪些如下1.网格容器（GridContainer）：-通过将元素的`display`属性设置为`grid`或`inline-grid`，可以将其定义为网格容器。-网格容器内的直接子元素会自动成为网格项（GridItems）。```css.container{display:grid;}```2.网格项（GridItems）：-网格容器内的直接子元素称为网格项。-网格项可以
  • 带你深入了解防抖Debounce和节流Throttle 全马必破三 笔记前端javascript
    前言：防抖（Debounce）和节流（Throttle）是两种在前端开发中常用的优化技术，它们主要用于处理频繁触发的事件（如滚动、窗口调整大小、键盘输入等），以减少不必要的计算，从而提高性能和优化用户体验。一、防抖概念所谓防抖，就是指触发事件后，在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。简而言之，防抖确保函数在一段时间内只执行一次，且是在最后一次触发事件后执行。
  • canvas绘制和数字签名 前端
    关键是要把存放绘制的信息放到一个二维数组中：绘制时最好不要用定时器进行定时绘制，因为会卡顿，最好使用requestAnimationFrame这个原生js的api方法，因为是以帧的间隔绘制，所以会看起来流畅Documenthtml,body{height:100%;margin:0;padding:0;}.container{width:100%;padding:20px0;display:fle
  • Web三要素：CSS之Flex/Grid布局(4) 双囍菜菜 前端随记前端css
    CSS布局革命：Flex与Grid的双子星战法文章目录CSS布局革命：Flex与Grid的双子星战法一、布局进化史：从洪荒时代到现代文明二、Flex布局：一维空间的舞蹈家2.1核心概念深度解析容器属性详解：2.2典型应用场景实战导航栏布局（React示例）垂直居中（Vue示例）三、Grid布局：二维空间的指挥官3.1网格系统深度解析核心概念图解：3.2高级布局技巧实战响应式网格（React示例）复
  • UI自动化测试之CSS Selector 定位秘籍：解锁 WEB UI 自动化测试的高效之道 做测试的小薄 测试进阶cssseleniumUI自动化测试元素定位方式
    在WebUI自动化测试中，元素定位是实现自动化操作的核心步骤。SeleniumWebDriver提供了多种元素定位方式，其中CSSSelector是一种功能强大且灵活的定位方法。它基于CSS选择器语法，能够快速、精准地定位目标元素，尤其适用于复杂的DOM结构。本文将深入解析CSSSelector的工作原理、使用技巧以及需要注意的事项，帮助你在自动化测试中更高效地运用这一工具。一、CSSSelect
  • python flask 分页_Python的Flask框架中实现分页功能的教程 weixin_39959126 pythonflask分页
    BlogPosts的提交让我们从简单的开始。首页上必须有一张用户提交新的post的表单。首先我们定义一个单域表单对象(fileapp/forms.py)：classPostForm(Form):post=TextField('post',validators=[Required()])下面，我们把这个表单添加到template中(fileapp/templates/index.html)：{%ex
  • Tailwindcss开启黑夜模式 巴巴博一 vue.jscss
    本篇讲述如何使用tailwindcss切换白天黑夜主题tailwindcss自带的暗夜切换会比css自带的theme主体切换来得方便很多，学习成本也很低，只要求会用tailiwndcss1，tailwindcss.config有两种暗夜模式切换，媒体查询和手动类切换。手动控制需要开启类模式//tailwind.config.jsexportdefault{...darkMode:'class',/
  • github中多个平台共存 jackyrong github
    在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1） 设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
  • ip地址与整数的相互转换(javascript) alxw4616 JavaScript
    //IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
  • 读书笔记-jquey+数据库+css chengxuyuancsdn htmljqueryoracle
    1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
  • javaSE javaEE javaME == API下载 Array_06 java
    oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
  • shiro入门学习 cugfy javaWeb框架
    声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 首先配置我们的web.xml代码如下，固定格式，记死就成 <filter>         <filter-name>shiroFilter</filter-name> &nbs
  • Array添加删除方法 357029540 js
         刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除             Array.prototype.del = function(n){
  • navigation bar 更改颜色 张亚雄 IO
    今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。       翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下    
  • unicode转换成中文 adminjun unicode编码转换
      在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成 中文
  • 一站式 Java Web 框架 firefly aijuans Java Web
    Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 更新日志： 增加自定义系统错误页面功能
  • 设计模式——单例模式 ayaoxinchao 设计模式
    定义          Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”   分析          从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。   &nb
  • Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
    不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
  • JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11单元测试
            下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：    
  • [Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
    Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)：   #!/bin/bash #!!!Change the name!!! #The zookeepe
  • 【Spark八十】Spark RDD API二 bit1129 spark
    coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
  • Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
    在modules目录中只有httpd.exp，那些so文件呢？ 我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
  • Java基础-克隆 BrokenDreams java基础
            Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 克隆。         Java提供了java.lang.
  • 读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
  • HDR图像PS教程集锦&心得 cherishLC PS
    HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 软件有photomatix和nik hdr efex。 一、教程 叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 二、心得 1、去除阴影部分的
  • maven-3.3.3 mvn archetype 列表 crabdave ArcheType
    maven-3.3.3 mvn archetype 列表 可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml   [INFO] Scanning for projects... [INFO]                
  • linux shell 中文件编码查看及转换方法 daizj shell中文乱码vim文件编码
    一、查看文件编码。     在打开文件的时候输入:set fileencoding     即可显示文件编码格式。 二、文件编码转换     1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式       &
  • MySQL--binlog日志恢复数据 dcj3sjt126com binlog
    恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                  
  • 数据库中数据表数据迁移方法 dcj3sjt126com sql
    刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用   下面看看如何使用   语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍       有三张表a、b、c，现在需要从表b
  • Java反转字符串 dyy_gusi java反转字符串
           前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
  • UI设计中我们为什么需要设计动效 gcq511120594 UIlinux
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用
  • JBOSS服务部署端口冲突问题 HogwartsRow java应用服务器jbossserverEJB3
    服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。   1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml   2、./server/default/deploy/jbossweb.sar/server.xml   3、.
  • 第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdbreidstwemproxy
    目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
  • ZooKeeper原理及使用 liyonghui160com
               ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
  • 程序员解决问题的60个策略 pda158 框架工作单元测试
    根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的“else”条件 在应用到主程序之前知道如何在孤立的情况下使用   日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
  • Create the Google Play Account sillycat Google
    Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
  • JSP三大指令 vikingwei jsp
    JSP三大指令   一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%>   * pageEncoding和contentType：     > pageEncoding：它
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他