精华内容
下载资源
问答
  • 使用Web标准主要有以下几个好处:1、让Web的发展前景更广阔2、内容能被更广泛的设备访问3、更容易被搜寻引擎搜索4、降低网站流量费用5、使网站更易于维护6、提高页面浏览速度等。Web标准是什么?Web标准不是某一个...

    为什么使用 Web 标准?

    由于不同浏览器解析出来的效果可能不一致,开发者常常需要为多版本的开发而艰苦工作------通过web标准-----就可以展现统一内容,大大提高了开发效率。使用Web标准主要有以下几个好处:

    1、让Web的发展前景更广阔

    2、内容能被更广泛的设备访问

    3、更容易被搜寻引擎搜索

    4、降低网站流量费用

    5、使网站更易于维护

    6、提高页面浏览速度等。

    Web标准是什么?

    Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。

    狭义的 Web 标准是指网页设计的 DIV+CSS 化,广义的 Web 标准是指网页设计要符合 W3C 和 ECMA 规范。

    Web标准的构成

    主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

    104186b7ce66470c2482e04311c9be5f.png

    结构标准:结构用于对网页元素进行整理和分类。

    结构化标准语言主要包括:HTML、XML、XHTML。

    表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式。

    表现标准语言主要包括:CSS。

    行为标准:行为是指网页模型的定义及交互的编写。

    行为标准主要包括文档对象模型(W3C DOM)和ECMAScript等。

    在符合标准的网页设计中,CSS 与 HTML、JavaScript 并列称为网页前端设计的 三种基本语言,其中:

    HTML 负责构建网页的基本结构;

    CSS 负责设计网页的表现效果;

    JavaScript 负责开发网页的交互效果。

    直观感受:人的骨骼就相当于结构,衣服鞋子就相当于表现,行走奔跑跳跃就是行为。

    图片来源:网络(侵删)

    展开全文
  • 该拖拽支持IE浏览器、火狐浏览器以及谷歌浏览器,实现方法较为稳定,可以设置父盒子高度、以及宽度,超出后可出现滚动条,能够有效集成到项目中
  • web前端div背景

    2020-07-22 18:51:07
    1.div+css布局 <div>特征 ① 可以定义文档中分区或节(division/section) ②可以把文档分割为独立、不同部分,可以用作严格组织工具 ③是一个块级元素,它内容会自动开始一个新行 ④一般通过...

    1.div+css布局

    <div>特征

    ① 可以定义文档中的分区或节(division/section)

    ② 可以把文档分割为独立的、不同的部分,可以用作严格的组织工具

    ③ 是一个块级元素,它的内容会自动开始一个新行

    ④ 一般通过 id 或 class 标记与CSS配合使用

    常用到的CSS属性:

    width:数值、height:数值、background-color:颜色、float-left(是div不占据一行)

    2.background-color背景颜色

    默认值是transparent(透明的)

    当同时定义了背景图像和背景颜色时,背景图像将覆盖背景颜色之上

    颜色取值方式:

    ① 关键字,如red、blue等

    ② 16进制,如#000000、#cccccc、#ff0000等

    ③ rgb(0,0,0)

    ④ rgba(0,0,0, .n),n为0~1,透明度

    3.background-image背景图片

    默认值是none(没有图片)

    元素背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距

    通过url使用绝对或相对路径指定图片,background-image:url("");

    4.background-repeat背景图片是否重复

    常用属性:

    repeat,默认值,background-image默认水平方向和垂直方向平铺显示

    repeat-x,背景图片将在水平方向重复

    repeat-y,背景图片将在垂直方向重复

    no-repeat,背景图片将仅显示一次

    语法示例

    body{
            background-image: url("");
            background-repeat: no-repeat;
            }

    5.background-size背景图片尺寸

    length,设置背景图片的宽度和高度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为“auto”

    percentage,以父元素的百分比来设置图片的宽度和高度,后文同上

    cover,把背景图片扩展至足够大,以是背景图片完全覆盖背景区域,背景图片某些部分也许无法完全显示在背景区域中

    contain, 把图片扩展至最大尺寸,以使其宽度和高度完全适应内容区域,背景区域某些部分可能无法完全覆盖

    6.background-position背景图片位置

    position是相对于外部容器而言,非整个页面

    属性值书写方式:

    ① 使用方位关键词定义,第一个值定义水平方向(left、center、right),第二个值定义垂直方向(top、center、bottom)

    ② 使用百分比定义,第一个值定义水平方向,第二个值定义垂直方向,左上角是“0% 0%”,右下角是“100% 100%”

    ③ 使用具体数字定义,第一个值定义水平方向,第二个值定义垂直方向,左上角是“0px 0px”

    属性特点:

    ① position的默认值为区域的左上角,即0点坐标

    ② 以上三种方式,如果仅定义了一个值,则另一个值为居中(center或50%)

    ③ 以上三种方式可以混合搭配使用

    7.background-attachment背景图片是否随内容滚动

    属性值:

    ① scroll,默认值,随页面其余部分的滚动而移动

    ② fixed,页面滚动时,背景图片不动

    body{
         background-image: url("");
         background-attachment: scroll;
         }

    8.background简写

    background 简写属性可以在一个声明中设置所有的背景属性。

    可以设置属性如下:

    background-color

    background-image

    background-repeat

    background-attachment

    background-position

    background-size

    如果不设置其中某个值,也不会出问题,自动取默认值,在书写属性值时,没有严格顺序要求,建议按照上文列表顺序依次设置。希望这些干货对你有帮助,加油吧,任何时候开始学习都不晚。

    展开全文
  • web DIV 教程

    2013-04-01 22:14:30
    详细讲解div+css布局方法,该教程教你怎样把html结构化,介绍div的属性;等。
  • 使用DIV CSS建立符合W3C标准网站对程序员是有非常多益处,我们看如下八条优势。  一、使用div的方式进行程序嵌套,特别是使用php这样代码嵌套,可以减少出现像table中那样繁重代码,对于页面嵌套可以...
  • web页面div浮于图片上问题

    千次阅读 2015-06-27 08:50:28
    我们公司www.yz368.cn主页div布局覆盖了图片一部分,一开始看没问题,然而那个图片是做了一个页面跳转。 思路【1】将中间图片设置相对位置,紧靠着左面图片,重叠左面图片不会有影响 x 【2】修改左面图片属性...

    我们公司www.yz368.cn的主页div布局覆盖了图片的一部分,一开始看没问题,然而那个图片是做了一个页面跳转。

    思路【1】将中间图片设置相对位置,紧靠着左面图片,重叠左面图片不会有影响   x

    【2】修改左面图片的属性改成去掉设置没有浮于的属性,改绝对位置 x

    【3】终极解决方案将

    <div class="nav_barstyle="text-align:right">

    利用浏览器自带的搜索工具进行搜索元素大小然后修改css里面的

    之前宽度是840px

    .nav {
    position: relative;
    width: 740px;
    margin: 0 auto;
    font-family: "Microsoft YaHei", SimSun, SimHei;
    font-size: 16px;
    }






    <div class="nav_barstyle="text-align:right">
    展开全文
  • web|CSS div的排版

    2019-03-20 23:59:00
    欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述大家在制作网页过程中经常会遇到需要这种样式di...
        

    欢迎点击「算法与编程之美」↑关注我们!

    本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

    问题描述

    大家在制作网页过程中经常会遇到需要这种样式的div

    640?wx_fmt=png

    或者更多例如:

    640?wx_fmt=png

    诸如这些一系列问题,我们该如何解决呢?

    第一种情况,大家可能会想到利用浮动,2个div设置float属性,再调整黑色div的margin来达到效果,此时CSS代码如下:

    640?wx_fmt=png

     但3个div或者3个以上呢?设置浮动属性便行不通,浮动只能够对2个起作用。所以3个以上时我们可以采用绝对定位或相对定位来实现及position属性来实现。

    它们的值分别为:absolute与relative。

    解决方案

    我们首先将3个div放入一个父级div中,注意:一定要对父级元素设置position属性。然后对其他3个div设置绝对定位:position:absolute;调整3个div位置,便可得到问题中的排版。代码如下:

    640?wx_fmt=png

    (div4为父级div

    结语

    本文介绍了position的2个非常重要的属性值,绝对定位与相对定位,但position还有3个属性值,相对定位此文章并未详细介绍,需要了解的可以继续查看其它博客。

    更多精彩文章:

     where2go 团队


       

    微信号:算法与编程之美          

    640?wx_fmt=jpeg

    长按识别二维码关注我们!

    温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

    展开全文
  • Web DIV+CSS 小例子

    2011-10-08 11:50:00
    Web DIV+CSS 小例子 简单DIV和CSS 来构架前台大框架
  • 所谓“div+css”是网站标准(或称“Web标准”)中常用术语之一,通常为了说明与html网页设计语言中表格(table)定位方式区别,因为xhtml网站设计标准中,不再使用表格定位技术,而是采用div+css方式实现...
  • 在要浮出的DIV层中,添加一个IFRAME: ...DIV层中要显示的内容。  
  • 有一个内部的div里面包含div. .html <div id="container"> <div id="inner"></div> </div> .css #container { width: 100px; height: 100px; background-color: red; } #inner { ...
  • 主要介绍了移动端jQuery修正Web页面滑动时div问题两则实例,分别针对顶部固定fixed不为0时滑动出现闪动以及touchmove受阻止相关问题,需要朋友可以参考下
  • 今天小编就为大家准备了这篇文章大家一起来看一看在web前端工作中如何检查和处理常见的div+css错误。1. 检查HTML元素是否拼写错误、是否忘记结束标记即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证...
  • web前端之HTML中的div

    2015-10-25 17:32:00
    div> 元素 HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素容器。 <div> 元素没有特定含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。 如果与 CSS 一同使用,<...
  • 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好方法。  命名规则说明:  1)、所有命名最好都小写  2)、属性值一定要用双引号...
  • <div> <div id="left"></div> <div id="right"></div> </div>  type="text/javascript">  //关键代码   <!--   var a=document.getElementById("left");   var b=document.getElementById(...
  • Web标准”这个词听说好久了,但是到底什么是Web标准呢?我们该如何实现Web标准呢?...不知上面这些问题大家以前是怎么认为,至少我以前很傻乎乎认为“Div CSS布局就是符合Web标准”。下面是布
  • 这篇文章主要介绍了移动端 jQuery 修正 Web 页面滑动时 div 问题两则实例 ,分别针对 顶部固定 fixed 不为 0 时滑动出现闪动以及 touchmove 受阻止相关问题 ,需要朋友可 以参考下 顶部固定时划屏出现闪动 ...
  • 在div中我们有时候,不可避免的回想起中添加许多子div,并且他们都是流动模式的。这样子父级里面的div,高度总是0。 要想让其自适应高度,得在父div添加。 overflow: hidden
  • web2.0中div常用配色

    2011-06-16 12:21:00
    #color div{color:#999999; font-size:12px;width: 400px;height: 80px;margin: 0px auto;margin-bottom:10px;} .style1{ border:1px solid #96C2F1; background-color: #EFF7FF
  • web前端div层被flash层遮盖新思路解决方案: 百度,google大批量千篇一律的“div层被flash层”...经指点:一个flash动画div,一个透明图片div,把图片div重叠到flash的div之上,这样效果就实现。 注意几个方面...
  • web实验1 div+css

    2020-08-20 19:39:36
    web实验1 div+css 多个页面互相跳转 可看图片 播放音乐 等等 主页 我动漫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • 现在采用CSS+DIV建网站朋友越来越多,我们今天就谈谈divcss布局及Web标准对网站优化和SEO方面益处
  • WEB前端 -- 清除div之间距离

    千次阅读 2017-12-16 18:14:35
    div1与div2之间会有距离,以下方法可以消除2个div之间距离 1.把img标签转为块元素 2.为父元素设置高度 3.父容器字号设置为font-size:0px;(里面其他字号需要另外设置)
  • 今天我们开始学习《十天学会web标准(div css)》一列布局,包含以下几种形式: 一列固定宽度 一列固定宽度居中 一列自适应宽度 一列自适应宽度居中 一列二至多块布局 前一节我们回顾了xhtml基础和css基础部分...
  • web前端——div和span标签

    千次阅读 2018-03-08 09:31:36
    div和span标签都是用来帮助页面进行排版,它们两个没有自己语意。div:块级元素,所谓块级元素,就是可以通过css设置宽高等一些大小样式,这样元素标签称为块级元素。块级元素特点是自己占一整行。如果...
  • 一些工作中小问题记录。 HTML端代码:插入一张图片 <div class="xiaoxun"> <img src="http://www.xxxxx.cn/xxx/ixxx/xxx/xun.gif" width="1000" height="52" > </div> CSS端代码:控制居中 ...
  • 我们实现分列可以用div嵌套 这个过程,我发现了很多以前都很迷糊一个细节,css真可以模拟我们人任何操作,就像自己在桌上面摆动这些照片,我给2类照片非类,一个左,一个右,相邻都是左右相对,如果我想...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,998
精华内容 7,199
关键字:

web的div