传智播客网页平面设计学院主体部分左部分制作
我们昨天了解了一下marquee制作滚动条。
然后今天制作一下大概的主体部分
今天我们尝试着制作一下
html：
dlclass="module"dtspan/span示范专业建设模块i/i/dtddullispan/spanahref="#"人才培养/a/lilispan/spanahref="#"课程体系/a/lilispan/spanahref="#"教学改革/a/lilispan/spanahref="#"实习实训/a/lilispan/spanahref="#"师资队伍/a/lilispan/spanahref="#"校企互联/a/lilispan/spanahref="#"示范效应/a/lilispan/spanahref="#"more/a/li/ul/dd/dl
css样式如下：
.moduledt{height:30px;background-color:#;border-left:5pxsolid#FD4A13;color:#FFF;font-weight:bold;line-height:30px;padding-left:15px;position:relative;}.moduledtspan{width:11px;height:11px;display:block;background:url(../img/icon_bg.gif)no-repeat0-60px;vertical-align:middle;margin-top:10px;float:left;margin-right:5px;}.moduledti{position:absolute;width:16px;height:8px;left:45px;top:30pxbackground:url(../img/icon8.gif)no-repeat;}.moduledd{padding:28pxpx15px;background:url(../img/bg_tw.png);overflow:hidden;}.moduleddli{float:left;width:97px;height:24px;background-color:#e4e4e4;margin:08px8px0;text-align:center;line-height:24px;position:relative;}.moduleddlispan{width:6px;height:6px;background-color:#c1c1c1;position:absolute;top:4px;left:4px;overflow:hidden;}
效果如下：
观察上面效果图，我们制作上面方法和下面基本相似。
html：
dlclass="job"dtspan/span招聘信息/dtddullispan/spanahref="#"北京石和信息科技招聘UI设计/a/lilispan/spanahref="#"上海微网络科技招聘前端工程师/a/lilispan/spanahref="#"永特互动网络公司招聘前端工程师/a/lilispan/spanahref="#"北京兰彩虹科技招聘UI设计实习生/a/lilispan/spanahref="#"上海易网络科技招聘JS前端工程师/a/li/ul/dd/dl
css样式如下：
.job{margin-top:15px;}.jobdt{height:30px;border:1pxsolid#d6d6d6;border-bottom:1pxsolid#;background:url(../img/title_bg.gif)repeat-x;font-weight:bold;line-height:30px;}.jobdtspan{width:17px;height:14px;float:left;display:inline;background:url(../img/icon_bg.gif)no-repeat0-15px;margin:8px7pxpx;}.jobdd{padding:20pxpx;}.jobli{height:20px;margin-bottom:5px;background:url(../img/icon_bg.gif)no-repeat-60px-27px;padding-left:20px;}
我们看一下效果图试一下
那么我们今天的基本就制作完了。
一些同学不知道怎么清楚浏览器样式，重置样式代码如下：
/*重置浏览器默认样式*/body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img{margin:0;padding:0;border:0;list-style:none;}/*全局控制*/body{font-family:Arial,Helvetica,sans-serif,"宋体";font-size:12px;}a{text-decoration:none;}
我一般喜欢这样写：
/*重置浏览器默认样式*/body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img{margin:0;padding:0;border:0;list-style:none;}/*全局控制*/body{font-family:Arial,Helvetica,sans-serif,"宋体";font-size:12px;}a{text-decoration:none;}
每个人都有每个人的书写形式。
本篇文章有需要整改的地方可以在评论区提提意见。
学习编程一小时
小编｜SYT
素材来源于生活
lovrui