border

CSS3-背景原点、背景裁剪

由 泄露秘密 提交于 2020-01-26 19:04:44
background-origin 用于设置背景图像相对于什么位置来定位（背景图的起点）。 语法： background-origin : padding-box|border-box|content-box ; 属性值 作用 border-box 背景相对于元素边框来定位； 从 border 区域（含border）开始显示背景图像 padding-box 背景相对于内边距来定位（默认）；从 padding 区域（含padding）开始显示背景图像 content-box 背景相对于内容来定位；从 content 区域开始显示背景图像 相对于边框： CSS: div { width : 200px ; height : 200px ; padding : 20px ; margin : 10px ; background-color : skyblue ; border : 10px dashed gray ; background-image : url(images/bg.jpg) ; background-repeat : no-repeat ; /* 相对于边框定位 */ background-origin : border-box ; } HTML: < div > </ div > 相对于内边距： /* 相对于内边距定位 */ background-origin :

js左右无缝滚动

由 痞子三分冷 提交于 2020-01-26 17:22:43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script> function getObject(objectId) { if(document.getElementById && document.getElementById(objectId)) { // W3C DOM return document.getElementById(objectId); } else if (document.all && document.all(objectId)) { // MSIE 4 DOM return document.all(objectId); } else if (document.layers && document.layers[objectId]) { // NN 4 DOM..

web基础2

由 不想你离开。 提交于 2020-01-26 14:31:23
02-display属性–元素互相转换 代码 < !DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title < / title > < style > / * < ! - - 通常会去掉标签自带的内外边距， * 表示所有标签 - - > * / * { margin : 0 ; padding : 0 } . box01 { width : 100px ; height : 100px ; border : 1px solid red ; / * 1 . 把div转为行内块 * / display : inline - block ; / * 转为行内元素 * / / * display : inline ; * / font - size : 16px ; } / * 2 . 把span转为行内块 * / span { / * 转为行内块 * / display : inline - block ; / * 转为块元素 * / / * display : block ; * / / * 隐藏 * / / * display : none ; * / width : 100px ; height : 100px ; border : 1px solid red ;

CSS中设置元素的圆角矩形

由 怎甘沉沦 提交于 2020-01-26 13:31:16
CSS中设置元素的圆角矩形 圆角矩形介绍 在 CSS 中通过 border-radius 属性可以实现元素的圆角矩形。 border-radius 属性值一共有 4 个，左上、右上、左下、右下。 border-radius 属性值规则如下：第一个值为左上、第二个值为右上、第三个值为左下、第四个值为右下。 假如 border-radius 属性值都是一致的我可以设置一个属性值即可。 圆角矩形实践 圆角矩形基本使用方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圆角矩形</title> <style> div{ width: 100px; height: 100px; border: 2px solid rebeccapurple; border-radius: 10px 20px 30px 40px; } </style> </head> <body> <div></div> </body> </html> 如果我们的 border

CSS总结

由 醉酒当歌 提交于 2020-01-26 08:19:55
CSS的简介： 1、CSS的定义：层叠样式表。属性和属性值用冒号分隔开，以分号结尾(这些符号都是英文的)。 2、CSS得引入方式： 行内引入：<div style="这里写样式">我是一个块级的标签</div> 嵌入式：将CSS样式表放到head中用<style>标签包裹起来 <head> ... <style type="text/css"> ...此处写CSS样式 </style> </head> 导入式： 将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。 导入式会在整个网页装载完后再装载CSS文件。 <head> ... <style type="text/css"> @import "My.css"; 此处注意.css文件的路径 </style> </head> 链接式引入：将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。 链接式会以网页文件主体装载前装载CSS文件。 <head> ... <link href="My.css" rel="stylesheet" type="text/css"> </head> 3、样式的应用顺序： 行内样式优先级最高 针对相同的样式属性，不同的样式属性将以合并的方式呈现 相同样式并且相同属性，呈现方式在

CSS边框

由 早过忘川 提交于 2020-01-26 02:08:20
/* div{ width: 600px; height: 600px; background-color: darkseagreen; /* 边框大小 ：默认1px*/ /* border-width: 10px; */ /* 边框颜色 : 默认黑色*/ /* border-color: darkviolet; */ /* 边框样式 ：不写边框样式，不生效*/ /* border-style: solid; */ /* 复合写法 */ /* border:边框宽度 边框样式 边框颜色 */ /* border: */ /* 10px solid black; */ /* } */ /* div{ width: 600px; height:600px; /* background-color: darkseagreen; */ /* border-top: 300px solid black; border-left:300px solid transparent; border-right: 300px solid transparent; border-bottom: 300px solid transparent; */ /* } */ div{ width: 100px; height: 100px; background-color: blanchedalmond;

DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码

由 余生颓废 提交于 2020-01-25 17:49:09
（含上下左右滚动代码） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> <!-- UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-POSITION: outside; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; overflow: hidden; } #S_LIST LI { width:154px; height:auto; float:left; padding: 0px; margin: 0px; list-style-image: none; list-style-type: none; } #S_LIST A { DISPLAY: block; MARGIN: 0px; WIDTH: 154px; HEIGHT: auto; TEXT

css中 background设置

由 核能气质少年 提交于 2020-01-25 16:07:02
css2 中有五个与背景相关的属性。它们是： background-color:完全填充背景的颜色 background-image:用作背景的图片 background-position:确定背景图片的位置 background-repeat:确定背景图片是否重复铺平 background-attachment:确定背景图片是否随页面滚动 这些属性能够写在一个简单的属性中： background 。必须指出background负责元素内容部分的背景，包括padding和border，但不包括margin。在Firefox,Safari 和 Opera, 以及 IE8中是这样处理的。不过在IE7和万恶的IE6中就没包括border，区别就像下面的图片示例显示的那样 。 在 IE7 和IE6中 Background 没有包括border 基本属性 Background color属性 background-color用来描述设置填充背景的颜色。有多种方法来定义确定填充的颜色，下列方法都是等效的： background-color: rgb(0, 0,255); background-color:#0000ff; background-color 也能设置成transparent，这样就能让其下的元素显示出来。 Backgroundimage属性 background-image

CSS

由 北慕城南 提交于 2020-01-25 15:18:01
一 什么是CSS 1.1 什么是CSS 层叠样式表(Cascading Style Sheets)：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言； CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化； CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力（字体、边框、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…） 1.2 如何学习CSS CSS是什么 CSS怎么用（快速入门） CSS 选择器 （重点 + 难点） 美化网页 （文字，阴影，超链接，列表，渐变….） 盒子模型 网页基础~ 浮动 应用~ 定位 网页动画（特效效果） 1.3 发展史 1.CSS1.0 2.CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO 3. CSS2.1 浮动，定位 4. CSS3.0 圆角，阴影，动画…. 浏览器兼容性~ 1.4 快速入门：三种导入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种导入方式</title> <!--内部样式--> <style> h1 { color :

Css3 box-sizing属性

由 血红的双手。 提交于 2020-01-25 11:47:17
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 content-box，border和padding不计算入width之内 chrome和firefox默认这种模式 padding-box，padding计算入width内 border-box，border和padding计算入width之内，其实就是怪异模式了~ ie默认这种模式 ie8+浏览器支持content-box和border-box； ff则支持全部三个值。 使用时： -webkit-box-sizing: 100px; // for ios-safari, android -moz-box-sizing:100px; //for ff box-sizing:100px; //for other <style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; } .padding-box{ box-sizing:padding-box; -moz
订阅 border