小谢sd
小谢sd

【CSS】常见 CSS 布局

1. 响应式布局

DOCTYPE html>
<html>

<head>
    <title>简单的响应式布局title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 导航样式 */
        nav {
            background-color: #f2f2f2;
            padding: 10px;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin-right: 10px;
        }

        nav ul li a:hover {
            background-color: #ccc;
        }

        nav ul li a {
            color: #333;
            text-decoration: none;
            padding: 5px;
        }

        /* 主要内容样式 */
        main {
            padding: 20px;
        }

        section {
            margin-bottom: 20px;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
        }
    style>
head>

<body>
    <header>
        <h1>响应式布局示例h1>
    header>
    <nav>
        <ul>
            <li><a href="#">首页a>li>
            <li><a href="#">关于a>li>
            <li><a href="#">服务a>li>
            <li><a href="#">联系我们a>li>
        ul>
    nav>
    <main>
        <section>
            <h2>欢迎来到我们的网站！h2>
            <p>这是一个简单的响应式布局示例。p>
        section>
    main>
    <footer>
        <p>版权所有 © 2023p>
    footer>
    <script>
    script>
body>

html>

【CSS】常见 CSS 布局_第1张图片

2. 块级布局

DOCTYPE html>
<html>

<head>
    <title>简单的块级布局title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 主要内容样式 */
        main {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        section {
            flex-basis: 48%;
            background-color: #f2f2f2;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .left-section {
            /* order 规定 section 出现的先后顺序 */
            order: 1;
        }

        .right-section {
            order: 2;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    style>
head>

<body>
    <header>
        <h1>块级布局示例h1>
    header>
    <main>
        <section class="left-section">
            <h2>左侧区域h2>
            <p>这是左侧区域的内容。p>
        section>
        <section class="right-section">
            <h2>右侧区域h2>
            <p>这是右侧区域的内容。p>
        section>
    main>
    <footer>
        <p>版权所有 © 2023p>
    footer>
    <script src="main.js">script>
body>

html>

【CSS】常见 CSS 布局_第2张图片

3. 流式布局

DOCTYPE html>
<html>

<head>
    <title>简单的流式布局title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        /* 内容区域样式 */
        #content {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }

        .box {
            flex-basis: 300px;
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
        }

        /* 脚注样式 */
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    style>
head>

<body>
    <header>
        <h1>流式布局示例h1>
    header>
    <div id="content">
        <div class="box">
            <h2>盒子 1h2>
            <p>这是盒子 1 的内容。p>
        div>
        <div class="box">
            <h2>盒子 2h2>
            <p>这是盒子 2 的内容。p>
        div>
        <div class="box">
            <h2>盒子 3h2>
            <p>这是盒子 3 的内容。p>
        div>
        <div class="box">
            <h2>盒子 4h2>
            <p>这是盒子 4 的内容。p>
        div>
    div>
    <footer>
        <p>版权所有 © 2023p>
    footer>
    <script src="main.js">script>
body>

html>

【CSS】常见 CSS 布局_第3张图片

4. 定位布局

DOCTYPE html>
<html>

<head>
    <title>简单的定位布局title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 容器样式 */
        #container {
            position: relative;
            width: 500px;
            height: 300px;
            background-color: #f2f2f2;
        }

        /* 盒子样式 */
        .box {
            position: absolute;
            padding: 20px;
            background-color: #333;
            color: #fff;
        }

        #box1 {
            top: 20px;
            left: 20px;
        }

        #box2 {
            bottom: 20px;
            right: 20px;
        }

        #box3 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    style>
head>

<body>
    <div id="container">
        <div
            id="box1"
            class="box"
        >盒子 1div>
        <div
            id="box2"
            class="box"
        >盒子 2div>
        <div
            id="box3"
            class="box"
        >盒子 3div>
    div>
    <script src="main.js">script>
body>

html>

【CSS】常见 CSS 布局_第4张图片

5. 多列布局

DOCTYPE html>
<html>

<head>
    <title>简单的多列布局title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 容器样式 */
        #container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        /* 列样式 */
        .column {
            flex-basis: 30%;
            background-color: #f2f2f2;
            padding: 20px;
            margin: 10px;
        }
    style>
head>

<body>
    <div id="container">
        <div class="column">
            <h2>列 1h2>
            <p>这是列 1 的内容。p>
        div>
        <div class="column">
            <h2>列 2h2>
            <p>这是列 2 的内容。p>
        div>
        <div class="column">
            <h2>列 3h2>
            <p>这是列 3 的内容。p>
        div>
    div>
    <script src="main.js">script>
body>

html>

【CSS】常见 CSS 布局_第5张图片

6. 网格布局

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Documenttitle>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 1700px;
            height: 500px;
            border: 10px solid gray;
            margin: 100px auto;
            display: grid;
            /* 13 列，每列列宽为 100px */
            grid-template-columns: repeat(13, 100px);
            /* 4 行，每行高度为 100px */
            grid-template-rows: repeat(4, 100px);
            /* 单元格间距 垂直 水平 */
            grid-gap: 10px 10px;
            /* 整体网格居中 */
            place-content: center center;
        }

        .box>div {
            background: pink;
        }

        .box1 {
            /* 横向网格线起始位置 */
            grid-row: 1/3;
            /* 纵向网格线起始位置 */
            grid-column: 12/14;
        }

        .box2 {
            grid-row: 1/2;
            grid-column: 10/12;
        }
    style>
head>

<body>
    <div class="box">
        <div class="box1">1div>
        <div class="box2">2div>
        <div>3div>
        <div>4div>
        <div>5div>
        <div>6div>
        <div>7div>
        <div>8div>
        <div>9div>
        <div>10div>
        <div>11div>
        <div>12div>
        <div>13div>
        <div>14div>
        <div>15div>
        <div>16div>
        <div>17div>
        <div>18div>
        <div>19div>
        <div>20div>
        <div>21div>
        <div>22div>
        <div>23div>
        <div>24div>
        <div>25div>
        <div>26div>
        <div>27div>
        <div>28div>
        <div>29div>
        <div>30div>
        <div>31div>
        <div>32div>
        <div>33div>
        <div>34div>
        <div>35div>
        <div>36div>
        <div>37div>
        <div>38div>
        <div>39div>
        <div>40div>
        <div>41div>
        <div>42div>
        <div>43div>
        <div>44div>
        <div>45div>
        <div>46div>
        <div>47div>
        <div>48div>
        
        
    div>
body>

html>

【CSS】常见 CSS 布局_第6张图片

7. 浮动布局

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Documenttitle>
    <style>
        .nav {
            width: 100%;
            overflow: hidden;
        }

        .nav li {
            float: left;
            margin-right: 15px;
        }

        .nav li a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #000;
        }
    style>
head>

<body>
    <ul class="nav">
        <li><a href="#">首页a>li>
        <li><a href="#">关于我们a>li>
        <li><a href="#">服务a>li>
        <li><a href="#">联系我们a>li>
    ul>
body>

html>

【CSS】常见 CSS 布局_第7张图片

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

  • SassScript：Sass中的编程特性详解 jiajia651304 sass前端css
    Sass（SyntacticallyAwesomeStylesheets）是一种强大的CSS预处理器，它允许开发者使用类似于编程语言的语法来编写CSS，然后通过编译生成标准的CSS代码。SassScript是Sass中的编程特性集合，它包含了变量、嵌套规则、混合、函数以及控制指令等，极大地提高了CSS的开发效率和可维护性。1.变量SassScript中的变量允许开发者在样式表中存储和重复使用值。变
  • 前端请求全面解析：AJAX、Axios 与 Fetch 的使用详解与代码示例 jiajia651304 前端ajaxjavascript
    前端请求全面解析：AJAX、Axios与Fetch的使用详解与代码示例前端请求全面解析：AJAX、Axios与Fetch的使用详解与代码示例1.AJAX——传统的异步请求1.1基本用法示例1.2AJAX特点2.FetchAPI——现代化请求方案2.1基本用法示例2.2Fetch特点3.Axios——第三方HTTP请求库3.1安装Axios3.2基本用法示例3.3Axios特点4.总结前端请求全面解
  • OpenLayers集成天地图服务开发指南 喆星时瑜 WebGIS#天地图OpenLayersGIS天地图WebGISHTML地图地图API
    以下是一份面向GIS初学者的OpenLayers开发详细教程，深度解析代码：一、开发环境搭建1.1OpenLayers库引入ol.css：包含地图控件、图层等可视化样式ol.js：OpenLayers核心功能库推荐使用固定版本号（如v7.3.0）确保稳定性1.2地图容器设置.map{//设置地图控件显示尺寸height:95vh;width:95vw;}使用视口单位(vh/vw)实现响应式布局保留
  • 编程内容简述！ 恶霸不委屈 开发语言青少年编程汇编javapython
    编程是指通过计算机语言来开发软件、程序和应用的过程，通常通过编写一系列的指令，来让计算机完成特定的任务。编程可以涉及多个领域和技术，以下是一些主要的编程内容：1.编程语言编程语言是程序员与计算机进行沟通的桥梁，不同的编程语言适用于不同的任务。常见的编程语言有：Python：简单易学，适用于数据分析、人工智能、网页开发等。JavaScript：网页开发中不可或缺的语言，用于动态网页和前端开发。Jav
  • Axios 和 跨域 这两个概念 PLJJ685 前后端分离的仓库管理系统前端
    1.Axios是什么？Axios是一个用于发送网络请求的工具，类似于浏览器自带的fetch，但更强大、更易用。在前端（Vue）中，我们通常用Axios来向后端（SpringBoot）请求数据。举个例子：假设你在一个仓储系统中，前端需要从后端获取商品库存信息。这时，前端就可以用Axios发送一个请求，比如：axios.get('/api/inventory').then(response=>{con
  • 麦谷科技-前端面经 dancehole 科技前端
    base：车联网，uniapp小程序。面试时间：2025-03月（应届）投递岗位：前端（转正实习）面试流程比较短，可能是因为经历不匹配或者第一题答的不好Tvt时间：上午约一面，下午约二面，隔一天（第三天）约hr面。整体流程还是很快的。HR面去公司线下参观了，整体地理环境也很nice。最后因为个人原因没有入职，也是相当可惜一面自我介绍&BG：两端实习，介绍了一下自己的工作。面试官表示不太感兴趣（问了
  • Vue3前端开发：组件化设计与状态管理 caihuayuan4 面试题汇总与解析springsqljava大数据课程设计
    Vue3前端开发：组件化设计与状态管理一、Vue3组件化设计组件基本概念与特点是一款流行的JavaScript框架，它支持组件化设计，这意味着我们可以将页面分解成多个独立的组件，每个组件负责一部分功能，通过组件的嵌套和复用，可以快速构建复杂的用户界面。组件化设计具有以下特点：组件示例组件选项在上面的代码示例中，我们通过Vue.component方法注册了一个名为my-component的组件，这是
  • 使用 Sa-Token 完成踢人下线功能
    一、需求在企业级项目中，踢人下线是一个很常见的需求，如果要设计比较完善的话，至少需要以下功能点：可以根据用户userId踢出指定会话，对方再次访问系统会被提示：您已被踢下线，请重新登录。可以查询出一个账号共在几个设备端登录，并返回其对应的Token凭证，以便后续操作。可以只踢出一个账号某一个端的会话，其他端不受影响。例如在某电商APP上可以看到当前账号共在几个手机上登录，并注销指定端的会话，当前端
  • 为什么后端路由需要携带 /api 作为前缀？前端如何设置基础路径 /api？ z2637305611 前端
    一、为什么后端路由需要携带/api作为前缀？1.区分API端点与其他路由在Web应用程序中，后端不仅需要处理API请求，还可能需要处理静态资源（如HTML、CSS、JS文件）或其他服务（如WebSocket）。通过为API路由添加/api前缀，可以清晰地将其与其他请求区分开来，避免路由冲突。例如：API请求：https://example.com/api/users静态资源请求：https://e
  • 开源项目推荐：Mayfly-go 周风队
    开源项目推荐：Mayfly-gomayfly-goweb版linux(终端文件脚本进程)、数据库(mysqlpgsql高斯达梦)、redis(单机哨兵集群)、mongo统一管理操作平台。项目地址:https://gitcode.com/gh_mirrors/ma/mayfly-goMayfly-go是一个基于浏览器的统一管理操作平台，它支持多种数据库和系统管理功能。该项目主要使用Go语言和前端框架
  • Flutter App开发，高效解决如何将用户登录手机号部分用星号代替在页面中展示 champion_ooO Flutterflutter
    在开发App时，一般都会遇到个人中心的页面，这个时候页面中要展示出来用户当前登录手机号码，但是数据库存的是正常的手机号，需要前端自己来将部分用星号('*')代替。第一步：定义一个变量存储手机号classPersonPageextendsStatefulWidget{constPersonPage({Key?key}):super(key:key);@overrideStatecreateState
  • Scrapy 入门教程 zru_9602 爬虫scrapy
    Scrapy入门教程Scrapy是一个用于爬取网站数据的Python框架，功能强大且易于扩展。本文将介绍Scrapy的基本概念、安装方法、使用示例，并展示如何编写一个基本的爬虫。1.什么是Scrapy？Scrapy是一个开源的、用于爬取网站数据的框架，主要特点包括：高效、异步的爬取机制强大的XPath和CSS选择器解析能力内置中间件，支持代理、去重等功能易于扩展，适用于各种爬虫需求2.安装Scra
  • 前端开发：这就是终点吗？ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读让我们重新回到2021年后远程办公风潮兴起的日子，那时候，程序员岗位炙手可热。机会遍地都是，你甚至只需参加少量培训，通过面试后便能轻松收获年薪超15万的工作，还有余暇拍摄一段《程序员的一天》上传网络。经过短短一年左右的培训，你便踏上了年薪六位数的职业道路——那时候，当程序员似乎是一个人人羡慕的理想职业。然而
  • SpringBoot接口防抖(防重复提交)，接口幂等性，轻松搞定 web18285482512 面试学习路线阿里巴巴springboot后端java
    啥是防抖？所谓防抖，一是防用户手抖，二是防网络抖动。在Web系统中，表单提交是一个非常常见的功能，如果不加控制，容易因为用户的误操作或网络延迟导致同一请求被发送多次，进而生成重复的数据记录。要针对用户的误操作，前端通常会实现按钮的loading状态，阻止用户进行多次点击。而对于网络波动造成的请求重发问题，仅靠前端是不行的。为此，后端也应实施相应的防抖逻辑，确保在网络波动的情况下不会接收并处理同一请
  • 春招，作为普通IT实习生的我有哪些想法和准备？ 十八朵郁金香 学习
    想法&随记对即将毕业的大学生来说，秋招和春招是求职的好机会，也是一次尝试向社会进行"自我推销"的机会，体现自己的综合能力，是“意满签Offer”？还是“露出马脚，社死场面”？“准备-天时地利人和-行动”后，我们会有答案。话题回到自己，春招，我有哪些想法？去年，在学校举办校园秋招招聘之前，我已经通过线上投递+线下面试找到实习，在一家人数规模100~200的公司当前端实习生，到现在已有四个多月，没有经
  • [前端面试场景题]虚拟列表 GISer_Jinger 前端面试
    嗯，用户问的是“前端虚拟列表详解”，我需要详细回答这个问题。首先，我得先理解虚拟列表的概念和用途。根据搜索结果，虚拟列表主要用于优化长列表的渲染性能，特别是在处理大量数据时。用户可能想知道它的核心原理、实现方法以及实际应用场景。看网页1提到虚拟列表的定义和关键点，只渲染视口内的数据项，减少DOM节点。网页2和网页4都给出了具体的Vue和原生JS实现案例，比如动态计算起始和结束索引，使用transf
  • 微信小程序的旅游服务助手 景点 酒店 旅游规划的设计与实现 QQ1304979694 微信小程序旅游小程序
    文章目录具体实现截图本项目支持的技术语言研究思路、方法和步骤本系统开发思路主要软件与实现手段系统可行性分析源码获取详细视频演示：文章底部获取博主联系方式！！！！java类核心代码部分展示微信小程序技术现状源码获取/详细视频演示具体实现截图本项目支持的技术语言前端开发框架:vue.js+uniapp数据库mysql版本不限微信开发者工具/hbuiderx数据库工具：Navicat/SQLyog等都可
  • 前端 | debounce 防抖 vs 节流（throttle） 要加油哦～ vue项目vue学习笔记前端
    重点知识点：-防抖，最后一次操作后等待执行，用于输入框、缩放等；-节流，每隔一定时间间隔执行，用于页面滚动、鼠标移动、频繁点击。debouncevsthrottle（节流）功能debounce（防抖）throttle（节流）触发时机最后一次操作结束后等待执行每隔一定时间间隔执行一次适用场景输入框、缩放等，操作停止后才执行页面滚动、鼠标移动、频繁点击等目录debouncevsthrottle（节流）
  • 学习记录之游标翻页实现 sjsjsbbsbsn Java学习之路项目实战技巧javamysqlredis
    游标翻页本方案参考mallchat实现一.深翻页问题普通翻页前端一般会有个分页条。能够指定一页的条数，以及任意选择查看第几页,假设我们想查询第11页的内容传递过来的参数为:pageNo=11，pageSize=10对应的sql查询为:select*fromtablelimit100,10其中100代表需要跳过的条数，10代表跳过指定条数后，往后需要再取的条数。假设翻页到1w条,那我们要先扫描到这1
  • Python, C ++开发工厂管理APP Geeker-2025 pythonc++
    开发一款通用的**工厂管理App**，结合Python和C++的优势，可以实现高效的后端数据处理、实时的生产监控以及用户友好的前端界面。以下是一个详细的开发方案，涵盖技术选型、功能模块、开发步骤等内容。##技术选型###后端（Python）-**编程语言**：Python-**Web框架**：Django或Flask-**数据库**：PostgreSQL或MySQL-**实时通信**：WebSoc
  • CEF 控制台添加一函数，枚举 注册的供前端使用的CPP交互函数有哪些 清水迎朝阳 CEF应用CEF交互注入函数注册CPP
    一、前序知识1、设置单进程模式，方便调试voidClientApp::OnBeforeCommandLineProcessing(constCefString&process_type,CefRefPtrcommand_line){if(process_type.empty()){//cef在debug模式下有问题#ifdef_DEBUGcommand_line->AppendSwitchWith
  • 「Kubernetes Objects」- Service（学习笔记） @20210227 k4nzdroid
    Service，服务，用于暴露Pod以供访问。官方文档及手册KubernetesAPIv1.18/Servicev1coreService?Pod会被创建，并且还会消失，这由ReplicaSets控制。每个Pod都有自己的IP地址，但是这些IP地址不能视为可靠的。那么，如果前端的一部分Pod依赖于后端的Pod，那前端的这些Pod如何找出并追踪后端的Pod？ServiceService是一个抽象，定
  • JavaScript基础-API 和 Web API 難釋懷 前端javascript开发语言
    在现代Web开发中，API（应用程序接口）是连接不同软件组件或系统之间的桥梁。对于前端开发者来说，JavaScript与WebAPI的结合使用尤为重要，它使得我们可以访问浏览器提供的各种功能和服务，从而构建出交互性更强、用户体验更好的网页应用。本文将介绍API的基本概念，重点探讨WebAPI及其在JavaScript中的应用。一、什么是API？API全称为“ApplicationProgrammi
  • .gitlab-ci.yml 配置文件详解 程序媛夏天 Gitgitlabci/cd.gitlab-ci.yml
    个人主页：不爱吃糖的程序媛‍♂️作者简介：前端领域新星创作者、CSDN内容合伙人，专注于前端各领域技术，成长的路上共同学习共同进步，一起加油呀！✨系列专栏：前端面试宝典、JavaScript进阶、vue实战资料领取：前端进阶资料以及文中源码可以在公众号“不爱吃糖的程序媛”领取git工具文档说明：https://docs.gitlab.com/ee/ci/yaml/gitlab_ci_yaml.ht
  • HTTP请求过程详解 酥暮沐 http网络协议网络
    一、整体流程概述HTTP请求过程从用户输入URL开始，到页面完成渲染结束，主要分为DNS解析、建立连接、发送请求、处理响应、渲染页面、断开连接六个核心阶段。重要：当用户输入URL后，浏览器首先解析域名，通过DNS查询获取服务器IP。接着通过三次握手建立TCP连接，如果是HTTPS还会进行TLS加密协商。然后浏览器发送HTTP请求，服务器处理后返回响应数据。浏览器解析HTML/CSS，构建DOM和渲
  • 前端如何实现一个五星评价，鼠标滑动，前边星星颜色的变黄，后边的不变； 修心光 前端
    直接上代码.star-rating{display:flex;padding:10px0;}.star{position:relative;width:40px;height:40px;}.half{position:absolute;top:0;width:20px;height:40px;overflow:hidden;font-size:40px;color:#e0e0e0;cursor:p
  • 前端如何实现鼠标移上这个元素，另外一个元素变色 =^_^=银爪 css前端javascript
    1、使用CSS选择器和伪类来实现这个效果具体步骤如下：获取要修改样式的元素使用CSS选择器选中要操作的元素，并使用伪类“:hover”来指定当鼠标悬停在该元素上时应用的样式指定要应用的样式例如，如果您有一个元素ID为“target”，需要将其颜色更改为红色，当鼠标移到ID为“trigger”的元素上时，可以使用以下代码：#trigger:hover#target{color:red;}这段代码指定
  • html hover作用另外一个对象,css:hover状态改变另一个元素样式的使用 吃货喵 htmlhover作用另外一个对象
    效果演示css:hover状态改变另一个元素样式的使用.box{width:150px;height:150px;background-color:#069;line-height:150px;text-align:center;margin:20px0;color:#FFF;}.change{font-size:20px;color:#0cf;}/*情景一：两个是兄弟元素*/.box:hover
  • 单页响应式 图片懒加载HTML页面 Wiktok cssjavascript前端
    设计说明响应式设计：使用CSSGrid布局，根据屏幕宽度自动调整色块数量在不同设备上都有良好的显示效果懒加载：使用标签的loading="lazy"属性实现原生懒加载图片在滚动到视口附近时才会加载色块展示：使用随机生成的色块作为内容展示每个色块都有独特的颜色和编号色块有悬停效果和阴影效果分类展示：将色块分为自然风光、城市建筑和抽象艺术三类每类都有独立的标题和网格布局响应式懒加载页面*{margin
  • CSS特效花样鼠标悬停效果 DTcode7 HTML网站开发#前端基础入门三大核心之CSSHTMLCSSwebcss3网页开发
    CSS特效花样鼠标悬停效果鼠标悬停效果概述基本概念与作用示例一：基本的颜色变化代码解释示例二：渐变背景色代码解释示例三：放大与阴影效果代码解释示例四：文字提示代码解释示例五：旋转和翻转代码解释实际工作中的使用技巧在现代Web开发中，良好的用户体验往往意味着不仅仅要有一个功能完备的应用程序，还需要具备吸引人的视觉效果。鼠标悬停效果便是提升网站交互性和吸引力的一种常见方式。本文将探讨如何运用CSS来实
  • 插入表主键冲突做更新 a-john
    有以下场景： 用户下了一个订单，订单内的内容较多，且来自多表，首次下单的时候，内容可能会不全（部分内容不是必须，出现有些表根本就没有没有该订单的值）。在以后更改订单时，有些内容会更改，有些内容会新增。 问题： 如果在sql语句中执行update操作，在没有数据的表中会出错。如果在逻辑代码中先做查询，查询结果有做更新，没有做插入，这样会将代码复杂化。 解决： mysql中提供了一个sql语
  • Android xml资源文件中@、@android:type、@*、？、@+含义和区别 Cb123456 @+@?@*
    一.@代表引用资源 1.引用自定义资源。格式：@[package:]type/name android：text="@string/hello"   2.引用系统资源。格式：@android:type/name     android:textColor="@android:color/opaque_red"
  • 数据结构的基本介绍 天子之骄 数据结构散列表树、图线性结构价格标签
    数据结构的基本介绍 数据结构就是数据的组织形式，用一种提前设计好的框架去存取数据，以便更方便，高效的对数据进行增删查改。正确选择合适的数据结构，对软件程序的高效执行的影响作用不亚于算法的设计。此外，在计算机系统中数据结构的作用也是非同小可。例如常常在编程语言中听到的栈，堆等，就是经典的数据结构。   经典的数据结构大致如下：   一：线性数据结构 (1)：列表 a
  • 通过二维码开放平台的API快速生成二维码 一炮送你回车库 api
     现在很多网站都有通过扫二维码用手机连接的功能，联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊，写了个前台快速生成二维码的方法。        html代码如下:(二维码将生成在这div下) ? 1  &nbs
  • ImageIO读取一张图片改变大小 3213213333332132 javaIOimageBufferedImage
    package com.demo; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @Description 读取一张图片改变大小 * @author FuJianyon
  • myeclipse集成svn（一针见血） 7454103 eclipseSVNMyEclipse
                                     &n
  • 装箱与拆箱----autoboxing和unboxing darkranger J2SE
    4.2　自动装箱和拆箱 基本数据(Primitive)类型的自动装箱(autoboxing)、拆箱(unboxing)是自J2SE 5.0开始提供的功能。虽然为您打包基本数据类型提供了方便，但提供方便的同时表示隐藏了细节，建议在能够区分基本数据类型与对象的差别时再使用。 4.2.1　autoboxing和unboxing 在Java中，所有要处理的东西几乎都是对象(Object)
  • ajax传统的方式制作ajax aijuans Ajax
    //这是前台的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+
  • 只用jre的eclipse是怎么编译java源文件的？ avords javaeclipsejdktomcat
    eclipse只需要jre就可以运行开发java程序了，也能自动 编译java源代码，但是jre不是java的运行环境么，难道jre中也带有编译工具？ 还是eclipse自己实现的？谁能给解释一下呢问题补充：假设系统中没有安装jdk or jre，只在eclipse的目录中有一个jre，那么eclipse会采用该jre，问题是eclipse照样可以编译java源文件，为什么呢？ &nb
  • 前端模块化 bee1314 模块化
    背景： 前端JavaScript模块化，其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来，还处于刀耕火种的野蛮生长阶段。   JavaScript一直缺乏有效的包管理机制，造成了大量的全局变量，大量的方法冲突。我们多么渴望有天能像Java（import），Python (import)，Ruby(require)那样写代码。在没有包管理机制的年代，我们是怎么避免所
  • 处理百万级以上的数据处理 bijian1013 oraclesql数据库大数据查询
    一.处理百万级以上的数据提高查询速度的方法：        1.应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。         2.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 o
  • mac 卸载 java 1.7 或更高版本 征客丶 javaOS
    卸载 java 1.7 或更高 sudo rm -rf /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin 成功执行此命令后，还可以执行 java 与 javac 命令 sudo rm -rf /Library/PreferencePanes/JavaControlPanel.prefPane 成功执行此命令后，还可以执行 java
  • 【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析 bit1129 Stream
    第一步，Flume和Kakfa对接，Flume抓取日志，写到Kafka中 第二部，Spark Streaming读取Kafka中的数据，进行实时分析   本文首先使用Kakfa自带的消息处理（脚本）来获取消息，走通Flume和Kafka的对接 1. Flume配置 1. 下载Flume和Kafka集成的插件，下载地址：https://github.com/beyondj2ee/f
  • Erlang vs TNSDL bookjovi erlang
          TNSDL是Nokia内部用于开发电信交换软件的私有语言，是在SDL语言的基础上加以修改而成，TNSDL需翻译成C语言得以编译执行，TNSDL语言中实现了异步并行的特点，当然要完整实现异步并行还需要运行时动态库的支持，异步并行类似于Erlang的process（轻量级进程），TNSDL中则称之为hand，Erlang是基于vm(beam)开发，
  • 非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个 ljy325 企业应用
    　非常希望有一个预防疲劳的java软件，我看新闻和网站，国防科技大学的科学家累死了，太疲劳，老是加班，不休息，经常吃药，吃药根本就没用，根本原因是疲劳过度。我以前做java,那会公司垃圾，老想赶快学习到东西跳槽离开，搞得超负荷，不明理。深圳做软件开发经常累死人，总有不明理的人，有个软件提醒限制很好，可以挽救很多人的生命。 相关新闻： （1）IT行业成五大疾病重灾区：过劳死平均37.9岁
  • 读《研磨设计模式》-代码笔记-原型模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * Effective Java 建议使用copy constructor or copy factory来代替clone()方法： * 1.public Product copy(Product p){} * 2.publi
  • 配置管理---svn工具之权限配置 chenyu19891124 SVN
    今天花了大半天的功夫，终于弄懂svn权限配置。下面是今天收获的战绩。 安装完svn后就是在svn中建立版本库，比如我本地的是版本库路径是C:\Repositories\pepos。pepos是我的版本库。在pepos的目录结构 pepos    component    webapps 在conf里面的auth里赋予的权限配置为 [groups]
  • 浅谈程序员的数学修养 comsci 设计模式编程算法面试招聘
                                     浅谈程序员的数学修养
  • 批量执行 bulk collect与forall用法 daizj oraclesqlbulk collectforall
    BULK COLLECT 子句会批量检索结果，即一次性将结果集绑定到一个集合变量中，并从SQL引擎发送到PL/SQL引擎。通常可以在SELECT INTO、 FETCH INTO以及RETURNING INTO子句中使用BULK COLLECT。本文将逐一描述BULK COLLECT在这几种情形下的用法。     有关FORALL语句的用法请参考：批量SQL之 F
  • Linux下使用rsync最快速删除海量文件的方法 dongwei_6688 OS
    1、先安装rsync：yum install rsync 2、建立一个空的文件夹：mkdir /tmp/test 3、用rsync删除目标目录：rsync --delete-before -a -H -v --progress --stats /tmp/test/ log/这样我们要删除的log目录就会被清空了，删除的速度会非常快。rsync实际上用的是替换原理，处理数十万个文件也是秒删。
  • Yii CModel中rules验证规格 dcj3sjt126com rulesyiivalidate
    Yii cValidator主要用法分析：  yii验证rulesit 分类： Yii yii的rules验证 cValidator主要属性 attributes ,builtInValidators,enableClientValidation,message,on,safe,skipOnError  
  • 基于vagrant的redis主从实验 dcj3sjt126com vagrant
    平台: Mac 工具: Vagrant 系统: Centos6.5 实验目的: Redis主从   实现思路 制作一个基于sentos6.5, 已经安装好reids的box, 添加一个脚本配置从机, 然后作为后面主机从机的基础box   制作sentos6.5+redis的box   mkdir vagrant_redis cd vagrant_
  • Memcached(二)、Centos安装Memcached服务器 frank1234 centosmemcached
    一、安装gcc rpm和yum安装memcached服务器连接没有找到，所以我使用的是make的方式安装，由于make依赖于gcc，所以要先安装gcc 开始安装，命令如下，[color=red][b]顺序一定不能出错[/b][/color]： 建议可以先切换到root用户，不然可能会遇到权限问题：su root 输入密码...... rpm -ivh kernel-head
  • Remove Duplicates from Sorted List hcx2013 remove
    Given a sorted linked list, delete all duplicates such that each element appear only once. For example,Given 1->1->2, return 1->2.Given 1->1->2->3->3, return&
  • Spring4新特性——JSR310日期时间API的支持 jinnianshilongnian spring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • 浅谈enum与单例设计模式 247687009 java单例
    在JDK1.5之前的单例实现方式有两种(懒汉式和饿汉式并无设计上的区别故看做一种)，两者同是私有构 造器，导出静态成员变量，以便调用者访问。 第一种 package singleton; public class Singleton { //导出全局成员 public final static Singleton INSTANCE = new S
  • 使用switch条件语句需要注意的几点 openwrt cbreakswitch
    1. 当满足条件的case中没有break，程序将依次执行其后的每种条件（包括default）直到遇到break跳出 int main() { int n = 1; switch(n) { case 1: printf("--1--\n"); default: printf("defa
  • 配置Spring Mybatis JUnit测试环境的应用上下文 schnell18 springmybatisJUnit
    Spring-test模块中的应用上下文和web及spring boot的有很大差异。主要试下来差异有： 单元测试的app context不支持从外部properties文件注入属性 @Value注解不能解析带通配符的路径字符串 解决第一个问题可以配置一个PropertyPlaceholderConfigurer的bean。 第二个问题的具体实例是：    
  • Java 定时任务总结一 tuoni javaspringtimerquartztimertask
     Java定时任务总结  一.从技术上分类大概分为以下三种方式：  1.Java自带的java.util.Timer类，这个类允许你调度一个java.util.TimerTask任务;   说明：    java.util.Timer定时器，实际上是个线程，定时执行TimerTask类 &
  • 一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法 yangshangchuan rank相似度计算文本相似度词袋模型余弦相似度
    本文描述了一种在ITEYE博客频道上面出现的新型的商业广告形式及其应对方法，对于其他的用户生成内容站点类型也具有同样的适用性。   最近在ITEYE博客频道上面出现了一种新型的商业广告形式，方法如下：     1、注册多个账号（一般10个以上）。     2、从多个账号中选择一个账号，发表1-2篇博文
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他