计算机科学与技术专业方红琴—网页设计基础.pdf

网页设计基础课程导论 主讲:方红琴 电子邮件: 54591478@qq.com 手机/微信: 15810989589 一、网页中有什么？ 一、网页中有什么？ 一、网页中有什么？ 一、网页中有什么？ 1.网页的内容 文字 图片 视频 动画 2.网页的布局 网页的布局比网页的内容更重要。 网页的布局实例：禅意花园 3.网页中的动态功能 例如：导航菜单、验证、动态显示图片等 二、本课程学习的内容 网页的内容 网页的布局 本课程学习的内容： HTML：网页的内容。 CSS：网页的布局。 JavaScript：网页的动态 功能。 网页的动态功能 三、考核方式 平时成绩： 项目 考勤 作业 课堂表现 实验/ 上机考试 平时成绩 比例 （%） 10% 30% 10% 50% 100% 项目 平时成绩 期末综合作业 期末总评成绩 比例 （%） 70% 30% 100% 期末总评： 四、学习资源 http://www.runoob.com/html/html-tutorial.html 菜鸟教程 http://www.w3school.com.cn/ 在线教程 http://www.csszengarden.com/ 禅意花园 https://www.bilibili.com/video/BV14J4114768?from=search &seid=15193638517568535039 黑马程序员前端入门教程 谢谢大家！ THANKS 第一部分 HTML 第1章 HTML的基本概念 一、HTML的概念 HTML：是超级文本标记语言（HyperText Markup Language ）的缩写，它通过标记符号来标 记要显示的网页中的各个部分。 二、HTML文档的基本结构

我是小新！这是我制作 的第一个网页！

欢迎新生入校！

-

标签进行定 义的。 p

定义最大的标题。

定义最小的标题。 2、段落 p

标签用于定义段落。 3、换行（折行） p
标签用于希望在不产生一个新段落 的情况下进行换行（新行）。 一、文本标签 4、超链接 链接文本5、水平线

---

标签用于创建水平线。 6、注释 二、图片标签 其中： p img：插入图片的标签。 p src：指定图片的来源。 p alt：为图像定义一串预备的可替换的文本。 p width：指定图片宽度。 p height：指定图片高度。 三、列表 1、无序列表

标签用于定义无序列表。
< li>Coffee< li>Milk< /ul>2、有序列表
标签用于定义无序列表。
< li>Coffee< li>Milk< /ol>四、表格

月份	工资
一月	5800
二月	5780

p : 定义表格的行。 p : 定义表头。 p < td>: 定义表格的单元格。 四、表格 设置表格的高度、宽度和边界 属性 单位 相关的元素 border px table height px/% table、tr、td、th width px/% table、tr、td、th 四、表格 设置表格的高度、宽度和边界 • ••••••••••••

手机	笔记本	电脑硬件
数码相机	MP3	闪存

• 四、表格 设置表格的背景 属性 相关元素 实例 background bgcolor table、tr、td、 五、容器元素 1、
元素 div 元素是用于对 HTML 元素分组的块级元素。 每个块级元素都独占一行。 通常使用

元素结合CSS来设定元素的格 式（布局）。 五、容器元素

元素 五、容器元素 2、元素 span元素称为行内元素。所有行内元素都会 一个接一个排列，超出一行则自动换行。 使用块级元素和行内元素布局的方式称为流 式布局。 谢谢大家！ THANKS 第一部分 HTML 第3章 表单标签 一、表单 一、表单 这些都是具有交互性的网页，其中有一个 重要的元素就是表单，即

。 二、表单标签 …… 会员名:密码： …… 表含输入项的表单 二、表单标签 < form>元素的属性 属性 值 描述 action URL 指定表单数据提交的位置 method get post 指定发送数据时使用的HTTP方 法 二、表单标签 < form>元素中可以包含以下元素：<select>三、input标签<form name="form1" action="" method="post">用户名:<input type="text" value="小新" size="10" name="uname"></form> type= “button/checkbox/password/radio/reset/submit/text" 三、input标签 <input type="text"><form name="form1" action="" method="post">用户名:<input type="text" value="小新" size="10" name="uname"></form><input type="password"><form name="form1" action="" method="post">密码:<input type="password“ size="10" name="uname"></form>三、input标签<input type="radio"><form name="form1" action="" method="post">性别:<input type="radio" name="sex" value="male“ checked="checked" >男 <input type="radio" name="sex" value="female">女</form>三、input标签<input type="checkbox"><form name="form1" action="" method="post">爱好：<input type="checkbox" name="chk1" value="jy" >郊游<input type="checkbox" name="chk2" value="run" checked="checked">跑步<input type="checkbox" name="chk3" value="swim" >游泳<input type=“checkbox” name=“chk4” value=“football” ></form>三、input标签<input type="button/submit/reset"><form name="form1" action="" method="post"><input type="submit" name="submit" value="登录"><input type="reset" name="reset" value="重填"><input type="button" name="btn" value="普通按钮" onclick="javascript:alert('这是个普通按钮')"></form>四、textarea标签<textarea><form name="form1" action="" method="post"><textarea name="textarea" cols="60" rows="10"> 本服务协议双方为浙江淘宝网络有限公司 （下称“淘宝”）与淘宝网用户，本服务协议 具有合同效力。 本服务协议内容包括协议正文 及所有淘宝已经发布的或将来可能发布的各类 规则。 五、select标签

请选择月份：一月二月三月四月 六、表单示例 表单实例 谢谢大家！ THANKS 第二部分 层叠样式表CSS CSS入门 2.1 CSS入门 教学内容： CSS简介。 使用CSS的3种方法。 各种CSS选择器。 CSS选择器的优先关系。 一、CSS简介 CSS全称为“层叠样式表 （Cascading Style Sheets）”。 CSS主要是用于定义HTML页面文本的样式、图片的外观 以及版面布局等。 内容 （HTML） 样式和布局 （CSS） 行为 （JavaScript） 二、CSS的语法规则 属性名 属性值 选择器 属性 属性名 属性值 属性 常见CSS属性 指明样式作用于网 页中的哪些元素 三、使用CSS的3种方法 行内式 嵌入式 外联式 三、使用CSS的3种方法 （1）行内式 将CSS代码直接写在现有的HTML标签中。 三、使用CSS的3种方法 （2）嵌入式 把CSS样式代码写在style标签中，并将其整体 放在head标签内。 head标签 style标签 CSS代码 三、使用CSS的3种方法 （3）外联式 把CSS代码写一个单独的外部文件中，这个CSS样式 文件以css为扩展名。 在head标签内使用link标签链接CSS样式文件。 head标签 link标签 讨 论 问题一：如果3种使用CSS的样式产生冲突，会 有什么结果？ 问题二：如果父元素和子元素使用CSS的样式产 生冲突，会有什么结果？ 就近优先原则： 行内式 > 嵌入式 > 外联式 子元素样式>父元素样式 四、CSS选择器 选择器：指明{}中的样式作用于网页中的哪些元素。 1. 基础选择器 基本选择器 表示方法 id选择器 #id名 . 类选择器 .类名 标签选择器 标签名 通配符选择器 * 四、CSS选择器 （1）id选择器 id选择器的符号为“#”。 id选择器类似于身份证号码，在一个页面中是唯一的，不 可重复的！ 元素和id是一对一的关系： 一个标签上只能有一个id属性值 一个id选择器只能选中一个标签 四、CSS选择器 （2）类选择器 类选择器的符号为“.”。 类名可以由数字、字母、下划线、中划线组成，但不能以 数字或者中划线开头。 一个元素可以同时有多个类名，类名之间以空格隔开。 四、CSS选择器 （3）标签选择器 标签选择器直接使用标签名即可。 标签选择器可以选中页面中全部标签。 四、CSS选择器 （4）通用选择器 用于匹配html中所有标签元素，用“*”表示。 注意事项： 不推荐使用*通用选择器。 四、CSS选择器 2. 关系选择器 关系选择器 表示方法 直接子元素 父元素选择器>直接子元素选择器 后代 父元素选择器 后代元素选择器 相邻兄弟 选择器+相邻兄弟元素选择器 分组选择器 选择器1,选择器2,选择器3 此处为 空格 四、CSS选择器 （4）选择器权值规则 选择器对应权值：标签为1，类选择符为10，id选择符为100。 当权值相同时，其优先级遵循就近原则。 可以使用!important为某些样式设置具有最高权值。 p{color:red!important;} p{color:green;} 注意：!important要写在分号的前面。 五、CSS的注释 CSS注释格式： 第二部分 CSS 段落和文字样式 一、文字排版 （1）字体 body{ font-family:arial; } body{ font-family:"Microsoft Yahei"; } 当一个字体名中有一个或多个空格，或者包括 # 或 $ 之类的符号时，需要在 font-family 声明中加引号。 一、文字排版 （2）字号和颜色 body{ font-size:12px; color:#666 } （4）斜体 a{ font-style:italic; } （3）粗体 p{ } font-weight:bold; 一、文字排版 （5）下划线 p{ text-decoration:underline; } （6）删除线 .oldPrice{ text-decoration:line-through; } 二、段落排版 （1）缩进 p{ } （2）行间距 p{ text-indent:2em; } line-height:1.5em; （3）字间距（中文和字母间距） （4）词间距 p{ } p{ letter-spacing:50px; } word-spacing:50px; 二、段落排版 （5）对齐 p{ } text-align:center; 三、长度单位 em :相对长度单位。相对于当前对象内文本的字体 尺寸。 px :像素。 四、颜色值 十六进制颜色的形式为#RRGGBB，其中的 RR（红色）、 GG（绿色）、BB（蓝色）。十六进制整数规定了颜色 的成分，所有值必须介于 0 与 FF 之间。 p { background-color:#0000ff; } 第二部分 CSS 盒子模型 一、元素的分类 （1）块级元素 a{ display:block; } 每个块级元素独占一行。 元素的高度、宽度、行高以及顶和底边距都可设置。 常用的块状元素：

、

、

...

、

、
、

、

、
、

、

一、元素的分类 div{ （2）行内元素 } display:inline; 所有行内元素一个接一个排列。 元素的高度、宽度及顶部和底部边距不可设置。 元素的宽度就是它包含的文字或图片的宽度， 不可改变。 常用的内联元素： 、、
、、、、、、、、 一、元素的分类 （3）行内块级元素 所有行内块级元素一个接一个排列。 元素的高度、宽度、行高以及顶和底边距都可 设置。 常用的内联块状元素： 、 a{ display:inline-block; } 二、盒子模型 现实中的盒子 CSS的盒子模型 二、盒子模型 二、盒子模型 （1）边框 边框指围绕着内容及补白的线，可以设置它的 粗细、样式和颜色（的边框三个属性） 。 border-style（边框样式）。常见样式有dashed （虚线）| dotted（点线）| solid（实线）。 border-color（边框颜色）。可设置为十六进制 颜色。 border-width（边框宽度）。通常用像素（px） 做单位，也可以设为thin | medium | thick（但不 是很常用。 二、盒子模型 border使用注意事项： 可以采用简写的形式设置border。 border:2px dotted #ccc; 可以只对某个方向的border进行设置。 border-bottom:1px dotted #ccc; 二、盒子模型 （2）填充和边界 填充：指元素内容与边框之间的距离，用padding 来设置。 边界：指元素与其他元素之间的距离，用margin来 设置。 margin:20px; padding:10px; 二、盒子模型 可以只对某个方向的边界、边框和填充进行设置。 margin-bottom:10px; 如果对四个方向的边界、边框和填充进行设置， 可以采以下简略的形式： margin: 20px 10px 5px 10px; 如果边界、边框和填充的左右方向相同，则可以 采以下简略的形式： margin: 20px 10px 30px ; 如果边界、边框和填充上下方向相同，左右方向 相同，则可以采以下简略的形式： margin: 20px 10px; 三、盒子的类型 .box{ 内容盒子： box-sizing:content-box; } width: 100px; height: 100px; border: 2px solid red; margin:10px; padding:10px; 边框盒子： box-sizing:border-box; 第二部分 CSS CSS小技巧 一、使用border-collapse规则实现细线表格 （1）border-collapse 值 描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 二、居中问题 目标 方法 块级元素本身水平居中 margin:10px auto; 行内元素、行内块级元素本 身居中 外面添加一个块级元素，在块级元素 上设定：text-align:center; 文本居中 text-align:center; 三、外边距合并现象 1. 相邻元素之间垂直外边距会合并。 解决方案：根据需要增加外边距的大小 2. 嵌套元素的垂直外边距会出现塌陷的情况。 解决方案：在父元素中使用overflow:hidden规则。 四、圆角边框设置 1. 使用border-radius设置圆角边框 四、圆角边框设置 2. 几种特殊的圆角边框 圆形：正方形边框，border-radius为边长的一半。 圆角矩形：长方形边框，border-radius为高度的一半。 四、圆角边框设置 2. 几种特殊的圆角边框 可以分别设置不同的圆角。 五、设置盒子和文字阴影 设置盒子阴影： 课外练习：https://www.w3school.com.cn/tiy/t.asp?f=eg_css3_image_gallery 设置文字阴影： 六、图片底侧空白解决方案 第二部分 CSS 浮动 一、布局模型 CSS包含3种基本的布局模型： （1）流动模型（Flow） （2）浮动模型 (Float) （3）层模型（Layer） 二、流动模型 块状元素都会在所处的包含元素内自上而下按顺 序垂直延伸分布。块状元素都会以行的形式占据 位置。标签div，h1，p是块状元素。 内联元素都会在所处的包含元素内从左到右水 平分布显示。内联元素不会独占一行。标签a、 em、span、strong都是内联元素。 二、浮动模型 任何元素在默认情况下是不能浮动的，但可以用 CSS 将其定义为浮动。 定义浮动的形式如下： float:left; 或： float:right; 浮动的元素会脱离普通的文档流， 并空出原来的位置。 二、浮动模型 任何浮动的元素会脱离普通的文档流，并空出原 来的位置。 如果同级元素都设置相同的浮动属性，这些盒 子可以在一行显示。 任何元素都可以浮动。不管原先是什么模式的 元素，添加浮动之后具有行内块元素相似的特 性。 三、浮动的应用 （1）父元素标准流，子元素浮动 三、浮动的应用 （2）多元素水平排列 父元素标准流，子元素浮动 三、浮动的应用 （3）常见网页布局一 三、浮动的应用 （4）常见网页布局二 四、清除浮动 父元素overflow。 额外标签清除浮动。 伪元素清除浮动。 双伪元素清除浮动。 五、层模型 第二部分 CSS 布局之定位 一、层模型的概念 层布局模型就像是图像软件PhotoShop中非常流 行的图层编辑功能一样，每个图层能够精确定位 操作，通常用于局部定位 。 层模型有以下3种形式：绝对定位(position: absolute)、相对定位(position: relative)和固定定 位(position: fixed)。 二、定位的类型 （1）绝对定位 position:absolute。 绝对定位将元素从文档流中拖出来，然后使 用left、right、top、bottom属性参照于其最 近的一个具有定位属性的父包含块进行绝对 定位。 如果不存在这样的包含块，则参照于body元 素。 二、定位的类型 （2）相对定位 position:relative。 相对定位将元素相对于以前的位置移动，此元 素像图层一样浮动了起来。 移动的方向和幅度由left、right、top、bottom 属性确定。 偏移前的位置保留不动。 二、定位的类型 （3）固定定位 position:fixed。 固定定位与absolute定位类型类似，但它的相对 移动的坐标是浏览器的可见窗口。 由于浏览器可见窗口本身是固定的，元素的位 置不会随浏览器窗口的滚动条滚动而变化。 二、定位的类型 使用固定定位将元素固定到版心右侧 二、定位的类型 （4）粘性定位 position:sticky。 以浏览器的可见窗口为参照点移动元素。 元素占有自己原来的位置 。 必须添加top、bottom、left、right中的某个属性 才有效。 跟页面滚动配合使用，兼容性差，IE不支持。 三、定位的堆叠顺序 在使用定位布局时，可能会出现盒子重叠的情况。此时， 可能以使用z-index属性来控制盒子的前后次序（z轴）。 z-index:3。 数值可以是正整数、负整数或0，数值越大，盒 子越靠上。 四、定位的具体应用 （2）父元素相对定位，子元素绝对定位 四、定位的具体应用 （1）绝对定位盒子水平垂直居中 第二部分 CSS 学成在线页面布局 一、素材和工具 （1）页面中需要使用的图片。 （2）开发和调试工具：VS Code和Chrome浏览器。 二、开发准备 采用结构和样式分离的模式： （1）创建study根目录——项目目录。 （2）在study目录中创建images目录，用于存放文件。 （3）创建首页文件index.html文件（网站的首页文件都 为index.html）。 （4）创建style.css样式文件。 （5）将style.css样式文件引入index.html页面。 （6）样式表写入清除内外边距的样式，测试样式表是 否引入成功。 三、CSS书写顺序 尽量遵循以下书写顺序： （1）布局定位属性。 float/position/display/clear/visibility/overflow （2）自身属性。 width/height/margin/padding/border/background （3）文本属性。 color/font/text-decoration/text-align/vertical-algin （4）其他属性（CSS3）。 content/border-radius/box-shadow 四、页面布局整体思路 （1）确定页面的可视区的样式，即版心样式。 （2）分析页面中的行模块。 （3）确定每行的列模块。列模块通常采用浮动布局， 先确定列的大小，再确定列的位置。 （4）制作HTML结构。遵循先有结构，后有样式的原 则。 页面的结构永远是最重要的。 五、学成在线页面布局 1、确定版心宽度及居中。 五、学成在线页面布局——header部分 （1）header整体布局。 1号盒子：版心盒子header，1200*42，水平居中，上下 margin 为30px。 2号盒子：logo。 3号盒子：nav导航栏。 4号盒子：search搜索框。 5号盒子：user个人信息。 里面的4个盒子浮动。 五、学成在线页面布局——header部分 （2）logo区域 图片外面使用div标签。 div负责使用布局，img负责图片显示。 五、学成在线页面布局——header部分 （3）导航部分 p 导航的常规做法：使用li包含链接的方式。 p 使用浮动及margin确定导航的位置。 p 使用导航内部的每个li浮动，水平显示。 p 设置a标签的高度，大小，颜色、行高等。 ——最好使用padding撑开盒子，而不是给定具体宽度。 五、学成在线页面布局——header部分 （4）搜索部分 search大盒子里面包含2个表单。 两个行内块级元素之间会有间隙， 可以将其浮动消除间隙。 五、学成在线页面布局——header部分 （5）个人信息 图片和文字居中对齐。 五、学成在线页面布局——banner部分 （1）banner整体布局。 1 3 2 4 1号盒子：通栏的大盒子banner，只设置高度和背景。 2号盒子：版心，水平居中对齐，设置背景图片。 3号盒子：左浮动，导航栏subnav。 4号盒子：右浮动，课程course。 五、学成在线页面布局——banner部分 （2）subnav布局。 subnav：宽、高、背景、浮动。 li：高、行高、左右padding。 a:字体颜色、大小。 a>span:右浮动 五、学成在线页面布局——banner部分 （3）course布局。 h2 div.bd course：宽、高、背景颜色、浮动，上外 边距。 bd：内边距。 li：下边框、上下内边距。 a：边距、字体颜色大小、居中。 五、学成在线页面布局——精品推荐部分 （1）整体布局。 大盒子：精品推荐goods，设置阴影。 1号盒子：h3，左浮动。 2号盒子：链接左浮动，利用内边距控制盒子的间距。 3号盒子：右浮动，修改modify。 

相关文章

相关文档

热门文档

• 中华人民共和国民法典.pdf
• 中华人民共和国安全生产法.pdf
• 附件3西安市义务教育招生入学信息审核登记表.docx
• 附件：思明区公开招聘非在编聘用人员报名表.doc
• 《固定资产等资产基础分类与代码》国家标准（GBT 14885-2022）.pdf
• 中华人民共和国公司法(2018修正).pdf
• 城乡居民基本医疗保险参保登记表.doc
• 《广东省事业单位公开招聘人员报名表》.doc
• 黑龙江省建筑工程资料管理标准
• 《浙江省河湖健康及水生态健康评价指南（试行）》.pdf

最新文档

• 报名表下载.docx
• 报名表下载.docx
• 附件2.2020年度所局级领导人员职务变动工资审批表.xls
• 附件1.2021年度所局级领导人员薪级工资正常晋升审批表.xls
• 人事代理单位2021年度接收高校毕业生人选名单.xls
• 中国科学院2022年度京区事、企业单位接收高校毕业生人选名单.xls
• 新建机构人员到位情况表.xls
• 中国科学院异地交流任职领导干部专项补助申请表.doc
• 共青团中国科学院委员会关于做好2018年度团内统计工作的通知----中国科学院群团工作.docx
• 个人所得税专项附加扣除信息表.xls

关于我文库协议免责声明意见反馈站点地图

  Copyright © 2020-2025 秦岭文库 All Rights Reserved.  

陕ICP备2021014483号-2

×

信息