2018-9-Web前端设计
关注
分享
扫一扫
gCodeTop 格码拓普 老师
一线程序代码工作者、教师。格码拓普:http://www.gcode.top
展开
-
网页设计-几大CSS选择器
今天的学习重点是4大选择器: 标签选择器 ID选择器 类选择器 伪类选择器 课堂教案抓图: 1.标签选择器: 2.ID选择器: 3.类选择器 4.伪类选择器: 课后作业: 自己设计一个自我介绍的页面.同时使用上述的4种CSS选择器技术. ...原创 2018-11-19 09:23:40 · 471 阅读 · 0 评论 -
2019-3-9 网页设计教学 Table Demo
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Table Demo</title> <style type="tex原创 2019-03-09 09:46:57 · 185 阅读 · 0 评论 -
2019-3-30 网页设计教学 表单制作 快速Demo
上节课完善了草稿代码的设计,本节课对上节课内容继续完善:完成CSS具体布局和美化。 技术要点包括: 表单元素的水平对齐问题。 表单元素的垂直调整问题。 表单元素的默认界面个性化定制问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti...原创 2019-03-29 21:57:59 · 273 阅读 · 0 评论 -
2019-3-23 网页设计教学 Hack 水平居中及表单的初步认识
今天教学两大任务: 1.Hack技术水平居中 2.表单的初步认识: 总结: 1.盒子水平居中可以采用左右margin:auto,或hack水平居中技术. 2.文本水平居中可以采用text-align:center,文本垂直居中方法较多,简单方法是设置line-height值与盒子的高度一致. 3.表单是提交用户数据的容器,容器外的数据不会提交给服务器的.下节课程具体讲述表单. ...原创 2019-03-23 09:28:18 · 190 阅读 · 0 评论 -
Web字体前端资源
http://www.shejidaren.com/css3-type-inspiration.html ---------------------- http://hao.shejidaren.com/转载 2019-04-02 19:59:56 · 487 阅读 · 0 评论 -
javascript及jquery快速入门Demo
做一个加法运算Demo: Demo1: <!doctype html> <html> <head> <meta charset="utf-8"> <script src="jquery-3.4.0.min.js"></script> <title>Div Box Add</title> <s...原创 2019-04-13 17:11:42 · 167 阅读 · 0 评论 -
2019-4-17 Asp.net MVC4 javascript 及jQuery 快速入门Demo
创建一个C#,mvc4,基本 类型项目,添加Home控制器及相应的首页Index.cshtml,其中的代码如下: 知识点: 1.javascirpt简单语法. 2.jQuery的选择器的简单使用. 3.字符串整数之间的转换. ...原创 2019-04-17 21:07:44 · 211 阅读 · 0 评论 -
2019-4-25 Web网页设计 bootstap,flex,grid等技术快速Demo
第一步: 创建一个C#,MVC4,基本 项目,创建三个Action及3个相应的view,完成以下3个测试. Demo1: bootstrap在表格中的应用 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=d...原创 2019-04-27 11:29:01 · 228 阅读 · 0 评论 -
Web前端设计试卷资源收集
https://www.cnblogs.com/jf-67/p/6407763.html https://blog.csdn.net/xm1037782843/article/details/80708533 https://www.cnblogs.com/shenxiaolin/p/5387775.html http://www.bslxx.com/a/mianshiti/tiku/201...转载 2019-05-20 09:43:30 · 633 阅读 · 0 评论 -
[Web前端技术教学]网页布局-居中方法小结
1.利用margin的左右auto <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">...原创 2016-12-06 18:36:29 · 935 阅读 · 0 评论 -
2019-3-2 网页设计教学 图片的两种使用方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met原创 2019-03-02 11:57:10 · 364 阅读 · 0 评论 -
网页设计-2018-11-5
一.课堂教案抓图: 2. 3. 4. 5. 总之,通过上述的样式表,使h2标题文字为红色,使p段落文字为蓝色,是链接 下划线 消失,使列表 默认小圆点 消失. 二.课后作业: 重新设计上次作业,站点的名字叫:MyWeb.里面有 4 个html文件: MyHobby.html:通过无序列表,介绍自己的爱好.通过CSS消除黑点 MyStudy.html :通过标题...原创 2018-11-19 09:42:25 · 151 阅读 · 0 评论 -
网页设计-2018-10-27
1.创建一个站点SecondWeb.里面有4个文件: TitleDemo.html: 实现标题演示. ListDemo.html: 实现列表演示 PicDemo.html:实现图片演示. Index.html:实现链接演示. 2.代码及效果抓图: 课后作业: 自己创建一个站点,名字叫:MyWeb.里面有 4 个html文件: MyHobby...原创 2018-11-19 09:47:14 · 103 阅读 · 0 评论 -
2018-9至2019-3 Web前端设计备课总目录
https://blog.csdn.net/vinglemar/article/category/8384694 https://blog.csdn.net/vinglemar/article/details/52984277原创 2018-11-19 10:01:54 · 202 阅读 · 0 评论 -
网页设计-2018-11-24
今天主要内容:三个复合选择器 今天内容 3个复合选择器: 交集选择器 并集选择器 后代选择器 优先级:行内样式>ID选择器>Class选择器>Label选择器 复合选择器的优先级和ID选择器、Class选择器相当，具体要算权重值. Label选择器:1 Class选择器:10 ID选择器:100 课堂抓图: ...原创 2018-11-24 09:32:51 · 238 阅读 · 0 评论 -
网页设计-2018-12-1
创建一个站点,里面有两个文件:SelectorInherit.html,BoxDemo.html 任务1:验证选择器的继承问题,代码参考如下: 任务2:body中有3个元素,div两个元素,创建2个ID选择器,分别设置这两个盒子的背景及相关尺寸,代码如下: 浏览器预览效果： 任务3:修改上面两个选择器,都增加下面的声明, float: left; 然后在浏览器预览,...原创 2018-12-01 11:37:24 · 161 阅读 · 0 评论 -
网页设计 2018-12-22 动态菜单相对定位演示
课堂教案 抓图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g..原创 2018-12-22 11:23:39 · 279 阅读 · 0 评论 -
网页设计-2018-12-8 图文混排
原创 2018-12-11 17:09:17 · 1009 阅读 · 0 评论 -
2019-3-2 网页设计教学 菜单背景定位和反转
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> ul { list-style-type: none; } li { hei原创 2019-03-02 09:09:00 · 284 阅读 · 0 评论 -
2016-6-10 网页设计复习重点
早期试卷: https://blog.csdn.net/vinglemar/article/details/53665158 案例重点: https://www.cnblogs.com/exesoft/p/10637860.html https://blog.csdn.net/vinglemar/article/details/53214625 问答题补充: 1) 主流浏览器内核私有属...原创 2019-06-10 08:50:50 · 399 阅读 · 0 评论