使⽤HBuilder制作⼀个简单的HTML5⽹页
使⽤制作⼀个简单的HTML5⽹页
写在前⾯：开始⼊门⽹页制作，写下第⼀篇博⽂作为记录。纯纯⼩⽩⼀个，如有阅览者，欢迎批评指正！❤先放上效果图：
使⽤HBuilderX编辑器创建⼀个“基本HTML项⽬”：html个人网页完整代码div+css
双击index.html打开页⾯，项⽬中已经默认⽣成了HTML5所需要的结构，代码如下：
解读：第1⾏代码是⼀个声明，告诉 Web 浏览器当前页⾯应该使⽤哪个HTM版本进⾏解析。< html >标签是整个页 的最外层围墙，⽤来“包裏”页⾯的所有内容。< head >标签相当于我⾯的⾝份证，包括了页⾯的所有重要信息，这⼀部分内容不会呈现在页⾯上，浏览者不能直接看到。< body >部分是页⾯的主体部分，包含了所有在浏览器上要呈现的内容信息，也就是浏览者可以着到的内容。
在＜ body ＞标签内加⼊标题和内容：
标题使⽤＜h1＞标签，
内容使⽤＜ p ＞标签，
按钮使⽤< div >标签。这⾥，由于< body > 标签⾥的元素是散乱的，所以需要< div >标签充当⼀个“透明的盒⼦”，将元素收纳在盒⼦内部。可以使⽤class 属性给< div >标签增加类名以作区分。接下来主要是在页⾯中使⽤CSS进⾏界⾯的设计与美化，这⾥需要在< head >标签中新建⼀个< style > 标签，页⾯中的标签都放在< style >标签内部。
（具体见⽂末完整代码）
⼀些CSS设计的“出彩点”：
页⾯动态效果：当⿏标移动到按钮上时，让按钮的形态发⽣变化。及在按钮选择器后⾯加上:hover ，表⽰⿏标移动到按钮上的状态。<!DOCTYPE html ><html > <head >  <meta charset ="utf-8">  <title ></title > </head > <body > </body ></html >
1
2
3
4
windows云服务器5
vue全家桶有哪些6
7
8
9
10<body >  <div class ="container ">  <h1>Let's start our first page!</h1>  <p >欢迎⼤家来到LinWit 的制作的⽹页，  ⼀起开启精彩的世界吧！  </p >  <div class ="btn " id ="start ">start </div >  </div > </body >dockers是什么牌子
1
2
3
4
5
6
7
8
9.btn:hover{  background-color: royalblue;  width: 300px;  height: 100px;  line-height: 100px;  font-siz
e: 36px;  margin: 100px auto;  }
1优秀网页设计公司
2
3
text函数数值转换文本
4
5
6
7
8
当⿏标放上按钮时，变化效果如下：
在⼿机上查看页⾯样式调整：在HTML⽂档的< meta >中设置移动端的viewport显⽰窗⼝。(注：在电脑上可运⾏在浏览器上时进⼊开发者模式，亦可查看在⼿机上的界⾯样式）
1
<meta name="viewport"content="width=device-width,initial-scale=1 .0 user-scale"/>
在⼿机（不同屏幕⼤⼩的设备）上查看页⾯样式如下（⼀些布局都进⾏了相应的变化）：
最后附上⼀个简单的⽹页界⾯的代码：
完事！ <!DOCTYPE html ><html lang ="en "> <head >  <meta name ="viewport " content ="width=device-width,initial-scale=1 .0 user-scale "/>  <meta charset ="utf-8" />  <title >Document </title >  <style >  html,body {  height :100%;  margin :0;  padding :0;  }  body {  background : red url (img/index.jpg ) center center ;  background-size : cover ;  position : relative ;/* 相对位置 */  }  .container {  position : absolute ;/* 绝对位置 */  top : 50%;  text-align : center ;  width : 100%;  transform : translateY (-50%);/* 将div 元素上移⾄⾃⾝⾼度的50% */  }  h1{  line-height : 90px ;  color : royalblue ;  font-size : 50px ;  }  p {  line-height : 80px ;  color : royalblue ;  font-size : 22px ;  }  .btn {  width : 200px ;  height : 60px ;  background-color : #7cacae ;  color : #fff ;  font-size : 24px ;  line-height : 60px ;  margin : 30px auto ;/* 设置其上下边距：30px 左右边距：⾃动 */  border-radius : 10px ;/* 给按钮增加圆⾓样式 */  transition : 1s ;  }  .btn:hover {  background-color : royalblue ;  width : 300px ;  height : 100px ;  line-height : 100px ;  font-size : 36px ;  margin : 100px auto ;  }  </style > </head > <body >  <div class ="container ">  <h1>Let's start our first page!</h1>  <p >欢迎⼤家来到LinWit 的制作的⽹页，  ⼀起开启精彩的世界吧！  </p >  <div class ="btn " id ="start ">start </div >  </div > </body ></html >12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。