用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——学成网制作
基础教程推荐
猜你喜欢
- 关于居中布局和IE双倍边距bug 2022-10-16
- 「HTML+CSS」--自定义加载动画【025】 2023-10-27
- Jquery serialize()方法使用 2023-08-31
- 使用display:none时隐藏DOM元素无法获取实际宽高的解决方法 2022-11-20
- 关于Ajax中通过response在后台传递数据问题 2023-02-14
- Vue使用svt-sprite-loader自动引入svg图标 [自己遇到的问题解决] 2023-10-08
- jquery.qrcode.js生成二维码并转成图片格式 2022-10-29
- vue keep-alive以及activated,deactivated生命周期的用法 2023-10-08
- 如何使用JavaScript获取扫码枪扫码数据,执行相应的操作 2023-08-29
- ajax三级联动实现代码 2023-02-01