黑马程序员技术交流社区

标题: 前端基础网页布局及笔记 [打印本页]

作者: Fb肖 时间: 2019-4-20 18:21
标题: 前端基础网页布局及笔记
1、网页开发流程（整体——>局部）
1）分析各个模块，切图
2）了解代码书写规范
3）整体布局
4）详细布局
5）样式处理
6）网页的优化和细节方面的处理
2、如何开发网页
1）div
没有语义性，主要用于布局，独占一行显示
h标题标签; 列表：ul、ol、dl，里面的列:li; 段落：p;
2）CSS
层叠样式表，是一组格式设置规则，主要用于控制WEB页面的外观;
CSS引入方式：

i：标签内书写——>直接在标签里面加style样式：<div style="border:1px solid red">
ii： head头部写入：在head里面加入style标签，然后在style标签里写入样式；

iii：外部引入：在里面加入，引入外部CSS文件；

3）路径
../ 返回当前文件上一级
./ 当前文件所在目录（很少用）
/ 根目录
4）CSS的3种引入方式的使用
1. 标签内书写

优点：优先级最高。
缺点：代码冗余，维护性差，仅个别特殊情况下使用。
2. 头部写入

应用：应用于大型互联网首页；
优点：
相对于单页，代码量少；
相对于标签书写，维护性好；
没有服务器请求压力。
3. 外部引入

优点：

相对整个网站，代码量少；
一个CSS文件可以控制多个页面；
有利于改版和维护；
有效的利用缓存机制，加快页面的访问速度。
缺点：

对于单个页面，会有多余的代码；
有可能会给服务器造成请求压力；
5）CSS重置
reset文件，每次写页面都要把reset加载进去，避免不同的浏览器的显示问题。

6）CSS基础语法
选择器 { 属性：值; 属性：值; }
选择器通常是需要改变的HTML元素
7）CSS自身属性：盒模型

属性值：

width——宽
border——边框
margin——外边距
padding——内边距
属性值的设置方式：

margin-left / margin-right / margin-top / margin-bottom
不同方向值的合并书写情况：

margin/padding:

1个值 4个方向
2个值上下左右
3个值上左右下
4个值上右下左
border: 10px solid red; //四个方向全是红色

border-left: 5px solid green //左边框绿色
border-right: 5px solid blue //右边框蓝色
border-top: 5px solid green //上边框绿色
border-bottom: 5px solid blue //下边框蓝色
盒模型大小的计算：

盒模型宽度：横向margin+横向padding+横向border+width;
盒模型高度：纵向margin+纵向padding+向border+height;
8）CSS选择器：
CSS基本选择器：3种——>优先级：id选择器>类选择器>标签选择器

id选择器: 同一个id名字在页面只允许出现一个，主要用于JS中;
<div id="wrap">乐享</div>
<style>
#wrap {
      border: 10px solid red;
}
</style>
1
2
3
4
5
6
类选择器：同一个类名允许在同一个页面多次出现（类名小写）
<div class="test">乐享</div>
<style>
.test {
      border: 5px solid blue;
}
</style>
1
2
3
4
5
6
标签选择器：HTML中的各个标签
<p>乐享</p>
<style>
p {
      border: 5px solid blue;
}
</style>
1
2
3
4
5
6
9）显示属性float
属性值——float: none / lefe / right
float ——先浮后动（水槽原理）
所有的元素都可以浮动
具有float属性的元素在父标签中是不占空间的
10）背景色
background-color：颜色值(英文单词);
background-colorr：rgb(255,120,133) ;
background-colorr：#ffeedd (6位16进制数); 特例：#ccff33也可写成#cf3
11）附录
关于选择器的使用案例
<!doctype html>
<html>
   <head>
      <meta charset='UTF-8'>
      <title>网页布局与样式入门</title>
      <link rel="stylesheet" type="text/css" href="reset.css">
      <style>
            #wrap {
                  float: left;
                  height: 300px;
                  border: 10px solid red;
            }
            .test {
                  float: left;
                  height: 300px;
                  border: 10px solid green;
            }
            p {
                  float: right;
                  height: 300px;
                  border: 10px solid purple;
            }
      </style>
   </head>
   <body>
      <div id="wrap">乐享</div>
      <div class="test">乐享</div>
      <p>乐享</p>
   </body>
</html>
---------------------

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2