btainlee
btainlee

BootStrap常用CSS样式的代码示例

Bootstrap常用的样式的代码示例


  1. 样式表引入的注意事项

jquery.js是bootstrap.js的基础，引入js文件时必须先引入jquery.js.
后引入jquery.js错误代码:Uncaught Error: Bootstrap's JavaScript requires jQuery 

<head>
    <script src="jquery.js">script>
    <script src="bootstrap.js">script>
    <link rel="stylesheet" href="bootstrap.css">
head>

2.栅格系统

因为各种屏幕的尺寸不一样，为了实现自适应，将屏幕分成12等分，规定每个元素所占的等分个数来实现在自适应。 

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1>1
col-md-2>2div> <div class="col-md-3>3
col-md-4>4div> <div class="col-md-2>2

BootStrap常用CSS样式的代码示例_第1张图片

3.Bootstrap表格样式

  • 最基础的样式
<table class="table">
    <tr>
        <th>h1th>
        <th>h2th>
        <th>h3th>
    tr>
    <tr>
        <td>d1td>
        <td>d2td>
        <td>d3td>
    tr>
table>

这里写图片描述

  • 带边框的表格 
<table class="table table-bordered">
    <tr>
        <th>h1th>
        <th>h2th>
        <th>h3th>
    tr>
    <tr>
        <td>d1td>
        <td>d2td>
        <td>d3td>
    tr>
table>

BootStrap常用CSS样式的代码示例_第2张图片

  • 带条纹的表格 
<table class="table table-bordered table-striped">
    <tr>
        <th>h1th>
        <th>h2th>
        <th>h3th>
    tr>
    <tr>
        <th>h1th>
        <th>h2th>
        <th>h3th>
    tr>
    <tr>
        <th>h1th>
        <th>h2th>
        <th>h3th>
    tr>       
    <tr>
        <th>h1th>
        <th>h2th>
        <th>h3th>
    tr>               
table>

BootStrap常用CSS样式的代码示例_第3张图片

  • 鼠标悬停表格 
<table class ="table table-bordered table-hover">
    <tr>
        <th>h1th>
        <th>h2th>
        <th>h3th>
    tr>
    <tr>
        <td>d1td>
        <td>d2td>
        <td>d3td>
    tr>
table>

BootStrap常用CSS样式的代码示例_第4张图片

  • 状态类表格（带背景色的表格） 
<table class ="table table-bordered table-hover">
    <tr class="active">
        <th>h1th>
        <th>h2th>
        <th>h3th>
    tr>
    <tr class="danger">
        <td>d1td>
        <td>d2td>
        <td>d3td>
    tr>
    <tr class="info">
        <th>h1th>
        <th>h2th>
        <th>h3th>
    tr>
    <tr>
        <td class="success">d1td>
        <td class="warning">d2td>
        <td class="success">d3td>
    tr>
table>

BootStrap常用CSS样式的代码示例_第5张图片

4.表单样式

表单元素一般使用.form-control来修饰，一组控件最好放在一个div.form-group中显得更紧凑。

  • 基本的表单 
<form action="">
   <div class="form-group">
      <label for="name">namelabel>
      <input type="text" name="" id="name" class="form-control">
   div>
   <div class="form-group">
      <label for="password">passwordlabel>
      <input type="password" name="password" id="" class="form-control">
   div>
   <div class=" col-md-6 col-md-offset-3 form-group">
      <button class="btn btn-success">LOg inbutton>
      <button class="btn btn-warning">LogOUtbutton>
   div>
form>

BootStrap常用CSS样式的代码示例_第6张图片

  • 内联表单
    内联表单：在同一行的表单 
<form action="" class="form-inline">
    <div class="form-group">
       <label for="name">用户名:label>
       <input type="text" name="" id="" class="form-control">
    div>
    <div class="form-group">
       <label for="password">密码:label>
       <input type="password" name="" id="" class="form-control">
    div>
    <div class="form-group">
       <button class="btn btn-success">LOG inbutton>
       <button class="btn btn-info">LOg outbutton>
    div>
form>

BootStrap常用CSS样式的代码示例_第7张图片

  • 水平排列的表单 
<form action="" class="form-horizontal">
    <div class="form-group">
       <label for="name" class="col-md-2 control-label">Name:label>
    <div class="col-md-10">
        <input type="text" name="name" id="name" class="form-control">
    div>
    div>
    <div class="form-group">
        <label for="password" class="col-md-2 control-label">Password:label>
    <div class="col-md-10">
        <input type="password" name="password" id="password" class="form-control">
    div>
    div>
    <div class="form-group">
    <div class="col-md-6 col-md-offset-3">
        <button class="btn btn-success">登陆button>
        <button class="btn btn-warning">登出button>
    div>
    div>
form>

BootStrap常用CSS样式的代码示例_第8张图片

  • 支持多行文本的文本域 
<textarea class="form-control" rows="3">textarea>

  • 单选框和多选框

    1.默认样式（独占一行） 

<div class="checkbox">
    <label>
       <input type="checkbox" name="" id="">
       默认的多选框样式
    label>
div>
<div class="checkbox">
    <label>
       <input type="checkbox" name="" id="">
       默认的多选框样式
    label>
div>

<div class="radio">
   <label>
       <input type="radio" name="name" id="">
      默认的单选框样式
   label>
div>
<div class="radio">
   <label>
      <input type="radio" name="name" id="">
      默认的单选框样式
    label>
div>

BootStrap常用CSS样式的代码示例_第9张图片


2.内联多选框和单选框 

<label class="checkbox-inline">
    <input type="checkbox" name="name" id="" class="form-control">1
label>
<label class="checkbox-inline">
    <input type="checkbox" name="name" id="" class="form-control">2
label>

<div>div>
<label class="radio-inline">
    <input type="radio" name="name2" id="" class="form-control">1
label>
<label class="radio-inline">
    <input type="radio" name="name2" id="" class="form-control">2
label>

BootStrap常用CSS样式的代码示例_第10张图片

  • 下拉列表 
<select class="form-control">
    <option value="1">1option>
    <option value="2">2option>
    <option value="3">3option>
select>

这里写图片描述

  • 静态控件？
    没搞懂这个东西是干啥用的，也不知道 label.sr-only 是干嘛用的。 
<div class="form-group">
    <label class="control-label col-md-2">Emaillabel>
    <div class="col-md-10">
        <p class="form-control-static">[email protected]p>
    div>
div>
<div class="form-group">
    <label class="control-label col-md-2 sr-only">Emaillabel>
    <div class="col-md-10">
        <p class="form-control-static">[email protected]p>
    div>
div>
![这里写图片描述](https://img-blog.csdn.net/20171018112947202?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzEzMzkzNjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

  • 输入框几种状态

    @1.自动获得焦点状态

    看了半天文档没看懂，按照文档写了两遍，都不生效。Html5新增 autofocus 属性，刚好解决bootstrap自动获得焦点的问题。 

<input type="text" class="form-control" autofocus>

BootStrap常用CSS样式的代码示例_第11张图片

@2.禁用状态和只读状态 

<input type="text" disabled class="form-control" value="Hello">
<input type="text" readonly class="form-control" value="hello">

BootStrap常用CSS样式的代码示例_第12张图片
@3.批量禁用

Talk is cheap,show U code. 

<form>
  <fieldset disabled>
      <input type="text" class="form-control">
      <input type="radio" class="form-control">
  fieldset>
form>

BootStrap常用CSS样式的代码示例_第13张图片

  • 一些样式组合

@1.带提示文档的输入框 

<div class="form-group">
   <label for="input1" class="control-label ">Emaillabel>
   <input type="text" name="" id="input1" class="form-control">
   <span class="help-block">请输入电子邮件。span>
div>
<div class="form-group">
   <label for="input2" class="control-label">Namelabel>
   <input type="text" name="name" id="input2" class="form-control">
   <span class="help-block">请输入姓名。span>
div>

BootStrap常用CSS样式的代码示例_第14张图片

@2.校验状态

将整个.form-group加上色彩。 

<div class="form-group has-error">
    <label for="input1" class="control-label">namelabel>
    <input type="text" name="name" id="input1" class="form-control">
div>

BootStrap常用CSS样式的代码示例_第15张图片

@ 3.带有额外的图标 

<div class="form-group has-feedback">
   <label for="input1" class="control-label">Namelabel>
   <input type="text" name="name" id="input1" class="form-control">
   <span class="glyphicon glyphicon-ok form-control-feedback">span>
div>

BootStrap常用CSS样式的代码示例_第16张图片

<div class="form-group has-success has-feedback">
    <label for="input2" class="control-label">Namelabel>
    <div class="input-group">
        <span class="input-group-addon">@span>
        <input type="text" name="name" id="input2" class="form-control">
        <span class="glyphicon glyphicon-ok form-control-feedback">span>
    div>
div>

BootStrap常用CSS样式的代码示例_第17张图片

  • 控件尺寸


    @1.控件高度 
<input class="form-control input-lg" type="text">
<input class="form-control" type="text">
<input class="form-control input-sm" type="text" >

BootStrap常用CSS样式的代码示例_第18张图片

@2.控件宽度 

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label">Large labellabel>
    <div class="col-sm-10">
    <input class="form-control" type="text">
    div>
  div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label">Small labellabel>
    <div class="col-sm-10">
    <input class="form-control" type="text">
    div>
  div>
form>

BootStrap常用CSS样式的代码示例_第19张图片

  • 按钮

样式类型 内容 示例
背景色 btn-default,btn-success,btn-info,btn-danger,btn-primary,btn-warning，btn-link
激活状态 active
链接
禁用状态 disabled

-

图片

@ 1.响应式图片 

<img src="#" class="img-responsive">

@ 2.图片形状 

<img src="#" class="img-rounded">
<img src="#" class="img-circle">
<img src="#" class="img-thumbnail">

BootStrap常用CSS样式的代码示例_第20张图片

  • 辅助类

@1. 文本颜色 

<p class="text-muted">text-mutedp>
<p class="text-primary">text-primaryp>
<p class="text-success">text-successp>
<p class="text-info">text-infop>
<p class="text-warning">text-warningp>
<p class="text-danger">text-dangerp>

BootStrap常用CSS样式的代码示例_第21张图片

@2.文字背景颜色 

<p class="bg-primary">bg-primaryp>
<p class="bg-success">bg-successp>
<p class="bg-info">bg-infop>
<p class="bg-warning">bg-warningp>
<p class="bg-danger">bg-dangerp>

BootStrap常用CSS样式的代码示例_第22张图片

  • 其他一些css样式

样式名称 样式类 样式代码 样式示例
关闭按钮 button.close>span>& times;
三角按钮 span.caret
快速浮动 div.pull-left/div.pull-right
内容块居中 div.center-block
清除浮动 div.clearfix
显示或者隐藏内容 .show/.hidden
*屏幕和键盘导航 .sr-only/.sr-only和.sr-only-foucusable配合使用
图片替换 .text-hide

Bootstrap CSS样式部分学习笔记到此结束

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

  • 为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
    为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
  • Web前端交互利用Python跟大模型操作 哥本哈士奇 前端交互python
    Web前端交互利用Python跟大模型操作一个简单的演示，如何把大模型应用集成到自己的应用场景当中。这里的场景我们模拟的是在吃鸡游戏中，一个作战计划，是否符合老六的行为规范。吃鸡游戏已经风靡很多年，游戏里每个人的游戏风格都不一样，有喜欢钢枪的，有喜欢随机应变的，也有喜欢当老六苟分的。每种风格的游戏方式以及游戏里的行为都不同，所以这里将演示如何应用大模型，去判断一个人的游戏方式，是否符合一个老六的行
  • Rust 全栈应用框架 Dioxus：从前端到桌面再到 WASM 的统一开发体验 掘金安东尼 字节阿里rust前端wasm
    如果你正在寻找一个能用Rust写前端、桌面应用、移动应用甚至WebAssembly的统一框架，Dioxus是目前生态中最具潜力的选择之一。为什么需要Dioxus？随着WebAssembly（WASM）与Rust的发展，越来越多开发者开始思考：Rust是否能做“全栈”？是否能有像React一样的组件模型？是否可以用Rust写桌面GUI，甚至Web前端？Dioxus正是这个愿景下的产物。它是一个受Re
  • web前端总复习（一）：http和https 做一个暴躁的开发 web前端总复习http网络https
    http和https的基本概念http：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一种用于从服务器传输超文本到本地浏览器的传输协议。它可以使得浏览器更加高效，减少网络传输。https：是http的安全版。是一种以安全为目标的http通道。http和https的区别①http传输信息不加密，https传输信息加密。②端口不同，http为80端口，https为443端口。③https协议
  • 前端“武林”争“盟主”？我有我的看法！ 秋风_bdfd
    了解过web前端的都知道前端的三大框架，这也是前端攻城狮们向来争论的话题。下面就由小编来发表一下自己的一点小小的看法，如有别的看法，轻喷~前端这三大框架的争议那么大，就是因为使用的人太多了。对于小白来说，一开始接触前端，学习的都是HTML、CSS、JS。但是你学完这3样之后，你还得深入的往后期学，那么要学什么呢？当然就是我们今天所说的框架啦。因为在实际工作中，基本都是直接在框架上构建网站的，很少会
  • 【自动化测试】web前端组件测试范围梳理 阿槿吃糖 前端自动化测试前端
    测试组件范围划分按钮文字链接单选框多选框输入框计数器选择器级联选择器开关日期选择器上传分页弹窗导航菜单表格富文本编辑器前端组件测试范围梳理-png
  • 学习web前端开发的经验分享 小猿圈加加
    我们不管学习什么，必不可缺少的一定是恒心和毅力，学习web也一样，更需要不断地学习和练习，因为语言嘛，就是不断地练习才能说得更好，所以不要偷懒，偷懒一定学不会，这就是计算机语言，下面看一下小编的分享吧。感想：1.学习一个技术，不是一看见源代码就是copy，而是仔细阅读后，找到自己想要的，并且自己写出来，自己理解了，下次遇到同样的问题，自己才能解决。2.在电脑上学习的过程中，我总是先建立一个txt，
  • 大学生HTML期末大作业——HTML+CSS+JavaScript音乐网站（爱莫） 无·糖 Web前端期末大作业html课程设计css大学生前端javascript网页设计
    HTML+CSS+JS【音乐网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目音乐网站7页含网页设计报告二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图
  • HTML5和SVG篝火动画实战：月亮下的野营炊烟效果 申增浩
    本文还有配套的精品资源，点击获取简介：HTML5是网页标记语言的最新标准，支持更加动态和丰富的用户体验。本项目源码展示了如何使用HTML5的SVG来绘制篝火和炊烟动画，通过CSS3动画、JavaScript交互、Canvas与SVG的选择以及Web动画性能优化，实现了一个月亮下的篝火和野营炊烟效果。项目还考虑了响应式设计和数据结构的使用，为开发者提供了一个学习Web前端开发的实践案例。1.HTML
  • 网络安全基础作业三 Csxyzj web安全javascript安全
    回顾web前端的代码用户登录body{font-family:'Arial',sans-serif;background-color:#f0f2f5;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;}.login-container{background-color:white;padding
  • web前端进阶之Javascript设计模式面向对象篇 jia林
    前言：在此说明Javascript设计模式所讲内容和知识点来自双越老师（wangEditor富文本开源作者）的视频，内容通俗易懂，受益匪浅，结合自己的学习心得整理成笔记，与大家分享，愿在前端的道路上越走越远.....从“写好代码”到“设计代码”的过程，不仅是技术的提升，更是编程思维的提升，而这其中最关键的就是设计模式，是否理解并掌握设计模式，也是衡量程序员能力的标准之一。学习前提使用过jquery
  • WEB前端登陆页面（复习） En¥ 前端javascript开发语言
    1.登陆界面显示2.代码​登录界面/*重置所有元素的默认样式，让所有浏览器都从同一起点开始*/*{margin:0;padding:0;box-sizing:border-box;/*让元素的宽度和高度包含内边距和边框*/font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-serif;/*设置默认字体*/}body{/*使用flex布局让登录框在页面中
  • Xss漏洞总结
    一、XSS漏洞简介XSS（Cross-SiteScripting，跨站脚本攻击）是一种常见的Web前端安全漏洞，其主要危害对象是网站的访问用户。攻击者通过在网页中注入恶意脚本代码（如JavaScript、Flash等），诱使用户访问后在其浏览器中执行这些代码，从而达到窃取数据、控制会话等攻击目的。二、XSS漏洞原理XSS的根本原因在于服务器未对用户提交的输入内容进行严格过滤和转义处理，导致用户提供
  • Python,C++,Go开发芯片电路设计APP Geeker-2025 pythonc++golang
    #芯片电路设计APP-Python/C++/Go综合开发方案##系统架构设计```mermaidgraphTDA[Web前端]-->B(Python设计界面)B-->C(GoAPI网关)C-->D[C++核心引擎]D-->E[硬件加速]F[数据库]-->CG[EDA工具链]-->DH[云服务]-->C```##技术栈分工|技术|应用领域|优势||------|----------|------||
  • 我在黑马程序员学web前端 新手来了@click 前端
    1网页由三部分组成1.、html负责网页的结构2.css、负责网页的美化，控制网页元素的样式3、js，负责网页交互html常见的标签：1、form表单input输入框select下拉菜单option下拉列表2、table表格thead表头ｔｂｏｄｙ是表体tr行th表头加粗ｔｄ是列ｂｒ是换行2/CＳＳ常见的三种引入方式行内样式、内部样式、外部样式用ｌｉｎｋ关键字常用的元素选择器：标签选择器、id选择
  • 前端转后端学习路线整理
    一、背景本人是一名Web前端开发，技术栈是Vue和React，不会Node。之前学过，但是因为一些原因（比如没有使用场景，很多概念无法理解，学完就忘等）一直也没有掌握。因为在CMS部门耳濡目染时间久了，感觉不学点后端有点说不过去，而且学起来之后发现也挺有兴趣的。但是对于一名前端开发（而且在学校的时候基本没学习）来说要学习的内容实在太多了，开始的困难在于理清各种技术都是干什么的以及它们之间的关系。现
  • web前端入门到实战：CSS实现8种炫酷按钮 大前端世界
    今天给大家分享8种炫酷按钮的CSS实现。1.3D按钮1现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，我们可以使用box-shadow模拟出这两个侧面：HTML：3DButton1CSS:.button-3d-1{position:relative;background:orangered;bo
  • 运维技术干货 — 不仅是 Linux 运维最佳实践 python算法小白 Linux
    附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全：书单导航页（点击右侧极客侠栈即可打开个人博客）：极客侠栈①【Java】学习之路吐血整理技术书从入门到进阶最全50+本（珍藏版)②【算法数据结构+acm】从入门到进阶吐血整理书单50+本（珍藏版)③【数据库】从入门到进阶必读18本技术书籍网盘吐血整理网盘(珍藏版)④【Web前端】从HTML到JS到AJ
  • web前端期末大作业实例 (1500套) 集合
    文章目录web前端期末大作业(1500套)集合一、网页介绍二、网页集合表白网页125套(集合)Echarts大屏数据展示150套(集合)一、基于HTML+Echarts技术制作二、基于VUE+Echarts技术制作更多源码web前端期末大作业(1500套)集合临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页
  • 《Java前端开发全栈指南：从Servlet到现代框架实战》
    前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处
  • 前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比
    前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指南为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指
  • 使用ENO将您的JSON对象生成HTML显示 土族程序员 jsonhtmljavascripteno前端
    ENO是简单易用，性能卓越，自由灵活开源的WEB前端组件；实现JSON与HTML互操作的JavaScript函数库。没有任何其它依赖，足够轻量。WEBPackNPM工程安装。npminstall@joyzl/eno然后在JS中引用import"@joyzl/eno";将JS实体对象填充到表单假设有一个如下的HTML表单TYPE1TYPE2通过以下代码将实体对象，设置到表单中，实体对象可以从服务器请
  • Web 前端性能优化：从代码到加载速度的全面剖析 码力无边-OEC 前端性能优化web
    Web前端性能优化：从代码到加载速度的全面剖析当用户访问你的网站时，如果页面加载时间超过3秒，跳出率会飙升至40%以上。更糟糕的是，移动端用户的耐心只有2秒。这意味着性能优化不仅仅是技术问题，更直接关系到业务成果。经过多年的前端开发实践，我发现很多开发者在性能优化时存在一个误区：过分关注工具和框架的选择，却忽略了最基础但最关键的优化策略。今天我们就来深入剖析前端性能优化的核心要点。性能优化的核心指
  • Fiddler中文版如何提升API调试效率：本地化优势与开发者实战体验汇总 代码背锅人日志 ios小程序uni-appiphoneandroidwebviewhttps
    在现代软件开发中，调试网络请求是不可或缺的一环。无论是Web前端、移动App，还是后端微服务，只要涉及到API通信，就离不开高效的抓包工具。Fiddler作为全球使用最广泛的抓包调试工具之一，凭借功能强大、灵活扩展和跨平台支持，深受开发者喜爱。而对于中文用户而言，Fiddler中文版的出现，让这款专业工具变得更加亲民、高效和易于掌握。本文将结合开发者日常使用场景，解析Fiddler中文版如何通过本
  • 大学生HTML期末大作业——HTML+CSS+JavaScript传统文化 无·糖 Web前端期末大作业html课程设计css大学生前端大作业期末作业
    HTML+CSS+JS【传统文化】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目传统文化精美设计5页含注册登录二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮
  • 大学生HTML期末大作业——HTML+CSS+JavaScript游戏网站（英雄联盟） 无·糖 Web前端期末大作业html课程设计css美食游戏javascript大作业
    HTML+CSS+JS【游戏网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目游戏网站（英雄联盟）含注册登录13页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、
  • Web前端工程化
    Web前端工程化前端工程化是指将软件工程的方法和原则应用到前端开发中，以提高开发效率、保证代码质量、便于团队协作和项目维护的一套体系化实践。以下是前端工程化的主要内容和实践：核心组成部分1.模块化开发JavaScript模块化：CommonJS、AMD、ESModuleCSS模块化：CSSModules、CSS-in-JS组件化：Vue/React/Angular组件体系微前端：将大型应用拆分为多
  • Vue3 学习教程，从入门到精通，Vue3 简介知识点及案例代码（1） 知识分享小能手 vue3前端开发网页开发学习bootstrapjavascripttypescript前端vue.jsvue
    Vue3简介知识点及案例代码一、Vue3简介Vue3是一款用于构建用户界面的渐进式JavaScript框架，采用MVVM模式，具有响应式、组件化等优点，可提高开发效率，优化应用性能。二、Web前端开发概述Web前端开发涉及HTML、CSS、JavaScript等技术，用于构建用户可直接交互的页面部分。随着技术发展，出现了多种前端框架，Vue3是其中的优秀代表，基于前后端分离模式，使前后端开发解耦，
  • WEB前端缓存解决方案 qermeng WEB前端SPA缓存WEB前端缓存解决
    WEB前端缓存解决方案问题描述页面缓存js/css缓存问题描述使用angularjs(1.5.0)+gulp(3.9.0)做SPA开发时，修改js后，使用gulp-rev(6.0.1)对文件名进行了修改，但是刷新界面后修改的文件并没有加载，必须使用CRLT+F5深度刷新才可以。页面缓存页面缓存解决方案：js/css缓存通过gulp-rev在文件名增加哈希值来解决缓存问题gulp-rev:Stati
  • web前端基础知识:表单标签 黄昏终结者 前端htmljavascript
    一.input系列标签语法:form表单用来收集用户信息的input输入type类型type属性值:text文本password密码框radio单选框checkbox多选框file选择文件submit提交按钮reset重置按钮button普通按钮1.input系列标签-text文本框属性:placeholder占位符文本输入框语法:昵称:2.input系列标签-password密码框属性:plac
  • java的(PO,VO,TO,BO,DAO,POJO) Cb123456 VOTOBOPOJODAO
    转: http://www.cnblogs.com/yxnchinahlj/archive/2012/02/24/2366110.html   -------------------------------------------------------------------  O/R Mapping 是 Object Relational Mapping（对象关系映
  • spring ioc原理（看完后大家可以自己写一个spring） aijuans spring
             最近，买了本Spring入门书：spring In Action 。大致浏览了下感觉还不错。就是入门了点。Manning的书还是不错的，我虽然不像哪些只看Manning书的人那样专注于Manning,但怀着崇敬 的心情和激情通览了一遍。又一次接受了IOC 、DI、AOP等Spring核心概念。 先就IOC和DI谈一点我的看法。IO
  • MyEclipse 2014中Customize Persperctive设置无效的解决方法 Kai_Ge MyEclipse2014
    高高兴兴下载个MyEclipse2014，发现工具条上多了个手机开发的按钮，心生不爽就想弄掉他！ 结果发现Customize Persperctive失效！！ 有说更新下就好了，可是国内Myeclipse访问不了，何谈更新... so~这里提供了更新后的一下jar包，给大家使用！ 1、将9个jar复制到myeclipse安装目录\plugins中 2、删除和这9个jar同包名但是版本号较
  • SpringMvc上传 120153216 springMVC
      @RequestMapping(value = WebUrlConstant.UPLOADFILE) @ResponseBody public Map<String, Object> uploadFile(HttpServletRequest request,HttpServletResponse httpresponse) { try { //
  • Javascript----HTML DOM 事件 何必如此 JavaScripthtmlWeb
    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 注：DOM： 指明使用的 DOM 属性级别。 1.鼠标事件 属性               
  • 动态绑定和删除onclick事件 357029540 JavaScriptjquery
    因为对JQUERY和JS的动态绑定事件的不熟悉，今天花了好久的时间才把动态绑定和删除onclick事件搞定!现在分享下我的过程。      在我的查询页面，我将我的onclick事件绑定到了tr标签上同时传入当前行(this值)参数，这样可以在点击行上的任意地方时可以选中checkbox，但是在我的某一列上也有一个onclick事件是用于下载附件的，当
  • HttpClient|HttpClient请求详解 7454103 apache应用服务器网络协议网络应用Security
    HttpClient 是 Apache Jakarta Common 下的子项目，可以用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包，并且它支持 HTTP 协议最新的版本和建议。本文首先介绍 HTTPClient，然后根据作者实际工作经验给出了一些常见问题的解决方法。HTTP 协议可能是现在 Internet 上使用得最多、最重要的协议了，越来越多的 Java 应用程序需
  • 递归 逐层统计树形结构数据 darkranger 数据结构
    将集合递归获取树形结构: /** * * 递归获取数据 * @param alist:所有分类 * @param subjname:对应统计的项目名称 * @param pk:对应项目主键 * @param reportList: 最后统计的结果集 * @param count:项目级别 */ public void getReportVO(Arr
  • 访问WEB-INF下使用frameset标签页面出错的原因 aijuans struts2
    <frameset rows="61,*,24" cols="*" framespacing="0" frameborder="no" border="0">        
  • MAVEN常用命令 avords
    Maven库： http://repo2.maven.org/maven2/ Maven依赖查询： http://mvnrepository.com/ Maven常用命令： 1. 创建Maven的普通java项目：    mvn archetype:create    -DgroupId=packageName 
  • PHP如果自带一个小型的web服务器就好了 houxinyou apache应用服务器WebPHP脚本
    最近单位用PHP做网站，感觉PHP挺好的，不过有一些地方不太习惯，比如，环境搭建。PHP本身就是一个网站后台脚本，但用PHP做程序时还要下载apache，配置起来也不太很方便，虽然有好多配置好的apache+php+mysq的环境，但用起来总是心里不太舒服，因为我要的只是一个开发环境，如果是真实的运行环境，下个apahe也无所谓，但只是一个开发环境，总有一种杀鸡用牛刀的感觉。如果php自己的程序中
  • NoSQL数据库之Redis数据库管理(list类型) bijian1013 redis数据库NoSQL
    3.list类型及操作         List是一个链表结构，主要功能是push、pop、获取一个范围的所有值等等，操作key理解为链表的名字。Redis的list类型其实就是一个每个子元素都是string类型的双向链表。我们可以通过push、pop操作从链表的头部或者尾部添加删除元素，这样list既可以作为栈，又可以作为队列。   &nbs
  • 谁在用Hadoop？ bingyingao hadoop数据挖掘公司应用场景
    Hadoop技术的应用已经十分广泛了，而我是最近才开始对它有所了解，它在大数据领域的出色表现也让我产生了兴趣。浏览了他的官网，其中有一个页面专门介绍目前世界上有哪些公司在用Hadoop，这些公司涵盖各行各业，不乏一些大公司如alibaba,ebay,amazon,google,facebook,adobe等，主要用于日志分析、数据挖掘、机器学习、构建索引、业务报表等场景,这更加激发了学习它的热情。
  • 【Spark七十六】Spark计算结果存到MySQL bit1129 mysql
    package spark.examples.db import java.sql.{PreparedStatement, Connection, DriverManager} import com.mysql.jdbc.Driver import org.apache.spark.{SparkContext, SparkConf} object SparkMySQLInteg
  • Scala: JVM上的函数编程 bookjovi scalaerlanghaskell
        说Scala是JVM上的函数编程一点也不为过，Scala把面向对象和函数型编程这两种主流编程范式结合了起来，对于熟悉各种编程范式的人而言Scala并没有带来太多革新的编程思想，scala主要的有点在于Java庞大的package优势，这样也就弥补了JVM平台上函数型编程的缺失，MS家.net上已经有了F#，JVM怎么能不跟上呢？     对本人而言
  • jar打成exe bro_feng java jar exe
    今天要把jar包打成exe，jsmooth和exe4j都用了。 遇见几个问题。记录一下。 两个软件都很好使，网上都有图片教程，都挺不错。 首先肯定是要用自己的jre的，不然不能通用，其次别忘了把需要的lib放到classPath中。 困扰我很久的一个问题是，我自己打包成功后，在一个同事的没有装jdk的电脑上运行，就是不行，报错jvm.dll为无效的windows映像，如截图 最后发现
  • 读《研磨设计模式》-代码笔记-策略模式-Strategy bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* 策略模式定义了一系列的算法，并将每一个算法封装起来，而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化 简单理解： 1、将不同的策略提炼出一个共同接口。这是容易的，因为不同的策略，只是算法不同，需要传递的参数
  • cmd命令值cvfM命令 chenyu19891124 cmd
         cmd命令还真是强大啊。今天发现jar -cvfM aa.rar @aaalist 就这行命令可以根据aaalist取出相应的文件   例如：      在d：\workspace\prpall\test.java 有这样一个文件，现在想要将这个文件打成一个包。运行如下命令即可比如在d：\wor
  • OpenJWeb(1.8) Java Web应用快速开发平台 comsci java框架Web项目管理企业应用
        OpenJWeb(1.8) Java Web应用快速开发平台的作者是我们技术联盟的成员，他最近推出了新版本的快速应用开发平台  OpenJWeb(1.8)，我帮他做做宣传   OpenJWeb快速开发平台以快速开发为核心，整合先进的java 开源框架，本着自主开发+应用集成相结合的原则，旨在为政府、企事业单位、软件公司等平台用户提供一个架构透
  • Python 报错：IndentationError: unexpected indent daizj pythontab空格缩进
        IndentationError: unexpected indent 是缩进的问题，也有可能是tab和空格混用啦     Python开发者有意让违反了缩进规则的程序不能通过编译，以此来强制程序员养成良好的编程习惯。并且在Python语言里，缩进而非花括号或者某种关键字，被用于表示语句块的开始和退出。增加缩进表示语句块的开
  • HttpClient 超时设置 dongwei_6688 httpclient
    HttpClient中的超时设置包含两个部分： 1. 建立连接超时，是指在httpclient客户端和服务器端建立连接过程中允许的最大等待时间 2. 读取数据超时，是指在建立连接后，等待读取服务器端的响应数据时允许的最大等待时间   在HttpClient 4.x中如下设置：   HttpClient httpclient = new DefaultHttpC
  • 小鱼与波浪 dcj3sjt126com
    一条小鱼游出水面看蓝天，偶然间遇到了波浪。　　小鱼便与波浪在海面上游戏，随着波浪上下起伏、汹涌前进。　　小鱼在波浪里兴奋得大叫：“你每天都过着这么刺激的生活吗？简直太棒了。”　　波浪说：“岂只每天过这样的生活，几乎每一刻都这么刺激！还有更刺激的，要有潮汐变化，或者狂风暴雨，那才是兴奋得心脏都会跳出来。”　　小鱼说：“真希望我也能变成一个波浪，每天随着风雨、潮汐流动，不知道有多么好！”　　很快，小鱼
  • Error Code: 1175 You are using safe update mode and you tried to update a table dcj3sjt126com mysql
    快速高效用：SET SQL_SAFE_UPDATES = 0；下面的就不要看了！ 今日用MySQL Workbench进行数据库的管理更新时，执行一个更新的语句碰到以下错误提示： Error Code: 1175 You are using safe update mode and you tried to update a table without a WHERE that
  • 枚举类型详细介绍及方法定义 gaomysion enumjavaee
    转发 http://developer.51cto.com/art/201107/275031.htm 枚举其实就是一种类型，跟int, char 这种差不多，就是定义变量时限制输入的，你只能够赋enum里面规定的值。建议大家可以看看，这两篇文章，《java枚举类型入门》和《C++的中的结构体和枚举》，供大家参考。 枚举类型是JDK5.0的新特征。Sun引进了一个全新的关键字enum
  • Merge Sorted Array hcx2013 array
    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:You may assume that nums1 has enough space (size that is
  • Expression Language 3.0新特性 jinnianshilongnian el 3.0
    Expression Language 3.0表达式语言规范最终版从2013-4-29发布到现在已经非常久的时间了；目前如Tomcat 8、Jetty 9、GlasshFish 4已经支持EL 3.0。新特性包括：如字符串拼接操作符、赋值、分号操作符、对象方法调用、Lambda表达式、静态字段/方法调用、构造器调用、Java8集合操作。目前Glassfish 4/Jetty实现最好，对大多数新特性
  • 超越算法来看待个性化推荐 liyonghui160com 超越算法来看待个性化推荐
             一提到个性化推荐，大家一般会想到协同过滤、文本相似等推荐算法，或是更高阶的模型推荐算法，百度的张栋说过，推荐40%取决于UI、30%取决于数据、20%取决于背景知识，虽然本人不是很认同这种比例，但推荐系统中，推荐算法起的作用起的作用是非常有限的。       就像任何
  • 写给Javascript初学者的小小建议 pda158 JavaScript
    　　一般初学JavaScript的时候最头痛的就是浏览器兼容问题。在Firefox下面好好的代码放到IE就不能显示了，又或者是在IE能正常显示的代码在firefox又报错了。 　　如果你正初学JavaScript并有着一样的处境的话建议你：初学JavaScript的时候无视DOM和BOM的兼容性，将更多的时间花在 了解语言本身（ECMAScript）。只在特定浏览器编写代码（Chrome/Fi
  • Java 枚举 ShihLei javaenum枚举
    注：文章内容大量借鉴使用网上的资料，可惜没有记录参考地址，只能再传对作者说声抱歉并表示感谢！   一 基础 1）语法      枚举类型只能有私有构造器（这样做可以保证客户代码没有办法新建一个enum的实例）      枚举实例必须最先定义 2）特性     &nb
  • Java SE 6 HotSpot虚拟机的垃圾回收机制 uuhorse javaHotSpotGC垃圾回收VM
    官方资料，关于Java SE 6 HotSpot虚拟机的garbage Collection，非常全，英文。 http://www.oracle.com/technetwork/java/javase/gc-tuning-6-140523.html   Java SE 6 HotSpot[tm] Virtual Machine Garbage Collection Tuning &
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他