优课教育HTML+css

网页思路:

在正式编写前，给你的网页结构大致划分出导航栏（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 属性设置元素的上外边距