【小白学前端】一周学会HTML+CSS+Bootstrap

最新推荐文章于 2023-01-09 10:08:01 发布
原创 最新推荐文章于 2023-01-09 10:08:01 发布 · 520 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #css3

本文介绍了前端开发的基本概念，包括前端在B/S结构中的角色和重要性。前端主要由HTML、CSS和JavaScript三大技术支撑，分别负责页面内容展示、样式美化和交互功能。课程内容涵盖了一系列使用这三种技术实现的实战项目，旨在提升前端开发技能。

什么是前端？

在C/S为天下时，B/S悄然兴起，经过数十年的战斗，B/S将C/S打倒在地进行摩擦。
这就迫使现今的软件程序员不得不努力学习B/S的结构以适应市场和企业的需求。
而B/S结构程序中把内容一分为二，前面的叫前端，后面的叫后端。前端负责展现给用户看，而后端负责程序背后的逻辑运算加工等。
前端既然是展示给用户的，其重要性不言而喻，那句话怎么讲？客户是上帝嘛。所以前端成为每个程序员必备的技能，哪怕你是后端程序员，前端也不可或缺。

前端技术主要有3个技术支撑：HTML、CSS、JavaScript

HTML负责页面展示图文
CSS 负责美化页面
JavaScript负责页面交互和前后台的通讯

课程内容

day01-1 化腐朽为神奇-CSS实现书皮带阴影效果
day01-2 化腐朽为神奇-HTML+CSS3实现永和小票
day01-3 化腐朽为神奇-HTML+CSS3实现电影票

day02-1 化腐朽为神奇-HTML+CSS3实现圆头像
day02-2 化腐朽为神奇-利用CSS实现导航菜单效果
day02-3 化腐朽为神奇-利用CSS实现课程页效果
day02-4 化腐朽为神奇-HTML+CSS3实现旋转地球
day02-5 化腐朽为神奇-H5-播放音频视频
day02-6 化腐朽为神奇-Bootstrap实现表单美化

day03-1 化腐朽为神奇-JavaScript实现动态表单-操作DOM树

前端--第一周学习总结
weixin_52020632的博客
12-12 684
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markd
《前端框架开发技术》HTML+CSS+JavaScript 制作个人简历模板
专注于dreamweaver网页设计制作
08-19 1100
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
前端学习一周的内容总结
m0_48542393的博客
02-13 359
前端初期学习内容框架的总结：包括 HTML5 常用标签；CSS的引入样式和；一些常用的属性和核心属性
一周前端学习历程 分享一下&求指教
time, space, vain
03-04 2200
最近用了1个星期的时间来学习html5,css3和js,学的当然不够系统，感触比较深的就是要想快速提高编程能力，多写代码和选择一本好书同等重要。    我身边有许许多多的人整天就抱着一门语言的教程，厚的如同字典，翻来覆去的看啊看(大一的时候我也曾经这样过)，到头来问他们学的什么几乎都忘记了，不仅消耗了大量的时间，关键还做了无用功。    关于html和css的学习建议在http://w
学习前端第一周
qq_27119961的博客
05-06 244
看完了HTML和一部分CSS，感觉自己对前端还是挺有兴趣的，就先去做了实验，没有将CSS看完，由于刚看，仍然不够熟练，在练习做网页时不能够灵活运用，例如不知道应该在什么时候使用类，有些属性不能在合适地方使用，都是因为不够熟练。<!--...-->定义注释。<!DOCTYPE>定义文档类型。<a>定义锚。<abbr>定义缩写。<a...
个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)
qq_365392777
08-09 7639
HTML期末大作业课程设计游戏主题html5网页~响应式游戏网站(HTML+CSS+Bootstrap) ~个人设计web前端大作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能...
基于HTML+CSS+JS+Bootstrap+python的微电网能量管理系统源码（前端+后端）.zip
最新发布
10-24
基于HTML+CSS+JS+Bootstrap+python的微电网能量管理系统源码（前端+后端）.zip 【资源说明】 1.项目代码完整可靠，谈不上高分、满分(多数为夸大其词），但难度适中，满足毕设、课设要求，属于易上手的优质项目，资源...
精选资源
HTML+CSS+Javascript+H5C3+响应式web设计+Bootstrap--思维导图
04-08
内容概要：思维导图涵盖知识包括HTML+CSS+Javascript+H5C3+响应式web设计+Bootstrap，每个模块包括基础知识点，还有一些注意点，介绍仔细，某些知识点会有图解，代码，以及本人学习过程的笔记。 适合人群： 比较...
用HTML+CSS做一个漂亮简单的轻量级图片相册博客网站(web前端期末大作业)
html精品源码
08-12 2617
👩‍🔬个人博客网站、👨‍🔬个人主页介绍、个人简介、个人博客设计制作 、等网站的设计与制作。🏷️ 大学生个人HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+J.........
基于HTML+CSS+JavaScript简洁的响应式个人博客网站bootstrap网页(大学生简单个人静态HTML网页设计作品)
VX_WJ88950106的博客
08-18 794
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大......
web前端期末大作业 ：HTML+CSS+JavaScript+Bootstrap实现响应式网站潮酷音乐网站
VX_WJ88950106的博客
01-09 175
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
一周带你入门JavaScript
_纳川
08-09 361
一周带你入门JavaScript 想要成为一个前端开发人员，JS是我们行走江湖吃饭的家伙。基本上一个前端人员开发的程序员有多少价值，就看JS了。虽然各种框架层出不穷，但是归根结底学好原生JS才是硬道理。 学习任何新东西其实都遵循 10000 小时成才定律，只要付出时间，就会有收获。天道酬勤，每个能够创造的价值就是你前期勤奋的积累。关于天赋问题，我们确实要承认某些人在某些领域确实比其他人厉害。但大部...
前端第一周(读书笔记)
power1994的博客
06-07 278
这是我学前端的第一周,这周比较忙,因为要参加一个比赛.以下是我这周学习的笔记: 一.兼容性: 1.IE浏览器只支持超级链接元素的伪类选择符； 2.display:inline能修复IE双倍浮动边界问题； 3.IE6.0不支持position:absolute属性，一般都是由JS完成相应的功能。 二.布局类： 1.内联元素： a.和其他元素都在一行 b.高，行高和底及底边距不变；
前端【学习心得】HTML基础 | 第一周【前端工程师养成计划】DW开发工具
cerace_lee的博客
11-16 690
这是学习开始的第一天，先为自己加个油，继续坚持下去。       第一次接触有关HTML相关的东西，开始还很迷惑，跟着课程首先了解了开发工具 Dreamwear 的基础部分，了解了创建和管理站点的方法，工作区，首选参数的有关简单操作和一些快捷键，里面智能提示特别方便，简单的就不再赘述。深入一点的了解了代码排错的有利操作，以及设计界面里面的深入操作，比如分辨率变更，网页分块区分显示，同时了解到了兼
一周总结：前端开发
qq_24193261的博客
11-04 2012
今天是第五天了，总结下： 1.配置了fis3环境，会了简单的js和css合并，还有知道几个fis重要的命令：1.fis3 release -w  对 release 命令添加 -w 或者 --watch 参数启动文件监听功能 2.fis3 server open 目录
【HTML+CSS】移动端布局之响应式布局+Bootstrap框架
qq_30148319的博客
05-01 1429
学习视频及笔记参考来源： 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一、响应式开发 1、响应式开发原理 原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 响应式尺寸 超小屏幕（手机） < 768px 100% 小屏设备（平板） >= 768px ~ <992px 750px 中等屏幕（桌面显示
【小白学前端】化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）
长安紫薯的专栏
05-10 1560
功能需求 实现地球旋转，本质是一张图片，在网页中图片都是矩形没有直接提供圆形，CSS3提供了圆角样式，非常方便的解决了这个问题。 先准备一个正方形的图片，然后设置其当圆角超过图片半径时，自然就成为一个圆。 CSS3增加了强大的动画功能，可以让图片进行旋转。 界面原型 实现代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋
【小白学前端】化腐朽为神奇-HTML+CSS3实现电影票（day01-3）
长安紫薯的专栏
05-07 1437
界面原型 利用div和table布局实现电影票的布局 小技巧包括：圆角样式、横向合并单元格、纵向合并单元格 代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>太平洋影城</title> <style> td{ border: 1px solid; border-color: darkgoldenrod;
HTML/CSS/JS基础：小白前端开发入门必学
对于完全的初学者而言，通过视频教程、在线课程、互动式学习平台等资源，可以较快地掌握HTML、CSS和JavaScript的基础知识，并将所学应用到简单的项目中。 5. 目标驱动教学方法 目标驱动的教学方法强调以项目或具体...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值