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网站建设的课,觉得性价 ...
随机推荐
- C#反射(Reflection)详解
1. 什么是反射2. 命名空间与装配件的关系3. 运行期得到类型信息有什么用4. 如何使用反射获取类型5. 如何根据类型来动态创建对象6. 如何获取方法以及动态调用方法7. 动态创建委托 1.什么是反 ...
- bytearray和file的后端上传方式
public static String readAndUpload(String serverpath,String imgid) { if(serverpath==null){ serverpat ...
- 51Nod 1019 逆序数(线段树)
题目链接:逆序数 模板题. #include <bits/stdc++.h> using namespace std; #define rep(i, a, b) for (int i(a) ...
- HDU 3549 Flow Problem (dinic模版 && isap模版)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3549 题意: 给你一个有向图,问你1到n的最大流. dinic模版 (n*n*m) #include ...
- Topcoder SRM 664 DIV 1
BearPlays 快速幂 题意: 给你两个数A,B,有种操作是将大的数减去小的数,并将小的数乘以2.反复k次,问你最后的小的数回是多少. 题解: 由于整个过程$A+B$的值是不会改变的.现在令$S= ...
- 向现有mvc程序中加入devexpress report
Open your ASP.NET MVC project. In the main menu of Visual Studio, click the DEVEXPRESS submenu and s ...
- ArcGIS 开发时,解决__类型“XX”同时存在于“”和“”中__的错误
错误提示:类型“ESRI.ArcGIS.ADF.BaseClasses.BaseCommand”同时存在于“e:\Program Files\ArcGIS\DeveloperKit10.2\DotNe ...
- 【IntelliJ IDEA】升级之后又要激活的解决方法
用了几个月的idea,在它升级之后,又不听话了.启动时候需要重新激活. 解决方法: 1.找到C:\Windows\System32\drivers\etc\下的hosts文件 在文件中添加如下: 0. ...
- ThinkPHP 中M方法和D方法的具体区别
M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...
- mac 安装 redis
安装命令 brew install redis 开机启动redis命令 $ ln -sfv /usr/local/opt/redis/*.plist ~/Library/LaunchAgents 使用 ...