仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 699|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来一发poluoluo搜集CSS格局化和外型网页初级教程

[复制链接]
山那边是海 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:25:35 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
网页制造poluoluo文章简介:本文搜集收拾了60多个初级CSS技能,不论你是CSS老手仍是妙手,信任这些技能都能助你更进一步进步本人的CSS妙技。
CSS是古代网页计划的主要基石。Web尺度请求利用CSS来格局化和外型网页。其轻量级的特征,年夜年夜超出以往诸如表格之类的结构办法。
CSS并没有设想中的难以捉摸。以下是一些使用CSS创立外型计划元素的技能和手艺,也包含一些分离JavaScript或XHTML以扩大网站功效的案例,合适作为进修CSS的基础指南。固然关于履历丰厚的计划师,一样值得浏览。
1.结构和用户界面手艺
以后CSS次要使用于创立页面结构。使用CSS制造页面结构和用户界面,有几近无穷的大概性。上面是一些更风趣的手艺。
ThesimplestwaytohorizontallyandverticallycenteraDIV
本文先容用CSS办法使DIV纵向或横向居中。固然有良多经由过程父DIV和子DIV完成居中的代码,但这个特别办法仅利用一个DIV元素,而且复杂很多。
NewCSSStickyFooter-2009
一个辣手的完整跨扫瞄器兼容的页脚手艺,兼容GoogleChrome扫瞄器,而且不必要空DIV帮助。
SimplePagePeelEffectwithjQuery&CSS
此教程分离jQuery和CSS创立网页剥离效果。年夜多半网站都利用Flash来完成这类效果。因而假如不热中于Flash手艺,这会是一个不错的选择。
EqualheightboxeswithCSS
一个利用CSS创立等高栏式结构的基础实例,完全丢弃表格结构的代码烦复与凌乱。
Adaptableview-howdotheydoit?
让用户手动改动网站的体现,仿佛能够年夜年夜进步网站的易用性和用户粘度。本教程将先容怎样为网站实行和部署扫瞄器顺应手艺。
CSS:TheAll-ExpandableBox
一个创立自顺应CSS容器的教程。容器会主动向各个偏向扩展,以顺应所包括的内容,而不但是垂直增加。合用于用户可控字号招致使CSS容器撑开的情形。
FourMethodstoCreateEqualHeightColumns
一个利用CSS创立等高列的教程,共触及四个分歧的手艺。兼容一切支流扫瞄器(乃至IE6扫瞄器)。
VerticalCenteringWithCSS
这篇文章包含各类使CSS元素垂直居中于网页的最好手艺。同时也先容了怎样使用这些手艺,创立一个复杂玲珑的垂直居中的站点。
CSSverticalcenterusingfloatandclear
利用浮动(float)和扫除(clear)创立垂直居中的CSS容器,乃至兼容IE5版本。
Cross-BrowserInline-Block
本教程涵盖在多重内容情形下,创立一个内联块(inline-block)结构的办法,而不冲破结构的完全性。
TheCSS“Ah-ha!”Moment
议论年夜多半计划师,在其职业生活的某个时分收回"Ah-Ha!"叹息的时候。和一些主要的关于CSS容器结构的灵感突现。
AnIndepthCoverageOnCSSLayers,Z-Index,RelativeAndAbsolutePositioning
本文给出了关于CSS层,绝对和相对定位。和Z-Index属性的周全概述。
TheCSSOverflowProperty
详解了CSS溢出属性的事情流程。包含可见(visible),埋没(hidden),转动(scroll),主动(auto),以实例申明一一申明。
Absolute,Relative,FixedPositioning:HowDoTheyDiffer?
剖析简单搅浑的相对(absolute),绝对(relative),流动地位(fixed)之间的差别性,具体申明各个属性的区分。
display:inline-block
先容在分歧的款式中创立内联块(inline-block)的办法,并兼容分歧的扫瞄器情况。
2.导航和菜单手艺
优秀的导航是网站中十分主要的一部分。优秀的导航既便利用户利用,也增补和完全了网站的其他计划元素。以下是一些关于创立导航的技能和提醒,使其二者兼备。
CreatedropdownmenuswithCSSonly
一份创立CSS下拉菜单的完全教程,该办法疾速并且易于实行。
SimplescalableCSSbasedbreadcrumbs
在网站上利用面包屑导航,能够便利会见者扫瞄。本教程先容了一种创立基于CSS的,可伸缩面包屑导航的办法。
HorizontalSub-navwithCSS&jQuery
一份关于利用CSS手艺创立横导游航子菜单的完全教程。假如但愿一般事情于IE6扫瞄器,大概必要实行一些jQuery代码。
CSSStepMenu
创建一个门路式菜单(也称为“导游菜单”)大概会十分辣手,出格是当它必要依据实践使用做出一些改动的时分。本文给出了创立该类菜单的实例。
TheTabbedBreadcrumbNavigation
一份关于创立面包屑导航,并格局化为标签式的周全教程。
Apple’sNavigationbarusingonlyCSS
该教程申明怎样创立一个相似苹果网站的导航栏,仅仅利用CSS和HTML代码(不附加任何图片)。
SitemapCelebration
一款跨扫瞄器兼容(即便是IE5版本),而且基于嵌套列表的网站舆图(Sitemap)作风。
NiceCSSmenuwithfeedreadericonslist
利用CSS创立一个供稿(Feed)浏览器图标菜单。能够便利地合用于其他范例的菜单。
Multi-levelMenuswithjQueryandCSS
利用纯CSS和CSS/JS创立多级联动菜单的手艺集锦。也涵盖了更先辈和富有制造性的实例。
3.图象作风和画廊
在网页计划中,图片外型是一个常常被无视的要素。以下这些精选的的手艺和技能,将匡助你改正和改良这类情形。
CenteringimageswithCSS
一些关于图片居中的基础材料,利用CSS把持而不是过期的纯HTML结构。
AddaCustom“Trendy”BorderAroundBlogImagesWithCSS&JavaScript
一份关于怎样在博客上,创建各类图片边框款式的完全大纲。利用JavaScript和CSS手艺相分离。
SexyMusicAlbumOverlays
为图象画廊增添更多作风款式的教程,文章利用专辑封面的制造历程作为一个实例。
CreateCSSpinballoonswithease
这是一个壮大的手艺,从复杂的锚点标志,扩展过渡到为图象增添引脚气球、气泡提醒或舆图标示。
CreateanImageRotatorwithDescription(CSS/jQuery)
一份关于怎样利用CSS和jQuery手艺创建图片扭转/画廊的教程。本文将创立一个洁净的界面,用于显现一样平常的或组合的图象廊。
5PopularCSSSpeechBubbles
搜集了利用CSS创立气泡提醒的5个分歧的手艺(有些地道用CSS完成)。
HowtoMakeaThreadlessStyleT-ShirtGallery
创立一品种似Threadless网站的图象画廊效果,以字幕或掩盖图片或缩略图的顶部。功效的完成手艺值得自创。
CSSimagereplacementfor…images?Itmakessenseforprint.(AsktheCSSGuy)
基于CSS款式表打造针对打印用处和屏幕显现优化的图象。
BeautifulnewCSS:box-shadow
关于使用CSS创立容器暗影效果的教程,德文网站。
4.版式计划手艺
CSS善于于版式计划。不管是字体范例,分量仍是色彩,都必要利用CSS来界说。以下是一些指南,匡助你创立更好的网页版式。
Truetype,FontVariantsandAntialiasing
一篇关于利用Truetype字体的文章,剖析了为什么偶然字体显现效果不像所希冀那样的缘故原由。
StylingOrderedListswithCSS
利用CSS创立一个极具吸引力的有序列表。
Beautifulfontswith@font-face
关于@font-face属性的基础利用教程,和怎样在网页计划中拔出Truetype字体。
Forgottenpossibilitiesof:first-letterinCSS
关于CSS中的:first-letter属性的利用,俄文网站。
8DefinitiveWebFontStacks
基于切实字体魄式的8个通用CSS字体集,以匡助计划职员决意网站版式计划,选用得当的字体集,并调剂到必要的符合效果。
Mike’sExperiments-CSS:PerspectiveText
一个创立笔墨角度效果的风趣实例(即便笔墨块的底部看起来更靠近顶端)。
Fontsforwebdesign:aprimer
一份合用于网页计划师的版式计划指南,包含字体范例的选择及其符合的用法。
CSStext-shadowFun:RealtimeLightingDemo
利用CSS的笔墨暗影属性分离JavaScript手艺,来创立一个发光效果实例。
RenderingQuotesWithCSS
一份关于在CSS中利用引号(quotes)标志的指南,包含怎样创立合适分歧语种的尺度引号。
SixWaystoStyleBlockquotes
利用CSS为XHTML中的blockquote标志界说款式的多种办法。
MakeOLliststartfromnumberdifferentthan1usingCSS
教你怎样自界说有序列表肇端数字的简明教程。
UseCSStoOverrideDefaultTextSelectionColor
这篇文章先容利用任何色彩为笔墨设置高亮色彩的办法。
CSSDropCapEffect
为文章内容设定首字下沉的CSS办法,特别合用于杂志型或书本型网站。
5.图标,按钮和链接
图标,按钮和链接在很多网页上常常是被无视的要素。可是实践上它们也会对全体计划发生伟大的影响。以下是一些使网页外型更佳的资本。
AddProgressiveIconstoYourSiteUsing:afterpseudo-element
此教程申明怎样为链接增加图标形貌,依照分歧文件范例指定分歧图标(如PDF或ZIP文档)。
SuperAwesomeButtonswithCSS3andRGBA
关于利用CSS3和alpha夹杂手艺创立按钮的教程。
ScalableCSSButtonsUsingPNGandBackgroundColors
利用PNG图象创立横向或纵向的可伸缩菜单。该手艺能完成文雅升级,即使利用IE6扫瞄器仍可看到按钮(只是没有了PNG图象)。
AddFileTypeIconsnexttoyourlinkswithCSS
为链接增加文件范例图标的教程。
22CSSButtonStylingTutorialsandTechniques
一份触及20多个手艺的周全资本清单。关于怎样利用CSS创立分歧外形,分歧尺寸的图标。
CSSTricks’LinkNudge
创立当鼠标停止时的缩进菜单效果的教程。
Sanscons
一些可使用CSS重设图标色彩的图标集。
英文原稿:MasteringCSS,Part1:StylingDesignElements|SmashingMagazine
翻译收拾:精晓CSS外型计划元素|芒果
</p>
那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?
不帅 该用户已被删除
沙发
发表于 2015-1-17 22:38:47 来自手机 | 只看该作者
可以使用CSS检查工具进行设计。
简单生活 该用户已被删除
板凳
发表于 2015-1-25 17:43:59 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
山那边是海 该用户已被删除
地板
 楼主| 发表于 2015-2-3 12:41:25 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
只想知道 该用户已被删除
5#
发表于 2015-2-9 02:39:44 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
变相怪杰 该用户已被删除
6#
发表于 2015-2-26 19:35:05 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
若相依 该用户已被删除
7#
发表于 2015-3-8 17:16:59 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
柔情似水 该用户已被删除
8#
发表于 2015-3-16 09:52:07 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
老尸 该用户已被删除
9#
发表于 2015-3-22 22:11:25 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 17:06

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表