qinglu
qinglu

div+css页面布局

 

1、什么是 DIV

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。它是一个容器，DIV的起始标签和结束标签之间所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

在页面中插入div标签，其代码如下：

    内容    

在页面上显示为一行的效果。它是一个块状元素，在其中放置页面内容。

因此在 div+css页面制作中只需要2个步骤，首先使用div将内容标记出来，然后为这个div编写需要的CSS样式。

2、盒子模型

盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！
    什么是盒子模型？对于初学者来说，很难说出来，但是对于生活中的盒子应该很熟悉，这里提到的盒子模型就可以理解成现实生活中的盒子就可以了。
    既然和现实生活中的盒子一样，那想一下，生活中的盒子里面存放东西的区域给他起个名字叫“content(内容)”，而盒子的纸壁给它起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，称这部分距离叫“padding(内边距)”，如果需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离称之为"margin(外边距)"。
    这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图7-2所示：

 

图7-2  盒子模型


    页面就是由许许多多的盒子组成的，但是和现实生活中的盒子会忽略外边距(margin)，但是在页面中，是不能忽略外边距(margin)的，只有包括外边距的盒子模型在CSS中才是完整的，即使外边距为零，也不要忽略它，要知道它是存在的。

3、块状元素和内联元素

在用CSS布局页面的时候，会将HTML标签分成两种，块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。

l        块状元素

一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。

l        内联元素

内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。

举例说明，例如要求：ID为div1的红色(#900)区域，宽度和高度均为300像素，并且包含一个ID为div2的绿色区域，长度宽度均为100像素的div2。

CSS代码如下：

#div1{width:300px; height:300px; background:#900;}

#div2{width:100px; height:100px; background:#090;}

HTML代码如下：

 

 

4 Div+CSS布局实例一

本实例使用的布局类型为封面型，实例中 box是整个页面的容器，main是主体内容，bottom是页面中的版底信息，如图7-16所示：

 

Box

 

main

bottom
 
 

                           图7-16 页面布局结构

在实例的设计制作过程中，首先分析页面的结构，制作出页面的大体布局，接着制作页面的顶端部分和页面的背景部分，然后再制作页面的主体内容、底部内容，最后完成整个页面的制作，最终页面效果图如图7-17所示：

图7-17  页面最终效果

制作步骤如下：

【步骤1】  打开Dreamweaver软件，建立站点，新建网页，保存命名为index.htm，另外新建1个css文件，分别保存为divcss.css。

【步骤2】  打开窗口菜单，选择css样式子菜单，打开CSS样式面板，单击该面板上的“附加样式表”按钮 ，打开链接外部样式表对话框，将刚刚建立的css文件链接到页面中，如图7-18所示：

                    图7-18 链接外部样式表

 

【步骤3】  打开divcss.css文件，创建代码如下所示：

*{           

    margin:0px;

    border:0px;

    padding:0px;

}

body{

    font-family:"宋体";

    font-size:12px;

    color:#fff;

    background-image:url(images/5401.jpg);

    background-repeat:repeat-x;

}

上述代码中， *为通配选择符，表示所有对象，包括所有不同id不同class的所有标记。

【步骤4】  返回设计页面，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，如图7-19所示。

                                 图7-19 插入div标签

    打开插入div标签对话框，在“插入”下拉列表中选择“在插入点”选项，在ID下拉列表框中输入box，在页面中插入box层，如图7-20所示。

                               图7-20 插入标签对话框参数设置

    切换到divcss.css文件，创建一个名为#box的CSS规则，如下代码所示。返回设计页面中，页面效果如图7-21所示。

#box{

    width:1007px;

    height:605px;

    background-image:url(images/5402.jpg);

    background-repeat:no-repeat;

}

 

   图7-21 插入box层后的效果

 

【步骤5】  将光标移至box层中，将多余的文字内容删除，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在开始标签之后”选项，在标签下拉列表中选择

选项，在ID下拉列表框中输入top-menu，单击确定按钮，在 box层中插入top-menu层。如图7-22所示，

                         图7-22 插入top-menu层

切换到divcss.css文件中，创建一个名为 #top-menu的css规则，代码如下，返回设计页面中，将多余文字删除，页面效果如图7-23所示。

#top-menu{

       line-height:20px;

       margin:10px 0px 0px 30px;

       width:250px;

       float:left;

       text-align: center;

}
 


 

     图7-23 插入top-menu层后的效果

     

 

【步骤6】  光标移至top-menu层中，转换到代码视图中，在该层中插入如下文字代码：

首页|家园|互动|活动

#top-menu span{

       margin-left:5px;

       margin-right:5px;

}
     切换到divcss.css文件中，创建一个名为“#top-menu span”的CSS规则，代码如下，返回设计页面中，效果如图7-24所示。

图7-24  新建“#top-menu span”的CSS规则后的效果

 

【步骤7】  将光标移至页面设计视图中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择

选项，在ID下拉列表框中输入main，单击确定按钮，在top-menu层之后插入main层。如图7-25所示。

图7-25插入main层

 

切换到divcss.css文件中，创建一个名为“#main”的CSS规则，代码如下，返回设计视图中，页面效果如图7-26所示。

 

#main{

       width:428px;

       height:376px;

       float:right;

       margin:190px 50px 0px 0px;

}

图7-26  新建“#main”的CSS规则后的效果

 

【步骤8】  光标移至main层中，将多余文字删除，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在开始标签之后”选项，在标签下拉列表中选择

选项，在ID下拉列表框中输入main-top，单击确定按钮，在main层之后插入main-top层。如图7-27所示。

图7-27  插入main-top层

 

切换到divcss.css文件中，创建一个名为“#main-top”的CSS规则，代码如下，返回设计视图中，页面效果如图7-28所示。

#main-top{

       width:428px;

       height:121px;

       background-image:url(images/5407.gif);

       background-repeat:no-repeat;

       background-position:center;

}

图7-28新建“#main-top”的CSS规则后的效果

 

【步骤9】  光标移至main层中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择

选项，在ID下拉列表框中输入main-main，单击确定按钮，在main层之后插入main-main层。

切换到divcss.css文件中，创建一个名为“#main-main”的CSS规则，代码如下，返回设计视图中，页面效果如图7-29所示。

#main-main{

       width:428px;

       height:25px;

       background-image:url(images/5406.gif);

       background-repeat:no-repeat;

}

图7-29新建“#main-main”的CSS规则后的效果

 

 

【步骤10】  光标移至main层中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择

选项，在ID下拉列表框中输入main-bottomn1，单击确定按钮，在main层之后插入main-bottomn1层。

切换到div.css文件中，创建一个名为“#main-bottomn1”的CSS规则，同时创建一个名为“# main-bottomn1 img” 的CSS规则，代码如下，返回设计视图中，在main-bottomn1层中将多余文字删除，在该层中插入图像5403.jpg，选择该图片，在图像属性面板上，将该图片对齐方式设置为右对齐，在该图像左侧输入相应的文字，页面效果如图7-30所示。

#main-bottomn1{

       width:428px;

       height:72px;

       border-bottom:#fff solid 1px;

       margin-top:10px;

       line-height:20px;

}

#main-bottomn1 img{

       float:right;

       margin:4px 15px 0px 0px;

}

图7-30新建“# main-bottomn1”的CSS规则后的效果

 

 

 

 

 

【步骤11】  根据步骤10的制作方法，完成后面的main-bottomn2和main-bottomn3层的内容，页面效果如图7-31所示。

图7-31新建“# main-bottomn2”和“# main-bottomn3”的CSS规则后的效果

 

#main-bottomn2{

       width:428px;

       height:72px;

       border-bottom:#fff solid 1px;

       line-height:20px;

}

#main-bottomn2 img{

       float:right;

       margin:4px 15px 0px 0px;

}

#main-bottomn3{

       width:428px;

       height:72px;

       border-bottom:#fff solid 1px;

       line-height:20px;

}

#main-bottomn3 img{

       float:right;

       margin:4px 15px 0px 0px;

}
 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

【步骤12】  光标移至页面设计视图中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择

选项，在ID下拉列表框中输入bottom，单击确定按钮，在main层之后插入bottom层。

切换到divcss.css文件中，创建一个名为“#bottom”的CSS规则，同时创建一个名为“#bottom img” 的CSS规则，代码如下所示，返回设计视图中，在bottom层中将多余文字删除，在该层中插入图像logo.jpg，页面效果如图7-32所示。

 

图7-32  插入bottom层

 

#bottom{

       width:1007px;

       height:28px;

       background-image:url(images/5408.jpg);

       background-repeat:repeat-x;

       float:right;

       margin-top:9px;

       color:#000;

}

#bottom img{

       float:left;

       margin:2px 20px 0px 300px;

}
 

 

 

 

 

 

 

 

 

 

 

 


 

至此，页面的制作全部完成，保存该页面，预览该页面，即可得到如图7-17所示效果。

 

你可能感兴趣的:(网页设计,div,css,float,dreamweaver,border,生活)

  • 自动化测试：灵活书写XPATH定位路径 ZJ_star_1220 pythonhtmlcss前端python
    进行UI自动化测试过程中XPATH定位是使用最多的定位方法，但是有时候直接复制出来的XPATH路径会比较长，所以就需要掌握一些更高级的方法，通过询问AI，最终得到了以下方法，感觉很有用，所以记录下来一、基础定位语法绝对路径与相对路径绝对路径：以/开头，从根节点逐层定位（如/html/body/div/input），路径长且易受页面结构调整影响相对路径：以//开头，直接定位目标元素（如//input
  • 电子电气架构 --- 汽车行业技术变革 车载诊断技术 汽车行业架构网络协议数据库汽车gateway
    我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活，除了生存温饱问题之外，没有什么过多的欲望，表面看起来很高冷，内心热情，如果你身边有这样灵性的人，一定要好好珍惜他们眼中有神有光，干净，给人感觉很舒服，有超强的感知能力有形的无形的感知力很强，能感知人的内心变化喜欢独处，好静，
  • 【零基础JavaScript入门 | Day1】从“消费记账“案例学编程基础 ⭐表格制作+数据类型转换全解析 helbyYoung JavaScrip学习javascript学习
    【零基础JavaScript入门|Day1】从"消费记账"案例学编程基础⭐表格制作+数据类型转换全解析今日学习重点：✅数据与现实的映射关系→网页表格如何承载生活数据✅变量容器的本质→用let管理三大消费支出✅隐式类型转换技巧→+prompt()输入处理的妙用✅模板字符串实战→动态生成消费报表案例亮点：1️⃣用户交互三部曲：通过prompt()实现饮食/交通/娱乐费用的分步输入2️⃣自动统计系统：t
  • 鸿蒙开发0基础【stateStyles：多态样式】ui组件 蒸糕笑QAQ harmonyos5.0uiharmonyos华为鸿蒙系统鸿蒙
    @Styles仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。这就是我们本章要介绍的内容stateStyles（又称为：多态样式）。概述stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下五种状态：focused：获焦态。normal：正常态。pressed：按压态。disabled：
  • Flutter桌面开发（三、widget布局与表单） 左钦杨 flutterjavascriptandroid
    一、流式布局横铺或者竖着铺Row或者Column这俩都是有Children的就是可以有多个子元素例子：Row(Children:[Container(),Container(),Container(),]）Container类似于html中的DIV可以设置背景border和宽度高度Container(decoration:BoxDecoration(image:DecorationImage(im
  • 使用Qt创建悬浮窗口 水瓶丫头站住 QtQt
    在Qt中创建悬浮窗口（如无边框、可拖动的浮动面板或提示框）可以通过以下方法实现。以下是几种常见场景的解决方案：方法1：使用无边框窗口+鼠标事件拖动适用于自定义浮动工具窗口（如Photoshop的工具栏）。#include#includeclassFloatingWindow:publicQWidget{public:FloatingWindow(QWidget*parent=nullptr):QW
  • 《Web 应用项目开发》课程心得体会：从理论到实战，开启 Web 开发新征程 m0_74824091 前端
    在信息技术飞速发展的当下，Web应用已然渗透到生活的方方面面，从日常网购、社交娱乐，到在线办公、学习平台，无一不是Web应用的成果。怀着对互联网技术的热忱与憧憬，我踏入了《Web应用项目开发》这门课程，历经数月的沉浸式学习与实践，收获远超预期，犹如经历一场脱胎换骨的蜕变，以下便是我在这门课程中的全面心得体会。夯实基础：Web技术初相识课程伊始，仿若踏入一片未知的技术丛林，HTML、CSS和Java
  • 第13届蓝桥杯青少组C++中级组省赛 星卯教育tony 电子学会C语言考级蓝桥杯C++竞赛c++蓝桥杯算法
    一、选择题（100分）选择题1：（20分）以下对main函描述正确的是（C）。A.main函数必须写在所有函数的前面B.main函数必须写在所有函数的后面C.main函数可以写在任何位置，但不能放到其他函数里D.main函数必须卸载固定位置选择题2：（20分）已知chara；floatb；doublec;执行语句c=a+b+c；后变量c的类型是（C）。A.charB.floatC.doubleD.
  • Web 开发的“三件套” zhangpeng455547940 Web开发reactnativereact.jsjavascript
    HTML：定义内容结构。CSS：控制样式布局。JavaScript：实现动态行为和复杂逻辑。JavaScript应用场景前端开发：操作DOM、处理用户事件、实现动画等。后端开发：通过Node.js构建服务器端应用。跨平台开发：Electron（桌面应用）、ReactNative（移动端）等。
  • JavaScript的学习6——jQuery 十五春会
    文章目录jQuery选择器按ID查找按tag查找按class查找按属性查找组合查找多项选择器练习层级选择器子选择器（ChildSelector）过滤器（Filter）表单相关练习查找和过滤操作DOM修改Text和HTML修改CSS显示和隐藏DOM获取DOM信息操作表单修改DOM结构添加DOM删除节点练习事件鼠标事件键盘事件其他事件事件参数取消绑定事件触发条件浏览器安全限制练习动画show/hide
  • 0基础学Python第八天 RUIOU_ python机器学习0基础开发语言
    1.程序报错：程序在哪一行报错之后，后面的程序都不会被执行。（1）异常类型：IndexError——索引错误，ZeroDivisionError——除零错误FileNotFoundError——找不到文件错误，TypeError——类型错误等2.捕捉异常：格式——try，except语句：try:可能会产生报错的代码except你想捕捉错误的名字（异常类型）：错误发生后你想相应执行的操作excep
  • 深入解析STM32时钟树：从原理到实战配置 Electron-er stm32单片机嵌入式硬件
    目录引言一、STM32时钟树体系架构解析1.1时钟树全景图1.2核心时钟源详解二、时钟信号流向与控制逻辑2.1主时钟路径2.2关键分频系数2.3时钟门控机制三、CubeMX实战配置3.1配置步骤演示3.2代码生成分析四、调试技巧与常见问题4.1时钟诊断方法4.2典型故障排查五、高级应用技巧5.1动态时钟切换5.2时钟安全系统(CSS)5.3超频实践（风险提示）结语引言在嵌入式系统开发中，时钟系统堪
  • React篇之three渲染 这个一个非常哈 react.js前端前端框架
    需求：拖拽右侧面板，里面的three模型能够自适应import{useEffect,useState,useRef}from'react'import'./App.css'import*asTHREEfrom'three';import{GLTFLoader}from'three/addons/loaders/GLTFLoader.js';import{debounce}from'lodash';
  • 实现手机银行应用框架鸿蒙示例代码
    本文原创发布在华为开发者社区。介绍本示例提供了一个手机银行应用的基本框架，包含“首页”、“财富”、“生活”、“我的”四个模块。应用只展示了基本的页面，其中具体功能的实现，开发者可根据需求自行开发。实现手机银行应用框架源码链接效果预览使用说明进入应用，点击下方的tabBar可浏览不同的模块，其中一些功能未开发，只是作为页面布局展示。应用中登录验证，只是UI能力，手机号输入满11位，验证码为12345
  • HTML标记语言＜head＞中 的几个元素 2301_79698214 html前端
    在HTML文档中，部分包含了文档的元数据（metadata），这对于网页的正确显示和搜索引擎优化（SEO）非常重要。部分通常包含以下几个重要的元素：：定义了网页的标题，这个标题会显示在浏览器的标题栏或页面的标签上。例如：我的网页：用于定义网页的元数据，如字符集、页面描述、关键词、作者、视口设置等。例如：：用于链接外部资源，如CSS文件、图标（favicon）等。例如：：用于直接在文档中嵌入CSS样
  • 别让理性毁了爱情 盐论君 创业创新社交电子娱乐传媒
    去过的地方越多，你就越能体会到文明一词的含义。当一个地区把抢婚当作是一种文化传统，并视女方反抗的越强烈婚后生活越幸福时，那么以此为判断标准的理性将会践踏一切人们坚守的底线和美德。这只是人们用理性扭曲婚姻和爱情的一个极端，现实中更常见的是‘相亲市场’，甚至有人将其打造成了一种娱乐节目，这已经完全与爱情无关，只是一种理性数据对人性本能的嘲讽，结果绝不是童话中公主和王子幸福生活在一起，而是将一个人的志气
  • Sass (Scss) 与 Less 的区别与选择 王强你强 sassscssless
    在前端开发中，CSS预处理器如Sass（SyntacticallyAwesomeStylesheets）和Less被广泛使用，它们通过引入变量、嵌套规则、混合、函数等特性，使CSS的开发过程更加高效和灵活。Sass和Less作为两大主流CSS预处理器，各自具有独特的优点和特性。本文将详细探讨Sass（特别是其语法扩展Scss）与Less之间的区别，并提供选择建议。1.语法差异Sass最初是使用缩进
  • vue2安装scss 活宝小娜 vuescss前端css
    vue2安装scss1、下载npminstall-Dsasssass-loader2、新建src/styles/variables.scss文件，并在里面写一些常用的公共样式，在vue.config.js中添加css部分const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDepen
  • QT CSS 选择器 m0_55576290 qtqtcss开发语言
    在Qt的样式表（StyleSheet）中，选择器（Selector）是用来指定样式应用对象的一种语法。它类似于CSS中的选择器，用于明确指定哪些控件（或控件的子元素）应该应用特定的样式。通过使用选择器，你可以更精确地控制样式的作用范围，避免样式被意外继承或应用到错误的控件上。1.选择器的类型在Qt的样式表中，有几种常用的选择器：（1）类型选择器（TypeSelector）类型选择器基于控件的类名来
  • CSS中相对定位使用详情 ~废弃回忆 �༄ HTMLcss前端CSS中相对定位使用详情
    1.如何设置相对定位?给元素设置postition:relative即可实现相对定位.可以使用left,right,top,bottom四个属性调整位置.2.相对定位的参考点在哪里?相对于自己原来的位置3.相对定位的特点:1.不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响.2.定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的.默认规则是:定位的元素
  • CSS中绝对定位 ~废弃回忆 �༄ HTMLcss前端CSS中绝对定位
    1.如何设置绝对定位?给元素设置postition:absolute即可实现绝对定位可以使用left,right,top,bottom四个属性调整位置2.绝对定位的参考点在哪里?参考他的包含块.什么是包含块?1.对于没有脱离文档流的元素:包含块就是父元素;2.对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没有定位,那包含块就是整个页面)3.绝对定位元素的特点:1.脱离文
  • 用css写背景模糊的三种情况 小竹子14 css前端
    1.背景模糊这种最简单也是最直接的，这里展示两种背景模糊的写法：1.用backdrop-filter的一个子属性blur进行设置模糊（这里的值代表的是将n✖n方格里面的像素的颜色做加权平均，即高斯模糊。2.用filter直接进行设置模糊。这里需要注意的是，filter会直接影响元素的内容，而backdrop-filter作用于元素的背景。通常情况下，使用backdrop-filter会使整个元素的
  • 普通人如何利用GPT赚钱之开发虚拟助手 贫苦游商 普通人利用AI搞钱系列gpt人工智能深度学习机器人AIGC
    普通人如何利用GPT赚钱之开发虚拟助手随着人工智能技术的迅猛发展，GPT（GenerativePre-trainedTransformer）作为一种强大的语言模型，正在改变我们的生活和工作方式。普通人如何利用GPT赚钱？开发虚拟助手是一个极具潜力的方向。本文将探讨如何开发虚拟助手，以及如何通过这一技术实现经济收益。什么是虚拟助手虚拟助手是一种基于人工智能的技术，能够理解自然语言并执行特定任务。它们
  • LLM：RMSNorm 微风❤水墨 LLM&AIGC&VLPLLMRMSNorm
    importtorchimporttorch.nnasnnclassLayerNorm(nn.Module):def__init__(self,dim:int,eps:float):super(LayerNorm,self).__init__()self.dim=dimself.eps=epsself.weight=nn.Parameter(torch.ones(self.dim))self.bi
  • 电子电气架构 ---常见车规MCU安全启动方案 车载诊断技术 EV（电动汽车）常规知识必备车载电子与软件框架车载电子电气架构架构单片机安全人工智能AI在整车产品领域的应用
    我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活，除了生存温饱问题之外，没有什么过多的欲望，表面看起来很高冷，内心热情，如果你身边有这样灵性的人，一定要好好珍惜他们眼中有神有光，干净，给人感觉很舒服，有超强的感知能力有形的无形的感知力很强，能感知人的内心变化喜欢独处，好静，
  • HTML 样式之 CSS 全面解析 烂蜻蜓 HTMLhtmlcss前端
    在网页开发的世界里，HTML负责搭建页面的结构，而CSS（CascadingStyleSheets，层叠样式表）则承担着渲染HTML元素标签样式的重任，赋予网页丰富的视觉效果。一、CSS的魅力展现CSS能够实现诸如改变文字的样式与颜色（Look!Stylesandcolors）、灵活操控文本（ManipulateText）、设置元素的颜色和盒子模型（Colors,Boxes）等诸多功能，极大地提升
  • 百度官方！打造「大模型全开发周期系列课程」，AI应用开发入门课率先发布！（内含英雄帖）
    在这个大模型技术日新月异的时代，AI的潜力正被无限释放，改变着我们的工作和生活方式。你是否渴望成为这场变革的参与者？你是否也想在这个大模型时代中抢占先机？那“学习AI”、“使用AI”、“入局AI”我们真的可以受益吗？学习辅助：将AI使用融入学习当中，依据当前学习情况，整理重点难点，让复习有的放矢，更高效掌握知识点。效率提升：帮助处理繁琐重复的工具，如数据分析师使用AI识别数据中的关键信息，自动整理
  • 【大模型学习】第十九章 什么是迁移学习 好多渔鱼好多 AI大模型人工智能大模型AI机器学习迁移学习
    目录1.迁移学习的起源背景1.1传统机器学习的问题1.2迁移学习的提出背景2.什么是迁移学习2.1迁移学习的定义2.2生活实例解释3.技术要点与原理3.1迁移学习方法分类3.1.1基于特征的迁移学习（Feature-basedTransfer）案例说明代码示例3.1.2基于模型的迁移（Model-basedTransfer）案例说明BERT用于情感分析的例子3.1.3基于实例的迁移（Instanc
  • ASP.NET CORE MVC EF框架 sanzk ASP.NETCOREEF
    1.一个视图中的多个表单Form中的变量。方式一：视图中跨Form变量不能用，得各自定义变量否则编译不能通过。变量名还不能相同。或者方式二：在Form之外定义变量@{ViewData["Title"]="ExpenseForm";}@{Layout=null;}ExpenseFormdiv,table,tr,td{margin:0px;padding:0px;}.myTable{width:60
  • PC版微信占满硬盘？这款清理神器一键搞定！ zyw05120113 个人开发智能手机djangoocrpdf
    嘿，朋友们！微信现在几乎是咱们生活中离不开的聊天工具了，不管是手机还是电脑，基本都得装上它。但是，用的时间长了，PC版微信就会占用越来越多的硬盘空间。要是不清理，不仅电脑会变慢，隐私也可能不安全。今天，我就给大家分享一款我超喜欢的微信清理小工具——CleanWeChatX。CleanWeChatX这款工具是吾爱大神开发的，特别专业。它不用安装，下载后直接双击就能用。别看它只有4.05MB，功能可一
  • 统一思想认识 永夜-极光 思想
    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