Web前端基础(三):网页布局与样式入门
2018-01-26 16:36
597 查看
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文件可以控制多个页面;
有利于改版和维护;
有效的利用缓存机制,加快页面的访问速度。
缺点:
对于单个页面,会有多余的代
4000
码;
有可能会给服务器造成请求压力;
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>
类选择器:同一个类名允许在同一个页面多次出现 (类名小写)
<div class="test">乐享</div> <style> .test { border: 5px solid blue; } </style>
标签选择器:HTML中的各个标签
<p>乐享</p> <style> p { border: 5px solid blue; } </style>
9)显示属性float
属性值——float: none / lefe / rightfloat ——先浮后动(水槽原理)
所有的元素都可以浮动
具有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>
相关文章推荐
- Web基础入门(表格)-使用表格嵌套的形式制作一个简单的网页布局
- 前端基础2——CSS基本样式修饰、网页布局
- [Web前端技术教学]网页布局-基础布局练习-带框的界面铺满整个浏览器
- web前端基础学习入门篇(三)
- Web前端工程师知识体系大全,Web前端入门基础体系
- web前端基础入门学习第三天css
- web前端基础知识及快速入门指南
- 【web基础3】让网页处理你的数据怎么样?---前端处理
- 【最详细的Web前端入门视频】小腿基础教学
- 【麦子学院】02.web前端开发之HTML+CSS基础入门
- Web前端开发css基础样式总结
- web前端如何让网页布局稳定性和标准性?
- web前端入门知识笔记——html基础(传智播客)
- web前端入门知识笔记——html基础(传智播客)
- Android基础入门教程——7.5.6 WebView处理网页返回的错误码信息
- 小白入门---WEB前端基础
- web前端如何让网页布局稳定性和标准性
- web前端入门:javascrip基础知识
- [Web前端技术教学]网页布局-float及负margin技术的再认识-1
- Android基础入门教程——7.5.1 WebView(网页视图)基本用法