ASP.NET动态网站制作(3)--css(2)
前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位、浮动、盒子模型(第二次课)、css的具体应用(第三次课)、css3(第四次课)。今天的内容是关于css中定位、浮动以及盒子模型。
内容:CSS最核心的内容,围绕div标签展开。
1.做静态网页首先要考虑页面的布局,可用<div></div>来将网页分为不同的模块,就相当于盖房子一样。
2.<div></div>是一个块元素,与之相对应的还有行内元素。
块元素的特点:(1)块元素默认显示在父标签的左上角;(2)块级元素默认占满一行(占满整个文档流)。常用的块级元素有:div,form,h1-h6,menu,ol,ul,table,p。
行内元素(内联元素)特点:(1)行内元素大小受到文字区域影响,不受width和height属性影响;(2)行内元素不会单独占满一行。常见的行内元素有a,span,img,input,label。
行内元素变为块级元素:display:block;块级元素变为行内元素:display:inline;还有一个display:inline-block,既有行内元素的特点,也有块元素的特点,即:高度、宽度会受影响,但不会单独占满一行。
3.浮动:float:left(第一个元素向左边靠,且第二个元素紧跟在第一个元素的后面,向左浮动),同理:float:right。设置浮动之后会对后面的元素造成影响,所以需要清除浮动的影响,使用:clear:left,clear:right,clear:both。
4.盒子模型:设置模型的边框、内间距、外间距,即盒子模型有三个元素:border,padding,margin。
border用法:border:solid 2px #000;border-top:dashed 2px #FFF;
padding用法: padding:10px;(表示上下左右内间距都是10px)
padding:10px 20px;(表示上下内间距为10px,左右内间距为20px)
padding:5px 10px 20px(表示上面的内间距为5px,左右内间距为10px,下面的内间距为20px)
padding:5px 10px 15px 20px(表示上面的内间距为5px、右面的内间距为10px、下面的内间距为15px、左面的内间距为20px)
也可单独设置:padding-top,padding-right,padding-bottom,padding-left
padding是将框撑大相应的距离,元素的尺寸会变大。padding对行内元素是支持的。
margin用法:设置块和块之间的外间距,规律与padding相同。但是margin对于行内元素只支持左右外间距,不支持上下外边距。
5.定位:position:absolute(绝对定位)和position:relative(相对定位)及position:fixed(固定位置)。
position:absolute:设置为绝对定位时,元素脱离文档流,不会单独占满一行,不会受到浮动的影响;元素的方位受到窗体的上下左右影响。
position:relative:设置为相对定位时,元素没有脱离文档流,会受到浮动的影响;元素的方位是相对元素的父标签。
position:fixed:设置固定位置,如QQ弹框。该设置是脱离文档流的。
后记:多多练习元素及属性的使用,在以后的应用中会用的比较多。
ASP.NET动态网站制作(3)--css(2)的更多相关文章
- ASP.NET动态网站制作(4)--css(3)
前言:这节课主要运用前面所学的知识写三个例子,并且学习浏览器兼容性的解决方法. 内容: 例子1:一个关于列表的例子 html代码: <!DOCTYPE html PUBLIC "-// ...
- ASP.NET动态网站制作(2)--css(1)
前言:这节课主要讲关于css的相关内容. 重点:1.css(Cascading Style Sheet)叠层样式表,做网页的外观,是用来控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 2 ...
- ASP.NET动态网站制作(1)--html
前言:正式上课的第一课,讲的是前端部分的最基础内容:html. 前端:html,css,js 数据库:sql server 动态部分:.net,c#... IIS(Internet Informati ...
- ASP.NET动态网站制作(28)-- 三层框架(2)
前言:三层框架的第二节课,继续上次课的内容. 内容: 1.三层框架的使用目的:可以将视图层和业务逻辑层及实体层分开,可以提高代码的扩展性,安全性,可以实现程序的低耦合性. 2.GetModel方法及G ...
- ASP.NET动态网站制作(26)-- Ajax
前言:这节课讲解关于Ajax的相关内容. 内容: 1.当点击页面中的一个按钮提交数据或请求数据的时候,整个页面的信息都会提交(不管信息是否是提交或者请求的数据,页面中所有的数据都提交),这样耗用的时间 ...
- ASP.NET动态网站制作(20)-- C#(3)
前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...
- ASP.NET动态网站制作(18)-- jq作业讲解及知识补充
前言:这节课主要讲解js及jq作业,并在作业讲解完后补充关于jQuery的一些知识点. 内容: 1.作业讲解:计算器那一块考虑的各种情况还不算完善,只实现了基本的功能,还需多多练习使用jQuery. ...
- ASP.NET动态网站制作(11)-- JQ(3)
前言:这节课主要是讲CSS作业,然后继续讲jQuery. 内容: 1.css作业讲解. 2.jq设置元素样式: (1)添加.删除css类别:$("div").addClass(& ...
- ASP.NET动态网站制作(0)
前言:一直想系统地学习一下网站建设的相关内容,看过相关的书籍,也跟着视频学过,但总觉得效率不高,学过的东西印象不深刻,或许还是自己动手实践的少.无意中免费听了一堂讲ASP.NET网站建设的课,觉得性价 ...
随机推荐
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---11
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- Android开发基础(java)14
Java语言与其他编程语言的最大不同之处在于:java有专门的异常处理机制,实现对各类异常情况进行有效控制. 一.基本概念:异常和错误的区别与联系: (1).定义形式不同:异常为exception:错 ...
- reportlab包使用指南
reportlab.canvas有这六个主要参数 1.pagesize:设置纸张大小 #from reportlab.lib.pagesizes import letter, A4 导入常见的 ...
- 16Aspx.com-将15位身份证转换成18位
//********************************************************************************* //将15位身份证转换成18位时 ...
- koa2 从入门到进阶之路 (二)
之前的文章我们已经能够在本地启动一个简单的项目,本章我们来看一下 koa 路由,get 传值,动态路由. 一.Koa 路由 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP ...
- Topcoder SRM 144 DIV 1
BinaryCode 模拟 题意是:定义串P,Q,其中Q[i]=P[i-1]+P[i]+P[i+1],边界取0,并且P必须是01串.现在给你Q,让你求出P. 做法是:枚举第一位是1还是0,然后就可以推 ...
- 设置ListView的item不能点击
写了一个ListView结合volley的demo ListView只是用来展示数据,所以不需要点击效果. 网上搜索了下: 可以禁用ListView ListView.setEnabled(false ...
- linux svn co 重新迁出
在linux环境下,使用svn co (即svn checkout) 报svn: Authorization failed错误, 使用svn co svn://localhost/temp.cc /d ...
- Using CLEAR_BLOCK To Prevent Save Confirmation Dialogs In Oracle Forms
Clear_Block built-in clears all records from the current data block and if the user had made some ch ...
- 【开发总结】—— BABYLON 项目开发必备系列
前言:在公司主要使用Babylon.js作为前端引擎,我自己在开发中总结到基本上每一个新项目都会需要这些基本设置. 一.ios兼容:解决镜面反射 如果不加offline,材质中有镜面反射,苹果手机 ...