沃梦达 / IT编程 / 前端开发 / 正文

HTML——学成网制作

用H5和C3制作一个学成在线的首页※学成在线的页面可以看出学成在线所有板块都在同一版心下,因此我们用一个统一类名.w定义版心,需要调用时再调用即可.w {width: 1200px;margin: auto;}一、头部header制作header...

用H5和C3制作一个学成在线的首页

※学成在线的页面


可以看出学成在线所有板块都在同一版心下,因此我们用一个统一类名.w定义版心,需要调用时再调用即可

.w {
    width: 1200px;
    margin: auto;
}

一、头部header制作

header引用版心.w,设置42px的高度和30px的上下外边距,里面的元素放入4个盒子,用浮动和外边距进行排版。
①.logo给它一个宽高,左浮动。
②.nav左浮动,60px左外边距,不给宽度,以后方便加内容。里面放3个li,li里3个超链接a,也不设置宽度,用padding把盒子撑开,这样可以实现点击盒子而不仅仅点击文本。
③.search给他一定的400px宽和42px高,左浮动,左外边距60px。里面分为两个盒子,左边搜索框350px宽,边框1px,颜色#00a4ff,去除右边框,里面的文字左内边距20px;右边按钮宽度50px,去除默认边框。
④.user直接给图片和文字,右浮动,右外边距35pxÿ

本文标题为:HTML——学成网制作