凡大喵
凡大喵

前端面试题：页面布局

题目

  • 实现如下页面布局。核心区域左侧自适应，右侧固定宽度 200px
    前端面试题：页面布局_第1张图片

解决思路一

  • 侧边栏aside通过负值左外边距得以和content共处一行
  • 真正的自适应内容则放置在content的内部，使用右外边距得以和aside保持固定距离
  • 使用overflow:hidden清除浮动

实现代码

html：


<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <link rel="stylesheet" href="css/main.css" media="screen">
head>
<body>
    <div class="head">
        <div class="logo">
            logo
        div>
        <div class="username">
            用户名
        div>
    div>
    <div class="main">
        <div class="content">
            <div class="real">content-自适应宽度div>
        div>
        <div class="aside">
            aside-定宽200px
        div>
    div>
    <div class="footer">
        footer
    div>
body>
html>

css:

*{
    margin: 0;
    padding: 0;
}
.head{
    height: 70px;
    margin: 10px;
    overflow: hidden;
    border: 2px solid green;
}
.logo{
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    border: 1px solid red;
}
.username{
    width: 150px;
    margin: 40px 10px 0px 0px;
    float: right;
    text-align: right;
    border: 1px solid black;
}
.main{
    margin: 10px;
    overflow: hidden;
}
.content{
    width: 100%;
    float: left;
}
.real{
    border: 2px solid blue;
    height: 400px;
    margin-right: 220px;
}
.aside{
    width: 200px;
    margin-left: -204px; 
    float: left;
    border: 2px solid red;
}
.footer{
    height: auto;
    margin: 0 10px;
    text-align: center;
    border: 2px solid black;
}

运行截图

前端面试题：页面布局_第2张图片

解决思路二

  • 使用grid属性构建网格布局
  • 在.header中通过flex属性完成对.logo和.username的定位

实现代码

html：


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/grid.css" media="screen">
    <title>grid布局title>
head>

<body>
    <div class="container">
        <div class="header">
            <div class="logo">logodiv>
            <div class="username">usernamediv>
        div>
        <div class="content">content-自适应宽度div>
        <div class="aside">aside-定宽200pxdiv>
        <div class="footer">footerdiv>
    div>

body>

html>

css：

.header{
    display:flex;
    justify-content: space-between;
    grid-area: header;
    border: 2px solid green;
    margin: 10px;
}
.logo{
    align-self: flex-start;
    height: 50px;
    width: 50px;
    margin: 5px 0 0 5px;
    border: 1px solid gold;
    padding: 5px;
}
.username{
    align-self: flex-end;
    height: 25px;
    width: 150px;
    margin: 0 5px 5px 0;
    border: 1px solid rgb(255, 30, 199);
    text-align: right;
    padding: 5px;
}
.content{
    grid-area: content;
    border: 2px solid blue;
    margin-left: 10px;
    padding: 5px;
}
.aside{
    grid-area: aside;
    border: 2px solid red;
    margin-right: 10px;
    padding: 5px;
}
.footer{
    grid-area: footer;
    border: 2px solid black;
    margin: 10px;
    text-align: center;
    padding: 5px;
}
.container{
    display: grid;
    grid-column-gap: 20px;
    grid: 
        [row-start] "header header" 100px [row-end]
        [row-start] "content aside" 400px [row-end]
        [row-start] "footer footer" auto [row-end]
        / auto 200px;
}

运行截图

前端面试题：页面布局_第3张图片

你可能感兴趣的:(前端基础)

  • 前端基础：同页面不同区块跳转的三种方式 自己瞎琢磨 前端综合
    各种语言官网的教程部分经常是这样的页面一边是目录，一般是具体的内容，点击目录就能跳转到某个区块（当然这个页面还涉及到请求等等，和我这边要讲的不完全一样，我这边只是拿这个结构做个例子）。这就涉及到了一个页面之中不同区块件的跳转，这里有三种方式可以实现这样的跳转。下面是代码Document.box{width:200px;height:60px;background-color:red;}.sp{he
  • 180.HTML、CSS、JavaScript 我也念过晚霞 htmlcssjavascript
    ———————————————————————————————【1.引言】在Android开发过程中，前端技术（HTML、CSS、JavaScript）逐渐成为不可或缺的技能之一。无论是通过WebView显示网页内容，还是构建混合应用，掌握前端基础将有助于提升整体产品体验。本文在保证内容全面性的前提下，剔除了多余的推荐信息，直接进入技术核心讲解。通过详细介绍HTML、CSS与JavaScript的
  • 前端基础之全局事件总线 青红光硫化黑 前端vue.jsjavascript
    用于实现任意组件中的通信，我们可以将数据放入到Vue原型中，这样就能实现vc与vm都能访问该数据我们需要一个能使用去使用$on或是$emit这里方法的东西，vc与vm都能调用这个方法，但是vm与vm最终在创建时都需要去寻找Vue的原型对象，所以说我们可以直接把Vue的原型对象当作是这个中间人bus在beforeCreate中我们就能去申明这个中间人将Student.vue中的信息发送给School
  • 前端基础之动画效果 青红光硫化黑 前端
    简单的入场与出场显示/隐藏helloexportdefault{name:'Test',data(){return{isShow:true}}}h1{background-color:orange;}.hello-enter-active{/*进入的动画*/animation:atguigu0.5s;}.hello-leave-active{/*退出的动画*/animation:atguigu0.
  • 前端基础 - HTML（一）html基本结构 林一。 html基础前端html
    html概述和基本结构html概述HTML是HyperTextMark-upLanguage的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打
  • 前端基础——HTML happyhappy666568 前端htmljavascript
    目录一、前端概述二、HTML简介三、HTML基本结构一、前端概述在Web开发中，有前端与后端之分。前端负责页面的布局，后端负责页面的逻辑。前端负责设计网页的样子，也就是我们看到的一个个彩色的方框和文字，但是一个网站只有这些按钮还远远不够啊，肯定还有服务器记录我们输入的信息数据。所以，后端负责的就是我们看不到的那些逻辑程序，它负责处理我们在网页上输入的那些信息或者点击信号等。核心技术：HTML(负责
  • 前端学习资料集合 mdnbnb 前端
    针对前端的学习，不同阶段采用的方式是不一样的。本文把前端的学习分为入门、实战、进阶三个阶段。下面分开来说一、入门阶段入门阶段的目标是学会前端的基本语法和知识，能够解决一些简单的问题。这个阶段不建议看书学习，效率太慢。这个阶段不追求知识广度，只要求能够快速上手就行。建议直接找一些介绍前端的基础知识的视频课程来看。推荐一个比较经典的课程。前端基础班就业班实战项目全套课程聊聊前端开发的基础知识4小时带你
  • 前端基础入门：HTML、CSS 和 JavaScript 阿绵 前端前端htmlcssjs
    在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元
  • 【如何实现 JavaScript 的防抖和节流？】 程序员远仔 前端面试高频问题宝典javascriptvue.js前端框架前端html5开发语言
    如何实现JavaScript的防抖和节流？前言防抖（Debounce）和节流（Throttle）是JavaScript中优化高频事件处理的两种常用技术。它们可以有效减少事件处理函数的调用次数，提升性能并改善用户体验。本文将详细介绍防抖和节流的实现原理及其应用场景。关键词JavaScript、防抖、节流、高频事件、性能优化、事件处理、前端开发、前端面试、前端基础、前端进阶、前端工程化、前端开发最佳实
  • 一些我不知道的HTML前端基础知识笔记 han1140521792 学习资料HTML5CSSJavaScript
    点击链接后退页面：回到上一个网页——修改placeholder提示的样式：1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-space:nowrap）、省略号（text-overflow:ellipsis）——常见
  • Vue.js前端开发实战学习笔记 cai-4 前端vue.js学习前端
    Vue.js前端开发实战学习笔记一、学习教材Vue.js3前端开发实战————————张益珲github仓库地址gitee仓库地址二、第一章从前端基础到Vue.js3三、第二章Vue模板应用四、第三章Vue组件的属性和方法五、第四章处理用户交互六、第五章组件基础七、第六章组件进阶八、第七章Vue响应式编程九、第八章动画十、第九章构建工具VueCLI的使用十一、第十章基于Vue3的UI组件库——El
  • SpringBoot速成(二) 噗运特 springboot后端java
    SpringBoot速成(一)-CSDN博客前提：有SSM，数据库，前端基础，使用企业版IDEA用书:SpringBoot+Vue全栈开发实战(关注+私信发电子版)说明：代码块中是每章知识点总结(几十页浓缩成几句话)2.基础配置（涉及HTTP,HTTPS,I/O,Rest控制器）当大家用的各种配置版本不同，要进行版本统一时，不再用spring-boot-starter-parent，用depend
  • 【前端基础】深入解析JavaScript中的编译原理、内存管理、垃圾回收机制和正则表达式 呀啊~~ 【前端基础】前端javascript正则表达式学习
    深入解析JavaScript前言一、JavaScript的编译原理二、JavaScript的内存管理2.1内存分配2.2内存泄漏2.3内存管理优化三、垃圾回收机制3.1垃圾回收原理3.2优化垃圾回收四、正则表达式（Regex）4.1正则表达式语法4.2常见正则操作4.3性能优化总结前言JavaScript作为一种高效的动态语言，广泛应用于Web开发中，背后有一系列复杂的机制支持它的执行和优化。在本
  • 【前端基础】——浅拷贝和深拷贝 Array[林] 前端——JavaScript前端前端javascript
    文章目录浅拷贝和深拷贝浅拷贝和深拷贝的定义浅拷贝深拷贝数据类型的值传递和地址传递浅拷贝实现的具体方式数字方法slice()Object.assignfor...in...深拷贝的具体实现JSON.parse(JSON.stringify())递归浅拷贝和深拷贝浅拷贝和深拷贝的定义浅拷贝浅拷贝对内存地址的复制，让目标对象指针和源对象指向同一片内存空间。深拷贝深拷贝是指拷贝对象的具体内容，其内存地址是
  • 如何0基础自学网络安全技术，推荐一个非常稳的网络安全学习路线_网络安全入门学习路线 星空真懒 程序员web安全学习安全
    青铜（筑基期）度过了石器时代，你已经储备了一些计算机的基础知识：操作系统的使用，网络协议，前端基础，数据库初识，但这距离做网络安全还不够，在第二个青铜阶段，你还需要再进一步学习基础，在第一阶段之上，难度会开始慢慢上升。这一阶段需要学习的知识有：Web进阶在前面的石器时代，咱们初步接触了网页编程，了解了网页的基本原理。不过那时候是纯前端的，纯静态的网页，没有接触后端。在这个进阶的阶段，你要开始接触W
  • CRM客户管理系统前端基础配置信息------CRM项目 旧约Alatus CRM项目前端#VUE框架jsonhtml5javascriptjquerycssajaxecharts
    CRM系统body{margin:0;}CRM系统body{margin:0;}{"name":"netcrm-front","private":true,"version":"0.0.0","type":"module","scripts":{"dev":"vite","build":"vitebuild","preview":"vitepreview"},"dependencies":{"@e
  • Java前端基础—HTML 缺少动力的火车 前端基础集合前端javahtml
    Java前端基础—HTML目录Java前端基础—HTML1.简介2.基础语法2.1HTML页面固定结构2.2标题标签2.3段落标签2.4换行标签2.5水平线标签2.6文本标签2.7图片标签2.8音频标签2.9视频标签2.10链接标签2.11列表标签2.12表格标签2.13表单标签2.14语义标签1.简介1.网页组成：文字，图片，音频，视频，超链接。2.代码如何转换成网页：依靠的是浏览器的渲染和解析
  • JavaWeb 前端基础 html + CSS 快速入门 | 018 菜鸟阿康学习编程 前端前端htmlcss
    今日推荐语指望别人的救赎，势必走向毁灭——波伏娃日期学习内容打卡编号2025年01月17日JavaWeb前端基础html+CSS018前言哈喽，我是菜鸟阿康。今天正式进入JavaWeb的学习，简单学习html+CSS这2各前端基础部分，以下是我的重点总结，希望对你有所帮助。（建议先看左侧目录，先了解文章结构）（请忽略错误的大纲编号，我直接从笔记中粘贴过来的，就没严格纠正了，重点在内容！）文末和主页
  • 前端基础面试题·第三篇——JavaScript（其二） DT—— 前端面试javascript面试
    1.深浅拷贝1.浅拷贝浅拷贝会创建一个新的对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝就是改引用类型的地址。//常见的浅拷贝1.Object.assign({},obj)//对象浅拷贝assign⽅法可以⽤于处理数组，不过会把数组视为对象，⽐如这⾥会把⽬标数组视为是属性为0、1、2的对象，所以源数组的0、1属性的值覆盖了⽬标对
  • VUE3学习路线 蜡笔小新星 Vue学习vue经验分享
    以下是一份详细的Vue3学习路线，涵盖从基础到进阶的各个方面，以帮助你系统掌握Vue3开发。第一阶段：基础知识理解前端基础HTML:了解文档结构，常用标签，语义化HTML。CSS:学习选择器、布局、Flexbox和Grid，基本的样式应用。JavaScript:理解基本语法、DOM操作、事件处理、异步编程（Promises,async/await），以及ES6+特性（如箭头函数、解构赋值、模块化）
  • 前端基础知识点 der.. htmlcssjavascript
    本人现在是一名准大二计算机系的学生，准备开始写博客，一方面是想在csdn留下自己的足迹，另一方面是想通过写博客来提高自己的能力。以后会分享一些学习心得，程序代码，以及我的一些学习计划，还有每天学习后的知识总结。如果你和我一样，不甘于平凡，那么，就请给我点一个关注，我们互相交流，共同进步。--------------------------------------------------------
  • 前端基础面试题·第三篇——JavaScript（其四） DT—— 前端面试javascript前端开发语言
    highlight:atom-one-dark1.JSON.stringifyJSON.stringify()方法将一个JavaScript值（对象或者数组）转换为一个JSON字符串，如果指定了一个replacer函数，则可以替换值。语法：JSON.stringify(value,replacer,space)参数value：要转换的值。replacer：替换值，可以是一个函数或者数组。（这个参数
  • 前端基础面试题·第二篇——CSS（其一） DT—— 前端面试前端css
    1.伪类与伪元素伪类，是用来描述元素的一个状态，比如第一个元素，元素被鼠标覆盖等等状态，写法为：伪元素，用于设置一个元素的特殊状态的一部分，写法为::伪元素于伪类：伪元素：::before::after::first-line伪类：:hover:active:focus:nth-child(n)2.单位px:像素，绝对单位em:相对单位，相对于父元素字体大小rem:相对单位，相对于根元素html的
  • 前端基础面试题·第二篇——CSS（其二） DT—— 前端面试前端css
    1.CSS选择器的优先性：！important-强制生效样式-有即生效行内样式-有即生效权重：1000id选择器权重：100类选择器，伪类，属性选择器权重：10元素选择器，伪元素选择器，权重：1通配符，兄弟，后代，子代，权重：02.CSS继承性1.继承属性：1.字体系列属性font,font-family,font-weight,font-size,font-style,font-variant等
  • web前端基础——第八章 ZiminLi 技术栈笔记前端javascript
    目录八十五、对象的简介和基本操作八十六、属性名和属性值八十七、基本数据类型和引用数据类型八十八、对象字面量八十九、函数的简介九十、函数的参数九十一、函数的返回值九十二、实参可以是任何值九十三、返回值的类型九十四、立即执行函数九十五、方法九十六、枚举对象中的属性九十七、作用域（Scope）全局作用域变量的声明提前函数作用域九十八、this九十九、使用工厂方法创建对象一百、构造函数一百零一、原型对象一
  • python前端开发基础 GRKF15 python-前端python前端
    1.Python前端基础教程概述Python作为一门多用途的编程语言，近年来在前端开发领域也展现出了其独特的优势。以下是对Python前端基础教程的概述，包括主要概念、工具和实践方法。1.1Python在前端开发中的应用Python在前端开发中的应用主要体现在以下几个方面：自动化测试：使用Python编写自动化测试脚本，提高测试效率。Web开发框架：利用Flask和Django等框架快速搭建Web
  • 350页前端校招面试题直击大厂：前端基础、前端核心、计算机基础、项目、Hr面 2401_86400095 前端
    **1.HTML2.CSS3.前端基础4.前端核心5.前端进阶6.移动端开发7.计算机基础8.算法与数据结构9.设计模式10.项目11.职业发展12.Hr面**正文HTML1.浏览器页面有哪三层构成，分别是什么，作用是什么?2.HTML5的优点与缺点？3.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?4.HTML5有哪些新特性、移除了哪些元素？5.你做的网页在哪些浏览器测试过,这些
  • 盘点简洁好用的8款静态网站搭建框架，小白易上手 AI码上来 AI工具搭建网站前端
    后台有个小伙伴最近接了一个私活，找了一个开源的静态网站框架，给一个小公司做了一个官网，部署到服务器上，顺手就赚了几千块钱。你眼红不？相对动态网站，静态网站不需要和后端的交互逻辑，所以只要有点前端基础都可以搞定。即使没有任何前端基础，也没问题，咱不是有GPT么？今天，就先给大家来盘点一下那些年简洁好用的静态网站框架。后续看情况给大家展示下：如何借助GPT+静态网站框架，搭建并部署一个网站。1.Wor
  • 前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南 DTcode7 HTML网站开发#前端基础入门三大核心之htmlHTML5前端web前端三大核心网页开发
    前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南基础概念与作用说明PNG8PNG16PNG24PNG32代码示例与使用场景PNG8示例PNG24示例PNG32示例性能优化与最佳实践防范漏洞提示结语与讨论在网页设计与前端开发中，选择合适的图像格式是至关重要的一步，它直接关系到页面加载速度、视觉效果乃至用户体验。PNG作为一种广泛应用的图像格式
  • 前端基础整理 | require / exports / import / export 格致匠心
    一、模块规范一句话总结：CommonJs用于服务端Node.js中，AMD和CMD是针对客户端的规范，为了不让引入依赖阻塞了代码进行，使用了异步加载模块。1.CommonJs：适用区域：用于服务端。导入：require导出：module.exports，exports。exports与module.exportsexports是module.exports的引用，varexports=module
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他