css案例(css案例源代码)
发布网友
发布时间：2024-10-04 19:08
共1个回答
热心网友
时间：2024-10-05 10:42
这是一个简单的案例会把之前博客中讲到的CSS的基本知识串起来，算是一个稍微综合一点的案例了！这里我会详细的每一部分的进行介绍！
从这张图中我们可以看到首页大致分为如下的几个部分：
CSS初始化
确定版心的大小
可以使用PS的矩阵选框工具确定
如图所示版心的宽为1200px;
导航栏的大小为1366px
可以分为四部分来做：logo、navbar、search、personal
页面结构部分：
CSS的样式部分
其中需要注意的几个点是：
结构
css样式为：
注意点：
结构
CSS样式：
需要注意的是
结构
样式
注意：
结构
样式css
注意
利用css实现qq邮箱登录案例CSS（层叠样式表）
层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
注：单独使用CSS是无法实现QQ邮箱登录实例（CSS为样式代码）。
实例
可以使用iframe代码实现QQ邮箱登录实例。
代码如下：
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""
html?xmlns=""
head
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/
titleqq邮箱登录实例/title
/head
body
p?align="center"?style="margin-top:0px;margin-left:0"
iframe?width="1000"?height="500"?src=""?class="t-iframe"?scrolling="no"?frameborder="no"?border="0"?marginwidth="0"?marginheight="0"?scrolling="no"/iframe?
/p
/body
/html
代码解释：
url是你要调用的网址，p?align="center"?style="margin-top:?-109;margin-left:?-109"是网页布局、其中margin-top:?0表示顶部缩进，margin-left:?0表示左边缩进。至于右边和底部缩进，很简单，修改iframe的宽度和高度就可以了。
用CSS做将如何字体居中？使用CSS将字体居中可以使用HTML中的center标签，简单方便。
具体介绍CSS中Center标签定义、其使用方法及相关内容：
对浏览器支持：所有浏览器都支持center标签。
定义和用法：对其所包括的文本进行水平居中。
标准属性：id,class,title,style,dir,lang,xml:lang。
事件属性：onclick,ondblclick,onmousedown,onmouseup,onmouseover,
onmousemove,onmouseout,onkeypress,onkeydown,onkeyup。
HTML与XHTML之间的差异：
A、在HTML4.01中，center元素不被赞成使用。
B、在XHTML1.0StrictDTD中，center元素不被支持。
Center标签实现字体居中案例：
table?width="400"?border="0"
??tr
????tdcenter表格内容1/center/td
????td表格内容2/td
????tdcenter表格内容3/center/td
??/tr
??tr
????td表格内容4/td
????tdcenter表格内容5/center/td
????td表格内容6/td
??/tr
??tr
????tdcenter表格内容7/center/td
????td表格内容8/td
????tdcenter表格内容9/center/td
??/tr
/table
Center标签实现字体居中案例效果：
附，另一种实现方法：
td{text-align:center;}
tdalign="center"valign="middle"
前一个是水平居中后一个是垂直居中
对应的css写法:
tdstyle="text-align:center;vertical-align:middle;"
提示和注释：请使CSS样式来居中文本！
css单行文本溢出打点是什么？是待省略的意思。要省略就要它不换行white-space：nowrap。不换行就会有超出部分显示，这超出的部分要让它隐藏overflow：hidden；最后就是它要显示省略号text-overflow：ellipsis。
缩进文本：把Web页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
CSS?提供了text-indent属性，该属性可以方便地实现文本缩进。
通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进5em。
扩展资料：
使用负值：
text-indent还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
p{text-indent:-5em;}
不过在为text-indent设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：p{text-indent:-5em;padding-left:5em;}。
参考资料来源：百度百科-CSS文本
怎么用CSS设置html中的表格边框样式
一、只对表格table标签设置边框?-?TOP
只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。
案例详细如下：
1、对应css代码
style.table-a?table{border:1px?solid?#F00}?/*?css注释：只对table标签设置红色边框样式?*/?style
2、对应html代码片段
divclass="table-a"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtablediv
二、对td设置边框?-??TOP
对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。
详细案例教程如下：
1、对应css代码
style.table-b?table?td{border:1px?solid?#F00}?/*?css注释：只对table?td标签设置红色边框样式?*/?style
2、对应html源代码片段
divclass="table-b"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtable
三、对table和td技巧性设置表格边框?-??TOP
如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。
解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。
解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下边框解决显示右侧和下侧td剩下未显示边框。
1、对应css代码：
style.table-c?table{border-right:1px?solid?#F00;border-bottom:1px?solid?#F00}?.table-c?table?td{border-left:1px?solid?#F00;border-top:1px?solid?#F00}?/*?css注释：?只对table?td设置左与上边框；?对table设置右与下边框；?为了便于截图，我们将css?注释说明换行排版?*/?style
2、对应html源代码片段：
divclass="table-c"tablewidth="400"border="0"cellspacing="0"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtable
四、对table和td设置背景，实现完美表格边框?-??TOP
1、基础设置
1）、先设置table?css背景为红色
2）、设置table单元之间间距为1
使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化操作步骤简要说明，首先（视图模式）选中表格后，对应DW软件编辑窗口底部会“属性”面板会出现对应table表格属性设置地方，我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”（cellspacing="1"）。
借助DW软件设置表格单元之间间距
或
直接对
标签内cellspacing="1"即可，得到：
tablewidth="400"border="0"cellspacing="1"cellpadding="0"
3）、设置tabletd背景为白色
2、css代码：
style.table-d?table{?background:#F00}?.table-d?table?td{?background:#FFF}?/*?css注释：设置table背景为红色，td背景为白色?*/?style
3、对应html源代码：
divclass="table-d"tablewidth="400"border="0"cellspacing="1"cellpadding="0"trtdwidth="105"站名tdtdwidth="181"网址tdtdwidth="112"说明tdtrtrtdDIVCSS5tdtd;tdCSS学习tdtrtrtdCSS5tdtd;tdCSS切图tdtrtablediv
五、csstable表格边框实现总结?-?TOP
以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。希望DIVCSS5整理总结htmltable边框布局方法对大家有帮助并能掌握，平时需要时灵活运用。
css怎么实现div水平居中呢？因为“text-align:center”控制的是文本居中，div居中可以用外边距margin来实现。
1、新建html文件，在body标签中添加div标签，div标签中的内容为“演示文本”，添加题目中的css样式，为了方便演示，给div标签添加灰色背景，这时可以发现div靠近浏览器的左侧，文字在div中居中：
2、为div标签添加新的外边距“margin”属性，属性值为“0auto”，“0”指的是上下外边距为0，“auto”指的是左右外边距为自适应：
3、这时无论浏览器的宽度是多少，div都会在浏览器上水平居中：
