使⽤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小时内删除。
发表评论