用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——学成网制作
猜你喜欢
- ajax实现文件异步上传并回显文件相关信息功能示例 2023-02-15
- 纯vue3实现的svg可视化web组态编辑器。主要用于物联网mqtt实时系统图 2023-10-08
- 使用fileReader的一个坑及解决 2023-08-11
- 往xml中更新节点的实例代码 2023-01-20
- HTML怎么设置下划线?html文字加下划线方法 2022-09-21
- 最新JS正则表达式验证邮箱和手机号实例(2022) 2022-10-21
- vue项目遇到布署服务器后刷新404问题解决方案 2023-10-08
- 使用FormData进行Ajax请求上传文件的实例代码 2023-02-23
- 常用正则表达式全部符号解释 2023-09-13
- Vue:三种情况下的生命周期执行顺序 2023-10-08