为您找到搜索结果：1786个
前端基础-css（3）
一、文本属性和字体属性（常用的）1、文本属性 text-align:left|right|center|justify（两端对齐，只适用于英文）; /*对齐方式*/ color:色值; /*文本颜色*/ text-indent:2em; /*首行缩进，建议单位用em*/ text-decoration:none|underline|overline|line-through|inherit; line-height:高度值;2、字体属性 font-weight:normal|bold|border|lighter|100~900|inherit; /*100~300没区别*/ font-family:字体; a、网页中不是所有字体都能显示，因为这个字体要看用户的电脑里面装没装，比如你设置：font-family:”华文彩云”;如果用户电脑里面没有这个字体，那么就会变成宋体; b、为了防止用户电脑里面没有你设置的那个字体，我们通常写...
前端基础-css（2）
一、标准文档流 宏观的将，我们的web页面和ps等设计软件有本质的区别，web网页的制作，是个“流”，从上而下，像“织毛衣”。而设计软件，想往哪里画东西，就去哪里画。 标准文档流下，有一些现象，比如空白折叠现象、高矮不齐底边对齐现象等。 标准文档流等级森严，标签分为两种等级：行内元素和块级元素。1、行内元素和块级元素的区别： 行内元素： a、与其他行内元素并排； b、不能设置宽、高，默认的宽度，就是文字的宽度； 块级元素： a、独占一行，不能与其他任何元素并列； b、能接受宽、高。如果不设置宽度，那么宽度将默认变为父级的100%；2、标签的分类 在以...
前端基础-css（1）
一、css的引入方式现在的互联网前端分三层： HTML：超文本标记语言。从语义的角度描述页面结构。 CSS：层叠样式表。从审美的角度负责页面样式。 JS：JavaScript。从交互的角度描述页面行为CSS：CascadingStyleSheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。css的最新版本是css3。1、css优点： (1)使数据和显示分开； (2)降低网络流量； (3)使整个网站视觉效果一致； (4)使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）； 比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。2、css引入方式： (1)行内样式，如下示例：<pstyle=...
div+css3绘制基本图形
基本图形包括：矩形、圆角矩形、圆形、椭圆形、三角形、值线、弧这些图形的绘制用到了CSS圆角属性，不考虑IE8。下面的实现在chrome浏览器运行通过。 1.矩形比较简单，通过CSS设置宽度、高度、背景色即可。html:<divclass="rectangle"></div>css:.rectangle{width:150px;height:100px;background-color:orangered;}呈现： 2.圆角矩形在矩形设置的基础上，增加圆角属性设定，这里用的单位是百分比,好处是可适应整体大小的变化而变化。html:<divclass='rounded-rectangle'></div>css:.rounded-rectangle{width:150px;height:100px;background-color:orangered;border-radius:10%;}呈现: 3.圆设置为正方形，将圆角设成50%即可，其实就是圆角的半径为正方形的的半径。html:<divclass='ci...
css毛玻璃效果
毛玻璃其实就是磨砂玻璃，能够模糊的看清背后的风景，让人感觉有种朦胧美，让界面看上去有些层次感。比如：高大上啊，接下来肯定是眼馋手痒的过程。。。当然，用ps搞一个全景毛玻璃背景毫无疑问是最省事的，那接下来就没啥事可干了。当然nonono了。毛玻璃无疑就是种模糊了，少不了filterblur。最终效果（chrome）：天气预报嗯，也算是将就了。。。<!DOCTYPEhtml><html><head><metacharset="utf-8"></style></head><body><divclass='container'><divclass='frosted-glass'></div><imgclass='weather'src='cloudy.png'></div></body></html>先搞一个div作为容器层，用来放置风景背景图。内部放一个div，作为毛玻璃的主体。再放一个img，显示天气图标。 容器层...
网页中多个图标在一张图片上，使用css将各图标显示
现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是4~8个，那么图标显示过慢或者超时的情况就会发生。当然了，像采用CDN，或者按照浏览器的并发数对图片文件进行域名分散存储处理也是再好不过的，但不是都有这样的条件。一般都会把图标文件做的尽可能小，尽管如此，1张50k的文件比起50张1k文件下载起来还是很有优势的。那么，要如何将一个图片中的单个图标显示在页面中，因为没有切分图片的功能。 首先，假设我们的图标图片是treeview中常用的： 做一个简单的页面，放两个div，需要在这两个div上分别显示文件夹和文件图标。<!DOCTYPEhtml><html><head><metacharset="utf-8"><style></style></head><body><div></div...
css如何实现垂直居中样式？
第一种：外层边框部分高度固定，内部块级结构居中html结构：//<!---->注释掉空格<divclass="verMiddleouterLayerWrap"><!----><divclass="innerLayer"></div>style样式：//通用样式.verMiddle::before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0;overflow:hidden;}//外层样式.outerLayerWrap{width:100px;height:100px;border:1pxsolid#ccc;text-align:center;}//内层样式.innerLayer{width:40px;height:40px;background:red;vertical-align:middle;display:inline-block;}...
CSS3布局篇（多列布局）
我们通过学习CSS3，能够创建多个列来对文本进行布局，就像报纸那样排版那样！可以参考详细说明：http://www.w3school.com.cn/css3/css3_multiple_columns.asp如下多列属性：column-count：规定元素应该被分隔的列数。column-gap：规定列之间的间隔。column-rule：设置所有column-rule-*属性的简写属性。参考代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>多列布局</title><style>#one{column-count:3;/*分3栏*/column-gap:40px;/*栏间距*/column-rule:2pxsolidlightgreen;/*栏间分隔线，与border设置类似*/line-height:26px;font-size:14px;height:500px;background:lightcyan;background:lightcy...
css3布局篇（双飞翼）
大家看到好多电商网站都见过经典三列布局，它也叫做圣杯布局，是KevinCornell在2006年提出的一个布局模型概念，这个在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有以下的几点：1、三列布局，中间宽度就自适应，目的都是左右两栏固定宽度； 2、在执行代码时候，代码是从上往下执行的。中间栏要在浏览器中优先展示渲染。中间往往是大家最关注的点。 3、允许任意列的高度最高；4、要求只用一个额外的DIV标签； 参考代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>双飞翼或圣杯布局</title><style>*{margin:0;padding:0;}#continate{font:18px/30px"微软雅黑";/*第一个是字体大小第二是字体行高第三字体**/}/**全局定义三个div高度*/#conter,#left,#right{height:300px;float:lef...
CSS3 @media 查询（制作响应式布局）
这里简单说明一下@media查询。详细说明文档：http://www.runoob.com/cssref/css3-pr-mediaquery.html使用@media查询，你可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。屏幕缩小：屏幕放大：代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>响应式</title><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><styletype="text/css">*{margin:0;padding:0;font-size:...
CSS制作红桃心
这里主要用到了before与after属性之前之后代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>画画</title><style>#xing{width:100px;height:80px;position:relative;}#xing:before{content:"";width:50px;height:80px;display:block;position:absolute;left:50%;background:#FF0000;border-radius:25px25px00;transform:rotate(-45deg);transform-origin:0100%;}#xing:after{content:"";width:50px;height:80px;display:block;background:red;transform:rotate(45deg);border-radius:25px25px00;trans...
css制作三角形
这个图形忘了在哪里见过的，不过见过有一些网站有这种图形。我这里做了一个简单的练习，希望帮到有需要的人。代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>图形</title><styletype="text/css">#demo{width:100px;height:100px;background-color:#fff;border:2pxblacksolid;position:relative;}#demo:after{content:"";position:absolute;top:30px;left:88%;width:20px;height:20px;border:2pxsolidblack;transform:rotate(45deg);background:white;border-color:blackblacktransparenttransparent;//border:12pxsolidtransparent;//bor...
css制作旋转风车（transform 篇）
做这个案例之前首先要大概了解CSS的transform的属性transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。看看效果图打开的时候自动旋转，当鼠标经过的时候加快旋转速度，鼠标移开就恢复原来的速度。 参考代码：（为了美观可以自已加上一直背景图，我这里是空白的背景显得单调）<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>动画</title><linkrel="stylesheet"type="text/css"href="css/animate1.css"/></head><body><div></div><divid="one"><divclass="sj"></div><divclass="ye"></div><divclass="ye1"></div><...