652 905 964 182 843 836 292 547 526 334 682 515 810 668 255 404 750 364 814 702 444 623 50 910 63 451 455 288 583 130 451 600 945 387 24 489 152 643 335 851 830 717 144 243 537 396 716 866 477 652 289 755 417 659 613 896 875 417 687 520 815 939 260 409 755 274 911 575 503 994 682 464 261 69 73 594 623 498 818 968 580 754 965 432 94 585 202 718 697 505 525 358 653 512 832 981 593 768 405 871
当前位置:首页 > 亲子 > 正文

别以为只有余额宝!来看看美国的互联网金融创新产品 Simple

来源:新华网 39uc晚报

第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在 根据BODY中所使用的标记进行重置.如:我们BODY标记中使用了,div,p那我们的选择符就写body,div,p就可以了.不需要写*了. *{ margin:0px; padding:0px; } 第二步:把我们网页整体的背景实现,我们想要的结果内容居中,背景渐变始终铺满屏幕. 这样的话,我们可以为body 添加背景图片.要让基在沿水平方向平铺即可. body{ background:url(image/bj.jpg) repeat-x ; } 第三步:通过观察我们可以先把我们网页划分成为五大部分,然后先为其编写相应的html代码 HTML代码: div id=header/div div id=nav/div div id=banner/div div id=main/div div id=footer/div 通过PS测量得知,这五部分占据950宽,而且居中.我们可以使用群组选择符,先让这五个DIV居中. #header,#nav,#banner,#main,#footer{ margin:0px auto; width:950px; } 第四步:先完成header头部部分 LOGO:一般这个部分有两个要求.1点击LOGO可以返回网站首页.2要注意SEO方面的?所以我们采用了如下HTML代码: h1a href=#北京杰飞css网页切图/a/h1 那么CSS编码该如何实现呢? 大家可以可以先想一下。然后在看我下边写CSS代码的,其实这个地方采用的是CSS以图换字技巧。CSS代码如下 #header h1 a{ background:url(image/logo.jpg); width:476px; height:102px; display:block; text-indent:-9999px; } 好。现在我们接着完成头部右侧部分,还是先进行HTML 代码的编写 ul lia href= #css切图培训/a/li lia href=#设为首页/a/li lia href=#加入收藏/a/li /ul CSS代码: #header h1{ float:left; } 我们首先让H1左浮动。这样右侧UL部分就可以在同行显示了。 #header ul{ float:left; padding:50px 0px 0px 200px; list-style:none; } 为了避免问题,可以让UL也浮动。大家可以试一下,如果不设置浮动在IE各版本,火狐中表现的是否一致 #header ul li{ float:left; padding:0px 10px; } 上边代码在火狐和IE8中没有问题,但是在IE6中会出现问题。我们会在后面进行讲解。 #header ul li a{ color:#555; text-decoration:none; font-size:13px; } #header ul li a:hover{ color:#000; text-decoration:underline; } 这时候的结果如下显示: 第五步:完成导航效果,效果说明:鼠标放上背景变成浅蓝色,并且要制作当前页的效果。 HTML代码: ul lia href= #网站首页/a/li lia href= #网站制作/a/li lia href=#网站制作/a/li lia href=#office培训/a/li lia href=#平面设计就业/a/li lia href=#div css培训/a/li lia href=#联系我们/a/li /ul 现在直接编写导航的代码会产生一个问题。如果学过盒模型与浮动的都应该知道. 导航部分文字跑到header头部右侧了。怎么解决呢? 其实就该我们万能的清除浮动起作用了 CSS代码 .clear{ clear:both; } 这时候为我们div id=nav/div 变成了div id=nav class= .clear/div 大家现在看一下,是不是解决了上边的问题呢。其实如果大家按照标准的盒模型计算,如果计算得当,不会出现这个问题。 完成导航的CSS样式 #nav{ padding-top:3px; } #nav ul{ list-style:none; } #nav ul li{ float:left; } 默认li是占据整行显示的,所以通过左浮动.使其在一行显示。之后在设置A的状态,达到咱们想要的结果 #nav ul li a{ display:block; width:135px; height:56px; line-height:56px; color:#fff; text-align:center; text-decoration:none; font-size:14px; } display:block;让A元素变成块状,然后好为其设置宽高背景。这里面还有一个要点就是line-height:56px,同高度56px对应,可以实现什么效果呢。同学们想一下? #nav ul li a:hover{ background:#177cb7; } 现在我们导航基本已经完成,但是还少了一个当前状态的导航效果。怎么办呢。 其实很简单就是为当前所在页面的A链接添加一个ID为current的标记。如下: a href=# id=current网站首页/a 接着这个状态和鼠标悬停时是一致的,所以很简单,只需要在鼠标悬停状态后边在添加一个#nav ul li a#current选择符即可。你完成没 第六步:产品宣传banner图片,公司网站的话一般会为一个动画或者是js/jquery的特效。目前咱们直接就放置一个图片 img src=image/banner.jpg alt=北京杰飞电脑培训 title=北京杰飞电脑培训/ 必要的属性是alt必须加上。替换文本,当图片不能正常加载,还有就是为了优化。 小技巧: 因为多次用到UL。都需要添加默认圆点。所以在*里面写上list-style:none;.这样其它地方就不用写了。其实包含文字颜色大小等,如果很多地方也是一样。同样可以声明到*选择符里。 第七步:完成内容区域 思路:我们可以把内容区域划分为两部分:一部分是左侧导航,一部分为主要内容区域。这样我先为进行HTML编码: div class=container 测试 /div 现在我们先看一下右侧导航的结果图 右侧导航html代码: div class=subMenu h5培训课程/h5 ul lia href= # id=current网站首页/a/li lia href=#网站制作/a/li lia href=#网站制作/a/li lia href=#网站制作/a/li lia href=#网站制作/a/li lia href=#ldiv css培训/a/li lia href=#ldiv css培训/a/li lia href=#联系我们/a/li /ul /div css代码: 下边这些代码在上边制作过程中都已经说过了。所以直接给出来了,不再讲解。 #main{ padding:10px 0px; } #main .container{ width:674px; margin-right:50px; float:left; } #main .subMenu{ width:226px; float:left; margin-bottom:10px; } #main .subMenu h5{ background:#19577c; height:39px; text-align:center; color:#fff; font-size:15px; line-height:39px; } #main .subMenu ul li{ border-bottom:1px solid #d4d4d4; background:#f1f1f1; } #main .subMenu ul li a{ display:block; color:#000; height:36px; line-height:36px; text-decoration:none; padding-left:60px; background:url(image/li.jpg) no-repeat 40px 50%; } #main .subMenu ul li a:hover{ color:#177cb7; background:url(image/li3.jpg) no-repeat 40px 50%; } 第八步:内容的主体区域编码:通过上边的效果的图片,大家可以先想一下HTML如何编写。我是使用的DLDD的方式,大家一定要学会这个标记的用法,很常用,叙述产品时经常性用到。 现在我们看看HTML代码: div class=news dl class=xuexiao h5学校简介 a href=#img src=image/more.jpg//a/h5 dtimg src=image/223.jpg alt=杰飞logo//dt dd杰飞学校特色:实行家教式教学模式,小班教学的完美结合可随到随学,可预约上课,可完全根据学员实际情况教学,保证学会为止……/dd /dl dl class=xinwen h5学校新闻a href=#img src=image/more.jpg//a/h5 dda href=#浅谈平面设计中配色方案/aspan2013-4-14/span/dd dda href=#浅谈平面设计中配色方案/aspan2013-4-14/span/dd dda href=#浅谈平面设计中配色方案/aspan2013-4-14/span/dd dda href=#浅谈平面设计中配色方案/aspan2013-4-14/span/dd /dl /div 接着是最下边产品部分的HTML编码: div class=product clear h5精品课程a href=#img src=image/more.jpg//a/h5 ul lia href=#img src=image/css.gif//a/li lia href=#img src=image/css.gif//a/li lia href=#img src=image/css.gif//a/li lia href=#img src=image/css.gif//a/li /ul /div 现在开始完成CSS代码的编写: 首选是学校简介与新闻,其实仔细观察这两个也是两列布局,所以设定宽,并设置左浮动: #main .container dl{ width:300px; float:left; } 接着是栏目名称:因为这两个效果是一样的。所以直接使用群组选择符把两个都选择编写就可以了。 #main .container dl h5,#main .product h5{ border-bottom:1px #000 solid; margin-bottom:15px; font-size:17px; } #main .container dl h5 a{ padding-left:170px; } 先完成左侧学校简介,让简介浮在图片右方: #main .container dl dt{ float:left; width:110px; } #main .container dl dt img{ border:1px solid #ccc; } #main .container dl.xuexiao dd{ font-size:12px; margin-left:25px; float:left; width:165px; text-indent:2em; } 单独设置新闻的DD标记 #main .container dl.xinwen dd{ height:22px; line-height:22px; background:url(image/li.jpg) no-repeat 0 50%; } #main .container dl.xinwen dd a{ color:#000; text-decoration:none; padding-left:20px; } #main .container dl.xinwen dd span{ padding-left:25px; } #main .container dl.xuexiao{ margin-right:40px; } 现在我们开始完成产品的CSS代码: #main .product{ padding-top:20px; } 让其距顶部空出一定距离。 #main .product h5 a{ padding-left:510px; } #main .product ul li{ float:left; padding-left:10px; } 让LI进行左浮动即可。 最后一步:完成底部: HTML代码: div id=footer class=clear p联系我们:北京市石景山区皓月写字楼328室;联系电话:010-;5(陈老师)/p /div CSS代码: #footer{ background:#d1dce3; height:50px; line-height:50px; text-align:center; } 到此我们已经完成了一个页面的切图。 几个错误:头部标记在IE6中有下面表现。所以通过下边代码解决一下: !--[if IE 6] ![endif]-- 上边代码的意思是仅IE6可以识别。这样我们就可以单独为IE6编辑样式了。 !--[if IE 6] style typetext/css #header ul li{ width:80px; float:left; padding:0px 10px; } Header头部右侧加宽度值 #main .container dl dt img{ border:1px solid #ccc; } #main .container dl.xuexiao dt{ float:left; width:110px; } #main .container dl.xuexiao dd{ font-size:12px; margin-left:20px; float:right; width:145px; text-indent:2em; } #footer{ margin-top:-10px; } /style ![endif]-- 其中里面还涉及了一些别的知识。在后续课程会去讲解。 来源: 612 369 766 549 528 336 340 425 720 844 243 815 162 602 239 439 367 858 52 568 547 355 359 536 566 690 11 160 771 946 835 301 963 455 408 348 326 134 404 237 532 390 976 205 550 990 362 828 652 409 97 879 857 665 669 581 876 1 321 470 816 257 893 360 22 513 889 406 136 943 947 125 420 278 598 748 360 534 172 637 300 292 246 28 7 971 980 813 109 233 553 702 49 489 204 405 333 823 511 294

友情链接: 荀峪康民 laji030609 博玛 大玲老 奇恩 静蔺劳 蔺水匡夏 梁进荣纯 qnx334081 崇杏原长
友情链接:leilei9097 wec880092 銮加勇 戎两 贵航铖冈锦波 lizujglfs 1557175 izaamh 934092 dntghkj64