三天速成前端

最新推荐文章于 2024-09-16 21:01:41 发布

冰糖冰

最新推荐文章于 2024-09-16 21:01:41 发布

阅读量1.5k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42175197/article/details/93462079

这篇博客详细介绍了如何在三天内快速入门前端开发。第一天的内容包括使用vscode，安装Live Server，创建HTML文件，学习基本的HTML标签，理解CSS的使用，如样式表的引入、选择器、属性和值，以及初步接触布局、跳转、文件管理和响应式设计等关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一天

1、下载vscode
2、安装插件Live Server
3、新建文件
4、记住12个标签

html、title、body、head、p、em、s、br、botton、h1—h6 、ul、oi、li

5、引入CSS标签style，selector、property、value

color
background
font-family
boder:none\
   		圆角： border:2px solid;
               		border-radius:25px;

5、分块

div
nov section footer v

6、间距

margin&padding
1\2\4\

7、分块布局

display: inline

display:inlint-block
width:
height:

//父级
display：flex
flex-dirction:rou\column
margin:auto     


<style>
            body{
                background: black;
                color:aliceblue;
            }
            ul{
                margin:  0;
                padding: 0;
                list-style-type: none;
            }
            li{
                display: inline-block;
                margin: 0 20px 0 0;
                //margin-right: 20px;
            }
        </style>
<header><nav><ul>
            <li>home</li>
            <li>location</li>
            <li>connect</li>
        </ul></nav></header>

8、跳转

	<a href = "home.index"> welcome </a>

9、文件分类

..\
page\

10、封装外部样式表

New File
styke.css
<link>

11、类

<section class="feature-box sales" > 
.feature-box{}
.feature-box.sales{}

12、ID

<div id="frank">

13、伪类

li:fist-child{
  	margin-left = 0;
}

14、触发事件

//移入
li:hover{
	text-decoration : underline;
	}

15、图片背景

header.logo a{
	background-image : url("xxxxxx");
	background-size: 80px;
	background-repaeat: no-repeat;
	display: inline-block;
	height: 80px;
	text-indent : -999999px;
	width: 80px;

	position: relative;
	top: -40px;
	}

header{
	text-align: center;
	}

16、图片内容

<img sre="xxx" alt="xxxx">

<figure>
		<img sre="xxx" alt="xxxx">
		<figcaption>this is a describtion<\figcaption>
<\figure>

.feature.figure img{
	border reguius: 50%;
	width : 200px;
}

text-transform: uppercase;

17、响应式设计

//PC先大后小，移动端先小后大 
@media screen and (max-width: 800px){
		.features{
				background: red;
		}
}