网页思路:
在正式编写前,给你的网页结构大致划分出导航栏(nav)、内容(content)、底部(footer)等div布局
布局好之后,再在CSS文件中,完整详细的补充div盒子的宽、高、背景颜色等样式。由于网页的元素分为内联元素和块状元素,有时候适当的使用display属性转换。
其实不管是框架还是内容每一个都可以看成盒子布局
网页大致布局好之后,再填充详细完成里面的元素样式。
里面内容也是建议分块布局写内容,再在CSS文件中编辑样式,
再分块布局再编辑样式…
效果图:
导航栏效果:
导航栏代码实现:
HTML:
CSS:
由于每个浏览器的问题,网页与浏览器会有一定的边距。我比较习惯在CSS布局里像这样设置,就解决了这个问题。
margin:0 padding:0
导航对于一个网站来说,起到重要的引导作用。
创建水平导航栏,可以使用inline和float两种方式
将列表项设置为内联元素
默认情况下,<li>
元素是块元素。 在这里,我们删除每个列表项之前和之后的换行符,以将其显示在一行上
创建水平导航栏的另一种方法是浮动<li>
元素,并为导航链接<a>
指定布局
background-image:设置需要显示背景图片
中间内容栏效果:
导航栏代码实现:
HTML:
CSS:
注:这一步我们分为6个盒子进行排版布局,在大盒子装放小盒子进行排版设置盒子内容大小,中间文字部分移动上去可以改变背景颜色:background-color 属性设置元素的背景颜色。:hover 选择器用于选择鼠标指针浮动在上面的元素。
width和height:内容的宽度、高度(不是margin:外边距。
热门课程页面:
HTML:
CSS:
注:分4个div div里装 图片 文字 与超链接进行划分排版
然后设置css中qj 内容的宽高以及颜色与内边距
内边距解释如下:
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
版权页面效果图:
HTML:
CSS;
注:使用id选择器进行编辑内容 用p标签进行段落划分,设置内容宽与高,和文字大小,与字体颜色和背景颜色
text-align 属性规定元素中的文本的水平对齐方式。
padding-top 属性设置元素的上内边距
margin-top 属性设置元素的上外边距