Html/CSS等前端技术
关注
分享
扫一扫
gCodeTop 格码拓普 老师
一线程序代码工作者、教师。格码拓普:http://www.gcode.top
展开
-
前端教学:脚本入门
【代码】前端教学:脚本入门。原创 2024-12-02 15:23:49 · 137 阅读 · 0 评论 -
前端教学:网站布局-1
【代码】前端教学:网站布局-1。原创 2024-11-25 09:33:02 · 108 阅读 · 0 评论 -
前端教学:渐变色背景
【代码】渐变色背景。原创 2024-11-06 09:18:59 · 398 阅读 · 0 评论 -
CSS两种透明方法
【代码】CSS两种透明方法。原创 2023-12-28 23:13:20 · 594 阅读 · 0 评论 -
三角形制作
【代码】三角形制作。原创 2023-12-25 15:09:37 · 400 阅读 · 0 评论 -
伪类和伪元素综合应用Demo
【代码】伪类和伪元素综合应用Demo。原创 2023-12-25 09:40:45 · 430 阅读 · 0 评论 -
Bootstrap Flex 基础测试
【代码】Bootstrap Flex 基础测试。原创 2023-12-12 18:16:43 · 552 阅读 · 0 评论 -
[Html5基础训练]animation的step使用方法
【代码】animation的step使用方法。原创 2023-10-18 22:11:12 · 844 阅读 · 0 评论 -
[Html5基础训练]表格显示
关键技术:CSS伪元素原创 2023-09-26 00:42:14 · 128 阅读 · 0 评论 -
[Html5基础训练]图片显示
【代码】[Html5基础训练]图片显示。原创 2023-09-18 10:09:06 · 230 阅读 · 0 评论 -
背景图片遮罩技术
【代码】背景图片遮罩技术。原创 2023-08-23 16:34:36 · 120 阅读 · 0 评论 -
[AddDemo]jquery的简单应用
原创 2021-10-20 23:15:53 · 95 阅读 · 0 评论 -
boostrap栅格布局Demo
A:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>BlueLayout-1</title> <link href="./bootstrap/css/bootstrap.css" rel="stylesheet" /> </head> <body> <div class=原创 2021-10-19 12:09:47 · 127 阅读 · 0 评论 -
bootstrap 相关Icon资源收集
资源收集:https://icons.bootcss.comhttps://v3.bootcss.com/components/https://www.runoob.com/bootstrap/bootstrap-glyphicons.htmlhttps://www.jb51.net/article/78851.htm原创 2021-04-15 15:14:18 · 83 阅读 · 0 评论 -
Asp.net Mvc4 循环语句参考片段-1
后台C#循环语句及前台Javascirpt循环语句参考片段:@{ ViewBag.Title = "Index"; double[] list = { 90, 80, 70, 60.5, 50.5 }; double sum = 0; double avg = 0; foreach (var item in list) { sum = sum + item; } avg = sum / list.Length;原创 2021-03-15 16:12:19 · 360 阅读 · 0 评论 -
在[360安全卫士]防护的状态下的默认浏览器的设置方法
本设方法特指在[360安全卫士]防护的状态下,如何修改的方法：原创 2021-03-02 12:13:59 · 595 阅读 · 0 评论 -
2024网页设计复习重点题目汇总
重点内容原创 2020-07-22 14:25:54 · 1057 阅读 · 0 评论 -
[Web前端技术教学]CSS中可继承的属性以及无继承性的属性
一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性：width、height、margin 、margin-to原创 2016-10-31 17:26:50 · 1109 阅读 · 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 · 288 阅读 · 0 评论 -
网页设计-2018-12-8 图文混排
原创 2018-12-11 17:09:17 · 1017 阅读 · 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 · 300 阅读 · 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 · 377 阅读 · 0 评论 -
2019-3-30 网页设计教学 表单制作 快速Demo
上节课完善了草稿代码的设计,本节课对上节课内容继续完善:完成CSS具体布局和美化。技术要点包括: 表单元素的水平对齐问题。 表单元素的垂直调整问题。 表单元素的默认界面个性化定制问题。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><ti...原创 2019-03-29 21:57:59 · 278 阅读 · 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 · 194 阅读 · 0 评论 -
网页布局参考收集
https://www.cnblogs.com/best/p/6136165.htmlhttps://www.jianshu.com/p/090ada2f3080https://blog.csdn.net/qq_35503293/article/details/78545188https://blog.csdn.net/lzy15907117519/article/details/79437891...转载 2019-03-30 11:21:23 · 226 阅读 · 0 评论 -
Web字体前端资源
http://www.shejidaren.com/css3-type-inspiration.html----------------------http://hao.shejidaren.com/转载 2019-04-02 19:59:56 · 497 阅读 · 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 · 177 阅读 · 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 · 222 阅读 · 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 · 234 阅读 · 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 · 640 阅读 · 0 评论 -
虽然年龄大了,也要从头学起 MVC JQuery的Ajax应用测试(五)
Index.cshtml 首页 客户端代码:@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> ...原创 2019-05-23 15:28:47 · 205 阅读 · 0 评论 -
2016-6-10 网页设计复习重点
早期试卷:https://blog.csdn.net/vinglemar/article/details/53665158案例重点:https://www.cnblogs.com/exesoft/p/10637860.htmlhttps://blog.csdn.net/vinglemar/article/details/53214625问答题补充:1) 主流浏览器内核私有属...原创 2019-06-10 08:50:50 · 418 阅读 · 0 评论 -
[2019编程]第二节教学大纲:用Asp.net MVC4实现一个简单的加法运算
第一步：用C#,Mvc4创建一个 基本 项目.第二步:创建HomeController.cs,代码如下:using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace MvcAddTest.Controller...原创 2019-07-15 12:09:53 · 547 阅读 · 0 评论 -
网页设计-2018-12-1
创建一个站点,里面有两个文件:SelectorInherit.html,BoxDemo.html任务1:验证选择器的继承问题,代码参考如下:任务2:body中有3个元素,div两个元素,创建2个ID选择器,分别设置这两个盒子的背景及相关尺寸,代码如下: 浏览器预览效果：任务3:修改上面两个选择器,都增加下面的声明,float: left;然后在浏览器预览,...原创 2018-12-01 11:37:24 · 165 阅读 · 0 评论 -
网页设计-2018-11-24
今天主要内容:三个复合选择器今天内容 3个复合选择器:交集选择器 并集选择器 后代选择器优先级:行内样式>ID选择器>Class选择器>Label选择器复合选择器的优先级和ID选择器、Class选择器相当，具体要算权重值.Label选择器:1 Class选择器:10 ID选择器:100课堂抓图:...原创 2018-11-24 09:32:51 · 251 阅读 · 0 评论 -
2018-9至2019-3 Web前端设计备课总目录
https://blog.csdn.net/vinglemar/article/category/8384694https://blog.csdn.net/vinglemar/article/details/52984277原创 2018-11-19 10:01:54 · 211 阅读 · 0 评论 -
[Web前端技术教学]图片与文字混排基础练习-1
实现目标左上角是图片,段落文字环绕图片完整代码<!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/...原创 2016-12-09 11:25:03 · 2234 阅读 · 0 评论 -
[Web前端技术教学]网页布局-基础布局练习-带框的界面铺满整个浏览器
练习目标:带黑框的绿色界面铺满整个浏览器,并随着浏览器的伸缩而伸缩.代码如下:基础大布局<!--html { height:100%;}body { margin: 0px; height:100%; }#father{ background-color: #00FF00; height:100%; border-left: 10px solid #FF原创 2016-12-08 21:49:41 · 1506 阅读 · 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 · 952 阅读 · 0 评论 -
[Web前端技术教学]网页布局-float及负margin技术的再认识-1
[Web前端技术教学]网页布局-浮动技术的再认识-1原创 2016-12-06 10:41:29 · 536 阅读 · 0 评论