CSS3学习系列之布局样式（二）

使用盒布局在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用float属性进行布局的示例</title> <style> #container{ display: -moz-box; display: -webkit-box; } #l…

CSS3学习系列之布局样式（一）

多栏布局使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用float属性进行页面布局的示例</title> <style> div { width: 20em; floa…

text-overflow属性当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的末尾显示一个代表省略号"-".但是,text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效.例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha…

CSS3学习系列之背景相关样式（二）

在border-radius属性中指定两个半径在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处理方式并不一致,在chrome浏览器与safari浏览器中,会绘制出一个椭圆形边框,第一个半径为椭圆的水平方向半径,第二个半径为椭圆的垂直方向半径,在firefox浏览器与opera浏览器中,将第一个半径作为边框左上角与右下角的园半径来绘制,将第二个半径作为边框右上角与左下角的园半径来绘制.例子如下…

CSS3学习系列之盒样式（一）

盒的基本类型在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1中追加的一个盒类型,属于block类型的一种,但是显示时它具有inline类型盒的特点,例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">…

CSS3学习系列之选择器（二）

first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first-child选择器与last-child选择器使用示例</title> <style> l…

CSS3学习系列之背景相关样式（一）

新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background-break:指定内联元素的背景图像进行平铺时的循环方式 background-clip属性在HTML页面中,一个具有背景的元素通常由元素的内容.内容补白(padding).边框.外部补白(margin)构成. 元素背景的显示范围在css2与css2.1.css3中的并不相同,在css2中,背景的…

MVC学习系列5--Layout布局页和RenderSection的使用

我们开发网站项目的时候,都会遇到这样的问题:就是页面怎么统一风格,有一致的外观,在之前ASP.NET的时代,我们有两种选择,一个是使用MasterPage页,一个是手动,自己在每个页面写CSS样式,但这样代码量太大了..不可取,那么到了ASP.NET MVC时代,有什么技术可以统一页面风格呢???有,那就是Layout布局视图.下面就开始学习吧. 1. 首先使用空模板,新建一个MVC Web项目: 新建完成之后,初始化状态是: 2.接着在根目录[LayoutMVC这里是]下,新建一个文件夹[Co…

[CSS3]学习笔记-CSS基本样式讲解

1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="styl…

css3学习系列之选择器（一）

CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val]属性选择器:选择值以val指定的字符串开头的att属性使用这个样式. [att$=val]属性选择器:选择值以val指定的字符串结尾的att属性使用这个样式. 属性选择器的例子:利用[att$=avl]属性选择器,可以根据超链接中不同的文件扩展符使用不同的样式. <!DOCTYPE html>…