简单的页面布局

三丶月 2019-03-25 07:59:21

作为一个懒癌晚期患者，总是习惯找各种简单的解决问题的方法，也习惯性把问题简单化，所以今天想分享给大家简单的web前端入门方法。 1.什么是前端简单来说，前端就是做网页（大神勿喷，本文一切从简） 2.前端技术 html，是首字母缩写，具体意义请百度，大家要记住“t”代表text，ok你们没有想错，text就是文本文件text，好了准备工作做好了，现在开始做网页 3.我们的第一个网页请身边有电脑的小伙伴和我一起开始，在桌面鼠标右击，创建一个txt文件，命名为index把后缀修改为html，可能会跳出一个弹出框点击确定～点击这个文件大部分人应该会在浏览器打开吧，如果是那就对了，然后这个页面可以不关掉接着走下一步 4.添加内容右键点击刚才建立的文件，我们可以直接用记事本打开，ok现在在文档里面输入hello world~刷新刚才用浏览器打开的那个页面~不出意外hello world应该在了 5.页面结构在文档中输入以下代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body></html> 6.代码说明 <!DOCTYPE html> 这行代码位于文档的第一行，用于声明文档类型 1、对于 <!DOCTYPE>在 HTML 4.01 中有三种声明，在HTML5中只有以上一种声明 2、<!DOCTYPE>声明不是HTML标签 <html lang="en"> ...</html> html标签内包裹页面文档的整个内容 1、告诉浏览器这个网页是英文网站 2、 lang="zh"表示该网站是中文网站 3、 lang="en"可以省略 <head> ....</head> head标签内可以放入描述文档的各种属性和信息的标签例如<meta>、<title>、<script>、<link>、<style> <meta charset="UTF-8"> meta元素提供页面的信息 1、meta里面放入charset="UTF-8"说明页面编码格式是UTF-8 2、meta里面放入name="keywords" content="html, css, JavaScript是描述文档的关键字 <title>Document</title> 定义文档的标题，这个你可以根据你的需求命名 <body> ....</body> body标签放入文档的所有内容比如插入一张图片，写一段说明，放个视频什么的都是放在body中 7、实战页面 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>百度一下，你就知道</title> <style> .header{ text-align:right; width:100%; } .header a{ color:#333; margin-left:20px; font-size:13px; font-weight:bold; } .logo{ text-align:center; } .logo img{ width:270px; height:129px; } .search{ text-align:center; } .search input{ width:539px; height:34px; border:1px solid #b6b6b6; } .search button{ width100px; height38px; background:#3385ff; border:1px solid#3385ff; color:#fff; cursor:pointer;} </style></head><body> <div class="header"> <a href="#">糯米</a> <a href="#">新闻</a> <a href="#">hao123</a> <a href="#">地图</a> <a href="#">视频</a> </div> <div class="content"> <div class="logo"> <img src="bd_logo1.png" alt=""> </div> <div class="search"> <input><button type="">百度一下</button> </div> </div></body></html> 这段代码我简单的写了一下百度的首页（虽然和真正的百度首页差的非常多），主要是为了说明如何添加页面内容，其中style标签内添加了一部分样式文件，具体含义留在后面继续为大家讲解。觉得我说的还行的，点下赞，谢谢！

...全文