前端开发零基础
全栈开发路线
html是基础框架，css是锦上添花
创建文件后打出！生成基础框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello</title><!--网页名--> </head> <body> <h1>Hello, World!</h1> <input type="text"/><!--输入框及输入类型--> <img src="image.jpg" alt="Sample Image"/><!--图片及image.jpg图片路径--> <div class="box"></div><!--块级元素--> <div class="box1"></div><!--块级元素--> <div class="box"></div><!--块级元素--> <style> div{ width: 100px; height: 100px; background-color: lightblue; } .box{ margin-top: 10px; width: 100px; height: 100px; background-color:black; } .box1{ margin-top: 10px; width: 100px; height: 100px; background-color:rgb(5, 53, 247); } </style><!--块级元素样式,有选择器之后，div定义的块无效显示--> </body> </html>网页效果
创建div块的快捷方式
直接div.名称+回车快速创建
想要做出在框内的嵌套效果，需要将新的div框写在原有底层框的双标之内
margin塌陷问题，无法改变标题位置，块内改变的上边距仍然改变的是外边距
给外边框使用pandding相对位置
.todo{ width: 98%; height: 500px; padding-top: 30px; box-sizing: border-box;这一行使块大小不因为pandding发生变化 background-color: #ffff; border-radius: 5px; margin-top: 40px; margin-left: 1%; } .title{ font-size: 30px; font-weight: 900; text-align: center; }两div横向排列，在外部div加display: flex;
div块与span块的区别，div默认竖排，span默认横排
整体代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="todo"> <div class="title">我的一天</div> <div class="todo-form"> <input class="todo-input" type="text" placeholder="你今天要干嘛"> <div class="todo-button">add todo</div> </div> <div class="item completed"> <div> <input type="checkbox"> <span class="name">吃早饭</span> </div> <div class="del">del</div> </div> <div class="item"> <div> <input type="checkbox"> <span class="name">吃午饭</span> </div> <div class="del">del</div> </div> <div class="item"> <div> <input type="checkbox"> <span class="name">吃晚饭</span> </div> <div class="del">del</div> </div> </div> <!--设置背景渐变色--> <style> .completed{ text-decoration: line-through; opacity: 0.4; } .del{ color: red; } .item{ display: flex; align-items: center; justify-content: space-between; border-radius: 20px; box-sizing: border-box; width: 80%; height: 50px; margin: 8px auto; padding: 16px; border-radius: 20px; box-shadow: rgba(149,157,165,0.2)0px 8px 20px; } .todo-button{ width: 100px; height: 52px; border-radius: 0 20px 20px 0; text-align: center; background: linear-gradient( to right, rgb(113, 66, 113), rgb(56, 56, 197)); color: #ffff; line-height: 52px; user-select: none; cursor: pointer; } .todo-input{ margin-bottom: 20px; padding-left: 15px; border: 1px solid #dfe1e5; outline: none; width: 60%; height: 50px; border-radius: 20px 0 0 20px; } .todo-form{ display: flex; margin-top: 20px; margin-left: 30px; } body { background: linear-gradient( to right, rgb(113, 66, 113), rgb(56, 56, 197)); } .todo{ width: 98%; height: 500px; padding-top: 30px; box-sizing: border-box; background-color: #ffff; border-radius: 5px; margin-top: 40px; margin-left: 1%; } .title{ font-size: 30px; font-weight: 900; text-align: center; } </style> </body> </html>