Heim > Web-Frontend > HTML-Tutorial > 应该怎样进一步学习写样式_html/css_WEB-ITnose

应该怎样进一步学习写样式_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:59:43
Original
1140 Leute haben es durchsucht

各个样式的基本属性,基本都了解了。修改一些,写一小块基本行。但是要写整个页面的话,我就会不知道从何入手,怎么开始写。请求大家指点一下,谢谢


回复讨论(解决方案)

把小块放大就是大块,大块里面再写小块。
页面就是有无数个小块组成的!

注意块与块之间的逻辑,通过做实际的项目来练习,你会发现过程中会出现很多问题,然后通过自己上网查找,或者问别人,慢慢的你就会发现你写整个页面也得心应手了。

一个大页面,一般是分几个功能块
比如:页头、页脚、中间有几屏
先分大块,再在指定了宽高的区域中定小块。

比如页面宽度都是1000px那么定义一个样式:   .main{width:1000px;margin:0 auto;}
然后页面中间的几屏,分成几个大div,定义:   


css有一种用法是这样,就是可以在class里面加多个css类名: 
, 你用.main定义统一的宽度和居中,用第二个类名,定义这一个小区块的最外层元素,以免页面元素过多,造成冲突。
.container-aa .layout-left{width:700px;float:left;}
.container-aa .layout-right{width:300px;float:left;}

左侧内容区

右侧内容区


然后就可以往下继续写里面的内容
通常只指定宽度,不指定高度,由内容往下撑高度。

在划分小块,或者切割小容器盒子时,注意最好切成:1行多列,或者多行1列的方式,比较容易控制。
当然,如果是图片册那种规矩的多行多列,正常作就行了。


除了上面的布局外,你还需要写一些初始reset样式
body,div,ul,li,h1,h2,h3,h4,h5,h6,p,form,img{margin:0;padding:0;border:0;}
body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,address,code,del,dfn,em,img,ins,strike,strong,dl,dt,dd,ol,ul,li,form,label,fieldset,legend{margin:0;padding:0;border:0;}
div,span,a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:none;}
body{font-family:'Microsoft YaHei','微软雅黑';}
a{color:#666;text-decoration:none;}
a:link{color:#666;}
a:visited{color:#666;}
a:hover, a:active{color:#ff7200;outline:0;}

还有一些“零件”样式,比如:
.etc{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}    /*省略号*/
.wrap{word-wrap:break-word;}/*强制换行*/
.nowrap{white-space:nowrap;}/*禁止换行*/
.clearfix:after {content:'';display:block;height:0;overflow:hidden;clear:both;}

通常先画个布局图,然后把各块大小弄上,最后润色完善。
虽然用DW画布局很方便,但我还是喜欢用笔画出来,直接上码。

一点一点写,用dom结构的最小节点 去写,每个都写 最后放到一起就是一个大页面的

学着手写,多做几个网站就熟悉了!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage