【HTML+CSS】七小时快速入门~~~~~~~

前言:七小时什么的随便写的,但是在学习前端上面开始入门的时候没必要在html和css话费过长的时间,对于懒癌发作的人来说,容易陷入舒适期,然后不愿意往下走了。学习html和css的书籍很多,按照知乎等大神的排名将近四、五本,不能说没用处,相反很有用,但是没必要在开始入门学习的时候就一直看。现在学习网站很多,在入门方面大同小异没有必要在一个地方一直看。

推荐入门网站

W3CHTML系列教程  大概步骤就是学习->测试->测验->实战

它推荐了NotePad或TextEdit来进行编写,个人而言推荐phpstorm。不要在这上面纠结,先随便下载一个开始写。

在通过上述网站学习时,一边看一边把他们打一遍。

然后进行测试。

这些做完一遍以后就可以进行实战的演练了。

在最开始学习的时候模仿是非常重要的一步。

F12键-开发人员调试网页

如果觉得一个网页写的好,可以调用查看源代码。还有其他相关的调试插件。

练习网页:

百度搜索首页,看框架,可以看得它的代码非常多,这是一个简单的页面仿写没必要写那么多东西,那么要哪些,之间把鼠标移到对应位置右键点击,选择审查元素就可以在代码中直接找到相关行。

我另外找了网易游戏页等仿写了一些。

时间: 2024-08-21 21:14:06

【HTML+CSS】七小时快速入门~~~~~~~的相关文章

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_8 css 3种样式引用方法<link><style>

0.行内样式添加CSS <p style="color: red;">这是一个段落</p> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css</title> 6 </head> 7 <body> 8 <p&

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_15 css背景属性

背景属性: background-color 背景颜色 background-image 背景图片 背景重复: background-repeat: repeat/no-repeat/repeat-x/repeat-y 背景位置:background-position: position: x y: ? 像素:100px 100px ? 百分比:10% 20%: (容器宽度-图片宽度)*10% ? left center right, top center bottom; ? -100px,0p

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_20 css样式作业

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css样式作业</title> 6 <style> 7 * { 8 font-family: "微软雅黑" 9 } 10 body { 11 background: url("http://rea

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_3 表格标签&lt;table&gt;

HTML <table> 标签 定义和用法 <table> 标签定义 HTML 表格. 简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成. tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元. 更复杂的 HTML 表格也可能包括 caption.col.colgroup.thead.tfoot 以及 tbody 元素. 1 <!DOCTYPE html> 2 <html lang="en"&

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_2 html列表的用法

0.无序列表 1.有序列表 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <!--这是一个注释--> 9 <!--无序列表--> 10 <ul> 1

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_4 简单表格应用&lt;table&gt;

模仿:华为手机大全_华为智能手机_华为商城.html https://www.vmall.com/list-36 HTML <table> 标签 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <b

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_12 css边框

复合写法: border: 2px solid red; 分开写法: border-color: red; border-bottom-color: blue; border-bottom-style: dotted; border-bottom-width: 5px; border-left-color: yellow; border-left-style: solid; border-left-width: 6px; border-right-color: green; border-rig

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_11 css字体样式

复合写法: font: italic bold 20px "微软雅黑" 分开写法: font-family: "微软雅黑"; font-size: 20px; font-size: 2em; 1em=16px font-style: italic; font-style: normal; font-weight: bold; font-weight: normal; 原文地址:https://www.cnblogs.com/denggelin/p/8994214.h

1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_13 css列表&amp;文本样式

HTML <ul> 标签 定义和用法 <ul> 标签定义无序列 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表</title> 6 <style> 7 li { 8 list-style-type: none; 9 text-decoratio