![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
文章平均质量分 66
boonyaxnn
好好学习,天天向上
展开
-
CSS之DIV布局样式class
无标题文档 .header{ color:blue; width:100%; height:200px; background-color:green; border-color:red 5px solid; } .left{ color:white;原创 2016-09-08 16:21:19 · 622 阅读 · 0 评论 -
CSS Border(边框)
CSS边框属性允许你指定一个元素边框的样式和颜色,border-style属性用来定义边框的样式.1、border-width边框宽度有两种方法: 可以指定长度值,比如 2px 或 0.1em; 或者使用 3 个关键字之一,它们分别是 thin 、m原创 2017-03-22 18:41:16 · 398 阅读 · 0 评论 -
CSS 盒子模型(Box Model)和轮廓(outline)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):不同部分的说明:Margin(外边距) - 清除边框区域。Margin没有背景原创 2017-03-22 18:29:50 · 2061 阅读 · 0 评论 -
CSS Positioning(定位)
使用Positioning属性设置左右对齐:.div{ position:absolute; right:0px; width:300px; background-color:#b0e0e6;}float属性是对齐元素的方法之一:.div{ position:absolute; right:0px; wid原创 2017-03-22 18:53:50 · 317 阅读 · 0 评论 -
CSS 图像透明/不透明
CSS3中属性的透明度是 opacity. img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}html与css代码 CSS 图像透明/不透明 img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8原创 2017-03-22 19:25:45 · 380 阅读 · 0 评论 -
CSS3用户界面
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。1、resize调整尺寸div{resize:both;overflow:auto;} 2、box-sizing方向大小调整div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */width:50%;flo原创 2017-03-22 23:03:46 · 294 阅读 · 0 评论 -
CSS3 box-sizing 属性
CSS3 box-sizing属性指定两个boxes接壤。 box-sizing * { box-sizing: border-box; } .header{ border: 1px solid #5D086A; padding: 15px; }原创 2017-03-22 23:31:34 · 313 阅读 · 0 评论 -
CSS响应式 Web 设计(一) - Viewport
viewport 是用户网页的可视区域,viewport 翻译为中文可以叫做"视区"。一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:1、width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。2、height:和 width原创 2017-03-22 17:47:56 · 532 阅读 · 0 评论 -
CSS响应式 Web 设计(二) - 网格视图
1、创建一个响应式网格视图,首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。并确保边距和边框包含在元素的宽度和高度间。其代码为* { box-sizing: border-box;} box-sizing * { box-sizing: border-box;原创 2017-03-23 00:12:01 · 482 阅读 · 0 评论 -
CSS3响应式 Web 设计(三)@media 查询
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。css语法@media mediatype and|not|only (media feature) { CSS-Code;}原创 2017-03-23 00:39:08 · 798 阅读 · 0 评论 -
CSS复习总结
1.css介绍层叠样式表 、级联样式表 、简称 样式表文件后缀 .css2.作用:1)实现了内容与表现的分离2)提高了代码的可重用性和可维护性3.css语法属性:属性值;4.css特点1)继承性具有继承性的属性:color、font-*、text-*、line-height、list-style-*等不具有继承性的属性:background-*、mar...原创 2019-03-30 21:54:52 · 331 阅读 · 0 评论 -
CSS 列表样式(ul)
1、CSS列表属性作用如下:设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像2、在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)有序列表 - 列表项的标记有数字或字母 css ul.a { list-style-type: circle;原创 2017-03-22 18:20:42 · 2610 阅读 · 0 评论 -
CSS Fonts(字体)
CSS字体属性定义字体,加粗,大小,文字样式。1、在CSS中,有两种类型的字体系列名称:通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace")特定字体系列 - 一个特定的字体系列(如 "Times" 或 "Courier")2、font-family 属性设置文本的字体:font-family 属性应该设置几个原创 2017-03-22 18:09:13 · 351 阅读 · 0 评论 -
css样式大全
css样式大全字体属性:(font)1、大小 {font-size: x-large;}(特大) xx-small;(极小) ,单位:PX、PD2、样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)3、高 {line-height: normal;}(正常) 单位:PX、PD、EM4、宽 {font-weight原创 2017-03-02 20:01:23 · 347 阅读 · 0 评论 -
css实现圆形头像
效果图如下:原创 2017-03-02 22:59:02 · 11634 阅读 · 0 评论 -
CSS3 圆角和阴影效果
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> index div{ color: #0A0F5A; si原创 2017-03-11 23:25:02 · 895 阅读 · 0 评论 -
CSS3 transform:rotate(deg) 2D旋转效果
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> index body{ background:url(img/a.jpg);原创 2017-03-12 00:34:23 · 3107 阅读 · 0 评论 -
CSS3 3D转换
CSS3 3d转换的属性与方法W3CSchool标准CSS使用语法*transform:rotatex(deg)-针对不同浏览器兼容div{transform: rotateX(120deg);-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */-moz-transform: rotateX(120deg); /原创 2017-03-12 14:24:57 · 380 阅读 · 0 评论 -
CSS3 2D旋转
W3CSchool标准CSS使用语法*transform:skew(deg,deg)-针对不同浏览器兼容div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-原创 2017-03-12 12:02:22 · 848 阅读 · 0 评论 -
CSS3 过渡
CSS3 过渡属性W3CSchool标准CSS使用语法*transition 属性针对不同浏览器兼容div{transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: widt原创 2017-03-12 15:43:09 · 357 阅读 · 0 评论 -
CSS3 @keyframes动画规则
W3CSchool标准CSS使用语法 *@keyframes 针对不同浏览器兼容@keyframes mymove{from {top:0px;}to {top:200px;}}@-moz-keyframes mymove /* Firefox */{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /*原创 2017-03-12 16:10:25 · 4021 阅读 · 0 评论 -
CSS3div用户可自动调节大小
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> index div { border: 3px solid #CED1CE;原创 2017-03-12 17:48:32 · 808 阅读 · 0 评论 -
CSS 导航菜单
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a:link, a:visited { display: block; width: 180px; height:30px;原创 2017-03-12 18:17:36 · 371 阅读 · 0 评论 -
CSS 自定义鼠标显示的形状
语法:cursor : auto | all-scroll | col-resize | crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )取...原创 2019-04-14 21:49:45 · 937 阅读 · 0 评论