用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——学成网制作


基础教程推荐
- 将数据库描述字符串转换为PHP中的html代码 2023-10-26
- 关于 html:带有可选侧边栏的流动内容 div 2022-09-21
- Ajax写分页查询(实现不刷新页面) 2023-01-31
- 关于css:如何在离子中心对齐的标题上添加图标 2022-09-21
- 如何使用CSS3画出一个叮当猫 2022-11-16
- Ajax验证用户名实例代码 2022-12-28
- 利用相对定位及偏移量做精美输入界面 2022-10-16
- ajax动态查询数据库数据并显示在前台的方法 2023-02-22
- Vue路由组件传参 2023-10-08
- 初探 vite2 + vue3 2023-10-08