-
web设置div的颜色_Web标准
2020-11-28 15:32:23使用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)三个方面。
结构标准:结构用于对网页元素进行整理和分类。
结构化标准语言主要包括:HTML、XML、XHTML。
表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式。
表现标准语言主要包括:CSS。
行为标准:行为是指网页模型的定义及交互的编写。
行为标准主要包括文档对象模型(W3C DOM)和ECMAScript等。
在符合标准的网页设计中,CSS 与 HTML、JavaScript 并列称为网页前端设计的 三种基本语言,其中:
HTML 负责构建网页的基本结构;
CSS 负责设计网页的表现效果;
JavaScript 负责开发网页的交互效果。
直观感受:人的骨骼就相当于结构,衣服鞋子就相当于表现,行走奔跑跳跃就是行为。
图片来源:网络(侵删)
-
Web页面div盒子拖动的实现
2017-12-19 11:40:41该拖拽支持IE浏览器、火狐浏览器以及谷歌浏览器,实现方法较为稳定,可以设置父盒子的高度、以及宽度,超出后可出现滚动条,能够有效的集成到项目中 -
web前端div背景
2020-07-22 18:51:071.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建立的符合web标准网页的好处
2020-12-09 20:12:34使用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_bar" style="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_bar" style="text-align:right"> -
web|CSS div的排版
2019-03-20 23:59:00欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述大家在制作网页过程中经常会遇到需要这种样式的di...欢迎点击「算法与编程之美」↑关注我们!
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。
问题描述
大家在制作网页过程中经常会遇到需要这种样式的div:
或者更多例如:
诸如这些一系列问题,我们该如何解决呢?
第一种情况,大家可能会想到利用浮动,2个div设置float属性,再调整黑色div的margin来达到效果,此时CSS代码如下:
但3个div或者3个以上呢?设置浮动属性便行不通,浮动只能够对2个起作用。所以3个以上时我们可以采用绝对定位或相对定位来实现及position属性来实现。
它们的值分别为:absolute与relative。
解决方案
我们首先将3个div放入一个父级div中,注意:一定要对父级元素设置position属性。然后对其他3个div设置绝对定位:position:absolute;调整3个div位置,便可得到问题中的排版。代码如下:
(div4为父级div)
结语
本文介绍了position的2个非常重要的属性值,绝对定位与相对定位,但position还有3个属性值,相对定位此文章并未详细介绍,需要了解的可以继续查看其它博客。
更多精彩文章:
where2go 团队
微信号:算法与编程之美
长按识别二维码关注我们!
温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!
-
Web DIV+CSS 小例子
2011-10-08 11:50:00Web DIV+CSS 小例子 简单的用DIV和CSS 来构架前台的大框架 -
关于div+css及Web标准网页的好处
2020-09-22 15:25:03所谓“div+css”是网站标准(或称“Web标准”)中常用的术语之一,通常为了说明与html网页设计语言中的表格(table)定位方式的区别,因为xhtml网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现... -
web 中 div层 隐藏dropdownlist
2010-04-09 17:31:00在要浮出的DIV层中,添加一个IFRAME: ...DIV层中要显示的内容。 -
【web前端】23.解决内部div的margin影响外部div的margin
2020-04-08 13:17:45有一个内部的div里面包含div. .html <div id="container"> <div id="inner"></div> </div> .css #container { width: 100px; height: 100px; background-color: red; } #inner { ... -
移动端jQuery修正Web页面滑动时div问题的两则实例
2020-10-22 05:37:20主要介绍了移动端jQuery修正Web页面滑动时div问题的两则实例,分别针对顶部固定fixed不为0时滑动出现的闪动以及touchmove的受阻止的相关问题,需要的朋友可以参考下 -
css div中文字位置_Web前端工作中常见的div+css错误
2020-12-28 11:27:14今天小编就为大家准备了这篇文章大家一起来看一看在web前端工作中如何检查和处理常见的div+css错误。1. 检查HTML元素是否拼写错误、是否忘记结束标记即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证... -
web前端之HTML中的div
2015-10-25 17:32:00div> 元素 HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。 如果与 CSS 一同使用,<... -
web开发 DIV+CSS规范命名集合
2015-03-23 21:27:25我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法。 命名规则说明: 1)、所有的命名最好都小写 2)、属性的值一定要用双引号... -
web DIV中嵌套左右DIV的高度相等
2007-09-27 16:07:00<div> <div id="left"></div> <div id="right"></div> </div> type="text/javascript"> //关键代码 <!-- var a=document.getElementById("left"); var b=document.getElementById(... -
对话闲聊DIV CSS与WEB标准
2020-09-27 20:31:49“Web标准”这个词听说好久了,但是到底什么是Web标准呢?我们该如何实现Web标准呢?...不知上面这些问题大家以前是怎么认为的,至少我以前很傻乎乎的认为“Div CSS布局就是符合Web标准”。下面是布 -
移动端jQuery修正Web页面滑动时div问题的两则实例.pdf
2020-09-23 03:31:01这篇文章主要介绍了移动端 jQuery 修正 Web 页面滑动时 div 问题的两则实例 ,分别针对 顶部固定 fixed 不为 0 时滑动出现的闪动以及 touchmove 的受阻止的相关问题 ,需要的朋友可 以参考下 顶部固定时划屏出现闪动 ... -
web 解决在父级div填充子div,父div高度自适应问题
2017-02-13 09:48:22在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层遮盖新思路解决方案
2011-10-12 17:38:54web前端div层被flash层遮盖新思路解决方案: 百度,google大批量千篇一律的“div层被flash层”...经指点:一个flash动画div,一个透明图片div,把图片div重叠到flash的div之上,这样效果就实现。 注意几个方面... -
web实验1 div+css
2020-08-20 19:39:36web实验1 div+css 多个页面互相跳转 可看图片 播放音乐 等等 主页 我的动漫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=... -
div+css布局及Web标准对网站优化和SEO方面的益处
2020-09-25 11:16:43现在采用CSS+DIV建网站的朋友越来越多,我们今天就谈谈divcss布局及Web标准对网站优化和SEO方面的益处 -
WEB前端 -- 清除div之间的距离
2017-12-16 18:14:35div1与div2之间会有距离,以下方法可以消除2个div之间的距离 1.把img标签转为块元素 2.为父元素设置高度 3.父容器的字号设置为font-size:0px;(里面的其他字号需要另外设置) -
十天学会web标准DIV CSS第二天 一列布局
2013-04-04 21:47:23今天我们开始学习《十天学会web标准(div css)》的一列布局,包含以下几种形式: 一列固定宽度 一列固定宽度居中 一列自适应宽度 一列自适应宽度居中 一列二至多块布局 前一节我们回顾了xhtml基础和css基础部分... -
web前端——div和span标签
2018-03-08 09:31:36div和span标签都是用来帮助页面进行排版的,它们两个没有自己的语意。div:块级元素,所谓的块级元素,就是可以通过css设置宽高等一些大小的样式,这样的元素标签称为块级元素。块级元素的特点是自己占一整行。如果... -
web前端 如何使div中的img图片居中 HTML和CSS的操作
2020-04-10 00:56:17一些工作中的小问题的记录。 HTML端代码:插入一张图片 <div class="xiaoxun"> <img src="http://www.xxxxx.cn/xxx/ixxx/xxx/xun.gif" width="1000" height="52" > </div> CSS端代码:控制居中 ... -
<<web>>div嵌套就是矩形的递归
2016-05-13 21:06:35我们实现分列可以用div嵌套 这个过程,我发现了很多以前都很迷糊的一个细节,css真的可以模拟我们人的任何操作,就像自己在桌上面摆动这些照片,我给2类照片非类,一个左,一个右,相邻的都是左右相对,如果我想...
-
MySQL 事务和锁
-
西门子PLC例程777个.zip
-
华为1+X——网络系统建设与运维(高级)
-
PerfMa技术沙龙第一站——北京,我们来啦!
-
kernel-devel-3.10.0-1127.el7.x86_64.rpm
-
27手术台就是阵地 教案.docx
-
PPT大神之路高清教程
-
UR5eRobot:关于使用UR5e机器人进行强化学习的项目-源码
-
零基础极简以太坊智能合约开发环境搭建并开发部署
-
MySQL 高可用工具 DRBD 实战部署详解
-
Centos-6-Vault-Aliyun.repo
-
vue2.0+node.js+MongoDB全栈打造商城系统【问题记录】
-
反馈表-源码
-
Mac 安装php扩展redis
-
朱老师鸿蒙系列课程第1期-2鸿蒙系统Harmonyos源码架构分析
-
vue3从0到1-超详细
-
基于SSM实现的房屋租赁系统【附源码】(毕设)
-
protobuf.zip,protobuf代码生成工具
-
宝塔linux面板 phpmyadmin 网站访问报502 bad gateway常见解决方法
-
实现 MySQL 读写分离的利器 mysql-proxy